jQuery50个选择器,让你得心应手

jQuery

一:概念

一个简单的js组件(是一个别人写好的js文件不是jar包)

引入jQuery文件

<script type="text/JavaScript" src="jquery-1.6.4.min.js">script>

RIA :富互联网技术

一些用于提高客户端体验,增加客户端交互性,增强客户端功能的技术,如:ajax

js的封装

jquery的功能:可以实现js的所有功能

1. 取得页面元素
2. 修改页面外观
3. 改变页面内容
4. 响应用户的页面操作
5. 微页面添加动态效果
6. 无刷新获取服务器信息
7. 简化JavaScript任务

优点:

1. 轻量级
2. 强大的选择器
3. 出色的DOM操作的封装
4. 可靠的事件处理机制
5. 出色的浏览器兼容性

(宗旨:写得少,做得多)

二.选择器

1.基本选择器

和css的选择器一样

1. id选择器 #id
2. 类选择器 .class
3. 标签选择器 标签名
4. *通配符选择器
5. 组合选择器 selector1,selector2

$("#div1")
$(".class")
$("div")
$("*")
$("div,span")

2.层次选择器

1. parentSelector chidSelector 选中 parentSelector下所有的chidSelector后代元素
2. parentSelector > chidSelector 选中 parentSelector下所有的chidSelector直接子元素
3. nodeSelector1+nodeSelector2 选中 nodeSelector1后面紧挨着的nodeSelector2弟元素
4. nodeSelector1~nodeSelector2 选中nodeSelector1后面所有的nodeSelector2弟元素

3.基本过滤选择器

1. :first 选中第一个
2. :last 选中最后一个
3. :not(selector) 不被参数选择器选中的
4. :even 索引为偶数的
5. :odd 索引为奇数的
6. :gt(n) 索引大于n的
7. :It(n) 索引小于n的
8. :eq(n) 索引等于n的
9. :header 所有的标题标签
10. :animated 所有正在执行动画的标签

4.内容过滤选择器

1. :contains(text) 选中文本内容包含指定文本的
2. :has(selector) 包含指定子元素的父亲标签
3. :empty 选中没有文本内容和子元素的
4. :parent 选中有文本内容或子元素的

5.可见性过滤选择器

1. :hidden 选中 input type=“hidden” 或者 display="none"的元素 包括所有有没有区域的标签:br style head meta script
2. :visible 选中不被选中的元素

6.属性过滤选择器

1. [attrName] 选中拥有attrName属性的标签
2. [attrName=attrName] 选中拥有attrName属性并且值为attrValue的标签
3. [attrName!=attrName] 选中拥有attrName属性并且值不为attrValue的标签 或者没有attrName属性的标签
4. [attrName^=attrName] 选中拥有attrName属性但值以attrValue开头的标签
5. [attrName$=attrName] 选中拥有attrName属性但值以attrValue结尾的标签
6. [attrName*=attrName] 选中拥有attrName属性但值包含attrValue的标签
7. [][][][][selector1] [selector2] [selector3] 多次过滤

7.子元素过滤选择器

1. :first-child 第一个子标签
2. :last-child 最后一个子标签
3. :only-child 如果只有一个子标签 就选中次子标签
4. :nth-child(n) 顺序为n的子标签

8.表单过滤选择器

1. :input 所有的input标签
2. :text 所有的input type="text "标签
3. :submit 所有的input type="submit"标签
4. :reset 所有的input type="reset"标签
5. :button 所有的input type="button "标签
6. :hidden 所有的input type="hidden"标签
7. :radio 所有的input type="radio"标签
8. :checkbox 所有的input type="checkbox "标签
9. :file 所有的input type="flie "标签
10. :image 所有的input type="image"标签
11. :password 所有的input type="password "标签

9.表示属性过滤选择器

1. :enabled 选中所有可用的表单组件 没有添加属性 disabled=“disabled”
2. :disabled 选中所有不可用的表单组件 添加了属性 disabled=“disabled”
3. :checked 选中所有被选中的单选框/复选框 radio/checkbox被选中
4. :selected 选中所有被选中的select的option