jQuery1
jQuery的优缺点与版本，和引入方法：
* jQuery
* 用原生js封装的插件库
*
* 优点：
* 1.开发效率大大的提高。
* 2.获取节点变得非常的便捷
* 3.某些版本把IE678的兼容都做好了
* 4.做动画的时候，有很多API提供给用户
*
* 缺点：
* 1.只使用少部分功能的时候，也必须把整个库引入进来，
* 2.速度慢，没有原生的快。
*
* 版本：
* 1.x.x 兼容IE678
* 2.x.x 采用了大部分的css3的新属性，放弃了IE678的兼容
* 3.x.x 实在2的基础上，来完善或者优化性能。3是2的升级版，也就是说如果不考虑兼容IE678的问题，那么就采用最新版
1 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 2 <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
基本用法：
$():括号内有三种内容，而后可通过点进行属性和方法的操作
string 选择器 / 标签结构（创建你写的结构的标签）
object DOM节点
function DOM结构加载完成后执行的回调函数 这个函数可以接受一个形参，这个形参代表了 $ 在这个函数内部的表现形式
1 var box = document.querySelectorAll("#box p"); 2 3 $("<div><span>hello</span></div>").appendTo(document.body) 4 5 6 //$(box).appendTo(document.body)
eq（）方法的使用
1 <body> 2 <p></p> 3 <p></p> 4 <p></p> 5 <script> 6 /* 7 * eq() 8 * 接收一个数字（序号），返回一个独立的jq对象 9 * 10 * */ 11 $("p").eq(1).html(123) 12 13 14 15 </script> 16 </body>
js对象和jq对象的相互转换
* jq对象转js对象
* .get（传序号）
* [下标]
*
* js对象转jq对象
* $(DOM节点)
var box = document.getElementById("box"); //$("#box").get(0).innerHTML = 123;jq转换为js //$("#box")[0].innerHTML= "456" //$(box).html(789) js转换为jq
jq的牛逼之处：自带遍历
1 <body> 2 <p>001</p> 3 <p>002</p> 4 <p>003</p><p>001</p> 5 <p>002</p> 6 <p>003</p><p>001</p> 7 <p>002</p> 8 <p>003</p><p>001</p> 9 <p>002</p> 10 <p>003</p> 11 <script> 12 13 $("p").css("color" , "red"); 14 15 16 17 18 </script> 19 </body>
jq的遍历：
each（）接收一个函数
* 这个函数里的this指向当前序号对应的对象, 这个this是一个js对象
* 函数可以设置一个形参，代表当前对象的序号
ps：jq的代码不能跟js的代码混合使用？
* 错，逻辑错误。因为jq就是用原生js封装的。所以jq的代码也是js的代码。
* 如果说需要使用jq来写，那么请尽量使用jq的语法来写，除了非必须情况，请不要混着写。
<body>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<script>
/*
* each（）接收一个函数
* 这个函数里的this指向当前序号对应的对象, 这个this是一个js对象
* 函数可以设置一个形参，代表当前对象的序号
*
* jq的代码不能跟js的代码混合使用？
* 错，逻辑错误。因为jq就是用原生js封装的。所以jq的代码也是js的代码。
* 如果说需要使用jq来写，那么请尽量使用jq的语法来写，除了非必须情况，请不要混着写。
*
* */
$("p").each(function (i) {
//this.innerHTML = i;
$(this).html(i)
});
</script>
</body>
length是属性，index（）是方法返回索引
$的一些API：
1.属性API：
1 <body> 2 <div id="box" class="on wrap"></div> 3 <input type="text" value="123456798"> 4 5 <script> 6 /* 7 * attr 操作自定义标签属性 8 * prop 操作合法的标签属性 9 * 10 * 删除属性 11 * removeAttr 12 * removeProp 13 * 14 * 15 * jq方法的返回值 16 * 要看最后一个方法时什么性质的； 17 * 假如是 获取/读取 性质的。那么一般返回获取到的内容（一般是string类型） 18 * 假如说是 设置 性质的，那么一般会把对用这个方法的对象返回。 19 * 20 * 21 * */ 22 /*var a = $("input").prop("checked"); 23 alert(a)*/ 24 25 //$("#box").attr("goudan","456").removeAttr("id"); 26 27 28 /* 29 * 30 * addClass 添加类名 31 * removeClass 删除类名 32 * toggleClass 如果有就删除，如果没有就添加 33 * 34 * */ 35 36 //$("#box").prop("class" , ""); 37 38 39 /* 40 * html() === innerHTML 41 * text() === innerText 42 * val() === value 43 * 44 * 45 * 46 * */ 49 //$("#box").text(123) 50 alert($("input[type=text]").val()) 51 52 </script> 53 </body>
2.文档出来API：
1 <body> 2 <div class="box"></div> 3 <script> 4 /* 5 * append 6 * appendTo 7 * 8 * 9 * prepend 10 * prependTo 11 * 12 * */ 13 14 //var $div = $("<div></div>"); 15 16 //$div.html(123) 17 //$("#box").append($div.html(123)) 18 //$div.html(123).appendTo($("#box")) 19 //$("#box").prepend($div.html(123)) 20 21 /* 22 * after 添加到谁后面(成为弟弟元素) 23 * before 添加到谁前面(成为哥哥元素) 24 * 25 * 26 * */ 27 28 //$("#box").before($div) 29 30 /* 31 * wrap 给匹配的对象加一个父级 32 * unwrap 把父级元素干掉 33 * wrapAll 34 * wrapInner 35 * 36 * 37 * */ 38 39 40 //$("#box2").wrap("<span></span>"); 41 //var a = $("span").unwrap(); //返回前面的对象 42 43 //console.log(a) 44 45 46 //$("div").wrapAll("<div></div>"); 47 48 //$("div").wrapInner("<span></span>"); 49 50 51 //$("p").wrap("<div></div>") 52 53 /* 54 * replaceWith 55 * replaceAll 56 * 了解一下就行 57 * 58 * 59 * 60 * */ 61 62 //$("p").replaceWith("<div></div>") 63 //$("<span>123</span>").replaceAll($("#p2")) 64 65 66 67 /* 68 * empty 清空子节点 返回调用此方法的对象 69 * remove 删除自己（自杀） 不会保留事件 返回被删除对象（后期可以添加回去） 70 * detach 删除自己（自杀） 会保留事件 返回被删除对象（后期可以添加回去） 71 * clone 克隆对象 返回克隆对象 72 * 73 * 74 * 75 * */ 76 77 //var a = $("#box").empty(); // 78 //console.log(a) 79 80 81 82 83 /*var a = $("#box").remove(); 84 $(document.body).append(a)*/ 85 /*var a= $("#box").detach(); 86 $(document.body).append(a)*/ 87 88 var a = $(".box").clone(); 89 90 $(document.body).append(a); 91 92 $(".box").click(function () { 93 alert($(".box").length) 94 }); 95 96 97 </script> 98 </body>
3.cssAPI：
1 <body style="height:2000px"> 2 <div id="box"> 3 <div id="box2"></div> 4 </div> 5 <script> 6 /* 7 * css() 8 * 9 * */ 10 11 //alert($("#box").css("color")) 12 13 14 /* 15 * offset 到文档 设置的时候会进行计算，实际我们设置的值是到文档的距离 16 * 17 * position 到定位父级 只能获取 不能设置 18 * 19 * 20 * */ 21 22 /*var a = $("#box").offset().top; 23 24 console.log(a)*/ 25 26 /*var a = $("#box2").position().top; 27 console.log(a)*/ 28 29 /*var a = $("#box2").position(); 30 31 console.log(a)*/ 32 33 34 35 /* 36 * scrollTop 37 * scrollLeft 38 * 设置/获取 滚动高度/宽度 39 * 40 * */ 41 42 /*$(document).click(function () { 43 alert($(this).scrollTop()) 44 })*/ 45 /*$(document).click(function () { 46 $(this).scrollTop(1500); 47 }) 48 */ 49 50 51 /* 52 * 53 * height 54 * width 55 * 获取/设置 样式宽高 56 * 57 * innerWidth 58 * innerHeight 59 * 获取/设置 padding+样式宽高 60 * 61 * outerWidth 62 * outerHeight 63 * 获取/设置 border+padding+样式宽高 64 * 65 * 66 * 67 * 68 * */ 69 70 $("#box").outerWidth(500); 71 72 </script> 73 </body>
