53、JQuery框架基础

参考博客：博客园-JsonJi，https://www.cnblogs.com/Dominic-Ji/p/10490669.html

一、JQuery简介

JQuery是一个轻量化的、兼容多种浏览器(IE已经被淘汰)的JavaScript类库。它内部封装了原生的JavaScript代码，还额外添加了很多功能，使用户能够更加方便地处理HTML document、events、动画效果、Ajax交互。它的宗旨是“Write less, do more.”，即写更少的代码，但能做更多的事。

1.1、JQuery优点

JQuery框架非常轻量，核心文件才几十KB，占用资源较小。
简化了原生JS、CSS代码，基于链式表达式可将多个操作集中于一行完成，因此更为简介，代码可读性更高。
兼容多种浏览器
支持插件扩展，并拥有丰富的第三方插件如：树形菜单、日期控件、图片切换插件、弹出窗口等。

1.2、导入JQuery

可以借助于各代码编辑器的初始化模板或者自己手动在script导入JS文件。
基于JQuery提供的CDN服务直接加载文件，如前端免费的CDN：bootCDN

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

1.3、JQuery对象

JQuery对象即通过jQuery封装DOM对象后的新对象，为jQuery所独有，因此jQuery对象只能使用jQuery对象的方法而不能使用原生DOM的方法。

二、JQuery基本语法

在声明一个jQuery对象的变量时，约定俗成在变量名前加$符号。

2.1、查找标签

与HTML、CSS查找非常相似，只是简化了许多。

2.1.1、基本选择器

id选择器

$('#ID')  // 注意，一定要在id前加#

标签选择器

$('标签名')

class选择器

$('.类名')  // 注意，一定要在类名前加.点号

2.1.2、分组选择器

$('#ID, .类型, 标签名')

2.1.3、组合/层级选择器

$("x y");  // x的所有后代y（子子孙孙）
$("x > y");  // x的所有儿子y（儿子）
$("x + y")  // 找到所有紧挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y

2.1.4、基本筛选器

