关于JQuery的技巧、易错点（连载中.....）

　　JQuery的诞生让我们对原生态的js代码变得陌生起来，不得不说，他真的是很强大，接下来博主就浅谈一下我对JQuery的一些认知和小tips。

JQuery：他是一个JavaScript库，他将原生态的js代码封装成若干功能强大，使用便捷的方法，对于我们工程师来说，只需要知道基本的js语法，

然后会调用JQuery方法就行了。接下来我们就聊一下JQuery中那些容易理解错的属性、方法

　　

 

　　1.首先，是选择器

　　$("div,span,p.myClass"); 这是取出 所有div span 和 class名叫 myClass 的p标签 ， 这里经常会有朋友在书写/检查代码时，

习惯性的认为自己选中的是div中的span、p标签。而忽略了div外部的，这种多条件的选择器，容易记错。了解的语言太多，难免会混。

 

　 $("tr:eq(1)")；只要是带索引值的东西，都可以选中，这个就是直接按索引值选择，选中索引值为1的元素。eq的索引是从0开始计算的。

$("ul li:nth-child(2)") 这是选中每个ul的第二个li，注意他从1算，而eq从0算。而且nth-child 是选中所有ul中的第二个子元素

$("div:nth-of-type(2)"); nth-of-type 他是选中 父容器div中，同一类标签名（这里是至少有2个）；而且在div中位置最靠前的；

　　　　第二个子元素。他的限制条件很多，经常有同志选中的元素并不是最靠前的，从而为达到预期而出错。

 

 

2.其次，是事件

 

　　文档就绪函数ready（）：

　　　　$(document).ready(function(){ // 在这里写你的代码... }); 作用是，处理完完HTML代码后再加在js代码

　　　　避免出现js代码无法取到HTML代码的情况　

　　　　$(function(){}); 这是文档就绪函数的简写形式，通过匿名函数的写法

　　他与window.onload（）方法的区别：

　　　　(1)window.onload需要在网页所有内容都加载完成后才能执行，包括那些视频之类的；而

　　文档就绪函数只要dom结构加载完成就可以执行

　　　　(2)window.onload如果写了好几个，只会执行最后一个，但是文档就绪函数不会，他每个

　　都会执行

 

　　

　　事件绑定函数on（）：　　　

　　　　on(events,[selector],[data],fn)给元素绑定一个或多个事件的事件处理函数，on的使用十分灵活，当然也容易出错

　　　　　　

　　　　$("button").on("click", function(){

　　　　　　console.log($(this).html());

　　　　})

　　　　这是最基本的事件绑定方式，只使用了event和function两个参数

 

 

　　　　$("button").on("mouseover click",function(){

　　　　　　console.log($(this).html());

　　　　})

　　　　mouseover和click事件都可以触发回调函数，实现多个事件绑定一个函数

 

 

　　　　$("button").on("click",{name:"我"},function(event){

　　　　　　console.log(event.data.name);

　　　　})

　　　　　　这是调用函数时，传入参数。注意：event是一个默认的形参，不写是默认有的，如果我们自身定义形参，

　　　　那必须写上event，因为传参时默认先给event。所以，这里，经常会有朋友不注意，然后导致传参混乱出错。

　　　　　　注意这里打印出来的内容，clientX:72 clientY:20 这是取得了鼠标的坐标；which:1 是鼠标左键点击的

　　　　这些属性还是很常用的，初学者可以常识多运用练习一番

　

 

　　　　$("button").on({

　　　　　　click:function(){

　　　　　　console.log("click");

　　　　},

　　　　mouseover:function(){

　　　　　　　　console.log("mouseover");

　　　　　　}

　　　　})

　　　　同时实现同一个元素，多个事件，分别绑定自己的事件函数

 

 

　　　　$("body").on("click","button",function(){

　　　　　　alert("1");

})

　　这是事件委派，是将原本要绑定到某元素上的事件，绑定到父容器乃至根节点上，然后再委托到想绑定事

件的子节点上就是比如阿贾克斯里面，如果页面新增加了一些标签，他们想带上咱原来设置的一些事件,那

就用这个。意思是 选中父容器，再选中父容器中的子元素，就会使在这个父容器中新增的所有子元素也会

带上这个 绑定的事件。因为那些新增的元素，默认是无法绑定以前的事件的

 

 

3.原生dom与jQuery对象之间的相互转换

　　　（1）原生dom转jQuery对象

　　　　　　　console.log($("p").hide(2000));

　　　　　　这是通过$(“选择器”),通过这种方式将HTML代码转换掉

　　　（2）jQuery转原生dom对象

　　　　　　 $("p")[1].style.color="red";

　　　　　因为jQuery是把原生的js代码以对象的形式存到自己的数组中。所以，直接在 $("p")[1]

　　　　 以这个数组的形式，直接确定要修改哪一个HTML标签就可以了

　　　　　 　$("p").get(0).style.color="blue";

　　　　　 　或者也可以用上述的方法直接改，直接用get（）这个方法去取对象中的元素

 

　　　　例：$("p").css({"color":"yellow","background-color":"blue","font-size":"55px"});

　　　　此例是用js的方式修改所有p标签的样式，前面是通过jQuery选中了所有的p标签。

　　　　这里得格外注意，经常会有朋友将二者混在一起，js与jQuery代码混杂，产生错误。

　　　　当然，这样使用虽然在有些场合十分便捷，还是不建议新手使用，没有分的很清晰的，最好别大量使用

 

以上，是博主曾经遇到过的一些比较典型的问题，以后还会不断完善，也希望广大朋友们能来共同探讨，相互学习。