jquery选择器
2018-01-03 08:43
162 查看
1. jQuery基本概念介绍
1.1 什么是jQuery
一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可学习jQuery就是学习一些方法
1.2 jQuery的使用
a.引包 b.入口函数 c.实现功能
1.3 版本介绍
3个版本 1.x 2.x 3.x
其中版本1兼容IE6/7/8,版本2和3实现的功能更多一些,版本3更适合最新的浏览器
每个大版本又分为压缩版(compressed)和非压缩版(uncompressed),由于其格式和体积不同:压缩版一
般是在生产环境中,即项目上线时使用;非压缩版是在开发环境中
1.4 引包注意事项
1.忘记引包 2.引包顺序出错 3.引包路径出错
1.5 入口函数详细介绍
第一种:$("document").ready(function
() { } );
第二种:$(function
() { } );
和js的入口函数window.onload的区别:
jQuery--文档树加载完成的时候执行,不会等待突破资源的加载完成
js--文档树加载完成后,必须等待图片等的资源加载完成才会执行
1.6 jQuery中的$符号
本质就是一个函数,且$ === jQuery,可分为3种功能:
1,$(function () { } ); 参数是function,功能是入口函数
2,$("#id"); $(".wrap");等 参数是字符串,一般都是选择器,功能是查找页面的元素
3,$(domObj); 将dom对象转化成jQuery对象
1.7 jQuery对象和DOM对象
jQuery对象:用jQuery方法获取到的元素返回的对象
DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象
两者的区别:jQuery对象就是DOM对象的包装集(伪数组)
两者之间的转换:
jQuery对象转DOM对象:通过索引-- jQueryObj[index] 或 jQueryObj.get(index)
DOM对象转jQuery对象:$(domObj)
1.8 jQuery和javascript
js是一种脚本语言,jQuery是靠js写成的,jQuery就是一个js库
二、选择器
基本选择器:
#id 根据Id匹配一个元素
.class 根据给定的类名匹配一个元素
element 根据元素名匹配一个元素
* 匹配所有元素
selecttor1,selector2 并集,返回两个选择器匹配到的元素
层次选择器:
ancestor descendant 根据祖先匹配所有的后代元素
parent>child 根据父元素匹配所有的子元素,直接后代
prev+next 匹配下一个兄弟元素 相当于next()方法
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
简单过滤选择器:
:first或first() 匹配第一个元素
:last或last() 匹配最后一个元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值为偶数的元素,索引号从0开始
:odd 匹配索引值为奇数的元素,索引号从0开始
:eq(index) 匹配指定索引号的元素,索引号从0开始
:gt(index) 匹配索引号大于给定索引值的元素,索引号从0开始
:lt(index) 匹配索引号小于给定索引值的元素,索引号从0开始
:header 匹配所有的标题元素 h1 h2 h3 h4 h5 h6
:animated 匹配所有正在执行动画的元素
内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
可见性过滤选择器:
:hidden 匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
:visible 获取所有的可见元素
属性过滤选择器:
[attribute] 匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value] 匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素,部分前后,中间有也算
[selector][selector] 匹配属性选择器的交集
子元素过滤选择器:
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
:first 获取所有父元素下的第一个子元素
:last 获取所有父元素下最后一个子元素
:only-child 获取所有父元素下唯一的一个元素
表单对象属性过滤选择器:
:enabled 获取表单中所有可用的元素
:disabled 获取表单中所有不可用的元素
:checked 获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器:
:input 获取所有的表单元素<input开头的,还有textarea select
:text 获取所有的单行文本框 <input type="text" />
:password 获取所有的密码框元素 <input type="password" />
:radio 获取所有的单选按钮 <input type="radio" />
:checkbox 获取所有的复选框 <input type="checkbox">
:submit 获取所有的提交按钮 <input type="submit" />
:image 获取所有的图像按钮 <input type="image" />
:reset 获取所有的重置按钮 <input type="reset" />
:button 获取所有的按钮 <input type="button">
:file 获取所有的文件上传框 <input type="file" />
更多详情请查看这里。
1.1 什么是jQuery
一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可学习jQuery就是学习一些方法
1.2 jQuery的使用
a.引包 b.入口函数 c.实现功能
1.3 版本介绍
3个版本 1.x 2.x 3.x
其中版本1兼容IE6/7/8,版本2和3实现的功能更多一些,版本3更适合最新的浏览器
每个大版本又分为压缩版(compressed)和非压缩版(uncompressed),由于其格式和体积不同:压缩版一
般是在生产环境中,即项目上线时使用;非压缩版是在开发环境中
1.4 引包注意事项
1.忘记引包 2.引包顺序出错 3.引包路径出错
1.5 入口函数详细介绍
第一种:$("document").ready(function
() { } );
第二种:$(function
() { } );
和js的入口函数window.onload的区别:
jQuery--文档树加载完成的时候执行,不会等待突破资源的加载完成
js--文档树加载完成后,必须等待图片等的资源加载完成才会执行
1.6 jQuery中的$符号
本质就是一个函数,且$ === jQuery,可分为3种功能:
1,$(function () { } ); 参数是function,功能是入口函数
2,$("#id"); $(".wrap");等 参数是字符串,一般都是选择器,功能是查找页面的元素
3,$(domObj); 将dom对象转化成jQuery对象
1.7 jQuery对象和DOM对象
jQuery对象:用jQuery方法获取到的元素返回的对象
DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象
两者的区别:jQuery对象就是DOM对象的包装集(伪数组)
两者之间的转换:
jQuery对象转DOM对象:通过索引-- jQueryObj[index] 或 jQueryObj.get(index)
DOM对象转jQuery对象:$(domObj)
1.8 jQuery和javascript
js是一种脚本语言,jQuery是靠js写成的,jQuery就是一个js库
二、选择器
基本选择器:
#id 根据Id匹配一个元素
.class 根据给定的类名匹配一个元素
element 根据元素名匹配一个元素
* 匹配所有元素
selecttor1,selector2 并集,返回两个选择器匹配到的元素
层次选择器:
ancestor descendant 根据祖先匹配所有的后代元素
parent>child 根据父元素匹配所有的子元素,直接后代
prev+next 匹配下一个兄弟元素 相当于next()方法
prev~siblings 匹配后面的兄弟元素 相当于nextAll()方法 siblings()方法为匹配所有的兄弟元素
简单过滤选择器:
:first或first() 匹配第一个元素
:last或last() 匹配最后一个元素
:not(selector) 匹配非selector能匹配到的元素
:even 匹配索引值为偶数的元素,索引号从0开始
:odd 匹配索引值为奇数的元素,索引号从0开始
:eq(index) 匹配指定索引号的元素,索引号从0开始
:gt(index) 匹配索引号大于给定索引值的元素,索引号从0开始
:lt(index) 匹配索引号小于给定索引值的元素,索引号从0开始
:header 匹配所有的标题元素 h1 h2 h3 h4 h5 h6
:animated 匹配所有正在执行动画的元素
内容过滤选择器:
:contains(text) 匹配包含给定文本的元素
:empty 匹配所有不包含子元素或者文本的空元素
:has(selector) 匹配后代中含有selector能匹配上元素的元素
:parent 匹配含有子元素或者文本的元素
可见性过滤选择器:
:hidden 匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式
:visible 获取所有的可见元素
属性过滤选择器:
[attribute] 匹配含有给定属性的元素
[attribute=value] 匹配含有属性=value的元素
[attribute!=value] 匹配含有属性但!=value的元素
[attribute^=value] 匹配属性值是以value开始的元素
[attribute$=value] 匹配属性值是以value结束的元素
[attribute*=value] 匹配属性值包含某些值的元素,部分前后,中间有也算
[selector][selector] 匹配属性选择器的交集
子元素过滤选择器:
:nth-child(eq|even|odd|index) 获取所有父元素特定位置的子元素
:first 获取所有父元素下的第一个子元素
:last 获取所有父元素下最后一个子元素
:only-child 获取所有父元素下唯一的一个元素
表单对象属性过滤选择器:
:enabled 获取表单中所有可用的元素
:disabled 获取表单中所有不可用的元素
:checked 获取表单张所有被选中的元素
:selected 获取表单中所有被选中的option的元素
表单选择器:
:input 获取所有的表单元素<input开头的,还有textarea select
:text 获取所有的单行文本框 <input type="text" />
:password 获取所有的密码框元素 <input type="password" />
:radio 获取所有的单选按钮 <input type="radio" />
:checkbox 获取所有的复选框 <input type="checkbox">
:submit 获取所有的提交按钮 <input type="submit" />
:image 获取所有的图像按钮 <input type="image" />
:reset 获取所有的重置按钮 <input type="reset" />
:button 获取所有的按钮 <input type="button">
:file 获取所有的文件上传框 <input type="file" />
更多详情请查看这里。
相关文章推荐
- jquery常用选择器
- jQuery选择器
- jQuery基础之选择器
- 学习jQuery第一天:演示jQuery层次选择器
- jquery选择器之获取父级元素、同级元素、子元素
- jQuery的选择器中的通配符
- jquery id选择器包含特殊字符的处理
- jQuery的选择器中的通配符[id^='code'] 等示例及说明
- 系统学习 jQuery (三) 选择器
- jQuery之基础选择器
- jquery选择器 直观实验
- jQuery选择器上
- 理解Jquery的first-of-type选择器
- jQuery中的遍历节点(作用与选择器类似)
- jQuery选择器大全(48个代码片段+21幅图演示)
- jquery 选择器
- 强大的jquery选择器
- Jquery中的层次选择器与find()的区别示例介绍
- Jquery选择器 $实现原理
- jquery 简单过滤选择器 遍历集合