jq应用

属性

attr   从页面搜索获得元素值，所以页面必须明确定义元素才能获取值，相对来说比较慢（可读可写）

    $('div').attr('class')        读出div标签的class名)

    $('div').attr('class=demo')        修改div标签的lacss名（可以设置多个属性名）

    $('div').attr('data':'num','age':18)        在原有的div属性中添加特性 

    $('div').attr('class',function(){

    …………

    return  list

    })

    满足函数内容后，改变div的class名

 

removeAttr  移除属性名 

    $('div')removeAttr('data')  移除data属性

 

prop  

    $('input').prop('checked')  实时的判断input的checked的属性返回true/false

    removeProp

attribute和property，attr()和prop()的区别傻傻分不清

 

    attr和prop区别

    attr只能初始的第一次选中的当前元素里面初始状态属性值

    prop 能实时监控改变后的状态

 

CSS类

 

    addClass              $('div').addClass('active')  给div添加class属性

    removeClass        $('div').removeClass()   传参就去掉传参的class，不传就全部去除

    toggleClass          $('li').toggleClass('active')  把li标签中有class=active的class去除。其他的li添加上class=active

 

HTML

 

改变html的文本内容和文本结构

    $('.wrap').html();                           获取当前属性里面的内容，包括文本内容和节点内容

    $('.wrap').html('内容已更改');                传参了后整个节点和内容都被更改了
 

    $('.wrap').html('<b>内容已更改</b>');         全部替换当前html写的内容（能解析标签）

通过数据动态来渲染结构（拓展）

     function addList(){
         var str='';
             for(var i=0; i<10; i++){
                 str += '<li>1</li>'
             }
         $('.wrap').html(str);
     }

     addList();

 

text改变或者获取内容

    $('.wrap').text();                           只获取当前元素下面的文本内容，包括子标签里面的文本

    $('.wrap').text('我改变了你');                添加内容后标签整个节点内容替换;包括标签在内所有内容全部替换

    $('.wrap').text('<div>112</div>') ;          text里面写标签,是把所有当成内容呈现在界面上；不能解析标签（与html不同）

 

位置

    $('.wrap').offset()        offset 当前视窗口位置偏移 可见元素有效 top和left

    $('.con').position()        poisition 根据父级偏移来定位top和left

 

尺寸获取

    $('.wrap').height();              代表当前css高度值height

    $('.wrap').innerHeight();         代表当前css高度值 + padding高度值 = 总值

    $('.wrap').outerHeight();         outerHeight不传参数css高度值 + css的padding值 + css的border值 = 总值
 

    $('.wrap').outerHeight(true);     传参数css高度值 + css的padding值 + css的border值 + css的margin值 = 总值

文档处理

 

内部插入

链式调用（根据返回值实现）

 

    $('.box').append('<p>111</p>').addClass('name1').addClass('name2')

 

 

    .box调用了append，插入一个p标签。后面紧随着添加calss属性。（遵循着链式调用的规则。是$('.box')对象开始调用方法的

    所以后面的一系列操作都针对$('.box')），所以class都添加到了$('.box')上

 

    $('<p class="finte">1111</p>').appendTo($('.box')).addClass('name3').addClass('name4');

    同理上，创建的p标签插入$('.box')，并链式调用添加属性。属性都添加到了P标签上

 

    prepend       向一个元素的前面 （append是尾部添加）添加一个新的元素 

    prependTo     同appendTo用法

外部插入

 

    $('.box').after('<span>后面</span>')                         

    把一个元素插入到另一个元素的后面after

 

    $('.box').before('<div class="uBefore">前面</div>');        

     把一个元素插入到另一个元素的前面 before

 

    $('input').insertAfter($('.box'));                          

    所匹配到的元素插入到一个元素的后面（剪切），会改变当前的dom的结构

 

    $('input').insertBefore($('.max'));                          

    所匹配到的元素插入（剪切）到一个元素的前面

 

