首先分清jQuery对象和DOM对象，这两者可相互转化，如：

var $cr=$("#cr");          //jquery对象

var cr=$cr[0] ;             //DOM对象

var cr=$cr.get(0);         //DOM对象

var cr=document.getElementById("cr");     //DOM对象

var $cr=$(cr);                                      //jquery对象

jquery选择器：

1.无论元素是否存在，$("xx")都都是一个对象，因此判断语句应这样写：

if ($("xx").length>0) {

}

2.

基本选择器：

$("#id")    $(".class")     $("*")      $("div,span,p.myclass")

层次选择器：

$("div span")                    后代元素范围大，只要是后代都满足

$("div>span")                   子元素范围小，只能是一级子元素才被选中

过滤选择器：

$("div:first")     格式以：开头

内容过滤选择器：

$("div:contains(text)")   同样以：开头，但以内容作为过滤依据

可见性过滤选择器：

属性过滤选择器：

子元素过滤选择器：

表单属性过滤选择器：

exa

<!DOCTYPE html>

<html>

<head>

   <meta charset="utf-8">

   <title>example for html5</title>

   <script src="jquery.js" type="text/javascript"></script>

</head>

<body>

<div class="subcategorybox">

   <ul>

     <li><a href=#>佳能</a></li>

     <li><a href=#>索尼</a></li>

     <li><a href=#>三星</a></li>

     <li><a href=#>尼康</a></li>

     <li><a href=#>松下</a></li>

     <li><a href=#>卡西欧</a></li>

     <li><a href=#>富士</a></li>

     <li><a href=#>柯达</a></li>

     <li><a href=#>宾得</a></li>

     <li><a href=#>理光</a></li>

     <li><a href=#>奥林巴斯</a></li>

     <li><a href=#>明基</a></li>

     <li><a href=#>爱国者</a></li>

     <li><a href=#>其他</a></li>

   </ul>

</div>

<div class="showmore">

   <a href=# onclick="return false"><span>显示其他品牌</span></a>

</div>

<script type="text/javascript">

$(document).ready(function(){

$("div li:gt(6):not(last)").hide();

$(".showmore>a").click(

function(){

     if ($("li:hidden").length>0)

         {

            $(".showmore>a").html("精简显示品牌");

            $("li:hidden").show();}

     else

         {

            $(".showmore>a").html("显示其他品牌");

            $("div li:gt(6):not(:last)").hide();

         }

});        

});

</script>

</body>

</html>

锋利的jQuery笔记的更多相关文章

  1. jQuery总结或者锋利的jQuery笔记二

    第三章  jQuery 中 DOM 操作 , 进入这一章,你必须先要有 选择器的基础, 最好是基本选择器 (id,class,*,div,p 组合等) ,  层次选择器(div ul),(div> ...

  2. 【6】锋利的 jQuery 笔记

    1. 代码技巧 1. 利用 id, class 实现同级隐藏显示 效果如下: 2. 字体放大效果 效果图: 3. tab 切换 效果图: 4. 切换样式 添加 Cookie 效果图: 5. 编写插件 ...

  3. jQuery总结或者锋利的jQuery笔记一

      在线测试脚本网站 层次 选择器要多花时间看看. 第一章: hover = enter+leave jQuery对象 jQuery产生的对象时jQuery独有的,只能自己调用 var $c=$(&q ...

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

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

  5. 《锋利的jQuery》读书笔记（DOM+事件）

    前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了. 1.DOM加载后执行JS $(document).ready(function(){ //.... ...

  6. 《锋利的JQuery》读书要点笔记1——认识JQuery&&选择器

    <锋利的jQuery>源码下载,包括了这本书中全部代码以及用到的CSS文件 第一章 认识jQuery jQuery是个Js库.首先该明确的一点是:在jQuery库中$就是jQuery的一个 ...

  7. JQuery笔记汇总

    jQuery相关资料 官网: jQuery官网 在线API: jQuery在线API W3School:W3School-jQuery教程(中文版哦) 下载jQuery:jQuery各版本下载 jQu ...

  8. jQuery笔记总结

    来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一 ...

  9. jquery笔记之属性选择器 查找以某种条件开头的页面元素

    jquery笔记之属性选择器 查找以某种条件开头的页面元素 转载:http://www.blogbus.com/amyqiong-logs/78340326.html $("div[id]& ...

随机推荐

  1. VS2015配置内核WDK7600环境,32位下.

    VS2015配置内核WDK7600环境,32位下. 学习内核驱动的编写,就要会配置环境.不然总是用记事本编写.比较不方便. 环境配置如下. 1.首先下载WDK7600, 课堂资料代码中已经上传.链接: ...

  2. 《JAVA程序设计与实例》记录与归纳--继承与多态

    继承与多态 概念贴士: 1. 继承,即是在已经存在的类的基础上再进行扩展,从而产生新的类.已经存在的类成为父类.超类和基类,而新产生的类成为子类或派生类. 2. Java继承是使用已存在的类的定义作为 ...

  3. 简单的vuex 的使用

    1. npm install vuex 2. 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮之意),store 文件下 新建文件 i ...

  4. js中常用的操作字符串的方法大全

    charCodeAt()返回一个整数,代表指定字符的Unicode编码 fromCharCode()从一些Unicode字符串得到一个字符串  charAt()根据指定下标位置返回对应字符,如果下标超 ...

  5. 180114 用装饰器实现在不改变函数调用者的代码基础上，实现在函数执行前后分别打印"before" 和 "after"

    def bef_aft(func): #定义一个名为bef_aft的函数名 ,()里的是函数的参数,设置为func, 函数的参数分为实参和形参,有个参数传递的概念 ,下面有很多的解释 def PRin ...

  6. Flask框架

    FLask框架的简单介绍 Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请 ...

  7. Sql的基础知识技巧（三）

    三.技巧 1.1=1,1=2 的使用,在 SQL 语句组合时用的较多 "where 1=1" 是表示选择全部 "where 1=2"全部不选, 如:if @st ...

  8. poj 3294

    Life Forms Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 12688   Accepted: 3552 Descr ...

  9. POJ 2209 The King(简单贪心)

    The King Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 7499   Accepted: 4060 Descript ...

  10. [51nod1673]树有几多愁

    lyk有一棵树,它想给这棵树重标号. 重标号后,这棵树的所有叶子节点的值为它到根的路径上的编号最小的点的编号. 这棵树的烦恼值为所有叶子节点的值的乘积. lyk想让这棵树的烦恼值最大,你只需输出最大烦 ...