由John Resig独立发布的一款JavaScript前端类库,使用了CSS选择器机制
支持代码链,大大降低了代码量,是当时最为流行的前端js类库之一。jQuery基本上解决了浏览器差异性问题
jQuery使用非常方便,直接将jQuery依赖下载到本地引入页面即可使用
选择器:
普通选择器:
1.id选择器:根据给定Id匹配一个元素: $("#id")
2.标签选择器:根据给定标签名匹配所有元素: $("div")
3.类型选择器:根据给定的css类名匹配元素: $(".class")
4.全选选择器:匹配全部元素: $("*")
5.多选选择器:将每一个选择器的匹配结果合并一起返回: $("#id,class,span")
层级选择器:
1.祖先元素选择器:给定祖先元素 左祖先右子匹配: $("form input")
2.后代选择器 :给定父元素情况下匹配其后代元素: $("form>input")
3.匹配紧接在元素1后的所有的元素2 : $("1+2")
4.匹配元素1后和其同辈的元素2: $("1~2")
基本选择器:
1.获取匹配的第一个元素: $("标签名:first")
2.获取匹配的最后的一个元素: $("标签名:last")
3.匹配索引值为偶数的元素,从0计数: $("标签名:even")
4.匹配索引值为奇数的元素,从0计数: $("标签名:odd")
5.匹配一个给定索引值的元素: $("标签名:eq(索引值)")
6.匹配所有索引值大于给定索引值的元素: $("标签名:gt(索引值)")
7.匹配所有索引值小于给定索引值的元素: $("标签名:lt(索引值)")
8.去除所有与给定选择器匹配的元素: $("input:not(selector)")
9.匹配所有标题元素(h1~h6): $(":header")
内容选择器:
1.匹配包含给定文本的元素: $("标签名:contains(文本内容)")
2.匹配所有不包含文本或者子元素的空元素: $("标签名:empty")
3.匹配含有选择器所匹配元素的元素: $("标签名:has(selector)")
4.匹配所有含有文本元素或子元素的元素: $("标签名:parent")
5.匹配所有可见的指定元素: $("标签名:visible")
6.匹配所有隐藏元素: $("标签名:hidden")
属性选择器:
1.匹配包含指定属性的元素: $("div[id]")
2.匹配给定的属性是某个特定的值的元素: $("input[name='elena']")
3.匹配所有不含有指定的属性,或者属性不等于特定值的元素: $("input[name!='elena']")
4.匹配给定的属性是以某些值开头的元素: $("input[name^='ele']")
5.匹配给定的属性是以某些值结尾的元素: $("input[name$='na']")
6.匹配给定的属性中包含某些值的元素: $("input[name*='len']")
7.复合属性选择器,同时满足多个选择器时使用: $("[seletor][seletor][seletor]")
子元素选择器:
1.匹配所给选择器( :之前的选择器)的第一个子元素(可返回多个): $("ul li:first-child")
2.匹配所给选择器的随后一个子元素: $("ul li:last-child")
3.匹配其父元素下的第N个子或奇偶元素: $("ul li:nth-child(索引值)")
4.如果某个元素是父元素中唯一的子元素,那将会被匹配: $("ul li:only-child")
表单选择器:
1.匹配所有 input, textarea, select 和 button 元素: $(":input")
2.匹配所有的单行文本框: $(":text")
3.匹配所有密码框: $(":password")
4匹配所有单选按钮: $(":radio")
5.匹配所有复选框: $(":checkbox")
6.匹配所有提交按钮: $(":submit")
7.匹配所有图像域: $(":image")
8.匹配所有重置按钮: $(":reset")
9.匹配所有文件域: $(":file")
jQuery通过选择器拿取的元素与js中的元素节点是同一种元素吗?如果不是为什么?两者如何进行转换?
jQuery元素是对js节点的一个轻度封装,jQuery元素只能使用jQuery中的函数方法属性等,js节点也只能使用自己的函数方法等,两者不能通用
两者如何转换:jQuery => js: jQuery元素.get(0) 或 jQuery元素[0]
js => jQuery: $(js节点)