一.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. [转]ARM64 Function Calling Conventions

    from apple In general, iOS adheres to the generic ABI specified by ARM for the ARM64 architecture. H ...

  2. sqlserver2005级联删除

    在你建表,建主外键的时候,在下面有几个选项,有一个是级联删除和一个级联更新,勾选上就可以了

  3. OpenRisc-34-ORPSoC跑eCos实验

    引言 ORPSoC目前支持好几种OS,除了前面一直介绍的linux,还支持eCos,eCos是RTOS,如果你的系统对时间的要求比较高,那eCos会是一个不错的选择. 本小节就简单介绍一下,在ORPS ...

  4. [转] 数据库加锁 sql加锁的

    [导读: 各种大型数据库所采用的锁的基本理论是一致的,但在具体实现上各有差别.SQL Server更强调由系统来管理锁.在用户有SQL请求时,系统分析请求,自动在满足锁定条件和系统性能之间为数据库加上 ...

  5. OC之OC与C的比较

    1. 从编写.编译.链接的流程. 1). 创建1个.m的源文件. 2). 在这个文件中写上符合OC语法规范的源代码. 3). 编译. a. 预编译: 执行预处理代码. b. 检查语法. c. 生成目标 ...

  6. C++ 头文件系列(queue)

    简介 这个头文件定义了两个跟队列有关的类----quque.priority_queue,分别实现的是队列 和 优先队列这两个概念. 但是与这两个类模版与其它类模版(vector.array等)最大的 ...

  7. MVC源码解析 - HttpRuntime解析

    先看一张图, 从这张图里, 能看到请求是如何从CLR进入HttpRuntime的. 一.AppManagerAppDomainFactory 看到这张图是从 AppManagerAppDomainFa ...

  8. java初学者

    决心开始从头学习java,并且每天记录自己的学习进度与学习成果,用于分享和促进. 鉴于是新手,并且之前也没有任何发文的经历,可能更多的是根据自己已有的知识容量基础之上进行的深化,太基础的看一遍就能会的 ...

  9. jsp Ajax请求(返回json数据类型)

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  10. C＃中int32 的有效值范围

    C#中int32 的有效值范围是[Int32.MinValue, Int32.MaxValue]中的整数,或者说是从 -2^16 到 2^16-1 之间的整数