jquery

1.认识jQuery

    1.什么是jquery?  jQuery其实就是一堆的js函数(js库)，也是普通的js而已，不是全新的

    2.为什么要用jquery ？

jQuery面向用户良好的设计使得在使用过程中彻底解放了你记忆原生操作DOM的接口，jQuery中包含多个可重用的函数，用来辅助我们简化javascript开发。 jQuery改变了数百万人编写JavaScript的方式，当然部分人已经觉得时过境迁，组件化，工程化，大行其道。

   3.jquery使用精髓

       选择元素，循环操作，链式调用封装选择元素,循环操作,链式调用。

 2.选择器

    1. 基本选择器

           （1）#id    #选取带有唯一的指定 id 的元素。

           （2）element  选择器选取带有指定标签名的元素。

           （3）:first   选择器选取第一个元素。

          （4）:last   选择器选取最后一个元素。

          （5）:even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6）。index 值从 0 开始，所有第一个元素是偶数 (0)。

          （6）:odd 选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。index 值从 0 开始，所有第一个元素是偶数 (0)。

          （7）:eq()  选择器选取带有指定 index 值的元素。

          （8）:gt()  选择器选取 index 值高于指定数的元素。

           （9）:lt（）  选择器选取带有小于指定 index 值的元素。

    2.层级选择器

           （1）ancestor descendant  在给定的祖先元素下匹配所有的后代元素。

           （2）parent > child    在给定的父元素下匹配所有的子元素

           （3）prev + next  匹配所有紧接在 prev 元素后的 next 元素

          （4）prev ~ siblings   匹配 prev 元素的所有同辈 siblings 元素

   3.内容选择器

           （1）:contains(text)     :contains 选择器选取包含指定字符串的元素。该字符串可以是直接包含在元素中的文本，或者被包含于子元素中。

           （2）:empty  选择器选取空的元素。空元素指的是不包含子元素或文本的元素。

           （3）:has(selector)    :has() 选择器选取所有包含一个或多个元素在其内的元素，匹配指定的选择器。

          （4）:parent 匹配含有子元素或者文本的元素

  4.可见性选择器

           （1）:hidden  所有隐藏的 元素

           （2）:visible  选择器选取每个当前是可见的元素。

  5.属性选择器

           （1）[attribute] 选择每个带有指定属性的元素。

           （2）[attribute=value] 选择器选取每个带有指定属性和值的元素。

           （3）[attribute$=value] 选择器选取每个带有指定属性且以指定字符串结尾的元素。

  6.子元素选择器          

             : first-child
             :first-of-type1.9+
             :last-child
              :last-of-type1.9+
             :nth-child
             :nth-last-child()1.9+
             :nth-last-of-type()1.9+
             :nth-of-type()1.9+
              :only-child
               :only-of-type1.9+

    7.表单选择器

           :input
           :text
          :password
          :radio
           :checkbox
           :submit
          :image
           :reset
          :button
          :file
          :hidden

  8.表单属性选择器  

       :enabled
       :disabled
      :checked
      :selected

 3. DOM操作的相关方法

    （1） .get()    

    （2）.eq()  eq() 方法返回带有被选元素的指定索引号的元素。

    （3）.find()   查找

    （4）.filter()   过滤 再选好的基础上过滤

     （5）.is()   返回时boolean类型

     （6）  .has()      判断里面是否含有

      （7）add   add() 方法把元素添加到已存在的元素组合中

       （8）end    返回上一个元素

   4.取赋值相关方法：

          （1）.html()  1.不传递参数就是取值    如果多个相同的标签  取值取第一个值  取的是html片段     2.传递一个html片段    就是赋值  3.也可以传递一个函数

           （2）.text()    1.不传递参数就是取值        2.传递一个html片段    就是赋值  3.也可以传递一个函数

           （3）.val() 针对的是表单元素

                      // 1.用在没有value属性的标签上面，是往.wrapper这个jquery对象上面去赋值

                   // 2.在type = text 的时候，会有些异同，但不影响正常使用,Dom树上还是原先的值，但是页面变成自己更改后的值

　　     （4）.size()   查看某个元素的数量

            （5）.addClass()   添加一个类 （就是class的属性值）

            （6）.removeClass()    删除class的属性值，class还保留

            （7）.hasClass()   检测是否含有某个属性

            （8）.attr()    始终是自定义的属性   （一个值表示取属性值） 

             （9）prop关注的是一种状态，只能控制本身的属性，添加属性和属性值Dom树上看不见，如果增加一个系统不承认的属性，增加到了jquery对象上面去了

       5.基于jQuery对象查改删增相关方法     