事件

 

    $('ul').on('click', 'li', fn)                            

 

    事件委托机制（在父级添加事件，由子级触发（冒泡机制）），此时第二个参数代表li能够触发ul身上的事件；

 

    $('ul').off(' 事件 ');                                   

 

    off把一个dom元素的事件移除,不传参移出改dom的所有事件

 

    $('ul').one('事件' , 'fn' )                              

 

    one是给dom元素添加事件，但是这个事件只能执行一次

 

    $('ul').tirgger('事件')                                  

 

    trigger是主动触发的事件，如setTimeOut两秒后主动触发该事件；我们可以主动添加事件，后通过tirgger来执行。

    将playChange传入tirgger('playChange')即可触发执行；（跟函数执行差不多，如：playChange（）;）

 

    $('div').on('playChange',function(e ,date){});          

 

    需要注意的是自定义事件后面的函数，如果需要传参，需保留第一位，因为该位为event事件对象；

 

    $('div').hover(function(){移入},function(){移出});        

 

    hover事件，传入两个函数，逗号隔开，移入触发第一个，移出触发第二个；

 

    $('div').toggle(true/false);                             

 

    切换div的显示状态，true为显示，false为隐藏（改变CSS中的display属性）

 

 

事件类型：

注意： $('div').click(fn)        所有事件都可以这样直接调用，建议用on方法；

