首先分清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. LVS集群TUN模式实例(5)

    LVS集群TUN模式实例 1. 实验拓扑图 2. 实验环境 4台CentOS6.2的服务器. 类型 IP DR eth0:10.20.73.20  VIP eth0:0 10.20.73.30 RS ...

  2. bzoj:1723: [Usaco2009 Feb]The Leprechaun 寻宝

    Description 你难以想象贝茜看到一只妖精在牧场出现时是多么的惊讶．她不是傻瓜,立即猛扑过去,用她那灵活的牛蹄抓住了那只妖精．     “你可以许一个愿望,傻大个儿!”妖精说．     “财富 ...

  3. COGS 2482. Franky的胡子【二分，高精度】

    2482. Franky的胡子 ☆   输入文件:beard.in   输出文件:beard.out   简单对比 时间限制:1 s   内存限制:128 MB [题目描述] Franky很苦恼他一直 ...

  4. Java学习之类的构建方法（函数）

    在学习类的部分时,建立一个对象是这样建立的:(假设Person是类)Person  p = new  Person():我一直很费解为何new后面是一个函数形式, 今天学完构建方法后,才恍然大悟,豁然 ...

  5. SPOJ GSS1_Can you answer these queries I(线段树区间合并)

    SPOJ GSS1_Can you answer these queries I(线段树区间合并) 标签(空格分隔): 线段树区间合并 题目链接 GSS1 - Can you answer these ...

  6. android手机安全卫士、Kotlin漫画、支付宝动画、沉浸状态栏等源码

    Android精选源码 轻量级底部导航栏   android手机卫士源码   android实现高仿今日头条源码   一个用Kotlin写的简单漫画App源码   android吐槽项目完整源码   ...

  7. Django App(一) StartApp

    经过配置Pycharm在上一次的笔记中,已经解决了编写Django web程序调试的问题,这篇将记录Django官网提供的例子程序!          1.查看Pycharm terminal是否可用 ...

  8. 用.net中的SqlBulkCopy类批量复制数据 （转载）

    在软件开发中,把数据从一个地方复制到另一个地方是一个普遍的应用. 在很多不同的场合都会执行这个操作,包括旧系统到新系统的移植,从不同的数据库备份数据和收集数据. .NET 2.0有一个SqlBulkC ...

  9. Oracle_基本函数查询综合

    Oracle_基本函数查询综合 --[1]查询出每各月倒数第三天受雇的所有员工 select;   --[2]找出早于30年前受雇的员工 select>; select; select;     ...

  10. 将本地的项目导入到github仓库总结lxw

    关键步骤: 第一:git clone https://github.com/lxw18231857001/demo-.git           #把github上面的仓库克隆到本地 本地项目文件夹下 ...