这篇文章主要介绍了关于jquery源码之选择器的学习 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
选择器
一、选择器分类
jQuery的选择器和CSS的选择器非常相似
大致可以分为几类： 基本筛选器： eq get first lang It not odd root... 内容筛选器： contains empty has parent... 可见筛选器： hidden visible 子元素筛选器： first-child nth-child only-child... 表单： bottom checkbox foucs input text...
二、选择器API
id
$('#app')
/* 如果含有特殊字符 */
$('#app\\:ip') ==> id="app:ip"class
$('.class')element
$('p')*
$('*')
/*匹配全部 */selector1,selector2,selector3
$('p,#p,.class,span.love')parent selector （祖先和后代的关系）
/* 指定的祖先元素下的所有的后代元素 */$('form input') /* result */ /* [ , ] */
parent > child （父亲和儿子的关系）
/* 匹配父元素下的所有的子元素 */$('form > input') /* result */ /* [ ] */
prev + next （下一个兄弟关系）
/* 匹配所有跟在prev后面的下一个元素 */$('label + input') /* result */ /* [ , ] */
prev ~ siblings (下面的所有兄弟元素)
/* 匹配prev后面的所有的兄弟元素 */$('#name ~ input') /* result */ /* */
:first
获取匹配的第一个元素
$('input:first')
$('ul li:first');
// 捕获到同类型元素后，在取其第一个:not(selector)
去除选定的selector那部分
// 去除已选择的元素中的部分
$('input:not(:checked)')
// result
// [ ]:even(index)
// 匹配索引为偶数的，从 0 开始计数（将0包含进even）
// 第 1，3，5，7 行
//
$('tr:even'):odd(index)
// 匹配索引为奇数的 // 第2，4，6，8 行
:eq(index)
// 匹配给定一个索引
$('tr:eq(1)'):gt(index)
// 匹配大于索引值的项
$('tr:gt(1)'):lang(language) 1.9+
// 匹配指定语言的元素
$('p:lang(en)')
// 选择器$("p:lang(en)")将匹配 and
（和他们的后代
），但不包括
:last
// 获取匹配的最后个元素
$('p:last'):lt(index)
// 匹配索引小于指定值
//
$('p:lt(4)'):header
// 匹配所有的标题元素
// h1 h2 h3 h4 h5 h6
$(":header").css("background", "#EEE");:animated
// 匹配所有正在执行动画的元素
$('p:not(:animated)').animate({
left: '+=20px'
},1000);:focus 1.6+
// 匹配当前获取焦点的元素。
$('input:focus').css("background":"#ccc");:root 1.9+
// 匹配页面的根元素
$(':root').css("background":"yellow");
// 设置背景颜色为黄色:target 1.9+
// 如果url中包含有http://example.com/#foo
$('a:target')
// 就是选中了 :contains(text)
// 匹配包含给定文本的
$('p:contains('join')');:empty()
$('p:empty')
// 匹配不包含子元素或文本内容
| Value 1 | |
| Value 2 |
:has()
// 匹配含有has内部选择器选中的元素的元素
$('p:has('p')'):parent 与empty相反
// 匹配含有子元素或者文本内容的
$('td:parent')
| Value 1 | |
| Value 2 |
:hidden
// 匹配不可见的元素
//
$('input:hidden'):visable
// 匹配可见的元素
| Value 2 |
[attribute]
// 匹配包含给定属性的元素
$('input[name]')[attribute=value]
// 匹配给定的属性是某个特定值的元素
$('input[name="sex"]')[attribute!=value]
[attribute^=vlaue]
// 匹配属性以value开头
[attribute$=value]
// 匹配属性以value结尾
[attribute*=value]
// 匹配属性包含某些值的元素
selector1[selector3]
// 匹配同时满足多个属性选择器的元素
$("input[id][name$='man']"):first-child
// 匹配所给选择器( :之前的选择器)的第一个子元素，最终的结果可能是多个，不同于:first 之处是，:first是指匹配到的元素（：之前的元素）的第一个。
- John
- Karl
- Brandon
- Glen
- Tane
- Ralph
:first-of-type
// [1]
$('span:first-of-type')
// 匹配到span元素，而且这个span元素是其父级的第一个span
span1
span2
span3
span1
span2
// span1 span1
// 【2】
$('.abc:first-of-type')
span1
span2
span3
span1
span2
// span1:last-child
同理:first-child
:last-of-type
:nth-child(n)
n可以是：
序号、even、odd、（3n+2）
(3n+2)表示从第二个开始，匹配3的倍数的元素
// 这里的n是从1 开始的，跟:first-child类似
- John
- Karl
- Brandon
- Glen
- Tane
- Ralph
:nth-last-child(n)
n可以是：
序号、even、odd、（3n+2）
(3n+2)表示从第二个开始，匹配3的倍数的元素
跟:nth-child(n) 类似，只是它是从后往前算的
only-child
// 如果某个元素是父元素中唯一的子元素，那将会被匹配
- John
- Karl
- Brandon
- Glen
:input
匹配所有 input, textarea, select 和 button 元素
// 全选$(':input'):text$(':text') //
:password$(':password') //
:radio$(':radio') //
:submit$(':submit') //
:image$(':image') //
:reset:button
玻璃钢企业网站源码1.5下载本程序源码为asp与acc编写，并没有花哨的界面与繁琐的功能，维护简单方便，只要你有一些点点asp的基础，二次开发易如反掌。 1.功能包括产品，新闻，留言簿，招聘，下载，...是大部分中小型的企业建站的首选。本程序是免费开源，只为大家学习之用。如果用于商业，版权问题概不负责。1.采用asp+access更加适合中小企业的网站模式。 2.网站页面div+css兼容目前所有主流浏览器，ie6+，Ch
:file
:enabled
选择可用的元素
$("input:enabled") //:disabled
选择不能使用的
:checked
$("input:checked"):selected
$('option:selected')三、css解析原理
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
