JQuery(工具属性&&css属性及方法）

 工具属性

 

	// $("标签")  创建标签  （/\）
	console.log($("<a href = '#'>百度以下</a>"))
    append 内部追加  替代了js中的appendChild方法
				 $("#oDiv").append($("<a href = '#'>百度以下</a>"));

				html 替代了js中的innerHTML属性  可设置可获取
				$("#oDiv").html($("<a href = '#'>百度以下</a>"))

				 $(js对象)  作用：转换作用  
				 将一个原生态的jsdom对象转换成jQuery的dom对象
				 获取oDiv设置内容
				 console.log(document.getElementById('oDiv').html());
			     console.log($(document.getElementById('oDiv')).html());

				 jQuery----->原生态js
				 注意：通过选择器获取的jQuery对象都是以伪数组的形式存储的
				 1.可以通过下标转换成js对象
				 var $oDiv = $("#oDiv");
				 console.log($oDiv[0].innerHTML)
				 console.log($oDiv.innerHTML);
				 2.可以通过get方法+下标获取
				 console.log($oDiv.get(0).innerHTML);

工具中的类方法

             // 1.$工具中的类方法（静态方法）
				// （1）each()  遍历数组  对象  对象数组

				// a.数组的定义
				 aa. var arr = []
				 bb. var arr = new Array();

				// 定义一个数组存储5个姓名
				 var names = ["张三","里斯","王五","蛮子","小六子"];
				 $.each(names,function(index,name){
				 console.log(index,name);//获取每一个元素
				 console.log(name);
				console.log(names[index]);
				});

				// 对象{}
				 var student = {
				 	"name":"张三",
				 	"sex":"男",
					"age":18
				 }
				 $.each(student,function(name,value){
					console.log(name,value);
				});

				 var students = [
				 	{
				 		"name":"张三",
				 		"sex":"男",
				 		"age":18
				 	},
				 	{
				 		"name":"张三2",
				 		"sex":"女",
				 		"age":19
				 	}
				 ]
				 $.each(students,function(index,stu){
				 	 console.log(index,stu);
					$.each(stu,function(name,value){
						console.log(name,value);
				 	});
				 });
				 （2）trim()   去掉字符串两端的空格
				 var str = "   a  sd  ";
				 console.log(str.length)
				console.log($.trim(str).length)

				// 遍历  非空格拼接  charAt()

				// （3）type()   判断值类型

				console.log($.type("东方不败"));
				 console.log($.type(jQuery));
				// （4）isArray()  判断是否是一个数组
				 console.log($.isArray(names));
				// （5）isFunction()  判断是否是一个函数
				 console.log($.isFunction(add))
				// （6）parseJSON()  将满足json定义的字符串转换成一个对象或者对象数组
				//AJAX--无刷新技术
				 var stu = "[\"aa\",\"bb\",\"cc\"]";
				 var stu = '["aa","bb","cc"]';
				console.log($.type(stu))
				// // 通过parseJSON转换
				var stuArr = $.parseJSON(stu)
				 console.log($.type(stuArr));

				 var stus = '[{"name":"zkingzz"},{"name":"zkingcc"}]';
				console.log($.type(stus))
				console.log($.type($.parseJSON(stus)));
			});

jQuery中属性和CSS操作

<h3>jQuery中属性和CSS操作</h3>
		<ul id="oUl1">
			<li id="one">1.attr:设置或者获取标签的属性</li>
			<li class="demo1">2.removeAttr:移除属性（属性和值都会移除）</li>
			<li>3.addClass:添加样式 会叠加</li>
			<li>4.removeClass移除指定的样式</li>
			<li>5.html():获取或者设置标签的内容 包含子标签</li>
			<li>6.text(): <span id="sid">获取或者设置标签的内容 不包含子标签</span></li>
			<li>7.val() 获取或者设置表单元素中的value值</li>
			<li>8.prop() 与attr类似，但是prop专门针对表格中的有boolean类型的标签</li>
			<input id="inputs" type="text" value="helloworld" />
			<input type="checkbox" value="123" checked="checked" />
		</ul>
		<script type="text/javascript">
			// 原生态js中：  getAttribute()  setAttribute()  removeAttribute()
			// 1.attr
			// 获取第一个li的id属性值
			 console.log($("#oUl1>li:first").attr("id"));
			// 另类操作
			 console.log($("#oUl1>li").first().attr("id"));
			 console.log($("#oUl1").children().first().attr("id"));
			// 设置属性
			 $("#oUl1>li:first").attr("id","sb");
			// 移除属性
			 $("#oUl1>li:first").removeAttr("id");
			// addClass
			 $("#oUl1>li:eq(1)").addClass("demo2");
			 $("#oUl1>li").eq(1).addClass("demo2");
			// removeClass  移除demo1的样式
			 $("#oUl1>li:eq(1)").removeClass("demo1")
			 $("#oUl1>li:eq(1)").removeAttr("class")

			 console.log($("#sid").parent().html());
			 console.log($("#sid").parent().text());
			 console.log($("#sid").parent().val());

			 console.log($("#inputs").html())
			 console.log($("#inputs").text())
			 console.log($("#inputs").val())
			// prop
			 console.log($("#oUl1>li:first").prop("id"));
			 console.log($("input:last").prop("checked"));
		</script>

案例：

表格换颜色

<script>
			// 表格隔行换颜色
			 $("table>tbody>tr:gt(0):even").addClass("even")
			 $("table>tbody>tr:gt(0):odd").addClass("odd")
		
			$("table>tbody>tr:gt(0)").mouseover(function(){
				$("table>tbody>tr:gt(0)").removeClass("odd");
				$(this).addClass("odd");
			});
			$("table>tbody>tr:gt(0)").mouseout(function(){
				$("table>tbody>tr:gt(0)").removeClass("odd");
			});

		</script>
		

全选案例：

<button>全选</button>
		<button>取消全选</button>
		<input type = "checkbox" value = "aaa">aaa
		<input type = "checkbox" value = "bbb">bbb
		<input type = "checkbox" value = "ccc">ccc
		<input type = "checkbox" value = "ddd">ddd
		<input type = "checkbox" value = "eee">eee
		<script>
			$("button:first").click(function(){
				//获取所有的复选框
				$("input:checkbox:gt(0)").each(function(){
					// console.log($(this).val());
					$(this).prop("checked",true);
				});
			});
		
			$("button:last").click(function(){
				//获取所有的复选框
				$("input:checkbox:gt(0)").each(function(){
					// console.log($(this).val());
					$(this).prop("checked",false);
				});
			});
		</script>

位置

<script>
			// offset()  获取指定标签相对整个大容器（body）的一个相对距离（top  left）
			console.log($("#demo3").offset().left);
			console.log($("#demo3").offset().top);
			
			// position()  获取指定标签相对于父标签的位置
			console.log($("#demo3>div").position().top);
			console.log($("#demo3>div").position().left);
			
			// scroll  获取滚动条被滚去的距离
			
			$(document).scroll(function(){
				console.log($(this).scrollTop());
			});
			
			
		</script>