前言:第一次写博客有点紧张233333,我会在博客里放一下在赌这本书过程中遇到的一些有用的知识点,希望等帮助到大家。好了正题开始(只要是我不知道该说啥了= =) 

一,资源(在w3cfuns资源中可以找到第一版和第二版

         《锋利的jquery》: http://pan.baidu.com/share/link?shareid=1725756399&uk=4245516461(PDF)

                                       http://www.readfar.com/books/5520ce503063e1f304000696(ebup)

二、个人整理的一些内容

  1.解决Jq与其他库的冲突问题

    在jQuery库中,几乎所有插件都被限制在自己的命名空间里。通常,全局对象都被很好的存在jQuery命名空间里,与其他js库共用时一般不会产生冲突如(Prototype、MooTools、YUI)

    1.jQuery库在其他库之后导入(这里指<head>引用js库的顺序)

      (1)如果想确保jQuery不会与其他库冲突,又想自定义一个快捷方式,可以进行如下操作

          自定义一个快捷方式,将$转让给其他库使用

  1. var $j = jQuery.noConflict(); //自定义一个快捷方式
  2. $j(function(){ //使用jQuery,利用自定义快捷方式$j
  3. $j("p").click(function(){
  4. alert( $j(this).text() );
  5. })
  6. })
  7. $("XX").style.display = 'none' ; //使用prototype.js

(2)如果不想备用名称,还想使用$,且不相与其他库冲突,可以进行如下操作

              1)转让$给其他库,然后在jQuery设定页面内使用jQuery的 ' $ ' ,在外部使用其他库的 ' $ '

  1. jQuery.noConflict(): //将变量$的控制权转让
  2. jQuery(function($){ //在使用jQuery的页面加载时时执行的函数
  3. $("p").click(functin(){ //在函数内部继续使用$()方法
  4. alert( $(this).text() );
  5. })
  6. })
  7. $("XX").style.display = 'none'; //在函数外部使用prototype.js

             2)定义匿名函数并设置形参为$

  1. jQuery.noConflict(); //将变量$的控制权转让给其他库
  2. (function($){ //定义匿名函数,形参为$
  3. $(function(){ //匿名函数内的$均为jQuery
  4. $("p").click(function(){
  5. alert( $(this).text() ); //继续使用jQuery的$()方法
  6. });
  7. });
  8. })(jQuery); //执行匿名函数且传递实参jQuery
  9. $("XX").style.display = 'none'; //使用prototype.js

     2.jQuery库在其他库之前导入

      直接使用”jQuery“来使用jQuery库的函数,同时" $() "方法作为其他库的快捷方式,无需调用noConflict()函数

  1. jQuery(function(){ //直接使用jQuery,无需调用 "jQuery.noConflict()" 函数
  2. jQuery("p").click({
  3. alert( jQuery(this),text() );
  4. })
  5. })
  6. $("XX").style.display = 'none'; //在jQuery函数外部使用prototype.js

        2.jQuery选择器

              jQuery选择器完全继承了CSS的风格,利用jQuery选择器,可以非常便捷的找出特定 DOM 元素。

    1.完善的处理机制

        (1)使用jQuery选择器可以避免因使用传统的getElementById()等函数因无法找到页面元素而报错的情况,jQuery选择器即使获取不到元素也不会报错

  1. .demo{ //给class为demo的元素添加样式
  2. }
  3. $(".demo").click(function(){ //给class为demo的元素添加点击事件
  4. })
  5.  
  6. //传统函数
  7. if(document.getElementById("XX")){ //为避免找不到元素而进行非空检测
  8. document.getElementById("XX"),style.color = "red";
  9. }
  10. //jQuery选择器
  11. $(’#XX‘).css("color","red"); //无需判断是否存在

(2) 判断网页上是否存在元素时,应注意$('#XX')获取的永远是对象

  1. //错误实例
  2. if($('#XX ')){
  3. //Do something
  4. }
  5.  
  6. //根据获取到元素的长度判断
  7. if( $('#XX').length>0 ){
  8. //Do something
  9. }
    //或者转化为DOM对象判断
  10. if( $('#XX')[0] ){
  11. //Do something
    }

2.一些神奇的选择器与jQuery等价方法

             (2-6)选取prev元素后的下一个<div>同辈元素,(2-7)选取id为 "prev" 的元素后面所有的<div>同辈元素

3.过滤选择器

通过特定的过滤规则筛选所需DOM元素,与CSS的伪类选择器语法校内沟通,都以(:)开头。

      1.基本过滤选择器

2.内容过滤选择器

3.属性过滤器

  1. [attribute] 一一选取拥有此属性的元素
  2. [attribute1][attribute2][attribute3]选择满足多个条件的元素(每选择一次,缩小范围一次)

  3. [arrtibute XX value]中XX为如下符号是分别代表不同的涵义

  4. "=" 一一属性的值为value "*=" 一一属性的值含有value
  5.  
  6. "^=" 一一属性的值以value开始 "$=" 一一属性的值以value结束
  7.  
  8. "!=" 一一属性的值不等于value(没有属性arrtibute的元素也会被选取)
  9.  
  10. "~=" 一一选取属性用空格分隔的值中包含一个给定的元素(例如 $('div'[title~="uk"]') 选取<div title="uo uk Aodo"/>元素)

4.表单对象属性过滤

4.选择器中的一些注意事项

                      1.选择器中含有 “.”、“#”、“(”、“]” 等特殊字符

  1. <div id="id#b">bb</div> //错误:$("#id#b") 正确:$("#id\\#b");
  2. <div id="id[1]">cc</div> //错误:$("#id[1]") 正确:$("#id\\[1\\] ");

2.选择器中“空格”的坑

有如下代码

  1. <div class = "test">
  2. <div style = "display:none;">aa</div>
  3. <div style = "display:none;">bb</div>
  4. <div style = "display:none;">cc</div>
  5. <div class = "test" style = "display:none;">dd</div>
  6. </div>
  7. <div class = "test" style = "display:none;">ee</div>
  8. <div class = "test" style = "display:none;">ff</div>

                     使用jQuery选择器获取他们,会获取不同的结果。之所以会出现这种情况是因为后代选择器和过滤选择器的不同

  1. var $t_a = $('.test :hidden'); //带空格的jQuery选择器(后代选择器,选择class为“test”的后代元素里hidden的元素)
  2. var $t_b = $('.test:hidden'); //不带空格的jQuery选择器(过滤选择器,选择隐藏的class为“test”的元素)
  3. var len_a = $t_a.length;
  4. var len_b = $t_b.length;
  5. alert(" $('.test :hidden') = " + len_a); //输出 4
  6. alert(" $('.test:hidden') = " + len_b); //输出 3

三、实例

实现品牌列表的精简显示和全部显示效果图如下。单击“显示全部商品”按钮时,显示全部品牌,列表部分高亮显示;单击“精简显示品牌”按钮时,隐藏部分品牌,高亮显示消失。

html页面

  1. <div class="SubCategoryBox">
  2. <ul>
  3. <li><a href="#">佳能</a><i>(30440)</i></li>
  4. <li><a href="#">索尼</a><i>(27220)</i></li>
  5. <li><a href="#">三星</a><i>(20284)</i></li>
  6. <li><a href="#">尼康</a><i>(56210)</i></li>
  7. <li><a href="#">松下</a><i>(261230)</i></li>
  8. <li><a href="#">卡西欧</a><i>(9440)</i></li>
  9. <li><a href="#">富士</a><i>(20540)</i></li>
  10. <li><a href="#">柯达</a><i>(29446)</i></li>
  11. <li><a href="#">宾得</a><i>(16444)</i></li>
  12. <li><a href="#">理光</a><i>(30450)</i></li>
  13. <li><a href="#">奥林巴斯</a><i>(30120)</i></li>
  14. <li><a href="#">明基</a><i>(12340)</i></li>
  15. <li><a href="#">爱国者</a><i>(15440)</i></li>
  16. <li><a href="#">其他品牌相机</a><i>(3440)</i></li>
  17. </ul>
  18. <div class="showmore">
  19. <a href="more.html"><span>显示全部品牌</span></a>
  20. </div>
  21. </div>

css部分

  1. * {
  2. margin:;
  3. padding:;
  4. }
  5.  
  6. .clearfix {
  7. content: "";
  8. clear: both;
  9. }
  10.  
  11. .SubCategoryBox {
  12. width: 600px;
  13. border: 1px solid #ccc;
  14.  
  15. padding: 10px;
  16. position: relative;
  17. left: 30%;
  18. }
  19.  
  20. .SubCategoryBox ul {
  21. list-style: none;
  22. }
  23.  
  24. .SubCategoryBox ul li {
  25. float: left;
  26. width: 33.3%;
  27. height: 30px;
  28. line-height: 30px;
  29. text-align: center;
  30. }
  31.  
  32. .SubCategoryBox ul li a {
  33. text-decoration: none;
  34. color: #000;
  35. }
  36.  
  37. .showmore {
  38. width: 100%;
  39. height: 30px;
  40. text-align: center;
  41. }
  42.  
  43. .showmore a {
  44. display: inline-block;
  45. width: 100px;
  46. height: 30px;
  47. line-height: 30px;
  48. border: 1px solid #ccc;
  49. padding: 2px;
  50. text-decoration: none;
  51. color: #000;
  52. }
  53.  
  54. .promoted {
  55. color: red;
  56. }

《锋利的JQ》摘抄(一) jq基础篇的更多相关文章

  1. Vue 基础篇

    Vue 基础篇 一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎 框架 -> 全方位.功能齐全 简易的DOM体验 + 发请 ...

  2. 你所不知道的库存超限做法 服务器一般达到多少qps比较好[转] JAVA格物致知基础篇:你所不知道的返回码 深入了解EntityFramework Core 2.1延迟加载(Lazy Loading) EntityFramework 6.x和EntityFramework Core关系映射中导航属性必须是public? 藏在正则表达式里的陷阱 两道面试题,带你解析Java类加载机制

    你所不知道的库存超限做法 在互联网企业中,限购的做法,多种多样,有的别出心裁,有的因循守旧,但是种种做法皆想达到的目的,无外乎几种,商品卖的完,系统抗的住,库存不超限.虽然短短数语,却有着说不完,道不 ...

  3. C#多线程之基础篇3

    在上一篇C#多线程之基础篇2中,我们主要讲述了确定线程的状态.线程优先级.前台线程和后台线程以及向线程传递参数的知识,在这一篇中我们将讲述如何使用C#的lock关键字锁定线程.使用Monitor锁定线 ...

  4. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  5. 2000条你应知的WPF小姿势 基础篇<15-21>

    在正文开始之前需要介绍一个人:Sean Sexton. 来自明尼苏达双城的软件工程师,对C#和WPF有着极深的热情.最为出色的是他维护了两个博客:2,000Things You Should Know ...

  6. ABP框架实践基础篇之开发UI层

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 说明 其实最开始写的,就是这个ABP框架实践基础篇.在写这篇博客之前,又回头复习了一下ABP框架的理论,如果你还没学习,请查看AB ...

  7. C#多线程之基础篇2

    在上一篇C#多线程之基础篇1中,我们主要讲述了如何创建线程.中止线程.线程等待以及终止线程的相关知识,在本篇中我们继续讲述有关线程的一些知识. 五.确定线程的状态 在这一节中,我们将讲述如何查看一个线 ...

  8. C#多线程之基础篇1

    在多线程这一系列文章中,我们将讲述C#语言中多线程的相关知识,在多线程(基础篇)中我们将学习以下知识点: 创建线程 中止线程 线程等待 终止线程 确定线程的状态 线程优先级 前台线程和后台线程 向线程 ...

  9. iOS系列 基础篇 03 探究应用生命周期

    iOS系列 基础篇 03 探究应用生命周期 目录: 1. 非运行状态 - 应用启动场景 2. 点击Home键 - 应用退出场景 3. 挂起重新运行场景 4. 内存清除 - 应用终止场景 5. 结尾 本 ...

  10. iOS系列 基础篇 04 探究视图生命周期

    iOS系列 基础篇 04 探究视图生命周期 视图是应用的一个重要的组成部份,功能的实现与其息息相关,而视图控制器控制着视图,其重要性在整个应用中不言而喻. 以视图的四种状态为基础,我们来系统了解一下视 ...

随机推荐

  1. CentOS7系列--1.1CentOS7安装

    CentOS7安装 1. 下载CentOS7 下载的网址为: http://isoredirect.centos.org/centos/7/isos/x86_64/ 2. CentOS7安装 2.1. ...

  2. OG数据预处理

    1.影像处理        ogCalcExtent --srs EPSG:26711 --inputdir D:/software/preprocess/data/bugaboos/ --filet ...

  3. 在RecyclerView列表滚动的时候显示或者隐藏Toolbar

    先看一下效果: 本文将讲解如何实现类似于Google+应用中,当列表滚动的时候,ToolBar(以及悬浮操作按钮)的显示与隐藏(向下滚动隐藏,向上滚动显示),这种效果在Material Design ...

  4. Android ListView的XML属性

    1.ListView的XML属性 android:divider //在列表条目之间显示的drawable或color android:dividerHeight //用来指定divider的高度 a ...

  5. 数据可视化d3.v4.js

    <html> <head> <meta charset="utf-8"> <title>做一个简单的条形图</title> ...

  6. spring boot(10)-tomcat jdbc连接池

    默认连接池 tomcat jdbc是从tomcat7开始推出的一个连接池,相比老的dbcp连接池要优秀很多.spring boot将tomcat jdbc作为默认的连接池,只要在pom.xml中引入了 ...

  7. Python-Image 基本的图像处理操作

    Python-Image 基本的图像处理操作,有需要的朋友可以参考下. Python 里面最常用的图像操作库是 Image library(PIL),功能上,虽然还不能跟Matlab比较,但是还是比较 ...

  8. jetty8 中的异常 There is an error in invoking javac. A full JDK (not just JRE) is required...

    在jetty文件夹下的start.ini文件里有这么一行"-Dorg.apache.jasper.compiler.disablejsr199=true"注释,把这个注释去掉,再启 ...

  9. jquery如何设置与去除disabled属性?五种方法

    //两种方法设置disabled属性 $('#areaSelect').attr("disabled",true); $('#areaSelect').attr("dis ...

  10. ORACLE闪回机制分析与研究应用

    1.查看数据库归档和闪回状态,及环境准备SQL> archive log list;SQL> select flashback_on from v$database;关闭数据库,启动归档和 ...