首先分清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. springboot整合mybaits注解开发

    springboot整合mybaits注解开发时,返回json或者map对象时,如果一个字段的value为空,需要更改springboot的配置文件 mybatis: configuration: c ...

  2. Elixir的Phoenix框架：请求处理之道

    本文基于Phoenix1.3,但请求的处理流程跟1.2基本一致,只是模块的命名和目录结构有所差异. 简单介绍,phoenix是一个网站框架,本质就是http请求处理.这篇文章主要就是讲一个请求,在结果 ...

  3. dead loop、continue & break、while...else语句

    Dead loop 死循环,一经触发就会永远运行下去. continue & break 如果在循环过程中,因为某些原因,你不想继续循环了,就要用到break 或 continue语句. br ...

  4. asp.net权限认证篇外：4种认证类型比较

    1.基本认证,这是以base64加密用户口令并通过http header传输的一种认证方式,但是很容易被破解,因为base64解密没有任何难度: 如果数据被截包,会直接泄露用户口令:所以一般情况下都不 ...

  5. 【批处理学习笔记】第十三课:常用dos命令（3）

    网络命令ping 进行网络连接测试.名称解析ftp 文件传输net 网络命令集及用户管理telnet 远程登陆ipconfig显示.修改TCP/IP设置msg 给用户发送消息arp 显示.修改局域网的 ...

  6. Free Pascal初次体验(有亮点哦)

    感觉上Pascal语言写的非常有条理,和英语很像,应该是比较容易学,但是写起来真的是麻烦的要死,平时一行代码用C/C++可能就是几秒钟,用Pascal就要几分钟,Free Pascal感觉也不是很好用 ...

  7. Codeforces 833E Caramel Clouds

    E. Caramel Clouds time limit per test:3 seconds memory limit per test:256 megabytes input:standard i ...

  8. string::npos的一些说明

    一.定义 std:: string ::npos的定义: static const size_t npos = -1; 表示 size_t 的最大值( Maximum value for size_t ...

  9. 2017年 JavaScript 框架回顾 -- React生态系统

    前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...

  10. PHP操作MySQL对表增加一列（一个字段）

    2014-03-19 16:59 1471人阅读 评论(0) 收藏 举报 分类: MySQL(12) 对于已经建立好的数据库,在一个已经有字段的表内新加字段可用以下方法: mysql_query(&q ...