(①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，新的btn1就没有click这个事件；

②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，可以无限添加btn2。

那么怎么实现这个动态监听的过程呢？

on()事件相当于是$(document).click( function ( ) { if ( 点击的是btn ) { } } )，给document添加了一个click事件，点击的是btn，事件冒泡原理，从里到外，就相当于点击了document，那么就会执行后面的操作，本质上只给document添加了一个事件，而click()事件是给所有btn添加了click事件。

另外on()事件可以添加多个事件。
 

on()委托事件的优点：原来的事件绑定，要绑定好多事件，现在只需要绑定一个事件，大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug

 

    $('inp').on('blur', function(){})   失去鼠标焦点触发事件  -----> input

    $('inp').on('change', function(){})   改变input框的内容触发事件   ----> input

    $('inp).on('focus', function(){})   聚焦时触发事件  ---->  input

    $('div').on('click', function(){})   点击触发事件

    $('div').on('dblclick', function(){})   双击触发事件

    $('div').on('mousedown', function(){})   鼠标按下触发

    $('div').on('mouseup', function(){})   鼠标抬起时触发

    $('div').on('mouseenter', function(){})   鼠标穿过元素时触发事件（穿过子元素不会触发）   

    $('div').on('mouseleave', function(){})   鼠标离开元素时触发（离开子元素不会触发）

    $('div').on('mouseover', function(){})   鼠标覆盖，鼠标位于指定的元素上触发（覆盖子元素也会触发）   

    $('div').on('mouseout', function(){})   鼠标移出指定的元素触发（离开子元素也会触发）

    $('div').on('mousemove', function(){})   鼠标在指定元素中移动连续触发事件（在子元素上移动也会触发）

    $('div').on('keydown', function(){})   键盘按下触发

    $('div').on('keypress', function(){})   键盘按下的触发

    $('div').on('keyup', function(){})   键盘抬起触发

    $('div').on('scroll', function(){})   当鼠标滚动条滚动时触发，适用于所有可滚动的元素和 window 对象（浏览器窗口）

    $('div').on('resize', function(){})   当调整浏览器窗口时触发

    $("form:first").on('submit', function(){})  当提交表单时，会发生 submit 事件。该事件只适用于表单元素。
 

    $("form:first").on('unload', function(){})  在当用户离开页面时，会发生 unload 事件。

    具体来说，当发生以下情况时，会发生 unload 事件：(点击某个离开页面的链接,在地址栏中键入了新的 URL,使用前进或后退按钮,关闭浏览器,重新加载页面)

 

 

事件对象：

    e.target            事件源对象

    e.pageX            获取事件对象相对于文档左边缘位置,包含滚动条距离

    e.pageY            获取事件对象相对于文档上边缘位置,包含滚动条距离

    e.clientX            获取事件对象相对于可视窗口的位置

    e.clientY            获取事件对象相对于可视窗口的位置

    e.preventDefault     阻止默认事件触发

    e.stopPro                阻止事件冒泡
 

    e.type                      返回当前事件对象的事件类型

 

 

效果与动画

    第一个参数: speed, 隐藏 / 显示的速度, 可传: slow(慢) / normal(正常) / fast(快) ，可以直接传数字，单位毫秒计；

    第二个参数: 切换效果: 默认为swing, 可传linear; (第二个参数一般不写)

    第三个参数: fn, 当执行完之后执行的回调函数

    $('div').hide('slow/normal/fast', fn)        将显示的元素隐藏，第一个参数控制快慢；第二个可传入回调函数；

    $('div').show('slow/normal/fast', fn)        将隐藏的元素显示，第一个参数控制快慢；第二个可传入回调函数；

    $('div').slideDown('speed', 'easing', fn)            动画向下滑动出现
 

    $('div').slideUp('speed', 'easing', fn)                动画向上滑动隐藏

    $('div').slideToggle('speed', 'easing', fn)         来回切换，隐藏状态切换成显示状态，显示的切换成隐藏状态

    $('div').fadeOut    ('speed', 'easing', fn)           淡出

    $('div').fadeIn     ('speed', 'easing', fn)             淡入
 

    $('div').fadeToggle ('speed', 'easing', fn)         切换淡入淡出

 

创建自定义动画效果

    $('div').animate({ obj }, speed, 'linear/swing', fn)

 

 

    传入第一个参数为{ obj }, 里面是动画属性将变化的属性名跟属性终点值

 

 

    如: { width: '100px', height: '100px', left: '100px', display: 'none'等等 }

 

    $('div').stop()        停止所有在指定元素上正在运行的动画

 

    $('div').delay(speed)        设定一个延时来延迟之后要执行的项目

    如: $('div').delay(5000).fadeIn(1000, 'linear')，延迟匹配元素之后的淡入效果

 

 

工具类方法

    $.merge(arr1,arr2,arr3)        合并数组，将所有数组合并到第一个并返回，而其后的数组不会改变
 

    $.extend(true,obj1,obj2)        合并对象，跟merge同理（有相同属性名会覆盖属性值）将所有对象合并到第一个并返

    回，而其后的对象不会改变  

   $.fn.extend()   -->  $.fn === prototype(原型上) -->  $('div').add()这样调用

    如果没有fn不是原型链上的就需要 $.add()这样按照工具类方法调用

    因为是对象，方便调用，所以还可以用来扩展插件：

例1：(封装去掉左边空格的方法)

                        $.extend({
                            leftTrime:function (str){
                                var reg = /^\s+/g;
                                return str.replace(reg,"")
                            }
                           })

                        $.leftTrime('   d  a dd  ')        

因为extend返回的是第一个对象，所以我们写在该对象里面的方法可用$调用

 

例2：(封装input全选方法--在fn原型上)

                        $.fn.extend({
                            check:function(flag){
                                return this.each(function (){
                                    this.checked = flag;
                                })
                            }
                        })

 

 

                        $('input').check(true)        

 

因为在fn（原型）上写方法，所以可以用$('input')直接调用

    $.parseHTML(string,context,true/false)        将字符串转成dom标签，返回的是dom数组

 

 

    第一个参数字符串解析成dom结构，第二个代表插入哪个documnet，第三个true可以解析<script>标签；false不可以解析<script>标签；  

 

 

 

    $.type(123)        返回数据类型，如：string  array number;

 

    $.trim("  ad  dad  ")         返回去掉前后空格的字符串（中间的不会去除）

 

    $.noConfilct()        交出$符权限（权限剪切出来，原来的废除）

    var my$ = $.noConfilct()         相当于用变量接收$符号，避免多重引用不同jQuery引发的$符覆盖问题

 

    $.mackArray(arr)        将类数组转换成数组返回；（类数组条件：索引值，length属性）

    $.inArray(1,arr)        相当于indexOf()用法一样，判断数字是否在数组里，返回索引值或者-1

 

 

回调函数    

Callbacks('flag')   函数队列 

 

var callback = $.Callbacks();

Callback.add(fn)  添加函数

Callback.fire(data)  触发函数（传入data实参）

Callback.remove(fn)  将fn函数移除

 

        function fn1(str) {

            console.log(str)

        }

        function fn2(num) {

            console.log(++num)

        }

        var callback = $.Callbacks();

        callback.add(fn1, fn2, fn1);

        // callback.add(fn2);

        callback.fire('123');

        callback.remove(fn1);

        callback.fire('123');

结果为123 124 123 124 

回调函数：Callbacks('flag')

flag的值：

noce（只触发一次fire）  unique （添加的相同函数只触发一次） 

 memory （继续触发fire后面添加（Callback.add(fn)）的函数） 

stopOnFalse （执行函数中返回值（return）为false的，后面的函数不会被执行）

 

可以并列使用传入多个flag值      如 'nonce unique'（只触发一次fire并且函数只执行一次）

问题：工具方法和实例方法的区别。

工具类方法直接调用。

实例类方法往往操作dom需要一个实例。如$('div').css(...)

先获取div元素，然后对他进行操作。