JQuery中的选择器

JQuery引入与选择器

  • JQuery的引入
  • JQuery中的$
  • JQuery选择器
    • 1.基本选择器
    • 2.层次选择器
    • 3.过滤选择器
      • 3.1 、基本过滤选择器
      • 3.2、内容过滤选择器
      • 3.3 、可见性过滤选择器
      • 3.4 、属性过滤选择器
      • 3.5 、子元素过滤选择器
      • 3.6 、表单对象属性过滤选择器
    • 4、表单选择器

JQuery的引入

1.本地引入


2.远程引入


JQuery中的$

在jQuery库中,$就是jQuery的一个简写形式。
如:

$('id') ==>  jQuery('#id')

在编写JavaScript时应尽量避免使用jQuery和$定义变量或方法,
以免在同时使用JavaScript和jQuery时发生冲突。

JQuery选择器

1.基本选择器

  • 通配符选择器
    选择页面内所有元素
$('*')
  • id选择器
    根据指定id匹配元素
$('#id')
  • 类选择器
    根据类名匹配元素
$('.class')
  • 元素名选择器
    根据元素名匹配元素
$('div')
  • 分组选择器
    分组匹配元素
 $('div,span,.hotclass')

2.层次选择器

  • 选择E1下所有E2
$('E1 E2')
  • 选择E1下的直接子元素
$('E1> E2')
  • 选择E1后紧邻的一个兄弟元素
$('E1+ E2')
//等同于
$(E1).next(E2)
  • 选择E1后所有的兄弟元素
$('E1~ E2')
//等同于
$(E1).nextAll(E2)

3.过滤选择器

主要是通过特定的过滤规则来筛选出需要的DOM
元素,过滤规则与CSS中的伪类选择器语法相
同,即过滤选择器都是以冒号(:)开头。

3.1 、基本过滤选择器

选择器 描述
:first 选择第一个元素
:last 选择最后一个元素
:not(E1) 去除所有E1选择器匹配的元素
:even 选择索引是偶数的所有元素,索引从0开始
:odd 选择索引是奇数的所有元素,索引从0开始
:eq(index) 选择索引值是index的元素,index从0开始
:gt(index) 选择索引值大于index的元素,index从0开始
:lt(index) 选择索引值小于index的元素,index从0开始
:header 选择所有的标题元素,h1~h6
:animated 选择当前正在执行动画的所有元素

3.2、内容过滤选择器

选择器 描述
:contains(text) 选择含有text文本内容的元素
:empty 选择不包含子元素或文本的空元素
:has(E1) 选择包含有(E1选择器匹配的元素)的所有元素
:parent 选择含有子元素或文本的元素

3.3 、可见性过滤选择器

选择器 描述
:hidden 选择所有不可见元素
:visible 选择所有可见元素

3.4 、属性过滤选择器

选择器 描述
[attribute] 选择拥有此属性的元素
[attribute=value] 选择属性值为value的元素
[attribute!=value] 选择属性值不为value的元素
[attribute^=value] 选择属性值以value开始的元素
[attribute$=value] 选择属性以value值结束的元素
[A1][A2]…A[N] 用属性选择器合并成一个复合属性选择器。满足多个条件。

3.5 、子元素过滤选择器

选择器 描述
:nth-child(index/even/odd) 选取每个父元素下的第index素或奇偶元素.(indexc从1开始)
:first-child 选择每个父元素的第1个子元素
:last-child 选择每个父元素的最后1个子元素
:only-child 如果某个元素是它父元素中惟一的子元素,那么将会被匹配.素中含有其他元素,则不会

:nth-child()选择器详细功能描述:
1.:nth-child(even)能选择每个父元素下的索引值是偶数的元素
2.:nth-child(odd)选择出每个父元素下的索引值是奇数的元素
3.:nth-child(2)选取每个父元素下的索引值等于2的元素
4.:nth-child(3n)能选出每个父元素下的索引值是3的倍数的元素,n从0开始
5.:nth-child(3n+1)能选取每个父元素下的索引值是3n+1的元素.n从0开始

3.6 、表单对象属性过滤选择器

选择器 描述
:enabled 选择所有可用元素
:disabled 选择所有不可用元素
:checked 选择所有被选中的元素(单选框,复选框)
:selected 选择所有被选中的选项元素(下拉列表)

4、表单选择器

选择器 描述
:input 匹配所有input、textarea、select、button元素
:text 选择所有单行文本框
:password 选择所有密码框
:radio 选择所有单选框
:checkbox 选择所有复选框
:submit 选择所有t提交按钮
:image 选择所有图像按钮
:reset 选择所有重置按钮
:button 选择所有按钮
:file 匹配所有文件域
:hidden 匹配所有不可见元素

访问链接获得所有版本JQuery

你可能感兴趣的:(JQuery,jquery,javascript)