JQuery的一些简单功能

Posted 2020-08-22

JQuery

js的缺点总结

1.入口函数只能有一个，如果出现多个，后面的会覆盖掉前面的
2.代码容错性差，容易出错，出错会导致后面的代码不执行
3.存在浏览器兼容性，比如innerText在火狐浏览器中不起作用
4.DOM操作复杂，实现简单的动画很麻烦

jQuery的两种入口函数：

$(document).ready(function(){});
$(function(){});

对比javascript的入口函数与jQuery的入口函数

1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行
2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

了解jQuery

$:其实就是一个函数；     $():参数不一样，功能不一样

jQuery对象与DOM对象之间的转换（难点）
    什么是DOM对象？
        使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。比如使用document.getElement*系列的方法返回的就是dom对象。
        dom对象只可以使用dom对象的方法和属性
什么是jQuery对象
    jQuery对象就是使用jquery的方法获取页面中的元素返回的对象就是jquery对象。比如使用$()方法返回对象都是jquery对象
    jquery对象只能使用jquery对象的方法
jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合）
jQuery对象和DOM对象的相互转换
    jquery对象转DOM对象
        第一种方法（推荐使用）
        var $li = $("li");
        第二种方法：
        $li[0]
        $li.get(0)   两种方法等价  取到DOM元素集合
        其实jQuery对象转DOM对象的实质就是取出jQuery对象中封装的DOM对象

DOM对象转jQuery对象
    var $obj = $(domObj);
    $(document).ready(function(){});就是典型的DOM对象转jQuery对象

JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库，目的是简化我们的开发 

选择器：
    基本选择器、层级选择器、过滤选择器、筛选选择器
    基本选择器：ID选择器 类选择器 标签选择器 并集选择器 交集选择器（标签指定式选择器）
    层级选择器：子代选择器 后代选择器
    过滤选择器：:eq（index）  :odd  :even
    筛选选择器：children(selector)  find(selector)  siblings(selector) parent()  eq(index)

jQuery操作样式
    css操作  功能：设置或者修改样式，操作的是style属性 （参数是一个对象，对象中包含了需要设置的样式名和样式值）
    class操作  
        addClass(name);添加样式类
        removeClass() 不带参数，移除所有的样式类  带参数，移除单个样式类

    hasClass(name)  判断是否有样式类  返回值为true false
    toggleClass(name);  切换样式类  name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

经验总结：
    1.如果操作到的样式非常少，可以考虑css方法
    2.如果操作到的样式非常多，那么可以通过class方法来操作，将样式写到一个class类里面。
    3.如果考虑到后期维护方便，将css从js中分离出来，那么推荐使用class的方式来操作。

jquery动画

show()显示  hide()隐藏  toggle():显示隐藏切换，如果是显示状态，执行隐藏操作，否则执行显示操作。
show([speed], [callback]);
滑入：slideDown（）  滑出：slideUp()   滑入滑出切换：slideToggle()
slideUp(speed, callback);
淡入：fadeIn（）  淡出：fadeOut()  淡入淡出切换：fadeToggle()
fadeIn(speed, callback);

自定义动画
    animate：自定义动画
        $(selector).animate(json,[speed],[easing]，[callback]);
            // json：要执行动画的CSS属性，带数字（必选）
            // speed：执行动画时长（必选，默认normal）
            //easing：控制动画的效果    
            //1.swing：摇摆、秋千(默认) 
            //2.linear:匀速
            // callback：动画执行完后立即执行的回调函数（可选）

    stop方法：停止当前正在执行的动画效果
    stop(clearQueue, jumpToEnd);
    //第一个参数：是否清除队列
    //第二个参数：是否跳转到最终效果

jquery操作DOM(节点)

创建元素  $(“<span>这是一个span元素</span>”);
添加元素  $(“div”).append($span);   $(“div”).append(“<span>这是一个span元素</span>”);

清空元素：
    empty：清空指定节点的所有元素，自身保留(清理门户)
    $(“div”).html(“”);//使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。
    remove：相比于empty，自身也删除（自杀）

克隆元素：
    // 复制$(selector)所匹配到的元素（深度复制）
    //clone(true)
    // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
    $(selector).clone();

jQuery操作属性

attr(name, value);
//用法举例
    $(“img”).attr(“title”,”哎哟，不错哦”);
    $(“img”).attr(“alt”,“哎哟，不错哦”);
