• 三十九、jQuery

    jQuery

    一 jQuery简介

    1. 兼容多浏览器的JavaScript库。
    2. 极大的简化了JavaScript的编写，它的宗旨就是：“Write less, do more.“
    3. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

    jQuery官网： https://jquery.com/

    二 jQuery对象

    jQuery对象就是通过jQuery包装DOM产生的对象，jQuery对象可以使用jQuery里的方法，但是不能使用DOM对象里的方法，同理，DOM对象也不能使用jQuery里的方法。
    我们在声明一个jQuery对象变量的时候在变量名前加一个$。

    var $variable = jQuery对象
var variable = DOM对象
$variable[0]  // jQuery对象转DOM对象

    • 1
    • 2
    • 3

    三 jQuery基础语法

    3.1 基本选择器

    id选择器：

    $("#id")

    • 1

    class选择器：

    $(".className")

    • 1

    标签选择器

    $("tagName")

    • 1

    配合使用：

    $("div.className")  // 找类中的div标签

    • 1

    所有元素选择器：

    $("*")

    • 1

    组合选择器：

    $("#id, .className, tagName")

    • 1

    层级选择器：

    $("div span");  //div的所有后代中的span
$("div > span");  //div的儿子spqn
$("div + span");  //紧挨在div后的span
$("div ~ span");  //div之后的所有同级span

    • 1
    • 2
    • 3
    • 4

    3.2 基本筛选器

    :first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    练习：自定义模态框，使用jQuery实现弹出和隐藏功能。

    3.3 属性选择器

    [attribute]
[attribute = value]  // 属性等于
[attribute != value]  // 属性不等于

    • 1
    • 2
    • 3
    <body>
    <input type="text">
    <input type="password">
    <input type="email">
    <script>
    	// 取input标签中类型未email的标签
        $("input[type='email']")
    script>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    3.4 表单筛选器

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    表单对象属性：

    :enabled
:disabled
:checked
:selected

    • 1
    • 2
    • 3
    • 4

    3.5 筛选器方法

    下一个元素

    $("#id").next()
$("#id").nextall()
$("#id").nextUntil("#d2")  //到哪个标签停止

    • 1
    • 2
    • 3

    上一个元素

    $("#id").prev()
$("#id").prevall()
$("#id").prevUntil("#id2")

    • 1
    • 2
    • 3

    父亲元素

    $("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("#id2") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

    • 1
    • 2
    • 3

    儿子和兄弟元素

    $("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

    • 1
    • 2

    筛选

    $("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

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

    • 1
    • 2
    • 3
    • 4
    • 5

    四 操作标签

    4.1 样式操作

    样式类

    addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

    • 1
    • 2
    • 3
    • 4

    4.2 位置操作

    offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

    • 1
    • 2
    • 3
    • 4

    4.3 尺寸

    height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4.4 文本操作

    HTML代码：

    html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

    • 1
    • 2

    文本值：

    text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

    • 1
    • 2

    值：

    val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

    • 1
    • 2
    • 3

    4.5 属性操作

    用于ID等或自定义属性

    attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

    • 1
    • 2
    • 3
    • 4

    用于checkbox和radio

    prop() // 获取属性
removeProp() // 移除属性

    • 1
    • 2

    prop和attr的区别：attr全称attribute(属性) ，prop全称property(属性)，虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

    五 事件

    5.1 常用事件

    click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    5.2 事件绑定

    方式一：
    .事件(function () {
    事件代码
    })

    方式二：
    .on(‘事件’,function(){
    事件代码
    })

    5.3 组织后续事件

    1. return false；
    2. p.preventDefault()；
    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止默认事件title>
head>
<body>

<form action="">
    <button id="b1">点我button>
form>

<script src="jquery-3.3.1.min.js">script>
<script>
    $("#b1").click(function (e) {
        alert(123);
        //return false;
        e.preventDefault();
    });
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    5.4 阻止事件冒泡

    涉及到标签嵌套并且有相同事件的时候，那么会逐级往上反馈并执行。

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阻止事件冒泡title>
head>
<body>
<div>
    <p>
        <span>点我span>
    p>
div>
<script src="jquery-3.3.1.min.js">script>
<script>
    $("span").click(function (e) {
        alert("span");
        e.stopPropagation();
    });

    $("p").click(function () {
        alert("p");
    });
    $("div").click(function () {
        alert("div");
    })
script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    5.5 事件委托

    创建标签的两种方式：

    1. JavaScript：document.createElement()
    2. jQuery：$(‘<标签名>’)

    事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托。

    $("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

    • 1
    • 2
    • 3
  • 相关阅读:
    1、Android APP开发基础
    SpringBoot-自定义Starter
    python---进程池与线程池
    VQA的应用（调研）
    力扣399题：除法求值
    从零开始学YC-Framework之鉴权
    《微信小程序-基础篇》带你了解小程序中的生命周期（二）
    4种实用的制作URL 文件的方法
    CLion配置libtorch找不到xxx.dll
    Tomcat 源码分析 (连接器) (六)
  • 原文地址：https://blog.csdn.net/weixin_68531269/article/details/126548773