jQuery是一个JavaScript库,它通过封闭原生JavaScript函数得到一整套定义好的方法。它的作者是John Resig,于2006年创建的一个开源项目,随着越来越多开发者的加入,jQuery已经集成了JavaScript、CSS、DOM、和Ajax于一体的强大功能,它可以用最少的代码,完成更多复杂而困难的功能,从而得到了开发者的青睐。
主指:以更少的代码、实现更多的功能。
jQuery是一个基于自身封装的jQuery对象的所有方法集,全部使用函数才可以使用return,所以为了可以连缀,就将所有的内容都设置为方法函数,而不是用属性设值。
主要功能有以下几点:
1.像CSS那样访问和操作DOM
2.修改CSS控制页面外观
3.简化JavaScript代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让Ajax技术更加完美
7.基于jQuery大量插件
8.自行扩展功能插件
jQuery最大的优势,就是特别的方便。比如模仿CSS获取DOM,比原生的JavaScript要方便太多。并且在多个CSS设置上的集中处理非常舒服,而最常用的CSS功能又封装到单独的方法,感觉非常有心。最重要的是jQuery的代码兼容性非常好,你不需要总是头疼着考虑不同浏览器的兼容问题。
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“
”
来
起
始
的
。
而
这
个
“
”来起始的。而这个“
”来起始的。而这个“”就是jQuery当中最重要且独有的对象:jQuery对象。
**注意:**DOM对象是一个对象,只能是一个对象,所有的jQuery方法DOM都不能使用。所有的DOM方法,jQuery对象都不能使用。
jQuery简单的常用方法
$("div").html(""); 添加html
$("div").text(""); 添加文本
$("div").width(100); 设置div的行内样式width
$("div").height(100); 设置div的行内样式width
$("div").css("color","red"); 设置div的行内样式
$("div").on("click",clickHandler); 给所有div添加点击事件侦听
$("div").off("click",clickHandler); 给所有div删除点击事件侦听
$(DOM);将DOM元素转换为jQuery对象
var arr=Array.from($("button")); 将jQuery列表转换为DOM对象的数组
将jQuery列表中第几个DOM元素提取出来出来变为了DOM对象
$("button")[0];
$("button").get(0);
将jQuery列表中指定下标的元素筛选形成新的jQuery对象
$("div").eq(3).css("color","red");
$("div:eq(3)").css("color","red");
jQuery的选择器
$("li,div");群组选择器
$("ul div");后代选择器
$("li>div");子代选择器
$("div.divs");选择div标签中class是divs的所有元素
$("div").find(".divs");等同于$("div .divs");选择div标签后代中class是divs的元素
$("div>*");选择div中所有子代元素
$("div").children("span");等同于$("div>span");选择div中子代中的span元素
$("div *");选择div的所有后代元素
$("#li0+");等同于$("#li0+*");等同于$("#li0").next(); 查找id是li0的下一个兄弟元素,这个兄弟元素可以是任意元素
$("#li0").next("li"); 等同于$("#li0+li");查找id是li0的下一个兄弟元素必须是li的,如果不是li元素就不能被选中
$("#li0~");等同于$("#li0~*");查找id是li0的后面所有兄弟元素
$("#li0").nextAll("li");等同于$("#li0~li");查找id是li0的后面所有li标签的兄弟元素
$("#li0").nextUntil("span");从id是li0的元素开始向下选择兄弟元素到span元素之前为止
$("#li0").prev("li");获取id是li0的上一个兄弟元素是li元素的
$("#li0").prevAll("li");获取id是li0的向上所有兄弟元素是li元素的
$("#li0").prevUntil("span");从id是li0的元素开始向上选择兄弟元素到span元素之前为止
$("#li0").siblings("span");根据id是li0的元素所有的上下的兄弟元素中是span
jQuery的属性选择器
$("[type]");选择有type属性的所有元素
$("[type][name]");选择有type和name属性的元素
$("[abc=3]");选择某个属性是某个值的元素
$("[hobby^=a]");选择属性是hobby并且值是以a字母开始的元素
$("[hobby$=e]");选择属性是hobby并且值是以e字母结束的元素
$("div[hobby!=ade]");选择属性是hobby但是值不等于ade的所有元素,如果属性没有也会被选中
$("[toggle|=book]");选择属性是toggle,并且这个属性的值是book起头,后面紧跟-的值
$("[class~=div3]");选择属性是class,属性值中包含div3或者等于div3.包含div3在这里是指div3是一个独立的单词,前后有空格隔开
$("[class*=div3]");选择属性是class,属性值的字符串中含有div3字符的,可以不是一个独立的单词
jQuery的过滤器
过滤器 基于选择器的基础上,进行精细的过滤
$("li:first");将所有li放在一个列表中,查找它的第一个元素
$("li").first();将所有li放在一个列表中,查找它的第一个元素,比上面查找速度更快,效率更高。
$("li:first-child");将li是父元素的第一个子元素是li的选中
$("li:nth-of-type(1)");li是不是它父元素中li类型列表的第一个子元素
$("li:last";;将所有li放在一个列表中,查找它的最后一个元素
$("li").last();将所有li放在一个列表中,查找它的最后一个元素,比上面查找速度更快,效率更高。
$("li:last-child");将li是父元素的最后一个子元素是li的选中
$("li:last-of-type");将li是父元素的最后一个子元素是li的选中
$("li:even");将所有的li放在一个列表中,并且获取偶数项,这个even的偶数是从0开始
$("li:nth-child(even)");等同于$("li:nth-child(2n)");将每个li的父元素中所有列表的偶数项是li选中,这个even的偶数项是从1开始的
$("li:nth-of-type(even)");等同于$("li:nth-of-type(2n)");将li父元素中li类型元素的列表中是偶数项的选中,这个even的偶数也是从1开始
$("ul :even");ul中所有子元素中偶数项
$("li:odd");将所有的li放在一个列表中,并且获取奇数项,这个odd的奇数是从0开始
$("li:nth-child(odd)");等同于$("li:nth-child(2n-1)");将每个li的父元素中所有列表的奇数项是li选中,这个odd的奇数项是从1开始的
$("li:nth-of-type(odd)");等同于$("li:nth-of-type(2n-1)");将li父元素中li类型元素的列表中是奇数项的选中,这个odd的奇数也是从1开始
$("li:eq(0)");等同于$("li").eq(0);li列表中的第0个元素
$("div:gt(3)");大于div列表的第三项的其他元素
$("div:lt(3)");小于div列表的第三项的其他元素
$("div").slice(2,4);和数组中的slice相同
$("div:not(.divs)");等同于$("div").not(".divs");div列表中不是class为divs的元素
$("div:not([class])");div列表中没有class属性的元素
$(":header");所有h1-h6的元素
$(":animated");所有正在播放的动画元素
$(":focus");当前汇聚焦距属性
$("div:empty");选择没有子元素或者子节点的div
$("div:contains(3)");div的后代元素中包含3子节点的元素,只能是内容不能是元素
$(":contains(3)");找到包含这个内容所有父容器
查找包含选择器元素的容器
$(":has(.divs)");
$(":has(#div0)");
$("div").has("#div0");
$(".divs").parent();查找当前.divs元素的父容器
$(".divs").parents();查找当前.divs元素的所有父容器
$(".divs").parentsUntil("html");查找当前.divs元素的父元素到html之前的所有父容器
$(":hidden");隐藏的 所有不可见的元素,还包括display:none,像visibility: hidden和height:0都不属于隐藏的
$(":visible");所有可以显示的元素
$("div:only-child");该元素是父元素唯一子元素
$("div:only-of-type");该元素在它的父容器中的同种类型仅此一个
is(),hasClass();两个方法是最特殊的两个方法,他们都是返回一个布尔值,后面不能继续连缀
$("div").is(".divs");判断div列表中是否由.divs选择器的元素,有就返回true,没有就返回false
$("div").hasClass("divs");作用是仅判断div列表中是否有class是divs的选择器,有就返回true 反之返false