jQuery

五、jQuery

jQuery入门

jQuery的基本使用

jQuery的入口函数

/** 
 * $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $
 * $ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法
 */
/** 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装  */
$(document).ready(function(){
    alert(11)  //  此处是页面DOM加载完成的入口
})   

$(function () {   
    alert(11)  //  此处是页面DOM加载完成的入口
})

jQuery方法获取的元素

/** 用原生 JS 获取来的对象就是 DOM 对象 */
let myDiv = document.querySelector('div'); // myDiv 是DOM对象

/**
 * jQuery 方法获取的元素就是 jQuery 对象
 * jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
 * 只有 jQuery 对象才能使用 jQuery 方法
 * DOM 对象则使用原生的 JavaScript 方法
 */
$('div'); // $('div')是一个jQuery 对象

DOM 对象与 jQuery 对象之间是可以相互转换的

/**
 * 因为原生js比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装.
 * 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
 */
// 1.DOM 对象转换为 jQuery 对象： $(DOM对象)
$('div') // 情况一
let div = document.querySelector('div')
$(div) // 情况二

// jQuery 对象转换为 DOM 对象（两种方式）
$('div') [index] // index 是索引号           
$('div') .get(index) // index 是索引号      

jQuery常用API

jQuery选择器

基础选择器
　　$(‘‘选择器’’) // 里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法	描述
ID选择器	$(“#id”)	获取指定ID的元素
全选选择器	$(‘*’)	匹配所有元素
类选择器	$(“.class”)	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

隐式迭代
　　遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(i:last’)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(" li:even")	获取到的li元素中，选择索引号为偶数的元素
:gt(index)	$(" li:gt(2)")	获取下标大于2的li元素
:lt(index)	$(" li:lt(2)")	获取下标小于2的li元素
:not(#foot)	$(" li:not(#foot)")	获取除id='foot’以外的li元素

内容筛选选择器

语法	用法	描述
:contains(‘xxx’)	$(“div:contains(‘xxx’)”)	获取包含xxx文本的div元素
:empty	$(“div:empty”)	获取不包含子元素或者文本的空的div元素
:has(selector)	$(“div:has(selector)”)	获取含有选择器所匹配的div元素
:parent	$(“div:parent”)	获取含有子元素或者文本的div元素

可见性筛选选择器

语法	用法	描述
:hidden	$(“li:hidden”)	获取所有不可见li元素
:visible	$(“li:visible”)	获取匹配所有可见元素

筛选方法

语法	用法	说明
parent()	$(“li”).parent();	查找直接父元素
parents([expr])	$(“li”).parents();	查找所有父级或指定的父级
parentsUntil(selector)	$(“li”).parentsUntil(selector);	查找所有父级直到但不包括selector
children(selector)	s(“ul”). children(“li”)	相当于$(“ul>li”)，最近一级（亲儿子)
find(selector)	$(“ul”).find("“li”);	相当于s(“ul li”),后代选择器
siblings([expr])	$(“.first”).siblings(“li”);	查找兄弟节点，不包括自己本身
next()	$(“.first”).next()	查找当前元素的下一个同辈元素
prev()	$(“.first”).prev()	查找当前元素的上一个同辈元素
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(“.last”).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)” ) ，index从0开始
first()	$(“li”).first()	返回被选中元素中第一个元素
last()	$(“li”).last()	返回被选中元素中最后一个元素
filter(‘.red’)	$(“li”).filter(‘.red’)	返回被选元素中,class含有red的元素
not(‘.red’)	$(“li”).not(‘.red’)	返回被选元素中,class不含red的元素

jQuery样式操作

操作css方法
　　参数只写属性名，则是返回属性值
　　　　$(this).css(''color'');
　　参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
　　　　$(this).css(''color'', ''red'');
　　参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开；属性可以不用加引号，但必须采取驼峰命名法
　　　　$(this).css({ "color":"white","font-size":"20px"});
设置类样式方法
　　作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点
　　添加类
　　　　$(“div”).addClass(''current'');
　　移除类
　　　　$(“div”).removeClass(''current'');
　　切换类
　　　　$(“div”).toggleClass(''current'');

