首先分清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. 【读书笔记】【深入理解ES6】#9-JavaScript中的类

    大多数面向对象的编程语言都支持类和类继承的特性,而JavaScript却不支持这些特性,只能通过其他方法定义并关联多个相似的对象.这个状态一直从ECMAScript 1持续到ECMAScript 5. ...

  2. 一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](四)

    前言 上一篇<一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](三)>,我们完成了: * 引用SqlSugar * ...

  3. BZOJ 3106: [cqoi2013]棋盘游戏（对抗搜索）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3106 对抗搜索,f[x][y][a][b][c][d]表示当前谁走,走了几步,及位置. (因为 ...

  4. 废旧鼠标先别丢，用来学习nRF52832 的QDEC

    刚发现nRF52832有一个 QDEC,SDK13.0中还有驱动,但是不太友好.  如果大家有废旧鼠标,建议拆一个编码器下来“学习”.鼠标的一般原理如下: 图一 图中那个SW4 ALPS EC10E  ...

  5. AMD规范学习笔记

    背景 NodeJS的一套比较简洁 Moudles 规范, 使得在服务器端的模块化变得更加简单.很长一段时间,很多公司或者项目都有自己的一套模块化机制, 却未能形成一套统一的标准, NodeJS的Mou ...

  6. “此主机支持 Intel VT-x，但 Intel VT-x 处于禁用状态”的问题的解决

    虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...

  7. Python 爬取美女图片，分目录多级存储

    最近有个需求:下载https://mm.meiji2.com/网站的图片. 所以简单研究了一下爬虫. 在此整理一下结果,一为自己记录,二给后人一些方向. 爬取结果如图:   整体研究周期 2-3 天, ...

  8. js截取字符串的方法

    1,slice(a, b) 第一个参数表示起始位置,第二个表示截取到但不包含 关于参数正负问题,只要记住一点:永远不能倒着截取!否则返回空字符串 2,substring(a, b) 第一个参数表示起始 ...

  9. TF-卷积函数 tf.nn.conv2d 介绍

    转自 http://www.cnblogs.com/welhzh/p/6607581.html 下面是这位博主自己的翻译加上测试心得 tf.nn.conv2d是TensorFlow里面实现卷积的函数, ...

  10. JavaScript 字符串与对象互换

    对象转字符串: var str = JSON.stringify(obj); 字符串转对象: var str = JSON.parse(str);