jQuery——过时，但是经典，关注核心点即可。

Posted 2020-12-09 macro-renzhansheng

jQuery 是一个着重简化 DOM 操作，AJAX 调用和事件处理的 javascript 库

    jq:js库，封装了大量的特定集合【函数和方法】——方法应用熟练即可

        如：animate()、css()、show()

    使用jq提高开发效率，简化dom操作

    常见js库{对原生JS的封装}：jQuery    YUI     Dojo    zepto   ExtJs

常见API：通过将原生js包装成jQuery对象

    $   --------->  jQuery   

=====================

//DOM对象转jQuery对象

var domToJq = $(box).html;

//jQ转DOM

var $box = $(‘.box‘);

var jqToDom = $box[0];

var jqToDom = $box.get(0);

jQuery选择器

    $(selector)

        $(‘#id‘)    $(‘p‘)  $(‘.class‘)    $(‘*‘)       $(‘div.p‘)     $(‘div.box‘)

        $(‘ul li‘)      $(‘div>p‘)

    $(‘ul li:first‘)

    $(‘ul li:eq(0)‘)

    $(‘li:eq(6)‘):所有li元素从上到下排序

    $(‘ul li:odd‘):奇数行

    $(‘ul li:even‘)：偶数行

筛选方法；

    parent()                $(‘li‘).parent()                直系父亲

    children(selector)      $(‘ul‘).children(‘li‘)          直系儿子

    find(selector)          $(‘ul‘).find(‘p‘)               所有后代

    siblings(selector)      $(‘div‘).siblings(‘li‘)         兄弟节点，不包含自己

    nextAll()               $(‘li:eq(2)‘).nextAll()         第三个li之后的所有

    prevAll()               $(‘li:eq(2)‘).prevAll()         第三个li之前的所有

    hasClass()              $(‘div‘).hasClass(‘demo‘)

    eq(index)               $(‘li‘).eq(2) ==== $(‘li:eq(2))‘)

链式调用：[背后：行内样式实现]

    $(‘.first‘).css(‘width‘,‘400px‘);

    $(‘.first‘).css(‘width‘,300);

    $(‘.first‘).css(‘background‘,‘blue‘);

    alert($(‘first‘).css(‘width‘));

    //设置多个样式:传参json

    $(‘.first‘).css({

        width:200,

        height:300,

        fontSize:20

    });

jQuery处理样式

    css()

    //增加、去除类名（对应css样式）——动态

    addClass()      $(‘ul li:eq(1)‘).addClass(‘current‘)

    removeClass()

    toggleClass()

    hasClass()

    //click()     注册单机事件

    $(‘ol li:eq(1)‘).click(function(){

        //切换（增加删除）类名

        $(this).toggleClass(‘current‘);

        //等效于

        if($(this).hasClass()){

            $(this).addClass(‘current‘);

        }else(

            $(this).removeClass(‘current‘);

        )

    });

动画：针对不同对象实现动画效果

  

//现实与隐藏

    show(speed,easing,cb)  

    设置宽高透明度动画效果

    show()              show(1000):1s内显示             show(‘fast‘)[200 million Seconds]    show(‘slow‘)    show(‘normal‘)   

    hide()             

    toggle()

    //滑动

    slideDown()             往下滑出

    slideUp()               往上卷入

    slideToggle()          

    //淡入淡出

    fadeIn()

    fadeOut()

    fadeToggle()

    fadeTo()                透明度具体到某个值fadeTo(400,0.8)   切记：第一个参数 时间一定要传！

    animate()

        ：$(‘.button‘).onclick = function(){

            $(‘.box‘).animate({

                left:400,

                top:400,

                opacity:.5,

                //只支持为数值的

                //bgc——等

            });

        }

Note: position:relative————相对于自身做运动

    stop() 停止动画排队

    //hover() : 事件切换，鼠标经过和鼠标离开的复合写法

    hover(function(){

    },function(){

    })

    //hover():如果传入一个函数，则鼠标离开、切换都执行这一个函数

jQuery属性操作:prop() attr() data()

    // ele.prop(‘属性名‘) 获取

    prop()——设置或者获取元素固有的属性

    ex: $(‘a‘).prop(‘href‘);

    //传两个值，设置属性

    $(‘a‘).prop(‘target‘,‘_blank‘)

    //多选按钮的状态

    $(‘input‘).change(function(){

        $(this).prop(‘checked‘);

    });

    //不支持获取自定义属性

    attr()——支持获取元素自定义属性

    ——同理：支持set（参数2个）get（参数1个）方法，根据参数不同

    data()——操作数据

    ex: $(‘p‘).data(‘age‘,22)   $(‘p‘).data(‘age‘)

    //读取h5自定义属性data-uname,并且读取支持省略data前缀

    $(‘p‘).data(‘uname‘)

Jquery操作文本

    html() html(‘内容‘)

    text()

    val()

JQuery元素操作：创建、添加、删除、遍历

    $(‘div‘).each(function(index,ele){

        //ele 为原生dao元素

    })

    $(‘div‘).on(‘click‘,function(){

        alert(‘hha‘);

    });

    //自动触发

    //方法1： 元素.事件()

    $(‘p‘).click();

    //方法2： 元素.trgger(事件)

    $(‘p‘).trigger(‘click‘);

    //方法3： 元素.triggerHandler(‘click‘)

    $(‘p‘).triggerHandler(‘click‘)

    ex:输入框输入内容

    $(‘input‘).on(‘focus‘,function(){

        $(this).value(‘hello‘);

    });

jq常用方法

    //复制

    $.extend(target,source)

    //会覆盖原对象相同属性的值

    //保留原对象不同属性

    //对于引用类型，同理浅层复制

    //深层复制

    $.extend(true,target,source)

======================

jq操作元素尺寸

    $(‘div‘).width();                           获取

    $(‘div‘).width(300);                        设置

    $(‘div‘).innerWidth();                         获取设置 width + 左右padding \ 

    $(‘div‘).innerHeight();                        设置

    $(‘div‘).outerWidth();                         获取设置 width + 左右padding + 左右border \ 

    $(‘div‘).outerHeight();                        设置

    $(‘div‘).outerWidth(true);                     获取设置 width + 左右padding + 左右border + margin \ 

    $(‘div‘).outerHeight();                        设置

// 不是很清晰明了使用

//获取设置距离文档的位置

    offset()：left top

    $(‘.son‘).offset({

        left:300,

        top:300

    })

    //获取距离带有定位的最近祖先偏移。假如没有定位的祖先，则以文档为准；

    //该方法只能获取，不能设置！！！！！！！！

    $(‘.son‘).position()

    scrollTop()

    scrollLeft()

    ex:

        //设置窗口滚动效果

        $(‘window‘).scroll(function(){

        });

        //返回顶部

        $(‘html,document,body‘).scrollTop(0);

        --设置动画

        $(‘html,body‘).stop.animate({

            scrollTop:0

        });

    ---注意：对元素做动画，只能使用元素html,body, 而document失效！