一.jquery选择器

基本选择器

层次选择器

过滤选择器

基本过滤

内容过滤

可见性过滤

属性过滤

子元素过滤

first  : 获取单个元素       $("div:first").css("background","red");

first-child   ：获取集合 获取每一个父元素的第一个元素    $("div:first-child").css("background","red");

以下类似

last 与last-child   nth-child 与 eq

==============================================

：parent    选取含有子元素或者文本元素  $("div:parent").css("background","aquamarine");

：parents

表单属性过滤

：checked   单选框 复选框

：selected  下拉框

表单选择器

不一一举例。之讲解一些自己经常误解的

<script type="text/javascript">

$(function(){

//注意区分类似这样的选择器

//虽然一个空格，却截然不同的效果.

var $t_a = $('.test :hidden');   //后代选择器

var $t_b = $('.test:hidden');     //过滤选择器

var len_a = $t_a.length;

var len_b = $t_b.length;

$("<p>$('.test :hidden')的长度为"+len_a+"</p>").appendTo("body");

$("<p>$('.test:hidden')的长度为"+len_b+"</p>").appendTo("body");

})

</script>

二. 模板文件

<body>

<button id="reset">手动重置页面元素</button>

<input id="isreset" type="checkbox" checked="checked"><label for="isreset">点击下列按钮时先自动重置页面</label><br><br>

<h3>基本选择器.</h3>

<!-- 控制按钮 -->

<input id="btn1" type="button" value="选择 id为 one 的元素.">

<input id="btn2" type="button" value="选择 class 为 mini 的所有元素.">

<input id="btn3" type="button" value="选择 元素名是 div 的所有元素.">

<input id="btn4" type="button" value="选择 所有的元素.">

<input id="btn5" type="button" value="选择 所有的span元素和id为two的元素.">

<br><br>

<!-- 测试的元素 -->

<div class="one" id="one">

    id为one,class为one的div

    <div class="mini">class为mini</div>

</div>

<div title="test" class="one" id="two">

    id为two,class为one,title为test的div.

    <div title="other" class="mini">class为mini,title为other</div>

    <div title="test" class="mini">class为mini,title为test</div>

</div>

<div class="one">

    <div class="mini">class为mini</div>

    <div class="mini">class为mini</div>

    <div class="mini">class为mini</div>

    <div class="mini"></div>

</div>

<div class="one">

    <div class="mini">class为mini</div>

    <div class="mini">class为mini</div>

    <div class="mini">class为mini</div>

    <div title="tesst" class="mini">class为mini,title为tesst</div>

</div>

<div class="none" style="display:none;">

    style的display为"none"的div

</div>

<div class="hide">class为"hide"的div</div>

<div>

    包含input的type为"hidden"的div<input type="hidden" size="8">

</div>

<span id="mover" style="height: 70.5px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; margin-top: 2.5px; margin-bottom: 2.5px; display: block;">正在执行动画的span元素.</span>

</body>

三

四. 举个栗子

<script type="text/javascript">

$(function(){                                     //  等待DOM加载完毕.

    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();                            //  隐藏$category

                $(this).find('span')

                    .css("background","url(img/down.gif) no-repeat 0 0")

                    .text("显示全部品牌");                  //改变背景图片和文本

                $('ul li').removeClass("promoted");            // 去掉高亮样式

          }else{

                $category.show();                            //  显示$category

                $(this).find('span')

                    .css("background","url(img/up.gif) no-repeat 0 0")

                    .text("精简显示品牌");                  //改变背景图片和文本

                $('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")

                    .addClass("promoted");                //添加高亮样式

          }

        return false;                              //超链接不跳转

    })

})

</script>

【锋利的Jquery】读书笔记二的更多相关文章

  1. 锋利的jQuery读书笔记---选择器

    前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...

  2. 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件

    serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...

  3. 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法

    load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...

  4. 锋利的jQuery读书笔记---jQuery中Ajax--load方法

    第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  5. 锋利的jQuery读书笔记---jQuery中动画

    jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...

  6. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  7. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  8. <锋利的jQuery>读书笔记

  9. Javascript & JQuery读书笔记

    Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...

  10. 《你必须知道的.NET》读书笔记二：小OO有大原则

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...

随机推荐

  1. JUC锁机制

    JUC锁机制(Lock)学习笔记,附详细源码解析 JUC锁机制(Lock)学习笔记,附详细源码解析 2013-08-22 20:03 by CM4J, 56 阅读, 0 评论,收藏, 编辑 锁机制学习 ...

  2. ASP.NET基础之HttpModule学习

    最近学习WCF知识时看到有关IIS版本的知识,发现对HttpContext,HttpModule,HttpHandler的内容都不是很了解,这三个也是ASP.NET相对基础的内容,晚上特地花点时间针对 ...

  3. 多平台Client TCP通讯组件

    Beetle.NetPackage是一个多平台Client Socket TCP通讯组件(Apache License 2.0),组件制统一的对象协议制定规则,可以灵活方便地通过对象来描述TCP通讯交 ...

  4. 在Visual Studio 2012中使用VMSDK开发领域特定语言1

    在Visual Studio 2012中使用VMSDK开发领域特定语言(一)   前言 本专题主要介绍在Visual Studio 2012中使用Visualization & Modelin ...

  5. IIS7中 ASP.NET授权功能如何实现对静态文件的控制

    IIS7中 ASP.NET授权功能如何实现对静态文件的控制 前序 .net提供了3种用户认证的方式,分别是Windows,Forms,Passport.这几种形式的定义可以在网站根目录下Web.con ...

  6. CentOS 下搭建部署独立SVN服务器全程详解(5.5)

    SVN服务器有2种运行方式: 1.独立服务器(例如:svn://xxx.com/xxx): 2.借助apache   (例如:http://svn.xxx.com/xxx): 为了不依赖apache, ...

  7. C++中const用法详解

    本文主要内容来自CSDN论坛: http://bbs.csdn.net/topics/310007610 我做了下面几点补充. 补充: 1. 用const声明全局变量时, 该变量仅在本文件内可见, 类 ...

  8. Python学习入门基础教程(learning Python)--6 Python下的list数据类型

    1. List是数组么? 答案是: 不是!Python 里面有一个非常强大的数据类型list.他什么都能装下!list里面既可以支持 int类型,也可以支持str类型. >>> li ...

  9. Objective-C非正式协议与正式协议

    这两个概念困扰我很久了,一直都很像搞清楚到非正式协议和正式协议有什么区别和联系,下面结合网上的资料和自己的看法谈谈这个问题. 一.非正式协议 显然这个名词是相对于正式协议而言的.在解释非正式协议之前, ...

  10. poj 2485 (kruskal算法)

    /*kruskal算法*/ #include <iostream> //#include <fstream> #include <algorithm> using ...