jQuery效果

动画：
　　显示和隐藏
　　　　show()　　hide()　　toggle()
　　滑动
　　　　slideDown()　　slideUp()　　slideToggle()
　　淡入淡出
　　　　fadeIn()　　fadeOut()　　fadeToggle()　　fadeTo()
　　自定义动画
　　　　animate()
动画或效果队
　　动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

/** 
 * 参数都可以省略， 无动画直接显示
 * speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
 * easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
 * fn:回调函数，在动画完成时执行的函数，每个元素执行一次
 */
show([speed,[easing],[fn]]) // 显示语法规范 
hide([speed,[easing],[fn]]) // 隐藏语法规范
toggle([speed,[easing],[fn]]) // 切换语法规范
slideDown([speed,[easing],[fn]]) // 下滑效果语法规范
slideUp([speed,[easing],[fn]]) // 上滑效果语法规范 【隐藏元素display: none】
slideToggle([speed,[easing],[fn]]) // 滑动切换效果语法规范
fadeIn([speed,[easing],[fn]]) // 淡入效果语法规范
fadeOut([speed,[easing],[fn]]) // 淡出效果语法规范 【隐藏元素display: none】
fadeToggle([speed,[easing],[fn]]) // 淡入淡出切换效果语法规范

/** opacity 透明度必须写，取值 0~1 之间；speed 动画时长必须写 */
fadeTo([[speed],opacity,[easing],[fn]]) // 渐进方式调整到指定的不透明度

/** 
 * params: 想要更改的样式属性，以对象形式传递，必须写。 
 * 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略 
 */
animate(params,[speed],[easing],[fn]) // 自定义动画 animate


/** 
 * 事件切换
 * over:鼠标移到元素上要触发的函数（相当于mouseenter）
 * out:鼠标移出元素要触发的函数（相当于mouseleave）
 * 如果只写一个函数，则鼠标经过和离开都会触发它
 */
hover([over,]out)

/** 
 * 停止排队
 * stop() 方法用于停止动画或效果
 * stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画
 */
stop()

jQuery属性

设置或获取元素固有属性值prop()
　　所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type

prop('属性') // 获取属性语法
prop('属性', '属性值') // 设置属性语法

设置或获取元素自定义属性值attr()
　　用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”

attr('属性') // 获取属性语法 类似原生 getAttribute()
attr('属性', '属性值') // 设置属性语法 类似原生 setAttribute()
$(".checkbox:checked").length === $(".checkbox").length // 判断复选框是否全选中

数据缓存data()
　　data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../js/jquery.min.js"></script>
</head>
    <body>
        <div index="1" data-index="23">我是div</div>
    </body>
    <script>
        data('name','value') // 向被选元素附加数据   
        date('name') // 向被选元素获取数据   
        
        /** 还可以读取 HTML5 自定义属性，不用写data-，若属性值为数字型，得到的值也是数字型 */
        console.log($("div").data("index")); // 23
        $("div").data("index",'bbb');
        console.log($("div").data("index")); // bbb
        console.log($("div").attr("data-index")); // 23
</script>
</html>

jQuery内容文本值

普通元素内容html()（ 相当于原生inner HTML）

$("div").html() // 获取元素内容
$("div").html("<span>我是新的内容</span>"); // 设置元素内容

