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代码混杂,产生错误。
当然,这样使用虽然在有些场合十分便捷,还是不建议新手使用,没有分的很清晰的,最好别大量使用
以上,是博主曾经遇到过的一些比较典型的问题,以后还会不断完善,也希望广大朋友们能来共同探讨,相互学习。