二、jQuery选择器

最新推荐文章于 2024-09-14 18:52:56 发布

追赶_jing

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量315

点赞数

分类专栏：工作学习整理文章标签： web javascript

本文链接：https://blog.csdn.net/jing44944/article/details/46534337

版权

工作学习整理专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery选择器的优势：

1.简洁的写法

2.支持CSS1到CSS3选择器，浏览器兼容性好

3.完善的处理机制，使用jQuery获取网页中不存在的元素不会报错

注意：当要用jQuery检查某个元素在网页上是否存在时，应该根据获取到元素的长度来判断或者转化成DOM对象来判断，代码如下：

if( $("#tt").length >0 ){

//dosomething

}

或者

if( $("#tt")[0] ){

//dosomething

}

jQuery选择器的分类：

基本选择器：通过元素id、class和标签名来查找DOM元素

层次选择器：后代元素、子元素、相邻元素和同辈元素

$("div span"):选取<div>里的所有的<span>元素

$("div >span")选取<div>元素下元素名是<span>的子元素

$(".one +div")选取class为one的下一个<div>同辈元素，可以使用next()方法来代替

$("#two ~div")选取id为two的元素后面的所有<div>同辈元素,可以使用nextAll()方法来代替

注意：siblings()方法可以获取所有的同辈节点，与前后位置无关，不同于$("prev~ siblings")

过滤选择器:主要是通过特定的过滤规则来筛选出所需的DOM元素。

基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤

基本过滤选择器：

:firsteg:$("div:first") 选取所有<div>元素中第1个<div>元素

:lasteg:$("div:last")选取所有<div>元素中最后一个<div>元素

:not(selector)eg:$("input:not(.myClass)")选取class不是myClass的<input>元素

:eveneg:$("input:even")选取索引是偶数的<input>元素

:oddeg:$("input:odd")选取索引是奇数的<input>元素

:eq(index)

:gt(index)

:lt(index)

:header选取所有的标题元素

:animated选取当前正在执行动画的所有元素

:focus选取当前获取焦点的元素

内容过滤选择器：

:empty选取不包含子元素或者文本的空元素

:parent选取含有子元素或者文本的元素

:contains(text) 选取含有文本内容为“text”

:has(selector) 选取含有选取器所匹配的元素的元素

可见性过滤选择器：

:hidden选取所有不可见的元素

:visible选取所有可见的元素

属性过滤选择器：

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attribute|=value]

[attribute~=value]

[attribute1][attribute2][attributeN]

子元素过滤选择器：

:nth-child(index/even/odd/equation)eg: :nth-child(3n+1)选取每个父元素下的索引值是（3n+1）的元素

:first-child

:last-child

:only-child

表单对象属性过滤选择器:

:enabled

:disabled

:checkedeg:$("input:checked")选取所有被选中的<input>元素

:selectedeg:$("select option:selected")选取所有被选中的选项元素

表单选择器：

:input选取所有的<input>、<textarea>、<select>、<button>元素

:text选取所有的单行文本框

:password选取所有的密码框

:radio选取所有的单选框

:checkbox选取所有的多选框

:submit选取所有的提交按钮

:image

:reset

:button

:file

:hidden

选择器中的一些注意事项：

1.选择器中含有“.”、“#”、“（”或“]”等特殊字符

解决方式：使用转义符转义

2.属性选择器的@符号问题

如果项目中使用了较早的jQuery代码和插件，升级jQuery后，出现代码报错或不正常运行，很可能是因为代码中使用了属性选择器的@符号而引起的。

3.选择器中含有空格的注意事项

选择器中的空格是有着特殊的意义的

关键点：

removeAttr

:not(selector)

:has(selector)

$category.is(":visible")

find()方法

text()方法

filter()方法

removeClass()

示例：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>jquery实现是否接受协议的判断</title>

</head>

<body>

<divclass="SubCategoryBox">

<ul>

<li><ahref="#">其他品牌相机</a><i>(7275)</i></li>

</ul>

<ahref="more.html"><span>显示全部品牌</span></a>

</div>

<ahref="more.html"><span>1</span></a><ahref="more.html"><span>2</span></a>

</div>

<ahref="more.html"><span>2</span></a>

</div>

</body>

<scripttype="text/javascript">

$(function () {

$category = $(".SubCategoryBox ulli:gt(5):not(:last)");

$category.hide();

$toggleBtn = $("div.showmore >a");

$toggleBtn.click(function () {

if($category.is(":visible")){

$category.hide();

$(this).find("span")

.css("background","url(./resources/img/down.gif)no-repeat 0 0")

.text("显示全部品牌");

$("ul li")

.filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

.removeClass("promoted");

}else{

$category.show();

$(this).find("span")

.css("background","url(./resources/img/up.gif) no-repeat0 0")

.text("精简显示品牌");

$("ul li")

.filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

.addClass("promoted");

}

return false;

});

</script>

<styletype="text/css">

*{ margin:0; padding:0;}

body {font-size:12px;text-align:center;}

a { color:#04D; text-decoration:none;}

a:hover { color:#F50;text-decoration:underline;}

.SubCategoryBox {width:600px; margin:0auto; text-align:center;margin-top:40px;}

.SubCategoryBox ul { list-style:none;}

.SubCategoryBox ul li { display:block;float:left; width:200px; line-height:20px;}

.showmore { clear:both;text-align:center;padding-top:10px;}

.showmore a { display:block; width:120px;margin:0 auto; line-height:24px; border:1px solid #AAA;}

.showmore a span { padding-left:15px;background:url(./resources/img/down.gif) no-repeat 0 0;}

.promoted a { color:#F50;}

</style>

</html>

追赶_jing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录