《锋利的jQuery》补充笔记

  1. 压缩:UglifyJS
  2. jquery对象转化为DOM对象使用[index]或者get(index)
  3. DOM对象转化为jquery对象使用$(DOM对象)
  4. jQuery.noConflict()是将变量的控制权移交给其他库,如果jQuery想要自定义一个快捷方式的话,就给它赋值一个变量。如果还想继续使用$又不和其他库发生冲突的话,就使用下面两种方法:

如果其他库在jQuery之前,就要先写jQuery.noConflict();,如果是在之后的话,就可以不用写。

(1)      jQuery(function($){在这里面写jQuery代码})

(2)      (function($){在这里面写jQuery代码})(jQuery);

  1. 在js中,当获取到的元素不存在的话就会出错,但是在jQuery中,是不会出错的,因此如果要在jQuery中判断某个元素是否存在的时候,就不能直接使用if($(‘#ss’)){}

可以使用下面的方法:

(1)      通过长度判断:if($(‘#ss’),length > 0){}

(2)      将jQuery对象转化为DOM对象if($(‘#ss’)[0]){}

  1. + 相当于 next()     是当前元素后面直接匹配的元素(同辈)

~ 相当于 nextAll()  是当前元素后面有匹配的所有元素(同辈)

sibling()            是当前元素前后有匹配的所有元素(同辈)

  1. 过滤选择器

(1)      基本过滤选择器

:first              :last        :even       :odd        :not()      :eq()【从0开始】

:gt()        :lt()         :header【所有标题元素】    :animated              :focus

(2)      内容过滤选择器

:contains(“”)          :empty【不包含子元素或文本】

:has(‘p’)             :parent【含有子元素和文本】

(3)      可见性过滤选择器

:hidden           :visible

(4)      属性过滤选择器

! ^      $   |(前缀- / 等于)     *(含有)  ~(空格分隔)

(5)      子元素过滤选择器

:ntn-child(index【从1开始】/even /odd /3n+1…(n从1开始) )

PS:3n+1解释为从第1个元素开始,每隔3个

:first-child            :last-child              :only-child(唯一的子元素(只有一个))

(6)      表单对象属性过滤选择器

:enable    :disable   :checked         :selected

(7)      表单选择器

:input【<input>/ <textarea>/ <select>/ <button>】     :text【单行文本】

:password      :radio     :hidden……

  1. 当遇到在html中,id/ class。。。包含有特殊字符? 、 #  (   ]等特殊字符的,不能直接获取,需要在特殊字符前面加上转义符转义一下(\\)
  2. 如果使用jQuery版本1.3.1以上的版本,不需要在(选择器)属性前面加上@,使用的话,可能会出错

10.创建元素节点:$(‘<li></li>’);  然后使用append添加

创建文本节点:$(‘<li>123</li>’);  然后使用append添加

创建属性节点,同上多加了属性

11.插入节点:

(1)      append()                内部   。。。加入。。。

(2)      appendTo()            内部   。。。加入到。。。

(3)      prepend()                     内部

(4)      prependTo()          内部

(5)      after()                   外部

(6)      insertAfter()          外部

(7)      before()                 外部

(8)      insertBefore()        外部

12.删除节点

remove()  本身连同后代节点一起被删除,绑定的事件失效

detach()   本身连同后代节点一起被删除,绑定的事件、附加数据保留下来

empty()   清空节点

13.复制节点

clone()  这样复制的元素不带有任何行为,想把绑定的事件也一同复制下来的话,就需要在()里面加上true

14.替换节点

replaceWith()        。。。替换成。。。

replaceAll()           用。。。替换。。。

PS:在替换的过程中,原本节点如果有绑定事件的话,也会一并被替换掉

15.包裹节点

wrap()       把。。。用。。。包裹起来(每个匹配的单独包裹) -----在外面

wrapAll()     把。。。用。。。包裹起来(每个匹配的一起包裹,而且被包裹的可能包含包含一些其他的元素)-----在外面

wrapInner()    把。。。用。。。包裹起来  -----在里面

16.属性操作

attr()

removeAttr()

addClass() //追加样式

removeClass()

toggle()  //切换样式

hasClass()  //是否含有某个样式

html()  // 相当于innerHTML,使用的时候里面的元素会全部被替换掉,也可以增加节点,增加的节点会被成为DOM元素

text()  // 相当于innerText, 里面的元素会全部被替换掉,也可以增加节点,增加的节点也会成为文本

val()  // 相当于value属性,用来设置和获取元素的值 ---输入框、按钮、单选、多选。。。

17.遍历节点

children() // 子元素

next() //后一个同辈元素

prev() //前一个同辈元素

siblings() // 前后所有同辈元素

closest() // 往上查找,直到找到最先匹配的元素,没有的话,则返回空

parent() // 上一级匹配的所有父级元素

parents() // 每一个匹配的所有祖先元素

18.CSS-DOM操作

css()

height() // 获取到的值不带单位

width()

position()

left()

right()

scrollTop() // 滚动条距离顶端距离,可以设置值 回到顶端 $(document).scrollTop(0);

scrollLeft()

19.事件

(1)      bind() // 事件绑定 多个绑定事件可以使用多个bind,也可以把事件类型用空格分开一次性绑定(推荐)

(2)      unbind()  //事件移除

(3)      one()

(4)      jquery1.7之后  on()    off()      deletage()     undeletage()

20.事件对象的属性:

(1)      event.type    事件发生的类型(click、mousrover…)

(2)      event.preventDefault ()

(3)      event.stopPropagation()

(4)      event.target   事件发生的元素

(5)      event.relateTarget

(6)      event.pageX / event.pageY

(7)      event.which  获取按键的code,比如单击鼠标的键,左中右(1、2、3)

(8)      event.metaKey

21.模拟操作

trigger()   比如:$(‘#btn’).trigger(‘click’);模拟单击事件

还有可以模拟用户自定义的事件,以及可以传递参数,传递的参数作为trigger的第二个参数

22.动画

(1)      show() 和  hide() ---改变display

(2)      fadeIn() 和 fadeOut() –改变透明度

(3)      slideUp() 和 slideDown() –改变高度

(4)      animate({设置参数},  speed,  callback);

可以设置累加和累减,比如{‘left’: ‘+=50px’}

可以在callback里面设置当前动画完成的时候要执行的效果方法

(5)      stop()  停止动画 里面放两个参数

第一个是否清空未执行的动画序列

第二个是否直接跳到末状态

(6)      is()  判断是否处在某种状态 比如:is(":animated”);

(7)      delay(1000) 延迟

(8)      toggle() 切换可见状态 – 改变高度、宽度、不透明度

(9)      slideToggle()  -- 改变高度

(10)  fadeTo() 把元素以渐变的方式调整到指定值   比如:fadeTo(600,0.2)

(11)  fadeToggle()   --改变不透明度

23.表单

(1)      设置disabled、checked属性的时候,不要使用attr,使用prop

(2)      表格

表格的odd和even的索引是从0开始的

24.Ajax

时间: 2024-10-23 18:38:34

《锋利的jQuery》补充笔记的相关文章

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

前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所以笔记和代码也就写到一起了.下面是选择器的记录: <!DOCTYPE html> <html> <head lang="zh"> <meta charset="UTF-8"> <script type="t

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

锋利的jQuery读书笔记 第6章、第9章 第10章

第六章 Ajax 全称为:“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形成的结合体.使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验. 一.Ajax的优势和不足 (1)优势主要以下几点: 1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可) 2.用户体验极佳(不刷新页面即可获取可更新的数据) 3.

锋利的jQuery读书笔记 第1章、第2章

第一章 一.常见的JavaScript类库 1.Prototype 2.Dojo 3.Yui 4.Ext JS 5.MooTools 6.jQuery 二.jQuery对象和DOM对象 1.DOM对象 文档对象模型,每一份DOM都可以表示成一颗树. 2.jQuery对象 jQuery对象就是通过jQuery包装DOM对象后产生的对象. (1)jQuery对象是jQuery对象独有的.如果一个对象是jQuery对象,那么就可以使用jQuery对象里的方法. (2)在jQuery对象中无法使用DOM

锋利的jQuery读书笔记---jQuery中的事件

jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../

锋利的JQuery学习笔记之JQuery

今天终于看到了最令我兴奋的一章:JQuery与Ajax的应用.AJAX即"Asynchronous JavaScript and XML"(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式应用的网页开发技术.在最初学习Ajax的日子里,我被ASP.NET AJAX框架提供的UpdatePanel迷惑了,以后Ajax就这么简单,所以在最初做的几个项目里,前台代码里必至少有一个UpdatePanel区域,把要

锋利的jQuery读书笔记 第7章、第8章

第七章 插件也成为扩展,是一种遵循一定规范的应用程序接口编写出来的程序.最新最全的插件可以从jQuery官方网站的插件板块中获取,网站地址为: http://plugins.jquery.com/ 一.插件的使用 1.jQuery表单验证插件—Validation 简介:Validation是历史最有的插件之一.拥有以下特点 (1)内置验证规则 (2)自定义规则验证 (3)简单强大的验证消息提示 (4)实时验证 使用: (1)引入jQuery库和Validation插件 (2)确定哪个表单需要被

锋利的jQuery读书笔记---jQuery中操作DOM

一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创建文本节点 创建属性节点 插入节点 插入节点的方法 方法 描述 示例 append() 向每个匹配的元素内部追加内容 HTML代码:<p>我想说:</p> jQuery代码:$("p").append("<b>你好</b>"

锋利的jQuery读书笔记 第11章

第十一章 一.jQuery性能优化 1.使用最新版本的jQuery类库 2.使用合适的选择器 3.缓存对象 4.循环操作DOM时,尽可能减少DOM操作 5.建议使用简单for()或者while()循环来出处理,而不是$.each() 6.使用事件代理 7.将你的代码转化成jQuery插件 8.使用join()来拼接字符串 9.合理利用HTML5的Data属性 10.尽量使用原生的JavaScript方法 二.jQuery技巧 参考书p318