jQuery02$工具方法&CSS属性及方法

一.$工具方法

 1.$.each()：遍历数组、对象、对象数组中的数据
2.$.trim()：去除字符串两边的空格
3.$.type(obj)：得到数据的类型
4.$.isArray(obj)：判断是否是数组
5.$.isFunction(obj)：判断是否是函数
6.$.parseJSON(obj)：解析json字符串转换为js对象/数组
代码区域：

// 1.$.each()：遍历数组、对象、对象数组中的数据
				//a.数组的定义
				var name=["aa","bb","cc"];
				$.each(name,function(index,name){
					console.log(index,name);
				});
				//对象{}
								var student = {
									"name":"张三",
									"sex":"男",
									"age":18
								}

				$.each(student,function(name,value){
					console.log(name,value);
				});
				// 2.$.trim()：去除字符串两边的空格
				var str = "   a bc  ";
				console.log(str.length)
				console.log($.trim(str).length)

				// 3.$.type(obj)：得到数据的类型
				 console.log($.type("aa"));
				// 4.$.isArray(obj)：判断是否是数组
				 var names=["aa","bb","cc"];
				// console.log($.isArray(names));
				 5.$.isFunction(obj)：判断是否是函数
				console.log($.isFunction(add))
				 //6.$.parseJSON(obj)：解析json字符串转换为js对象/数组
				var stus = '[{"name":"zkingzz"},{"name":"zkingcc"}]';
				 console.log(($.parseJSON(stus));

二.jQuery属性

查看jQuery官方API文档【工具】
 1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值

代码区域：

//1.attr()：获取某个标签属性的值，或设置某个标签属性的值
							//a.获取某个标签属性的值
							console.log($("ul>li:first").attr("id"));
							//设置属性
							$("#ul1>li:first").attr("id", "u1");
							// 2.removeAttr()：删除某个标签属性
							$("#ul1>li:first").removeAttr("id");
							// 3.addClass()：给某个标签添加class属性值
							$("#ul1>li:eq(2)").addClass("li2");
							// 4.removeClass():删除某个标签class属性值
							$("#ul2>li:eq(2)").removeClass("li2");
							// 5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
							$("input:last").prop("checked"));
							// 6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
							console.log($("#li1").parent().html());

							// 7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)

							console.log($("#li1").parent().text());
							// 8.val()：主要用户获取/设置输入框的值
							console.log($("#b1").parent().val());

购物车全选案例:

//全选按钮
				$("button:first").click(function() {
					//获取所有的复选框
					$("input:checkbox:gt(0)").each(function() {

						$(this).prop("checked", true);
					});
				});
				//取消全选
				$("button:last").click(function() {
					//获取所有的复选框
					$("input:checkbox:gt(0)").each(function() {

						$(this).prop("checked", false);
					});
				});
			});

 三.CSS

        查看jQuery官方API文档【CSS】
        1.css()：设置标签的css样式
            获取样式值：css("样式名")
            设置单个样式：css("样式名","样式值")
            设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
            案例5：使用css属性设置标签的样式
        2.位置
            offset()：相对整个大容器的相对位置
            position()：相对父容器的相对位置
            案例6：大Div中嵌套小Div，求两个div相对位置
            scrollXX
                scrollTop()：滚动条到顶部距离
                案例7：滚动条位置

// offset()  获取指定标签相对整个大容器（body）的一个相对距离（top  left）
			console.log($("#di1").offset().left);
			console.log($("#di1").offset().top);

			// position()  获取指定标签相对于父标签的位置
			console.log($("#di1>div").position().top);
			console.log($("#di1>div").position().left);

			// scroll  获取滚动条被滚去的距离

			$(document).scroll(function() {
				console.log($(this).scrollTop());

        3.尺寸
            内容尺寸
            内部尺寸
            外部尺寸
注意：参数为true，再加上margin
            width():容器宽
            height():容器高
            innerWidth()：width+padding
            innerHeight()：height+padding
            outerWidth():width+padding+border
            outerHeight():height+padding+border