《锋利的jQuery》补充笔记

Posted 2020-07-17 逆光飞翔23

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