这几天研究了一下jQuery,来聊聊
| jQuery是什么以及我们为什么要用 |
jQuery(即JavaScript Query)是一个JavaScript函数库
但是既然有JavaScript了,我们为什么还要用jQuery呢?原因大概有以下几个方面:
- 压缩包大小不到30kb
- 不仅支持CSS里所有选择器,还有自己独有的选择器
- jQuery封装了大量常用的DOM操作,使用起来很方便
- jQuery能够兼容当前主流浏览器,除此之外还修复了一些浏览器之间的差异
- 作为程序员,最喜欢的事情是什么?不是收费,而是开源.jQuery就是开源的,任何人都可以自由使用,并提出自己的意见
| jQuery如何使用 |
1,隐藏与显示:
隐藏:$(selector).hide(speed,callback);
显示:$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
但是有时候,对于一个内容,可能需要切换hide()和show()方法,怎么办呢?写if判断可以,但是jQuery提供了一个更简单的方法:
$(selector).toggle(speed,callback);
参数speed和callback是可选参数
只需要这样一行代码,便可实现show和hide方法的切换
2,淡入淡出:
淡入元素:$(selector).fadeIn(speed,callback);
淡出元素:$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
隐藏与显示有一个方法toggle可以实现两者切换,同样淡入淡出也有一个方法,可以实现两者切换
$(selector).fadeToggle(speed,callback);
参数同样是可选
3,滑动
向下滑动元素:$(selector).slideDown(speed,callback);
向上滑动元素:$(selector).slideUp(speed,callback);
向下向上切换:$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
4,动画-animate方法
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
其中animate几乎可以用来操作所有css属性
5,取值赋值操作:
取值:
第一种方式:
$('#元素 option:selected').text(); //选中的文本
$('#元素 option:selected') .val(); //选中的值
第二种方式:
$("#元素").find("option:selected").text(); //选中的文本
$("#元素").find("option:selected").val(); //选中的值
赋值:
第一种:
$("#Type option:["value='0']").val("0");
第二种:
$("#Type").val("0");
6,添加元素:
$("元素").append() 在被选元素的结尾插入内容
$("元素").prepend() 在被选元素的开头插入内容
$("元素").after() 在被选元素之后插入内容
$("元素").before() 在被选元素之前插入内容
7,删除元素:
$("元素").remove() 删除被选元素（及其子元素）
$("元素").empty() 从被选元素中删除子元素
其中,remove() 方法也可接受一个参数，允许对被删元素进行过滤
比如,删掉 class="a" 的所有 <p> 元素：
$("p").remove(".a");
8,遍历:
遍历祖先:
$("元素").parent() //返回被选元素的直接父元素
$("元素").parents() //返回被选元素的所有祖先元素
$("元素").parentsUntil() //返回介于两个给定元素之间的所有祖先元素
比如,返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$("span").parentsUntil("div");
9,过滤:
$("元素").first() //返回被选元素的首个元素
$("元素").last() //返回被选元素的最后一个元素
$("元素").eq() //返回被选元素中带有指定索引号的元素
$("元素").filter() //匹配的元素会被返回,不匹配的元素将会从集合中删除
比如:带有类名 "url" 的所有 <p> 元素：$("p").filter(".url");
$("元素").not() //返回不匹配标准的所有元素
比如:返回不带有类名 "url" 的所有 <p> 元素：$("p").not(".url");
| 最后来张导图 |
总觉得一张图,比上面的文字来的更加直接准确一些,所以最后上一张我梳理的导图(个人观点,如有偏颇之处,还望指出):
想说的大概就这么多了,感谢您的阅读~