一.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. [原]Escape From the iOS Sanbox on Jailbreak Device

    just my thinking, 3 ways to escape from sandbox on jailbreak device, to do file copying or execute s ...

  2. DevExpress 学习使用之 PrintSystem

    这是来自群里边的一段,收集起来,碎片知识是很珍贵的.  傷心孤影(2072201)  16:14:41导出excel加标题用PrintableComponentLink小宝(462561442)  1 ...

  3. 使用传入的总记录数实现一条sql语句完成分页查询

    使用传入的总记录数实现一条sql语句完成分页查询     问题:在传统的分页查询的实现中不可避免的需要两条sql语句,一条用于查询数据一条用于查询总记录数.如下面的实际代码所示: Img1 当然如果使 ...

  4. LigerUI权限系统之用户管理

    用户管理较之前的的组织结构和菜单管理稍显复杂.不管怎样还是先上图吧,再来讲解 左边是组织结构,右边是用户,用户是跟组织机构挂钩的,通过点击左边的组织结构,来刷新右边,加载该组织机构下的用户. 用户管理 ...

  5. 持续集成环境Gitlab-CI的官方安装过程解析

    持续集成环境是一个非常重要的工具,在分工合作的项目中有着举足轻重的作用.公司最近要用Gitlab,需要配套的持续集成环境.研究了官方的文档,感觉官方的文档不是很明了.各种修改过后终于成功了.为了大家安 ...

  6. Introduction to SharePoint hierarchy

    /* Author: Jiangong SUN */ I've participated in a SharePoint 2010 project to build an intranet. Base ...

  7. Django入门实践（三）

    Django入门实践(三) Django简单应用 前面简单示例说明了views和Template的工作过程,但是Django最核心的是App,涉及到App则会和Model(数据库)打交道.下面举的例子 ...

  8. IOS设计模式学习（6）生成器

    1 前言 有时候,构建某些对象有多种不同方式.如果这些逻辑包含在构建这些对象的类中的单一方法中,构建的逻辑会非常荒唐(例如,针对各种构建需求的一大片嵌套if-else或者switch-case语句). ...

  9. toFixed()要注意的

    toFixed()是Number类型的一种方法,该方法是保留四舍五入取指定位数的小数点,但最终返回值类型是字符串.所以,刚开始用该方法的人要注意不要在计算时使用到该方法.

  10. 浅谈敏捷组织中PMO的角色

    所谓的"敏捷组织"其实并没有标准的模式,而且PMO(项目管理办公室)并没有一个标准的角色定义.有一个非常普遍的误解,公司在选择"敏捷"或者"瀑布&qu ...