　6.jquery动画

                   动画队列 : 如果某个标签身上被添加了多个动画任务,那么这些任务会被按顺序添加到队列中等待执行
                         按照队列中任务的顺序一个接着一个的执行队列中的任务

              1.显示和隐藏:显示show() ，隐藏hide() ，切换toggle()

                      第一个参数:动画时间(速度)
                      第二个参数:动画执行完毕之后的回调函数
                    本质：显示和隐藏动画:控制标签的宽度和高度(透明度)来实现
            2.展开和收起:展开slideDown() ，收起slideUp()， 切换slideToggle()
                      第一个参数:动画时间(速度)
                     第二个参数:动画执行完毕之后的回调函数
                   本质：展开和收起动画:控制标签的高度
        3.淡入淡出动画：淡入fadeIn（），淡出fadeOut（）， 切换fadeToggle(timer,callback)  
                     第一个参数:动画时间(速度)
                     第二个参数:动画执行完毕之后的回调函数
                     淡入淡出到指定的值fadeTo （参数1，参数2，参数3）参数1为时间 ，参数2为透明度的值，参数3为回调函数
                    本质:操作标签设置标签的透明度
        4.自 定义动画:animate 
                         语法 jQ().animate(optionsObj,timer,callBack)
                          第一参数为对象，键值类要做什么动画
                          第二参数为时间
                         第三参数为回调函数
       5.stop():停止任务

                           第一个参数:控制队列中的任务(是否清空)  true|false
                          第二个参数:控制是否停止动画   true|false
                          没有参数: 停止当前的动画, 后面的任务继续执行
                          true true :立即完成当前的动画,后面的任务不再执行
                         true false:所有动画任务立刻停止
                          false false:停止当前的动画,后面的任务继续执行  默认的情况
                          false true :立即完成当前的动画,后面的任务继续执行

        6.delay():延迟执行任务

   7.元素与可视区的尺寸  

      元素的尺寸

            width()获取元素的宽度(值不带单位)；有参数的话，代表设置宽度，参数不用带单位；
            height()获取元素的高度;有参数的话，代表设置高度，参数不用带单位；
             innerWidth() width+padding
            innerHeight() height+padding
           outerWidth() width+padding+border
           outerHeight() height+padding+border
   可视区的尺寸

       页面的宽高
            $(document).width()页面的宽
            $(document).height()页面的高
       可视区的宽高
            $(window).width()可视区的宽
           $(window).height()可视区的高
      元素的距离
          元素相对于文档的距离
            offSet().left
           offSet().top
        元素相对于父级的距离
              position().left
              position().top
            positon的值是不受margin的影响的；

      offSetParent找到最近的有定位的父级；
      滚动条的距离
                scrollTop();
               scrollLeft();
      8.jQuery事件绑定机制

          简单事件绑定方法

1.                         click(hander) .click() //绑定事件 或者触发 click事件
2.                        .blur() //失去焦点事件，同上             .
3.                         hover(mousein, mouseleave) //鼠标移入，移出         
4.                         mouseout： 当鼠标离开元素及它的子元素的时都会触发。
5.                         mouseleave: 当鼠标离开自己时才会触发，子元素不触发。
6.                        .dbclick() 双击
7.                       change 改变,比如：文本框发送改变，下来列表发生改变等...
8.                         focus 获得焦点
9.                     keyup, keydown, keypress : 键盘 键被按下。
10.                    mousedown, mouseover 

               绑定事件的方式 方式

on方式

语法格式：$(selector).on( events [, selector ] [, data ], handler )
参数介绍：
第一个参数：events，事件名
第二个参数：selector,类似delegate
第三个参数: 传递给事件响应方法的参数
第四个参数：handler，事件处理方法
    例如：
    //绑定一个方法
    $( "#dataTable tbody tr" ).on( "click", function() {
      console.log( $( this ).text() );
    });

    //给子元素绑定事件
    $( "#dataTable tbody" ).on( "click", "tr", function() {
      console.log( $( this ).text() );
    });

    //绑定多个事件的方式
    $( "div.test" ).on({
      click: function() {
        $( this ).toggleClass( "active" );
      }, mouseenter: function() {
        $( this ).addClass( "inside" );
      }, mouseleave: function() {
        $( this ).removeClass( "inside" );
      }
    });

jquery

原文：https://www.cnblogs.com/yuyuanwen/p/11235993.html