zoukankan      html  css  js  c++  java
  • 《锋利的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

  • 相关阅读:
    wget一个小技巧
    【iOS官方文档翻译】UICollectionView与UICollectionViewFlowLayout
    NSDate获取当前时区的时间
    怎样把一个字典的数据添加到另一个字典中?
    CoreLocation基本使用
    iOS开发--一步步教你彻底学会『iOS应用间相互跳转』
    Save Image to UserDefaults(用NSUserDefaults保存图片)
    SDWebImage源码解析
    获取cell或者cell中的控件在屏幕中的位置
    Git命令详解 123
  • 原文地址:https://www.cnblogs.com/qzccl/p/5543838.html
Copyright © 2011-2022 走看看