attr(obj)
    //用法举例
        $("img").attr({
            title:"哎哟，不错哦",
            alt:"哎哟，不错哦",
            style:"opacity:.5"
        }）；
    获取属性：
        attr(name)
        1.获取属性时，只会获取到第一个元素对应的属性，与css方法一样
        2.获取属性时，如果该属性不存在，那么会返回undefined
    移除属性：
        removeAttr(name);
        //用法举例
        $("img").removeAttr("title");
    prop
        注意：在jQuery1.6之后，对于checked、selected、disable这类boolean类型的属性来说，
        如果使用attr方法获取属性值，得到的不是true和false，而是checked以及undefined。，
        使用prop方法来获取或者设置checked、selected、disable这类的值。prop方法使用跟attr方法一样。

        //设置属性
        $(“:checked”).prop(“checked”,true);
        //获取属性
        $(“:checked”).prop(“checked”);//返回true或者false

jQuery操作值与内容

val方法用于设置和获取表单元素的值，例如input、select、textarea的值
    //设置值
    $(“#name”).val(“张三”);
    //获取值
    $(“#name”).val();

html方法与text方法的区别：
html方法会识别html标签，text方法会把内容直接当成字符串，并不会识别html标签。

jQuery操作尺寸

height()与width()：设置或者返回元素的高度及高度,返回结果是数值类型。

innerWidth()与innerHeight()：返回元素的宽度及高度（包括padding）

outerWidth()与outerHeigth()：返回元素的宽度及高度（包括padding、border）

outWidth(true)与outerHeight(true)：返回元素的宽度及高度（包括padding、border、margin）

注意：只有height()与width（）可以进行设置操作，innerWidth（）、outWidth（）都是只读属性，只能获取、不能设置。

offset：
    设置或者获取元素相对于文档document的位置。
    注意：使用offset操作，如果元素没有设置定位(默认position:static)，则会把position修改为relative.会修改left、top
position
    获取相对于其最近的有定位的父元素的位置。offsetLeft
    // 获取，返回值为对象：{left:num, top:num}
    $(selector).position();
    注意：position方法只能获取，不能设置

scrollTop
    设置或者获取垂直滚动条的位置
    // 有参数表示设置偏移，参数为数值类型
    $(selector).scrollTop(100);
    // 无参数表示获取偏移
    $(selector).scrollTop();
scrollLeft
    设置或者获取水平滚动条的位置
    // 有参数表示设置偏移，参数为数值类型
    $(selector).scrollLeft(100);
    // 无参数表示获取偏移
    $(selector).scrollLeft();

jQuery事件的发展历程

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
$("p").bind("click mouseenter", function(){
//事件响应方法
});  可以绑定多个事件    缺点：不支持动态创建出来的元素绑定事件。

$(".parentBox").delegate("p", "click", function(){
//为 .parentBox下面的所有的p标签绑定事件
}); 支持动态创建出来的元素绑定事件。

为什么delegate支持动态绑定事件？原因是事件冒泡机制。因为事件时绑定到父元素上的，由子元素触发。

表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});
 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定（不使用代理）。
$(selector).on( "click", function() {});

事件解绑：
    unbind()  undelegate()  off（）

jQuery事件对象：
    event.type  事件类型
    event.data  存储绑定事件时传递的附加数据
    event.target    点了谁就是谁
    event.currentTarget    当前DOM元素，等同于this
    event.delegateTarget    代理对象
    screenX和screenY      对应屏幕最左上角的值
    offsetX和offsetY     点击的位置距离元素的左上角的位置
    clientX和clientY     距离页面左上角的位置（忽视滚动条）
    pageX和pageY         距离页面最顶部的左上角的位置（会计算滚动条的距离）
    event.witch         鼠标按键类型，1=鼠标左键 2=鼠标中键 3=鼠标右键
    event.keyCode       按下的键盘代码
    event.stopPropagation()     阻止事件冒泡行为
    event.preventDefault()     阻止浏览器默认行为
    return false;   

链式编程

链式编程原理：return this;
通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

隐式迭代：
    隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，
    简化我们的操作，方便我们调用。如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。
    设置性操作的时候，设置的是所有的元素。   获取性操作：获取的是第一个元素
each方法：
    有了隐士迭代，为什么还要使用each函数遍历？
        大部分情况下是不需要使用each方法的，因为jQuery的隐士迭代特性。如果要对每个元素做不同的处理，这时候就用到了each方法
多库共存：
    我们知道jQuery占用了$这个标识符，如果引用的其他库也用到$这个标识符，这时候为了保证每个库都能正常使用，
    这时候就存在了多库共存的问题。后引入的$的会覆盖掉先引入的库中的$。
    解决办法：
        $ === jQuery
        jQuery的$和jQuery是两个相同的变量，因此遇到多库共存的时候，可以让jquery交出$符的控制权，这个时候还是可以使用$.