jQuery选择器示例
<!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>
- show():显示隐藏的匹配元素;
- css(name,value):给元素设置方式;
- text(string):设置所有匹配元素的文本内容;
- filter(expr):筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合。注意区分filter()与find()方法。
find()方法会在元素内寻找匹配元素,是对它的子集操作;
filter()则是筛选元素,是对自身集合元素进行筛选。 - addClass(className):为匹配的元素添加指定的类名,而removeClass()是从匹配的元素中删除指定的类。
- :contains(text),选取含有文本内容为"text"的元素。
[参考文献]
- 单东林,张晓菲. 锋利的jQuery(第二版).
jQuery选择器示例的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jquery选择器总结 转自(永远的麦子)
jQuery选择器总结 阅读目录 1, 基本选择器? 2, 层次选择器? 3, 过滤选择器? 4, 表单选择器? jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器.下 ...
- jQuery 选择器 (基础恶补之三)+Ajax
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- 第二章(jQuery选择器)
2.1jQuery选择器是什么 1.CSS选择器 选择器 示例 选择器 示例 标签选择器 a{ } p{ } ul{ } ID选择器 #ID{ } 类选择器 .class{ } 群组选择器 td,p, ...
- WEB入门之十三 jQuery选择器
学习内容 jQuery层次选择器 jQuery属性选择器 jQuery表单选择器 jQuery过滤选择器 能力目标 熟悉jQuery各种选择器的使用场合 能熟练使用jQuery各种选择器 本章简介 上 ...
随机推荐
- 08_1_IO
08_1_IO 1. 输入/输出流的分类 java.io包中定义了多个流类型(类或抽象类)来实现输入/输出功能:可以从不同的角度对其进行分类: 按数据流的方向不同可以分给输入流和输出流. 按处理数据单 ...
- 由fastRPC产生的DB服务
根据整理的RPC模型,在此上,根据最近的项目,发布了DB服务,操作数据库.以RPC模型,发布数据库的操作服务,主要发送SQL语句,在服务端执行:同时引入了流行的数据库连接池:服务端还发布了文件接收服务 ...
- 页面刷新 方法总结 JSP刷新
1) <meta http-equiv="refresh"content="10;url=跳转的页面"> 10表示间隔10秒刷新一次 2) < ...
- CentOS yum命令报错 Error: File /var/cache/yum/i386/6/epel/metalink.xml does not exist
最近在虚拟机上执行yum命令一直报错:Could not parse metalink https://mirrors.fedoraproject.org/metalink?repo=epel-7&a ...
- 微信小程序本地缓存
- python -- 输出异常详细信息
在使用try: except: 捕获异常后,想要获取到异常信息的详细内容另做它用,可以使用python的内置模块traceback进行获取. traceback.print_exc() 直接打印异 ...
- 交叉编译qt5.6
按照网上的攻略编译QT5.6 https://www.lijingquan.net/2016/07/08/build-kernel-busybox-qt5-6-tslib-imx28/ 出现问题,找不 ...
- POJ 1286 Pólya定理
Necklace of Beads Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9162 Accepted: 3786 ...
- Alter the structure of web pages with JavaScript
Most of the DOM methods you've seen so far are useful for identifying elements. Both getElementById ...
- 3 web框架
web框架 Web框架(Web framework)是一种开发框架,用来支持动态网站.网络应用和网络服务的开发.这大多数的web框架提供了一套开发和部署网站的方式,也为web行为提供了一套通用的方法. ...