【第一章】 jQuery入门---选择器 and $工具&属性&CSS

jQuery1:入门知识--选择器

3W1H
    What?是什么？
        JavaScript库：封装了很多JS代码
        JavaScript库：jQuery(90%)、Ext JS
        官方地址：http://jquery.com/
    Why?为什么要学习？
        查看官方jQueryLOGO：write less，do more
        为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
    Where?哪些情况下用？
        中大型网站开发
        一些前端框架的基础，比如EasyUI
    How?怎么用？
        工具：HBuilder
        使用jQuery步骤
            1.下载jQuery库
                开发版本：jquery-3.3.1.js
                生产版本：jquery-3.3.1.min.js
            2.引入：将js文件复制到项目中
            3.使用

jQuery选择器
    基本选择器
        常用选择器：
        ID选择器：#ID
        类选择器：.class
        元素选择器:element
        通配符：*
        多个选择器(并集)：selector1，selector2(用逗号隔开)
        多个选择器(交集)：selector1selector2
    层次选择器
        查找所有元素，查询子元素
    过滤选择器
        参考jQuery文档
        获取第一个元素:first
        最后一个元素:last
        获取奇数元素:even
        获取偶数元素:odd
        获取某一范围元素
            :gt大于
            :lt小于
    表单选择器
        参考jQuery文档
        获取选择单选框的值
        获取选择多选框的值
        获取选择下拉值

	//设置样式的语法:元素.css("样式属性","值");
				//ID选择器
				$("#one").css("background","green");
				$("#one").css("color","yellow");
				//设置背景色红,字体为绿
				//$("#one").css({"background":"red","color":"pink"});
				//类选择器
				//$(".two").css("background","yellow");
				//标签选择器
				//$("div").css("background","pink");
				//通配符
				//$("*").css("background","green");
				
				//并集
				//$("p,span").css("background","yellow");
				//交集
				//$("p span").css("color","yellow");
				//$("p>span").css("color","yellow");
				
				//过滤选择器
				var lis =$("li");
				//lis.first().css("color","yellow");//第一个
				lis.even().css("color","red");//奇数
				//lis.odd().css("color","blue");//偶数
				//lis.eq(-5).css("color","gray");//据下标查行
				//$("li:gt(3)").css("color","pink");//大于
				//$("li:lt(2)").css("color","pink");//小于
				//第二行到第四行   2<x<4
				//$("li:gt(0):lt(3)").css("color","pink");
				//$("li:lt(4):gt(0)").css("color","pink");

jQuery2：$工具&属性&CSS

$指的是：JavaScript

$工具方法:
    查看jQuery官方API文档【工具】
    1.$.each()：遍历数组、对象、对象数组中的数据
    2.$.trim()：去除字符串两边的空格
    3.$.type(obj)：得到数据的类型
    4.$.isArray(obj)：判断是否是数组
    5.$.isFunction(obj)：判断是否是函数
    6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

$(function() {
				//console.info("春花秋月何时了");//控制台显示（Fn+F12）
				//定义数组
				var names = ["魏无羡", "蓝湛", "江澄"];
				//遍历数组
				$.each(names, function(i, names) {
					console.info(i, names);
				})
				console.info("-----------------------");
				//定义对象  中括号定义数组, 大括号定义对象
				var stu = {"name": "魏婴","age": 300,"sex": "男"};

				$.each(stu, function(k, v) {
					console.info(k, v);
				})

				//定义对象集合
				var stu = [
                    {"name": "魏婴","age": 300,"sex": "男"},
					{"name": "蓝湛","age": 300,"sex": "男"},
					{"name": "温宁","age": 300,"sex": "男"}
				];
				//遍历对象集合
				$.each(stu, function(i, stu) {
					//console.info(stu);
					//1、遍历集合中的 每一个对象
					$.each(stu, function(k, v) {
						console.info(k, v);
					})
				})
				//2、直接对象点属性
				//console.info(stu.name,stu.age,stu.sex);
			})

			//$.trim() 去除两边的空格
			var str = "  hope  sum    ";
			//console.info($.trim(str));
			//console.info("长度："+str.length);
			//console.info("去空格之后的长度:"+$.trim(str).length);

			//type 判断数据类型
			var str = "china";
			var age = 18;
			//console.info($.type(str));

			//$.isarray(); 判断是否是数组
			//var x = "ssdlh";
			//console.info($.isArray(x));
			//var y = ["玫瑰","荷花","向日葵"];
			//console.info($.isArray(y));

			//$.isFunction();  判断是否是函数
			//console.info($.isFunction(sleep));
			//console.info($.isFunction(str));

			//$.parseJSON(json); 把JSON字符串转换为对象
			// var jsonStr = '{"name":"魏婴","age":300,"sex":"男"}';
			// var stu = $.parseJSON(jsonStr);
			// $.each(stu,function(k,v){
			// 	console.info(k,v);
			// })

			//把JSON数组字符串转换为对象数组
			// var jsonStu ='[{"name":"魏婴","age":300,"sex":"男"},{"name":"蓝湛","age":300,"sex":"男"}, {"name":"温宁","age":300,"sex":"男"}]';
			// var stu = $.parseJSON(jsonStu);
			// $.each(stu, function(i, stu) {
			// 	console.info(stu.name, stu.age, stu.sex);
			// })

jQuery属性和CSS
    属性
        查看jQuery官方API文档【属性】
        1.attr()：获取某个标签属性的值，或设置某个标签属性的值
        2.removeAttr()：删除某个标签属性
        3.addClass()：给某个标签添加class属性值
        4.removeClass():删除某个标签class属性值
        5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
        6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
        7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
        8.val()：主要用户获取/设置输入框的值
  
    CSS
        查看jQuery官方API文档【CSS】
        1.css()：设置标签的css样式
            获取样式值：css("样式名")
            设置单个样式：css("样式名","样式值")
            设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
          
        2.位置
            offset()：相对整个大容器的相对位置
            position()：相对父容器的相对位置
            案例6：大Div中嵌套小Div，求两个div相对位置
            scrollXX
                scrollTop()：滚动条到顶部距离
          
        3.尺寸
            width():容器宽
            height():容器高
            innerWidth()：width+padding
            innerHeight()：height+padding
            outerWidth():width+padding+border
            outerHeight():height+padding+border