jquery完全总结

开始写博客啦,准备一点一点将云笔记上面的总结转移到这个上面来.本菜鸟希望大家多多监督我.

1. 什么是jquery?
   JQ就是一个js库,里面封装好了很多的方法,我们学习JQ,就是学习里面的方法.

2. 为什么要学习jquery?
   JQ不需要考虑兼容性，而且更简单。底层也是封装的DOM.

3. JQuery的版本问题.

   1. 1/2/3版本的问题:
      1.x的版本考虑兼容性
      2.x的版本不考虑兼容性.
      3.x现在1.x与2.x版本已经停止更新了,仅仅更新3.x。也不考虑兼容性.
      需要注意的是jq插件的最低支持版本,例如bootstrap最低支持1.9.1.
   2. 压缩版与压缩版本的问题:
      压缩版本:后面带有min的后缀，利于工作环境
      不压缩版本:条例清晰，利于学习与阅读

4. 隐式迭代
   JQ在设置属性的时候，会自动给所有的元素设置相同的值。
   JQ在获取属性的时候，会获取第一个元素的值。
   要给每一个元素设置不同的值时，就必须需要手动遍历。

5. 链式编程

   1. ：JQuery在设置属性时，返回的是jquery对象，因此可以一直点下去。
   2. ：JQuery在获取属性时，返回的是具体的值，而不是JQuery对象。因此不能再点下去
   3. ：能否一直点下去，就要看返回的值是不是JQ对象.在源码中是return this.

6. 使用JQ的步骤

   1. ：引入JQ文件
   2. ：入口函数
       $（document）.ready ( function () {} );
       $(function(){});
   3. :JQ/JS入口函数的区别:
        JS中的入口函数要等到页面中的所有资源（文件，图片）均加载完才会执行。
        JQ的入口函数仅仅会等待文档树的加载完成就会开始执行，不会等待图片、文件的加载
        JQ的加载时间会早于JS的加载.

7. JQ对象与JS对象

   1. ：JQ对象是指用JQ方法获取的；DOM对象是指用JS方法获取的。是两个不同的对象。因此里面的方法并不能混用。
   2. ：JQ是个伪数组，里面装得是DOM对象。
   3. ：JQ对象→DOM对象
       $("li")[index]
       $("li").get(index)
   4. :DOM对象→JQ对象
      $(domObj)

