《锋利的jQuery》补充笔记

Posted 逆光飞翔23

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了《锋利的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

 

以上是关于《锋利的jQuery》补充笔记的主要内容,如果未能解决你的问题,请参考以下文章

《锋利的jQuery》笔记-jQuery部分

锋利的jQuery-----读书笔记

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

《锋利的jQuery》学习笔记

锋利的jQuery读书笔记 第11章

锋利的Jquery读书笔记十一