$('ul>li:first')  // 找到ul的所有后代li中的第一个
$('ul>li:last')  // 找到ul的所有后代li中的最后一个
$('ul>li:eq(3)')  // 找到ul的所有后代li中索引值为3的标签，索引值从0开始
$('ul>li:even')  // 找到ul的所有后代li中索引值为偶数的标签
$('ul>li:odd')  // 找到ul的所有后代li中索引值为奇数的标签
$('ul>li:gt(2)')  // 找到ul的所有后代li中索引值大于2的标签
$('ul>li:lt(2)')// 找到ul的所有后代li中索引值小于2的标签
$('ul>li:not(元素选择器)'  // 移除所有满足not条件的标签
$('ul:has(元素选择器)'  // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

2.1.5、属性选择器

<input type="text">
<input type="checkbox" name="" id="">
<input type="password" name="" id="">  

$('input[type=text]');  // 获取input框中属性为text的标签
jQuery.fn.init [input, prevObject: jQuery.fn.init(1)]0: inputlength: 1prevObject: jQuery.fn.init [document]__proto__: Object(0)
$('input[type!=text]');  // 获取input框中属性不是text的所有标签
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]

2.1.6、表单筛选器

语法：标签:属性

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

:enabled
:disabled
:checked
:selected

示例

$('input:text')
jQuery.fn.init(2) [input, input#i2, prevObject: jQuery.fn.init(1)]0: input1: input#i2length: 2prevObject: jQuery.fn.init [document]__proto__: Object(0)
$(':text')
jQuery.fn.init(2) [input, input#i2, prevObject: jQuery.fn.init(1)]
// 特殊情况：checked会将checked和selected都拿到，所以最好人为在它前面添加个input

:checked，它会将checked和selected都拿到，所以最好人为在它前面添加个input

2.1.7、筛选器方法

// 下一个元素
$('#i1').next()  // 指定标签的下一个标签
jQuery.fn.init [input#i2, prevObject: jQuery.fn.init(1)]
$('#i1').nextAll()  // 指定标签下面的所有标签
jQuery.fn.init(6) [input#i2, input#c1, input#p1, input#b1, button#bu1, script, prevObject: jQuery.fn.init(1)]
$('#i1').nextUntil('#p1')  // 指定标签到下面指定条件之间的所有标签，但不包括该条件
jQuery.fn.init(2) [input#i2, input#c1, prevObject: jQuery.fn.init(1)]
// 上一个元素
$('#i2').prev()  // 指定标签的上一个标签
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]
$('#d1').prevAll()  // 指定标签上面所有的标签
jQuery.fn.init(6) [button#bu1, input#b1, input#p1, input#c1, input#i2, input#i1, prevObject: jQuery.fn.init(1)]
$('#d1').prevUntil('#p1');  // 指定标签到上面指定条件之间的所有标签，但不包括该条件
jQuery.fn.init(2) [button#bu1, input#b1, prevObject: jQuery.fn.init(1)]
// 父元素
$('#p6').parent()  // 指定标签的上一级标签
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('#p6').parents()  // 指定标签的祖宗十八代
jQuery.fn.init(4) [div, div, body, html, prevObject: jQuery.fn.init(1)]
$('#p6').parentsUntil('#d1')  // 同next和prev
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
// 儿子兄弟元素
$('#d1').children()  // 指定标签的儿子
jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
$('#d1').siblings()  // 指定标签的兄弟姐妹，包括上下
jQuery.fn.init(7) [input#i1, input#i2, input#c1, input#p1, input#b1, button#bu1, script, prevObject: jQuery.fn.init(1)]

查找

// 等同于$('div p')
$("div").find("p")
// 等同于$('div .c1')
$("div").filter(".c1")

.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素

2.2、操作标签

$('

')，创建标签。

2.2.1、样式操作

class操作

$('#d1').addClass('name')  // 为标签添加指定class
jQuery.fn.init [div#d1.name]
$('d1').removeClass('name')  // 为标签移除指定class
jQuery.fn.init [prevObject: jQuery.fn.init(1)]
$('d1').hasClass('name')  // 判断是否存在指定的class
false
$('d1').toggleClass('name')  // 存在则删除，无则添加

$('#d1').css('color','red')  // 为标签添加属性

2.2.2、位置操作

$('#d1').offset()  // 获取当前浏览器窗口的相对位置
{top: 35.400001525878906, left: 8}
$('#d1').offset({top:100,left:100})  // 设置标签位置，必须要用K/V格式
jQuery.fn.init [div#d1.name]
$('#d1').position()  // 获取当前标签相对于父标签的相对位置
{top: 100, left: 100}
$('#d1').scrollTop()  // 获取当前标签相对于滚动条顶部的偏移量，括号里加参数即跳转至指定位置
0
$('#d1').scrollLeft()  // 获取当前标签相对于滚动条左侧的偏移量，括号里加参数即跳转至指定位置
0

回到顶部案例

// CSS样式
<style>
    /*这三个标签都是占位方便演示*/
    #d1 {
        height: 400px;
        width: 100%;
        background-color: green;
    }
    #d2 {
        height: 400px;
        width: 100%;
        background-color: hotpink;
    }
    #d3 {
        height: 400px;
        width: 100%;
        background-color: black;
    }
    /* 回到顶部按钮 */
    #s1 {
        height: 50px;
        width: 80px;
        bottom: 10px;
        right: 10px;
        border: 3px solid burlywood;
        background-color: orange;
        position: fixed;
    }
    /*默认隐藏回到顶部按钮*/
    .hide {
        display: none;
    }
</style>
// JS控制
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <button id="s1" class="hide">回到顶部</button>
    <script>
        /*当屏幕滚动的偏移量大于100时，移除隐藏属性显示回到顶部按钮*/
        $(window).scroll(function () {
            if ($(window).scrollTop()>100) {
                $('#s1').removeClass('hide')
            } else {
                /*当屏幕在最顶部时隐藏按钮*/
                $('#s1').addClass('hide')
            }
        })
        /*点击按钮返回顶部*/
        $('#s1').on('click',function () {
            $(window).scrollTop(0)
        })
    </script>
</body>

2.2.3、尺寸

$('#d1').height(100)  // 调整高
jQuery.fn.init [div#d1]
$('#d1').width(100)  // 调整宽
jQuery.fn.init [div#d1]
$('#d1').innerHeight(200)  // 文本+内边距的高
jQuery.fn.init [div#d1]
$('#d1').innerWidth(150)  // 文本+内边距的左右
jQuery.fn.init [div#d1]
$('#d1').outerHeight(200)  // 文本+内边距+外边距
jQuery.fn.init [div#d1]

2.2.4、文本操作

HTML代码

$('div').html()  // 获取第一个匹配到的元素的HTML内容
"nihao"
$('div').html('大家好')  // 为所有匹配到的元素设置HTML内容
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]

文本值

$('div').text()  // 取得所有匹配到的元素的文本
"大家好大家好大家好"
$('div').text('你们好')  // 为所有匹配到的元素设置文本
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]

获取值操作

// val等同于value
$('#s1').val()
"reading"
$('#s1').val('learing')
jQuery.fn.init [select#s1]
val([val1, val2])// 设置多选的checkbox、多选select的值

获取文件数据

// 直接获取的是文件名
$('#i1').val()
"C:\fakepath\player.gdc"
// 第一个[0]是将JQuery对象转换为原生的JS对象，files是获取文件对象，第二个[0]是文件数据
$('#i1')[0].files[0]
File {name: "player.gdc", lastModified: 1612710879228, lastModifiedDate: Sun Feb 07 2021 23:14:39 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 49985, …}

示例

<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

// 自定义登录校验示例，模拟用户名密码不能为空
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>文本操作之登录验证</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>

<form action="">
  <div>
    <label for="input-name">用户名</label>
    <input type="text" id="input-name" name="name">
    <span class="error"></span>
  </div>
  <div>
    <label for="input-password">密码</label>
    <input type="password" id="input-password" name="password">
    <span class="error"></span>
  </div>
  <div>
    <input type="button" id="btn" value="提交">
  </div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    var username = $("#input-name").val();
    var password = $("#input-password").val();

    if (username.length === 0) {
      $("#input-name").siblings(".error").text("用户名不能为空");
    }
    if (password.length === 0) {
      $("#input-password").siblings(".error").text("密码不能为空");
    }
  })
</script>
</body>
</html>

2.2.5、属性操作

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。对于标签上有的能够看到的书信和自定义属性用attribute；对于返回布尔值比如CheckBox radio option是否被选中用prop，返回true和false

用于ID或自定义属性

let selectEle = $('select')
undefined
selectEle.attr('name')  // 获取第一个被匹配到的元素的属性值
"top"
selectEle.attr('name','juli')  // 为所有匹配到的元素设置属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]
selectEle.attr({'user':'sanxi','passwd':123})  // 为所有匹配到的元素设置多个属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]
selectEle.removeAttr('user','passwd')  // 移除属性值
jQuery.fn.init [select#s1, prevObject: jQuery.fn.init(1)]

用于checkbox和radio

let inputEle = $('input')
undefined
inputEle.prop('id')  // 获取第一个被匹配到的元素的属性值
"i1"
inputEle.removeProp('id')  // 移除匹配到所有元素的指定属性值
jQuery.fn.init(2) [input#i1, input#i2, prevObject: jQuery.fn.init(1)]

2.2.6、文档处理

添加到内部的后面

将指定元素添加到该标签的内部的最后面

// 为标签添加文本内容
$('#d1').append('#i1')
jQuery.fn.init [div#d1]
// 将指定标签添加至尾部，注意区分引号，有引号代表添加字符串。
let iniputEle = $('#i1')
undefined
$('#d1').append(iniputEle)
jQuery.fn.init [div#d1]
// 将标签i1添加至指定标签的内部的最后面
$('#i1').appendTo(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]

添加到内部的前面

添加至内部的前面，语法同上。

// 将指定标签添加到标签d1内部的最前面
$('#d1').prepend(iniputEle)
jQuery.fn.init [div#d1]
// 将标签i1添加到指定标签divEle内部的最前面
$('#i1').appendTo(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]

添加到外部的前面

// 把divEle添加到标签i1的前头
let divEle = $('#d1')
undefined
$('#i1').before(divEle)
jQuery.fn.init [input#i1]
// 将标签i1插入到divEle的前面
$('#i1').insertBefore(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]

添加到外部的后面

// 将divEle添加到标签i1的后面
$('#i1').after(divEle)
jQuery.fn.init [input#i1]
// 将i1插入到divEle的后面
$('#i1').insertAfter(divEle)
jQuery.fn.init [input#i1, prevObject: jQuery.fn.init(1)]

移除与清空标签

// 移除所有div标签
$('div').remove()
jQuery.fn.init(3) [div#d1, div#d2, div#d3, prevObject: jQuery.fn.init(1)]
// 清空指定标签内的所有子标签
$('#d1').empty()
jQuery.fn.init [div#d1]

三、JQuery事件(重点)

3.1、常用事件

$('#d1').click(function name(params) {})  // 点击触发事件
$('#d1').hover(function name(params) {})  // 鼠标悬浮事件
$('#d1').blur(function name(params) {})  // 
$('#d1').focus(function name(params) {})  // input焦点事件
$('#d1').change(function name(params) {})  // 文本更改事件
$('#d1').keyup(function name(params) {})

3.2、事件的两种绑定方式

直接绑定

$('d1').click(function () {
  aler('sanxi666')
})

on绑定

相比直接绑定on更强大，还支持事件委托。

$('d1').on('click',function () {
  alert('123')
})

3.3、事件示例

克隆事件

<style>
    #d1 {
        height: 100px;
        width: 100px;
        background-color: gold;         
    }
</style>
<body>
    <div id="d1">绝版神器，点击就送</div>
    <div id="d2"></div>
    <div id="d3"></div>
    
  
    <script>
        $('#d1').on('click',function () {
            $(this).clone().insertAfter($('body'))  /*this指代被操作的元素本身*/
            /*克隆默认只克隆HTML和CSS，不克事件；clone内加true可以连事件都克隆*/
        })
    </script>
</body>

input实时监控事件

模拟注册登录时，输入字符少于规定字数则出现警示信息。

<style>
    .c1{
        font-size: 9px;
        color: red;
    }
    .c2 {
        display: none;
    }
</style>
<body>
    username:<input type="text" id="i1">
    <span class="c1 c2" id="s1">用户名不能少于8位</span>
    <br>
    <script>
        $('#i1').on('input',function () {
            if($(this).val().length<8){
                $('#s1').removeClass('c2')
            } else {
                $('#s1').addClass('c2')
            }
        })
    </script>
</body>

hover事件

写一个函数时，悬浮和移走都是同一动作，写两个函数则可以悬浮一个，移开一个。

注意：其它事件都可以用on，唯独hover不行。

<body>
    <p>点击就送648大礼包</p>
    <script>
        $('p').hover(
            function () {
                alert('你还真信了？')
        },
            function () {
                alert('别走，这次是真的！')
        })
    </script>
</body>

键盘按键事件

按键触发应用于如输入法、小游戏！keydown为按下，keyup为松开，funaction里面会有个形参event拿到按键内部对应的编码(keycode)

<script>
    $(window).keydown(function (event) {
        alert(event.keyCode)
    })
    $(window).keyup(function (event) {
        alert(event.keyCode)
    })
</script>

3.4、阻止后续事件执行

我们知道，form表单的submit按钮本身自带有事件，即点击后提交数据至后端；那么当我们再给submit绑定一个自定义事件时，比如form表单中的submit按钮，加一个触发显示文本的事件，本身submit自己也有提交的事件，这就是两个事件了。当我们点击按钮时，显示的文本会立即被提交，因此页面也被刷新，直观的效果就是疯狂点，文字疯狂闪烁。

<body>
    <form action="">
        <span id="s1"></span>
        <input type="submit" value="提交" id="i1">
    </form>
    <script>
        $('#i1').on('click',function () {
            $('#s1').text('别瞎搞')
        })
    </script>
</body>

那么想阻止其中一个事件不再执行，该怎么搞？

1、在自定义事件的最后加return false，这种属于万金油方法。

<script>
    $('#i1').on('click',function () {
        $('#s1').text('别瞎搞')
        /*只需要加这一个return false就够了*/
        return false
    })
</script>

2、函数加形参，它有个方法preventDefalut()，但是这个只能阻止默认的事件

<script>
    $('#i1').on('click',function (e) {
        $('#s1').text('别瞎搞')
        e.preventDefault()
    })
</script>

很明显，第一种return更为方便。

3.5、阻止事件冒泡

如果一个标签及其子标签都绑定了事件，当子标签触发事件时，它的父辈们也会触发，这会烦人。如下所示：当触发d3的事件后，它的父辈如d2、d1也会随后触发！

<body>
    <div id="d1">d1
        <div id="d2">d2
            <div id="d3">d3</div>
        </div>
    </div>
    <script>
        $('#d1').on('click',function () {
            alert('我是d1，我不想搞事')
        })
        $('#d2').on('click',function () {
            alert('我是d2，我不想搞事')
        })
        $('#d3').on('click',function () {
            alert('我是d3，气氛搞起来')
        })

    </script>
</body>

如何阻止？不用说啦，选return false！

1、return false，万能的return false；就不再演示了。

2、也是e形参，这次是stopPropagation。

<script>
    $('#d1').on('click',function () {
        alert('我是d1，我不想搞事')
    })
    $('#d2').on('click',function () {
        alert('我是d2，我不想搞事')
    })
    $('#d3').on('click',function (e) {
        alert('我是d3，后面的都给我消停会')
        e.stopPropagation()
    })

</script>

3.6、事件委托

动态创建出来的标签，无法触发事件；我们可以用on来将这件事情委托给on，在指定标签范围内，无论该标签是事先创建的还是后续动态创建都会触发事件。

3.7、页面加载

等待页面加载完毕再执行代码，JQuery中等待页面加载完毕的方法

1、$(document).ready(function(){})

2、$(function(){代码})

3、直接写在body内部最下方

与window.onload的区别

window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

四、简单动画效果

显示/隐藏

// 显示元素，数组内可以放时间，单位是毫秒
$('#d1').show([10000])
// 隐藏元素，数组内可放时间
$('#d1').hide([20000])
// toggle你懂的，已显示则隐藏，已隐藏则显示
$('#d1').toggle()

滑动

// 从上而下滑动显示元素，括号内可以放时间，单位是毫秒
$('#d1').slideUp(10000)
// 由下而上滑动显示元素
$('#d1').slideDown(10000)
// 已收则从上而下显示，已显示则自下而上收回元素。

渐变色

这个fadein和fadeout括号内可以填'slow', 'fast'或者直接填时间

//  淡出，即从无到有
$('#d1').fadeIn('slow')
$('#d1').fadeIn(3000)
// 淡入，从有到无
$('#d1').fadeOut(3000)
// toggle，你懂的
$('#d1').fadeToggle(3000)
// 淡变到某个透明度后停止，第二个参数是透明度
$('#d1').fadeTo(3000,0.5)

五、补充知识点

each方法

each里面第一个参数写个容器数据类型，第二个参数写一个函数；函数的两个形参分别是索引、索引对应的值；有了each后，就不用for循环了！

ll = [11,22,66,88]
(4) [11, 22, 66, 88]
$.each(ll,function(index,attr){console.log(index,attr)})
VM1538:1 0 11
VM1538:1 1 22
VM1538:1 2 66
VM1538:1 3 88
(4) [11, 22, 66, 88]

data方法

能够让指定的标签帮我们存储数据并用户肉眼看不见,属于隐形存储。

$('#d1').data('属性','属性值')

$('#d1').removeData('属性','属性值')