jQuery选择器示例
2024-09-07 14:54:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>demo</title>
<script src="./scripts/jquery-1.9.1.js"></script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(27220)</i></li>
<li><a href="#">三星</a><i>(20800)</i></li>
<li><a href="#">尼康</a><i>(17821)</i></li>
<li><a href="#">松下</a><i>(12289)</i></li>
<li><a href="#">卡西欧</a><i>(8242)</i></li>
<li><a href="#">富士</a><i>(14894)</i></li>
<li><a href="#">柯达</a><i>(9520)</i></li>
<li><a href="#">宾得</a><i>(2195)</i></li>
<li><a href="#">理光</a><i>(4114)</i></li>
<li><a href="#">奥林巴斯</a><i>(12205)</i></li>
<li><a href="#">明基</a><i>(1466)</i></li>
<li><a href="#">爱国者</a><i>(3091)</i></li>
<li><a href="#">其他品牌相机</a><i>(7275)</i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
<script>
//$(document).ready(function(){}); === $().ready(function(){}); === $(function(){});
$(function () { //等待DOM加载完毕
//从第7条开始隐藏后面的品牌(最后一条“其他品牌相机”除外)
var $category=$("ul li:gt(5):not(:last)");//获得索引值大于5的品牌集集合对象(除最后一条) $category.hide();//隐藏上面获取到的jQuery对象 //当用户单击“显示全部品牌”按钮时
var $toggleBtn=$("div.showmore > a"); $toggleBtn.click(function () {
if($category.is(":visible")){//如果元素显示
$category.hide();
$(this).find('span')
//.css("background","url(./images/003.jpg) no-repeat 0 0")
.css("background","#ccc")
.text("显示全部品牌");
$('ul li').removeClass("promoted");//去掉高亮样式
}else{
$category.show();
$(this).find('span')
//.css("background","url(./images/002.jpg) no-repeat 0 0")
.css("background","#0f0")
.text("精简显示品牌");
$("ul li")
.filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted");//添加高亮样式
}
return false;//此语句让浏览器认为用户没有单击该链接,从而阻止该超链接跳转
});
});
</script>
</body>
</html>
上面代码中用到的几个jQuery方法的意思是:
- show():显示隐藏的匹配元素;
- css(name,value):给元素设置方式;
- text(string):设置所有匹配元素的文本内容;
- filter(expr):筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合。注意区分filter()与find()方法。
find()方法会在元素内寻找匹配元素,是对它的子集操作;
filter()则是筛选元素,是对自身集合元素进行筛选。 - addClass(className):为匹配的元素添加指定的类名,而removeClass()是从匹配的元素中删除指定的类。
- :contains(text),选取含有文本内容为"text"的元素。
[参考文献]
- 单东林,张晓菲. 锋利的jQuery(第二版).
最新文章
- Ambari服务依赖关系图生成脚本
- Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。
- SqlServer性能优化分割提升性能分布式视图(七)
- php+MySQL+Ajax
- Vim配置及说明——IDE编程环境
- 一台电脑安装两个xampp的方法
- jQuery$命名冲突问题解决方法
- Angularjs 初始化框架
- LINUX TOP,不是这样玩地!!!
- Canny边缘检测-Wiki
- Unity 3D物体的点击事件响应以及NGUI坐标和世界坐标的互相转换
- angularJS学习笔记一
- LintCode-乱序字符串
- 网页上弹出pop窗口实例,(document).height()与$(window).height()的区别
- 谷歌浏览器js debug
- docker镜像与容器概念
- html常用的基本标签
- 历届试题 剪格子 IDA*
- Python 强制停止多线程运行
- 关于移动端开发,vedio标签层级高遮挡蒙版的解决方案