一.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. CSS 选择器的学习

    从蛋学习 CSS 选择器 + 做一个 Jumony 桌面工具,真费劲,目前Jumony Tool两大问题无法解决,完美的显示 html 文档和根据结果在文档中定位,有点儿跑题了…… 1. 选择“cla ...

  2. 图解Javascript之字符串

    好东西分享给大家,但要尊重事实!!!因此特别说明:本图非我本人亲自所作,乃我大天朝网友所绘制.个人感觉此图,覆盖全面,细节考虑甚周全,因此分享给大家,同时在此特别感谢网友的无私分享!

  3. Weka开发［2］－分类器类

    这次介绍如何利用weka里的类对数据集进行分类,要对数据集进行分类,第一步要指定数据集中哪一列做为类别,如果这一步忘记了(事实上经常会忘记)会出现“Class index is negative (n ...

  4. ASP.NET网页动态添加、更新或删除数据行

    ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...

  5. Enlightenment笔记

    Enlightenment是一个文件管理器(曾经), 随着发展, 现在的目标已经是创建一个跟xfce, kde等一样的桌面环境. 作为一个用的人不多, 兼容性一般般, bug还不少的桌面环境, E的最 ...

  6. 在使用simplexml_load_file()函数读取xml文件时遇到<![CDATA[]]>，怎么让其进行解析

    simplexml_load_file ( '1394.xml', 'SimpleXMLElement', LIBXML_NOCDATA ); 使用这个函数里面的这两个参数

  7. 通过NSURL获取网络标准时间

    - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typica ...

  8. iOS 测试驱动开发

    测试驱动开发是敏捷开发的一部分,它一般有“red-green- refactor”步骤 iOS测试驱动开发的工具 一. OCUnit 是Xcode自带的测试工具 其使用步骤分为 1 建立测试的Targ ...

  9. java.io.IOException: Unable to open sync connection!的解决方案

    在学习Android的时候,经常是使用手机调试程序,很方便,后来 在使用手机调试程序的时候出现了 [2012-03-08 11:27:43 - Tea_marsListActivity] ------ ...

  10. Android 检测是否连接蓝牙耳机

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...