Jquery:强大的选择器<二>
今天跟着资料做了一个示例,为什么我感觉自己做的没书上的好看呢?好吧,我承认自己对css样式只懂一点皮毛,我也不准备深度的去学习它,因为……公司有美工嘛!
这个小示例只是实现了元素的隐藏和显示、元素class属性的添加与移除,HTML代码如下:
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>()</i></li>
<li><a href="#">索尼</a><i>()</i></li>
<li><a href="#">三星</a><i>()</i></li>
<li><a href="#">尼康</a><i>()</i></li>
<li><a href="#">松下</a><i>()</i></li>
<li><a href="#">卡西欧</a><i>()</i></li>
<li><a href="#">富士</a><i>()</i></li>
<li><a href="#">柯达</a><i>()</i></li>
<li><a href="#">宾得</a><i>()</i></li>
<li><a href="#">理光</a><i>()</i></li>
<li><a href="#">奥林巴斯</a><i>()</i></li>
<li><a href="#">明基</a><i>()</i></li>
<li><a href="#">爱国者</a><i>()</i></li>
<li><a href="#">其它品牌相机</a><i>()</i></li>
</ul>
<br />
</div>
<div class="showmore">
<a href="#"><span>显示全部品牌</span></a>
</div>
HTML
js代码如下:
<script type="text/javascript">
$(function () {
var item = $('ul li:gt(5):not(:last)');//选取所有品牌中索引大于5的且不包含最后一项的元素。
item.hide();//隐藏元素
var btnToogle = $('div.showmore>a');//选取按钮
btnToogle.click(
function () {
if (item.is(":visible"))//判断选取的元素是否隐藏
{
item.hide();
$(this).find('span').text("显示全部品牌");//其实一直不怎么懂this的用法,有时间了会去查查资料的
$('ul li').removeClass("promoted");//移除class样式
}
else
{
item.show();
$(this).find('span').text("显示精简品牌");
$('ul li').filter(":contains('三星'),:contains('索尼'),:contains('奥林巴斯')").addClass("promoted")
}
return false;//超链接不跳转
}
)
}
);
</script>
js
点击按钮,隐藏元素时的效果图如下:
点击按钮,显示元素时的效果图如下:
其实今天的收获应该有三点:
1、自己动手做了一次,记忆更深刻了一点。
2、明白了什么是DOM,以前总是用document,也知道DOM这个词,但是不了解它,今天查了一下资料,专业一点的解释是:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我对它的理解是:类似于HTML中的标签,一层嵌套一层,而最外面的是<html>标签,如果把这些嵌套看成是树,那么<html>标签就是根节点,这是我们看到的,其实我们看不到的是document才是这棵树的根节点,我们通过document可以访问下面的任何子节点。
3、find()和filter()的区别。这是我以前不知道的,find()是在子元素中查找匹配元素,而filter()是对自身的集合元素进行筛选。
Jquery:强大的选择器<二>的更多相关文章
- jQuery自学笔记(二):jQuery选择器
一.简单选择器 ID选择器:$('#box') 元素标签名:$('div') 类选择器:$('.box') jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一 ...
- jQuery学习笔记(二):this相关问题及选择器
上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单 ...
- webform(九)——JQuery基础(选择器、事件、DOM操作)
JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:# ②class选择器:. ③标签名选择:标签名 ④并列选择:用,隔开 ⑤后代选 ...
- jQuery.validator 详解二
前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...
- JQuery:JQuery语法、选择器、事件处理
JQuery语法: 通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...
- jQuery的dom操作(二)转
addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...
- 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API
1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...
- JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)
JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...
- jQuery中的选择器《思维导图》
学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...
随机推荐
- c - 每位数字尾部加空格
/* input:一个4位整数. output:每位整数后紧跟一个空格的字符串. */ char * insert(char *s) { int len = strlen(s); * len + ); ...
- nyoj组合数
算法:深搜 描述 找出从自然数1.2.... .n(0<n<10)中任取r(0<r<=n)个数的所有组合. 输入输入n.r.输出按特定顺序输出所有组合. 特定顺序:每一个组合中 ...
- xode 中文乱码处理
find *.* -exec sh -c "iconv -f GB18030 -t UTF-8 {} > {}.txt" \;
- 轻量级jQuery工具提示插件tooltipsy使用方法
今天想给单位的系统弄一个提示插件,懒得自己做,于是就上网百度了几个jQuery插件,挺好用的.下面以tooltipsy插件为例,说明如何使用这些插件. 一.下载 首先到tooltipsy的官网http ...
- kafka安装及Kafka-PHP扩展的使用
话说用了就要有点产出,要不然过段时间又忘了,所以在这里就记录一下试用Kafka的安装过程和php扩展的试用. 实话说,如果用于队列的话,跟PHP比较配的,还是Redis.用的顺手,呵呵,只是Redis ...
- jquery1.9学习笔记 之选择器(基本元素三)
标签选择器("element") 描述: 选择所有与给出标签名相匹配的元素. 同功能的JS原生方法:getElementByTagName() 例子: 查找每个div元素. &l ...
- HTML标签区别
一.div和span的区别 div是一个块级元素,可以包含段落,表格等内容,用于放置不同的内容.一般我们在网页通过div来布局定位网页中的每个区块. span是一个内联元素,没有实际意义,它的存在纯粹 ...
- 仿校内textarea输入框字数限制效果
这是一个仿校内textarea回复消息输入框限制字数的效果,具体表现如下: 普通状态是一个输入框,当光标获取焦点时,出现字数记录和回复按钮 PS:上边那个小三角可不是用的图片. 普通状态效果如下: 获 ...
- unresolved import 解决办法
安装paramiko 需要先安装另两个模块 安装时未注意32bit,安装了64的,本地python是32的所以出错,重装后报错unresolved import,环境是eclipse(pydev) 用 ...
- docker中运行ASP.NET Core Web API
在docker中运行ASP.NET Core Web API应用程序 本文是一篇指导快速演练的文章,将介绍在docker中运行一个ASP.NET Core Web API应用程序的基本步骤,在介绍的过 ...