jQuery 属性，css，文档操作

dom对象与jQuery对象的区别

  		$(function() {
  			// dom 与 jQuery对象间的转换
  			var $txt = $(":input");
  			
  			// jQuery -> js
			// 取下标第0位
  			var txt = $txt[0];
  			txt = $txt.get(0);
  			console.log(txt.value);
  			
  			txt = document.getElementById("in1");
  			// js -> jQuery
  			$txt = $(txt);
  			// val() 用来取表单的值
  			console.log($txt.val());
  			
  		});

设置css样式

	
	<style type="text/css">
		.div1 {
			font-size: 80px;
		}
		
		.color {
			color: pink;
		}
	</style>
	
	<script src="js/jquery-3.2.1.js"></script>
  	<script>
  	
		$(function() {
			// 同时设置多个样式
			$("div").css({"background":"yellow", "border":"solid 1px red"});
			// 取到border样式
			alert($("div").css("border"));
			
			// 属性设置 -- 双向方法 (可取值, 可设值)
			$("div").prop("id", "1");
			alert($("div").prop("id"));
			
			// 设置高度
			$("div").height(180);
			alert($("div").height());
			
			// 添加外部样式
			$("div").addClass("div1");
			// 移除外部样式
			$("div").removeClass("div1");
			
			// 有这个样式就添加 没有则移除
			$("#btn").click(function() {
				$("div").toggleClass("div1 color");
			});
			
  	</script>

属性操作

			// 对于存在的属性 取到正确的值  如果在div上没写title 是 空值 undefined
			alert($("div").prop("title") + "----" + $("div").attr("title"));
			// 标签自定义的属性 count在div中定义了 如果没定义 都是undefined
			alert($("div").prop("count") + "----" + $("div").attr("count")); // undefined ---- 123
		
			
			// 获取元素内部的html内容
			// html/text/val
			// 在div1中添加一个input框 会覆盖div1中的所有内容
			$("#div1").html("<input/>");
			alert($("#div1").html());
			// 获取表单内的纯文本
			$("#div1").text(123);
			alert($("#div1").text());
			// 获取表单的值 val()
			alert($("#in1").val());
			// 为表单赋值
			$("#in1").val("789");

文档操作

			// 文档操作 内部插入 针对下拉框demo
			// 添加下拉框的尾部
			$("select").append("<option value=0>兰州</option>");
			// $(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
			$("<option value=1>常德</option>").appendTo("select");
			// prepend操作 插入到select的签名
			$("select").prepend("<option value=2>东莞</option>");
			// 与prepend相反
			$("<option value=3>新疆</option>").prependTo("select");
			
			// 文档外部操作 下拉框（外）后面添加了input表单
			/$("select").after("<input />");
			
			// 包裹
			
			// 移除内容
			// $("select option:not(:eq(2))").remove();
			// $("select option:eq(0)").remove();
			$("select").empty();
		});