首页 > 代码库 > 关于JQuery的技巧、易错点（连载中.....）
关于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代码混杂，产生错误。
当然，这样使用虽然在有些场合十分便捷，还是不建议新手使用，没有分的很清晰的，最好别大量使用
以上，是博主曾经遇到过的一些比较典型的问题，以后还会不断完善，也希望广大朋友们能来共同探讨，相互学习。
关于JQuery的技巧、易错点（连载中.....）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。