jQuery

/*  jQuery 的选择器

    语法： $('选择器')

      jQuery 的筛选器

    语法： $('选择器').筛选器名称()

      jQuery 操作文本内容

      // 1. html()

      // 等价于原生js中的innerHTML

      // 1-1 html()获取  

      console.log($('').html());

      // 1-2 html() 设置

      // 语法：元素集合.html(要设置的内容)

      $('').html()

      // 1. text()

      // 等价于原生js中的innerText

      // 1-1 text()获取  

      console.log($('').text());

      // 1-2 html() 设置

      // 语法：元素集合.text(要设置的内容)

      $('').text()

      // 1. val()

      // 等价于原生js中的value

      // 1-1 val()获取  

      console.log($('').val());

      // 1-2 val() 设置

      // 语法：元素集合.val(要设置的内容)

      //  作用：用来设置该表单元素的 value 值.

      $('').text()

     

     // 操作元素类名

     // 1.  addclass()

     // 语法： 元素集合.addclass(需要添加的类名)

     // $().addclass()

     // 1.  removeclass()

     // 语法： 元素集合.removeclass(需要删除的类名)

     // $().removeclass()

      // 1.  toggclass()

     // 语法： 元素集合.toggclass(要切换的类名)

     // 切换：如果本身有这个类名，那就是删除，没有就是添加

     // $().toggclass()

     // 实例

     // 获取元素

     var btn = document.querySelector('button')

     // 为按钮绑定一个点击事件

     btn.onclick = function () {

        $('div').toggclass('box')

     }

 // 操作元素样式： css()

     // css 获取样式

     // 语法： 元素集合.css(要获取的样式名称)

      console.log($('') .css(''));

     // css 设置样式

     // 语法： 元素集合.css(样式名, 样式值)

     $('') .css('', '')

     // css 批量设置样式

     // 语法： 元素集合.css({所有需要设置的样式})

     $('') .css({

         // 各种需要设置的样式：高，款，颜色等等

     })

     

     //操作元素属性

     //1. attr()

     //attr() 获取

     //语法：元素. attr(要获取的属性名)

     console.log($('').attr());

     //attr() 设置

     // 语法：元素. attr(属性名, 属性值)

     $('').attr('','')

     // removeAttr():对元素进行删除操作

     // 语法： 元素集合.removeAttr(要删除的属性名)

     $('').removeAttr('')

     // prop(): 可以获取元素的属性

     // 注意：prop 方法不能获取元素标签身上的自定义属性，只能获取到prop方法自己设置的自定义属性

     // prop() 设置

     // 语法：元素集合.prop(属性名, 属性值)

     // prop() 获取

     // 语法：元素集合.prop(要获取的 属性值)

     // removeprop() : 用来删除元素属性的方法

     // 不能删除原生属性，只能删除由 prop 方法自定义的属性

     // 语法：元素集合.removeprop(要删除的属性名)

     // 操作元素的偏移量

     // 1. offset(): 获取元素相对于页面上的坐标位置

     // 注意：  返回值是一个对象数据类型, { top: yyy, left: xxx}

            console.log(' :', $('').offset());

     // 2.  position() :获取的是元素的定位位置

     // 注意： 如果你设置的是 right 和 bottom， 会自动帮你换算成 left 和 top 的值给到你

               console.log($('').position());

     // 绑定事件

     // 1.   on()方法

     // 1-1. 基础事件绑定

     // 语法： 元素集合.on('事件类型', 事件处理函数)

         $('').on('click', function() {console.log();})

         // 1-2. 事件委托绑定事件

         // 语法： 元素集合.on('事件类型', 选择器, 事件处理函数)

         $('').on('click', '', function() {console.log();})

         // 1-3. 批量绑定事件

         // 语法： 元素集合.on({'事件类型1',  处理函数, '事件类型1',  处理函数})

         //   注意：不能进行事件委托了

         $('').on({

             a: function( ){console.log()},

             b: function( ){console.log()},

             c: function( ){console.log()},

         })

 // 2.  one() 用来绑定事件，和 on 方法绑定事件的方式一样

         // 区别：  one 方法绑定的时间，只能执行一次

         // 3.    hover()

         // 注意：   jQuery 里面有一个特殊的事件

         // 语法：  元素集合.hover(移入时触发的函数, 移出时触发的函数)

         //          只传递一个函数时，会在移入移出都触发

         $('').hover(

             function () {console.log('函数1');},

             function () {console.log('函数2');}

         )

         //  4.  常用事件函数

         //  jQuery 把最常用到的一些事件，单独做成了事件函数

         //  通过调用这些事件函数，来达到绑定事件的效果

          //   click(),  mouseover(), mouseout(), change(),  ...

          $(''),click(function ( ) { console.log();})

          // 事件解绑和触发

          // 1.   off()  事件解绑

          // 1-1. 解绑全部事件处理函数

          // 语法：  元素集合.off(事件类型)

             $('').off('')

          // 1-2. 解绑指定的事件处理函数

          // 语法：  元素集合.off(事件类型,  要解绑的事件处理函数)

          $('').off('', )

          // 2.  trigger()  事件触发

          // 使用代码方式，来触发事件

          //   语法： 元素集合.trigger(事件类型)

          setInterval(function () {

              // 表示每1000ms 触发一次 div 的 click 事件

              $('div').trigger('click')

          }, 1000)

     

                            //基本动画

            1.  show() 显示

            2.  hide()  隐藏

            3.   toggle()    切换

                // 本身是显示的，就隐藏，本身是隐藏的就显示。

            //  对于以上上运动函数，有共同的参数

                // 第一个表示运动时间

                // 第二个表示运动曲线

                // 第三个表示运动结束的回调函数

     $('button:nth-child(1)'). click(function (){

         //  执行  show 动画函数

         $('div').show(1000, 'linear', function () {'show 结束了'})

     })

     

     $('button:nth-child(2)'). click(function (){

         //  执行  hide 动画函数

         $('div').hide(1000, 'linear', function () {'hide 结束了'})

     })

     $('button:nth-child(3)'). click(function (){

         //  执行 toggle 动画函数

         $('div').toggle(1000, 'linear', function () {'toggle 结束了'})

     })

   

   

                // 折叠动画

            1.  slideDown() 显示

            2.  slideUp()  隐藏

            3.   slideToggle()    切换

                 // 本身是显示的，就隐藏，本身是隐藏的就显示。

            //  对于以上上运动函数，有共同的参数

                // 第一个表示运动时间

                // 第二个表示运动曲线

                // 第三个表示运动结束的回调函数

     $('button:nth-child(1)'). click(function (){

         //  执行  show 动画函数

         $('div').slideDown(1000, 'linear', function () {'show 结束了'})

     })

     

     $('button:nth-child(2)'). click(function (){

         //  执行  hide 动画函数

         $('div').slideUp(1000, 'linear', function () {'hide 结束了'})

     })

     $('button:nth-child(3)'). click(function (){

         //  执行 toggle 动画函数

         $('div').slideToggle(1000, 'linear', function () {'toggle 结束了'})

     })

     

     

           1.  fadeDown() 显示

            2.  fadeUp()  隐藏

            3.   fadeToggle()    切换

                 // 本身是显示的，就隐藏，本身是隐藏的就显示。

            //  对于以上上运动函数，有共同的参数

                // 第一个表示运动时间

                // 第二个表示运动曲线

                // 第三个表示运动结束的回调函数

       // 4. fadeTo(运动时间， 指定的透明度， 运动曲线， 运动结束的回调函数)

     $('button:nth-child(1)'). click(function (){

         //  执行  show 动画函数

         $('div').fadeDown(1000, 'linear', function () {'show 结束了'})

     })

     

     $('button:nth-child(2)'). click(function (){

         //  执行  fadeUp 动画函数

         $('div').slideUp(1000, 'linear', function () {'hide 结束了'})

     })

     $('button:nth-child(3)'). click(function (){

         //  执行 toggle 动画函数

         $('div').fadeToggle(1000, 'linear', function () {'toggle 结束了'})

     })

     $('button:nth-child(4)'). click(function (){

         //  执行 fadeTo 动画函数

         $('div').fadeTo(1000, 0.68,'linear', function () {console.log("运动到了指定的透明度")})

     })

               //  综合动画

    //  animate()

         第一个参数： 要运动的样式，以一个对象数据类型传递

         第二个参数： 运动时间

         第三个参数： 运动曲线

         第四个参数： 运动结束的回调函数

         注意： 关于  颜色  相关的样式是不能运动的

                关于 transform  相关的样式是不能运动的

     

 $('button:nth-child'). click(function (){

         //  利用 animate 函数来实现运动

         $('div').animate( {

            widtk:500,

            height:600,

         }, 1000, 'linear', function () {console.log('运动结束了')})

     })  

     

          // 结束动画：需要用到运动结束的函数

    1.  stop():任何一个元素执行了 stop 方法以后，会立即结束当前所以运动，目前运动到什么位置，就停留在什么位置。

    2.   finish(): 任何一个元素执行了finish 方法后，会立即结束当前的所有运动，直到去到动画的结束位置

           //  jQuery 的 ajax 请求

           //   语法：$.ajax({本次发送 ajax 的配置项})

           //  配置项：

             url:必填，表示请求地址

             method:选填，默认是GET， 表示请求方式

             data: 选填，默认是 '' ，表示携带给后端的参数

             async:选填，默认是 true ，表示是否异步

             success:选填，表示请求成功的回调函数

             error:选填，表示请求失败的回调函数