普通元素文本内容text() (相当与原生innerText）

$("div").text() // 获取元素内容
$("div").text("<span>我是新的内容</span>"); // 设置元素内容

表单的值val()（ 相当于原生value）

$("input").val() // 获取表单值
$("input").val("123456"); // 设置表单值

拓展方法

'￥100'.substr(1); // 100 截取字符串

let price = 100.0
price.toFixed(2) // 100.00 保留2位小数

jQuery元素操作

遍历元素

/**
 * each() 方法遍历匹配的每一个元素。主要用DOM处理。 
 * each 每一个里面的回调函数有2个参数：  
 *    index 是每个元素的索引号
 *    demEle 是每个DOM元素对象，不是jquery对象
 * 所以要想使用jquery方法，需要给这个dom元素转换为jquery对象  $(domEle)
 */
$("div").each(function (index, domEle) {}）

/**
 * $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
 * 里面的函数有2个参数：
 *    index：是每个元素的索引号
 *    element：遍历内容
 */
$.each(object，function (index, element) {}）

创建元素

$('<li></li>'); // 动态的创建了一个 <li>  

添加元素

// 内部添加
element.append('内容') // 把内容放入匹配元素内部最后面，类似原生 appendChild
element.prepend('内容') // 把内容放入匹配元素内部最前面
//在被选元素的结尾插入文本内容
element.append("添加到尾部");
//在被选元素的结尾插入html内容
element.append("<p>添加到尾部</p>");
//在被选元素的结尾插入jQuery对象
element.append($('h2'));

// 外部添加
element.after('内容') //  把内容放入目标元素后面
element.before('内容') // 把内容放入目标元素前面 

// 父级添加，支持任何选择器语法
element.wrap('<div class="new" />'); // 在每个匹配的元素外层包上一个父元素
element.wrap('.classname');
element.wrap($("#id"));
element.wrap(document.createElement("div"));

element.wrapAll('<div class="new" />'); // 在所有匹配元素外面包一层共同的父元素
element.wrapAll('.classname');
element.wrapAll($("#id"));
element.wrapAll(document.createElement("div"));

删除元素

element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html('') // 清空匹配的元素内容

element.unwrap(); // 删除匹配的元素的父元素,并保留被选元素及其兄弟元素，支持任何选择器语法

element.clone().appendTo('.goodbye'); // //clone没有参数时,不会复制原有元素的事件，支持任何选择器语法
element.clone(true).appendTo('.goodbye'); // //clone参数为true,会复制元素的事件，支持任何选择器语法

jQuery尺寸、位置操作

jQuery 尺寸

语法	用法	参数说明
width() / height()	取得匹配元素宽度和高度值只算 width / height	①参数为空，则是获取相应值，返回的是数字型
innerWidth() / innerHieght()	取得匹配元素宽度和高度值包含 padding	②如果参数为数字，则是修改相应值
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding、border	③参数可以不必写单位
outerWidth(true) / outerHeight(true)	取得匹配元素宽度和高度值包含 padding、borde、margin

jQuery 位置
　　位置主要有三个： offset()、position()、scrollTop()/scrollLeft()
　　offset()设置或获取元素偏移
　　　　①offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
　　　　②该方法有2个属性 left、top
　　　　　　offset().top 用于获取距离文档顶部的距离
　　　　　　offset().left 用于获取距离文档左侧的距离
　　　　③可以设置元素的偏移：offset({ top: 10, left: 30 })
　　position()获取元素偏移
　　　　①position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
　　　　②该方法有2个属性 left、top
　　　　　　position().top 用于获取距离定位父级顶部的距离
　　　　　　position().left 用于获取距离定位父级左侧的距离
　　　　③该方法只能获取
　　scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
　　　　①scrollTop() 方法设置或返回被选元素被卷去的头部
　　　　②不跟参数是获取，返回的是数字型
　　　　③若参数为不带单位的数字，则是设置被卷去的头部

返回顶部案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            height: 2000px;
        }

        .back {
            position: fixed;
            width: 80px;
            height: 80px;
            background-color: pink;
            right: 30px;
            bottom: 100px;
            display: none;
            line-height: 80px;
            text-align: center;
        }

        .container {
            width: 900px;
            height: 500px;
            background-color: skyblue;
            margin: 400px auto;
        }
    </style>
    <script src="../../js/jquery.min.js"></script>
</head>

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function () {
            // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
            $(document).scrollTop(100);

            // 页面滚动事件
            let boxTop = $(".container").offset().top;
            $(window).on('scroll', function () {
                if ($(document).scrollTop() >= boxTop) {
                    $(".back").fadeIn();
                } else {
                    $(".back").fadeOut();
                }
            });

            // 返回顶部
            $(".back").on('click', function () {
                // 不能是文档而是 html和body元素做动画
                $(document.documentElement).stop().animate({
                    scrollTop: 0
                });
            });
        })
    </script>
</body>
</html>

jQuery事件

jQuery事件注册

基本事件：
　　mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll
语法：
　　element.事件(function(){})

jQuery事件处理

事件处理on()绑定事件
　　on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
　　语法：
　　　　element.on(events,[selector],fn)
　　　　　　events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
　　　　　　selector: 元素的子元素选择器
　　　　　　fn:回调函数 即绑定在元素身上的侦听函数
　　on()方法优势1：
　　　　可以绑定多个事件，多个处理事件处理程序

$(“div”).on({
    mouseover: function(){}, 
    mouseout: function(){},
    click: function(){}	
})

如果事件处理程序相同

$(“div”).on(“mouseover mouseout”, function() {
    $(this).toggleClass(“current”);
})

on()方法优势2：
　　　　可以事件委派操作 。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素

$('ul').on('click', 'li', function() {
    alert('hello world!');
})

on()方法优势3：
　　　　动态创建的元素，click() 没有办法绑定事件， on() 可以给动态生成的元素绑定事件

$('div').on('click','p', function(){
     alert('俺可以给动态生成的元素绑定事件')
 })

事件处理on()解绑事件
　　off() 方法可以移除通过 on() 方法添加的事件处理程序

$("p").off() // 解绑p元素所有事件处理程序
$("p").off( "click")  // 解绑p元素上面的点击事件
$("ul").off("click", "li");   // 解绑事件委托

事件处理one()绑定事件
　　事件只触发一次

("p").one("click", function () {
    alert(11);
})

自动触发事件trigger()

$(function() {
    $("div").on("click", function() {
        alert(11);
    });

    // 1. 元素.事件()
    $("div").click(); // 会触发元素的默认行为

    // 2. 元素.trigger("事件")
    $("div").trigger("click"); // 会触发元素的默认行为

    // 3. 元素.triggerHandler("事件")
    $("div").triggerHandler("click"); // 不会触发元素的默认行为
});

jQuery 其他方法

jQuery 拷贝对象

/**
 * 语法：$.extend([deep], target, object1, [objectN])
 * 		deep: 如果设为true 为深拷贝， 默认为false  浅拷贝
 * 		target: 要拷贝的目标对象
 *		object1:待拷贝到第一个对象的对象
 *		objectN:待拷贝到第N个对象的对象
 * 		浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
 *		深拷贝，前面加true， 完全克隆(拷贝的对象,而不是地址)，修改目标对象不会影响被拷贝对象
 */
$(function () {
    let targetObj = {
        id: 0
    };
    let obj = {
        id: 1,
        name: "andy"
    };
    /** 会覆盖 targetObj 里面原来的数据 */
    $.extend(targetObj, obj);
    console.log(targetObj); // {id: 1, name: "andy"}

    let targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };
    let obj = {
        id: 1,
        name: "andy",
        msg: {
            age: 18
        }
    };
    /** 一、浅拷贝把待拷贝对象里面的复杂数据类型地址拷贝给目标对象 */
    $.extend(targetObj, obj);
    console.log(targetObj); // msg :{age: 18}
    targetObj.msg.age = 20;
    console.log(targetObj); // msg :{age: 20}
    console.log(obj); // msg :{age: 20}

    /** 二、深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 */
    $.extend(true, targetObj, obj);
    console.log(targetObj); // msg :{sex: "男", age: 20}
    targetObj.msg.age = 20;
    console.log(targetObj); // msg :{sex: "男", age: 20}
    console.log(obj); // msg :{age: 18}
})

jQuery 多库共存

问题概述：
　　jQuery使用$作为标示符，随着jQuery的流行,其他 js 库也会用这$作为标识符， 这样一起使用会引起冲突。
客观需求：
　　需要一个解决方案，让jQuery 和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
jQuery 解决方案：
　　1.把里面的 $ 符号 统一改为 jQuery
　　　　比如 jQuery(‘‘div’’)
　　2.jQuery 变量规定新的名称：
　　　　$.noConflict() 如：let xx = $.noConflict();