8. 选择器

   1. 基础选择器
      ID选择器 $(“#id”)
      类选择器 $(“.class”)
      标签选择器 $(“div”)
      并集选择器 $(“div,p,li”)
      交集选择器 $(“div.redClass”)
   2. 层级选择器
      子代选择器 $(“ul>li”)
      后代选择器 $(“ul li”)
      +后面的一个元素 $(“ul+li”) ul的下一个li
      ~ 后面所有元素 $(“ul~li”) ul的后面所有li
   3. 过滤选择器（属性）
      :even :odd 索引值伪偶数/奇数 $("li:odd")
      :eq(index) 具体索引值的数 $("li:eq(2)") 索引值从0开始
      :selected :checked 下拉列表/单选框被选中
      :first :last $("li:first") $("li:last")
      :gt(index) 从索引值大于index的元素开始 索引值从0开始
   4. 筛选选择器
      children find parent siblings next nextAll prev eq(index)
      $对象.children(selector) 相当于$(“ul>li”)，子类选择器
      $对象.find(selector) 相当于$(“ul li”),后代选择器
      $对象.siblings( ) 查找兄弟节点，不包括自己本身。
      $对象.parent() 查找父亲
      eq(index) 相当于$(“li:eq(2)”),index从0开始
      .next() 找下一个兄弟 类似于+
      .nextAll( ) 后面所有, 类似于~
      .prev() 找上一次兄弟
      .prevAll 前面的所有兄弟元素
      $('#bar').index(); //1，不传递参数，返回这个元素在同辈中的索引位置。
   5. 属性选择器
      $form[name=tc_name] name为tc_name的form表单

9. 样式操作(行内样式)

   1. css样式
      1.1. 设置样式
       $("li").css(name, value)
       $("li").css(obj)
      1.2. 获取样式
       $("div").css(name);
      获取得是第一个元素对应的值
   2. class样式
      2.1 添加类名
       $(“div”).addClass(“one”);
       再原来的类名上添加一个类,不会覆盖原来的类名,但是要注意权重问题
      2.2 移除类名
       $(“div”).removeClass(“one”);
      2.3 判断类名
       $(“div”).hasClass(“one”);
       返回值为true或者false
      2.3 切换类名
       $(“div”).toggleClass(“one”);
       有就移除,没有就添加

10. 属性操作(标签的自定义属性)

    1. 设置属性
       1.1. 设置单个属性
        attr(name, value)
       1.2. 设置多个属性
        attr(obj)
    2. 获取属性
        attr(name)
    3. 移除属性
        removeAttr(name)
    4. 设置/获取标签的自定义属性
        标签的自定义属性 data-msrc:"abc"
        获取标签的自定义属性 JQ标签对象.data("msrc")
        设置标签的自定义属性 JQ标签对象.data("属性",属性值)

11. 动画

12. 普通动画
    1.1. 显示(show())与隐藏(hide())
     改变了width height opacity
    1.2. 滑入(slideUp( ))与滑出(slideDown( ))与切换(slideToggle( ))
     改变了 height
    1.3. 淡入(fadeIn( ))与淡出(fadeOut( ))与切换(fadeToggle( ))
     改变了 opacity
    1.4. slideToggle( )与fadeToggle( )切换的就是show( )/hide( )
    1.5. 动画队列
     在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。
    1.6. 停止动画
     stop方法：停止当前正在执行的动画效果,开始下一个.在动画前面调用stop方法

13. 节点的操作

    1. 创建节点
       $(htmlStr) $(“这是一个span元素”)
       添加节点
       A.append( B ) 将B添加到A的子元素的最后面
       A.appendTo( B ) 将A添加到B的子元素的最后面
       A.prepend( B ) 将B添加到A的子元素的最前面
       A.prependTo( B ) 将A添加到B的子元素的最前面
       A.before(B) 将B添加到A前面
       A.after(B) 将B添加到A后面
    2. 清空节点
       A.empty()：清空指定A节点的所有元素，A保留(倒掉瓶子里面的水)
       删除节点
       remove()：相比于empty，自身也删除（直接丢掉瓶子）
       克隆节点
       clone() 默认为false,不会复制事件. 传true时复制事件
       $对象.html(对象)是覆盖而$对象.append(对象)是累加

14. 特殊属性的操作(标签的属性)
    里面不传参数就是获取,传参数就是设置(除prop()外)
    1.prop()方法
     checked、selected、disabled这类boolean类型的属性来说，只能用prop方法。
     设置属性 $(“:checked”).prop(“checked”,true);
    获取属性 $(“:checked”).prop(“checked”);
     清除属性: $(“:checked”).removeProp(“checked”)

    2. val()方法
        value属性是指输入框的默认值.
        val()方法用于设置和获取表单元素的值，例如input、textarea的值
    3. html()/text() 方法
       就是表示文字的设置
       html()识别标签/text()不识别标签
    4. width()/height()方法
        $(window).width(); 获取页面的可视区的宽高
    5. scrollTop()与scrollLeft()方法
        $(window).scrollTop();获取页面滚动条的高度
    6. offset()/position()方法
        offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
        获取元素距离document的位置,返回值为对象：{left:100, top:100}
        $(selector).offset();
       获取相对于其最近的有定位的父元素的位置。
       $(selector).position();

15. 事件

    1. :最普通的注册事件
       $("li").click(function(){//具体的逻辑})

    2. :on注册事件
       $(selector).on(events[,selector][,data],handler);
       第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
       第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
       第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
       第四个参数：handler，事件处理函数
       2.1. 注册简单事件
        表示给$(selector)绑定事件，并且由自己触发，自己执行.不写selector参数
        不支持动态绑定。
        $(selector).on( "click", function() {});
       2.2. 注册委托事件
        表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，且子元素是执行者
        支持动态绑定,且$(this)指向执行者
        $(selector).on( "click",“span”, function() {});
       2.3. off移除事件
       off不传参数：清除所有的事件 $("div").off();
        清除所有的点击事件$("div").off("click");
        只清除委托事件$("div").off("click", "p");
        清除某一个点击事件$("div").off("click", fn);
       2.3. :trigger触发事件
       setInterval(function () {
       //触发事件
       //$("#btn").click();
       // trigger:触发
       // toggle:切换
       $("#btn").trigger("dblclick");
       }, 2000);
       })

       2.4. 特殊的事件

       1. submit() 表单的提交事件
          只要点击表单里面的按钮,表单就会提交/回车也会触发
          $form.submit(function(){
          //功能型的代码
          return false;
          })

16. 事件对象
    jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
    screenX和screenY 对应屏幕最左上角的值
    clientX和clientY 距离页面左上角的位置（忽视滚动条）
    pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
    event.keyCode 按下的键盘代码
    event.data 存储绑定事件时传递的附加数据
    event.stopPropagation() 阻止事件冒泡行为
    event.preventDefault() 阻止浏览器默认行为
    return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

17. each
    jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
    参数一表示当前元素在所有匹配元素中的索引号
    参数二表示当前元素（DOM对象）
    $(selector).each(function(index,element){});