今天跟着资料做了一个示例，为什么我感觉自己做的没书上的好看呢？好吧，我承认自己对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. XAML 命名空间和命名空间映射

    本主题将介绍大部分 XAML 文件的根元素中存在的 XML/XAML 命名空间 (xmlns) 映射.它还将介绍如何为自定义类型和程序集生成类似的映射. XAML 命名空间如何与代码定义和类型库相关 ...

  2. 【转】使用 Eclipse 调试 Java 程序的 10 个技巧

    你应该看过一些如<关于调试的N件事>这类很流行的帖子 .假设我每天花费1小时在调试我的应用程序上的话,那累积起来的话也是很大量的时间.由于这个原因,用这些时间来重视并了解所有使我们调试更方 ...

  3. svn服务器的配置步骤

    1.安装客户端: TortoiseSVN-1.9.3.27038-x64-svn-1.9.3.msi下载地址:http://jaist.dl.sourceforge.net/project/torto ...

  4. Ajax从服务器端获取数据---原生态Ajax

    写在前面的话 Ajax从服务器获取的数据都是字符串,但是通过不同的解析,可以解析为XML或JSON来进行应用. 一般来说.使用XML格式的数据比较通用,但是服务器和客户端解析起来都比较复杂一些;而使用 ...

  5. C#string与char互转

    string s = "asdf"; //字符转char char[] c = s.ToCharArray(); Console.WriteLine(s[]); //char转st ...

  6. poj3685 二分套二分

    F - 二分二分 Crawling in process... Crawling failed Time Limit:6000MS     Memory Limit:65536KB     64bit ...

  7. 网站UV，与IP、PV

    什么是网站UV,与IP.PV在概念上的区别? UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客.00:00-24:00内相同的客户端只被计算一次. PV(访问量) ...

  8. HTML&CSS基础学习笔记1.18-表格的边框

    今天的内容比较简单~来看看HTML里表格的边框是怎么设置的吧 表格的边框 前面为了方便观察表格单元格的情况,我们给<table>加了border属性.<table>的borde ...

  9. swift字典集合－备

    Swift字典表示一种非常复杂的集合,允许按照某个键来访问元素.字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合.键集合是不能有重复元素的,而值集合是可以重复的,键和值是成 ...

  10. Qt error:QtThese QT version are inaccessible

    安装完Qt Add-in 打开VS2013的时候出现标题错误. QTDIR 需要设置成Qt安装目录下的vc,这个vc目录下包含include,lib,bin等文件夹.或者是在Qt Option里面设置 ...