jQuery的强大选择器小结

雪之恒07

雪之恒07

2016-02-19 14:15

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。
一 基本选择器
$("input“) :选择所有是input标签的元素
$("#input1"):选择id为input1的元素
$(".acss"):选择所有包含acss 这个css类样式的
代码
代码如下:
body
a href=""link/a
input id="input1" class="acss"
input id="Text1" class="acss"
input id="Text2"
script
var oo = $("input"); //oo是以上3个的集合
var pp = $("#input1");//pp是第一个
var qq = $(".acss");//qq 是前两个的集合
/script
/body

可以用以上3个尽兴组合式的查询
var ww = $("input.acss"); //选择具有acss的input标签元素
var ee = $("input#Text1.acss");//选择具有acss 的 id为 Text1的 标签为input的元素
二、子选择器
父节点和直接子节点用()隔开,即实现子选择器方式
代码如下:
p class="acss"
a href="" id="a1"/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
/p
p
a href="" id="a2"/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
a href=""/a
/p
script
var oo = $("p a "); //选择了p下面的所有的a
var pp = $("pa"); //选择了2个a元素 ,id为a1 和a2
var qq = $("p.acss a"); //选择了id为a1的元素
/script

三、特征选择器
根据元素特征进行选择 a[href^=http://]
代码
代码如下:
div
input id="Text3" name="myInput" /
input id="Text5" name="myput" /
input id="Text4" name="yourInput" /
a id="a3" href="http://www.baidu.com"/a
a id="a4" href="www.baidu.com"/a
/div
script
var oo = $("a[href^=http://]"); //选择href以 http:// 开头的a。a3选中
var pp = $("input[name$=Input]"); //选择name以 Input 结尾的input 。Text3,Text4选中
var qq = $("a[href*=com]"); //选择href以 包含com的a 。a3,a4选中
var ww = $("input[id=Text3]"); //选择正好等于的
/script

另外 jQuery还提供了 has方法,如上面例子中
div:has(input) 含义是。选择包含input的所有div
注意: div input 是选择的是div中的所有input 元素
四、位置选择器
位置选择器主要是根据元素的位置进行选择,
div a:first 返回页面第一个在div中的a
div a last 返回页面最后一个在div中的a
div odd 返回页面偶数位置的div
div even 返回页面奇数位置的idv
div first-child 返回div 中第一个子选择
div last-child 返回div 中最后一个子选择
only-child 没有兄弟节点的元素
nth-child(n):第n个子节点
eq(n) 第n个匹配元素
gt(n) n之后的匹配元素 不包含
lt(n) n之前的匹配元素 不包含
五、jQuery自定义选择
名称说明解释:input匹配所有 input, textarea, select 和 button 元素查找所有的input元素:
$(":input"):text匹配所有的文本框查找所有文本框:
$(":text"):password匹配所有密码框查找所有密码框:
$(":password"):radio匹配所有单选按钮查找所有单选按钮:checkbox匹配所有复选框查找所有复选框:
$(":checkbox"):submit匹配所有提交按钮查找所有提交按钮:
$(":submit"):image

匹配所有图像域

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)匹配所有图像域:
$(":image"):reset匹配所有重置按钮查找所有重置按钮:
$(":reset"):button匹配所有按钮查找所有按钮:
$(":button"):file匹配所有文件域查找所有文件域:
$(":file")

名称说明解释:enabled

匹配所有可用元素

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)查找所有可用的input元素:
$("input:enabled"):disabled匹配所有不可用元素查找所有不可用的input元素:
$("input:disabled"):checked匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)查找所有选中的复选框元素:
$("input:checked"):selected匹配所有选中的option元素查找所有选中的选项元素:
$("select option:selected")

展开更多 50%)
分享

猜你喜欢

jQuery的强大选择器小结

Web开发
jQuery的强大选择器小结

jQuery Selector选择器小结

Web开发
jQuery Selector选择器小结

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery温习篇 强大的JQuery选择器

Web开发
jQuery温习篇 强大的JQuery选择器

jQuery 选择器理解

Web开发
jQuery 选择器理解

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 选择器部分整理

Web开发
jquery 选择器部分整理

Jquery选择器 $实现原理

Web开发
Jquery选择器 $实现原理

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

理解Subjects Principals and Credentials

理解Subjects Principals and Credentials

爱与恨的区别,在于得到与失去的界限 - QQ非主流分组

爱与恨的区别,在于得到与失去的界限 - QQ非主流分组
下拉加载更多内容 ↓