今天跟着资料做了一个示例,为什么我感觉自己做的没书上的好看呢?好吧,我承认自己对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:强大的选择器<二>的更多相关文章

  1. jQuery自学笔记(二):jQuery选择器

    一.简单选择器 ID选择器:$('#box') 元素标签名:$('div') 类选择器:$('.box') jQuery提供了length和size()两种方法查看返回的元素,可验证ID在页面只出现一 ...

  2. jQuery学习笔记(二):this相关问题及选择器

    上一节的遗留问题,关于this的相关问题,先来解决一下. this的相关问题 this指代的是什么 这个应该是比较好理解的,this就是指代当前操作的DOM对象. 在jQuery中,this可以用于单 ...

  3. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  4. jQuery.validator 详解二

    前言:上一篇详细的介绍了jQuery.validator( 版本v1.13.0 )的验证规则,这一篇重点讲述它的源码结构,及如何来对元素进行验证,错误消息提示的内部实现 一.插件结构(组织方式) 在讲 ...

  5. JQuery:JQuery语法、选择器、事件处理

    JQuery语法:   通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 一.语法:jQuery 语法是通过选取 HTM ...

  6. jQuery的dom操作(二)转

    addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配的元素内部追加内容. appendTo() 向匹配的元素内部追加内容. attr ...

  7. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  8. JQuery总结:选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 (转)

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  9. jQuery中的选择器《思维导图》

    学习jQuery的课程中,我对jQuery中的选择器有了更深的认识,它的简洁写法,完美的兼容性,可靠的处理机制,都让我们省了很多事, 下面是我在学习过程中对jQuery选择器写的思维导图(全屏查看:& ...

随机推荐

  1. (转)VS无法启动调试:“生成下面的模块时,启用了优化或没有调试信息“

    中调试项目遇到错误提示,Visual Studio 2010(或VS2008或VS2005)启动调试的时候,弹出提示信息: 生成下面的模块时,启用了优化或没有调试信息: C:\WINDOWS\Micr ...

  2. Geodatabase - 打开栅格数据

    打开栅格数据 和打开要素类的方式类似,打开栅格数据集需要用 IRasterWorkspace,如 //获得栅格工作空间(普通目录). public ESRI.ArcGIS.DataSourcesRas ...

  3. 在MVC中利用uploadify插件实现上传文件的功能

    趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...

  4. 从零开始制作Minecraft启动器(C++开源)

    从零开始制作Minecraft启动器(C++开源) 新手飙车了~~~,MC启动器源码大放送,随心所欲打造自己的专属MC启动器,这不是易语言,是C++...分析原理,关键源码都有详细的注释,代码编好就打 ...

  5. Hibernate插入数据效率测试

    硬件配置: 4G内存.CPUi3-2.3 数据库SQL2008 package com.pan.test; import org.hibernate.Session; import org.hiber ...

  6. test在博客中嵌入实例代码

        // 其实很简单,只要把css.div.js代码直接写在里面就可以了.通过查看源代码就能看得很清楚了. 要注意的一点就是:如果div里没有任何内容,则它会被(博客网)删除掉,所以即使没有内容, ...

  7. Css3抖动

    http://files.cnblogs.com/xinlinux/csshake.min.css <div class="shake">AAA</div> ...

  8. [转]NopCommerce MVC 插件机制分析

    原文地址:http://www.cnblogs.com/haoxinyue/archive/2013/06/06/3105541.html 基本原理 插件话的应用程序一般都是先定义插件接口,然后把插件 ...

  9. Java学习笔记--注解

    注解的使用与实例:http://www.cnblogs.com/pepcod/archive/2013/02/16/2913474.html 注解的作用及使用方法:http://wenku.baidu ...

  10. ServletConfig对象 【通过此对象获取到web.xml中的信息】

    用途:       1)想让当前的Servlet读取一些在web.xml文件配置的初始化参数时,                      可以使用ServletConfig对象,他是Servlet运 ...