JavaScript：jQuery类库

目录

jQuery类库

一、jQuery简介

1.特点

  • 加载速度更快

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

  • 选择器更多更好用

丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。

  • 一行代码搞定更简介

链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

  • 支持ajax请求(重点)

jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

  • 兼容多浏览器

jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

  • 插件扩展开发

jQuery有着丰富的第三方的插件

2.使用jQuery的不同方式

  • 下载核心文件到本地引入（本地环境，没有网络也可以使用）
  • CDN网络资源加载

3.jQuery底层本质

jQuery封装了JS代码，让编写更简单，但是没有原生JS代码运行的更快

  • JS代码
let pEle = document.getElementsByTagName('p')[0]
undefined

pEle.style.color = 'red'
'red'

pEle.nextElementSibling.style.color = 'green'
  • jQuery代码
$('p').first().css('color','yellow').next().css('color','blue')

4.标签对象与jQuery对象

  • 不同的对象能调用的方法是不同的，在编写代码的时候一定要知道正在操作的是jQuery对象还是标签对象
  • 标签对象与jQuery对象互相转换

可以把jQuery对象看成一个特殊的列表，通过jQuery对象索引取值的方式来获取标签对象

二、jQuery查找标签

1.基本选择器

  • id选择器
$('#d1')
  • class选择器
$('.c1')
  • 标签选择器
$('div')

2.组合选择器

  • 寻找id是d1的div标签
$('div#d1')
  • 查找含有c1样式类的span标签
$('span.c1')
  • 查找div或者span或者p标签
$('span,div,p')
  • 查找id是d1，或者class中包含为c1，或者span标签
$('#d1,.c1,span')

3.层级选择器

$('div p')   查找含有div中所有的后代p标签
$('div>p')   查找div里面的儿子p标签
$('div+p')   查找div同级别下面紧挨着的p标签
$('div~p')   查找div同级别下面所有的p标签

4.属性选择器

$('[username]')  查找含有username属性名的标签
$('[username="duoduo"]')  查找含有username属性名且值为“duoduo”的标签
$('div[username="duoduo"]')   查找含有username属性名且值为“duoduo”的div标签

5.基本筛选器

image-20221207095908427
筛选器 作用
:first 第一个
:last 最后一个
:eq(index) 索引等于index的那个元素
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) 匹配所有小于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
  • 例子：通过jQuery代码操作返回的都是jQuery对象
$('span')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]

$('span:first')
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]0: spanlength: 1prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:even')
jQuery.fn.init(3) [span, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: spanlength: 3prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:gt(3)')
jQuery.fn.init(2) [span, span, prevObject: jQuery.fn.init(1)]

$('span:not(#d1)')
jQuery.fn.init(6) [span, span, span, span#d2, span, span, prevObject: jQuery.fn.init(1)]0: span1: span2: span3: span#d24: span5: spanlength: 6prevObject: jQuery.fn.init [document][[Prototype]]: Object(0)

$('span:has(#d2)')
jQuery.fn.init [prevObject: jQuery.fn.init(1)]

6.表单筛选器

仅限于表单标签内部使用

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button
  • 表单标签属性
:enabled
:disabled
:checked
:selected

:checked除了查找到checked的标签，还会查找到selected标签

:selected只会查找到selected的标签

image-20221207172125178

7.筛选器方法

  • 下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
  • 上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
  • 父亲元素：
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
  • 儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
  • 查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p")
image-20221207172808997

image-20221207101952513

8.链式操作的本质

为什么在jQuery中为什么可以通过点的操作不断的点属性这种链式操作在python中用代码模拟

通过每次操作之后返回了操作的对象，这样就可以通过对象点方法后继续点方法了，进行链式操作了

class MyClass(object):
    def func1(self):
        print('执行了func1')
        return self

    def func2(self):
        print('执行了func2')
        return self

obj = MyClass()
obj.func1().func2()   # None.func2()

三、操作标签

1.class操作

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

2.位置操作

$(window).scrollTop()
  • 例
$(window).scrollTop()
6618.5

3.文本操作

text()        innerText
html()        innerHTML
val()         value
jQuery对象[0].files   files[0]

4.创建标签

document.createElement()   $('<a>')

5.属性操作

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

attr对于动态变化的属性，获取会失真

  • prop和attr的区别：

    attr全称attribute(属性)

    prop全称property(属性)

    虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的

prop('value') // 获取value属性的值
prop('checked',true); // 设置属性
removeProp('value') // 移除value属性

这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。

总结一下：

  1. 对于标签上有的能看到的属性和自定义属性都用attr
  2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

6.文档处理

添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点

四、jQuerty事件

1.JS绑定事件与jQuery绑定事件

（1）JS绑定事件

标签对象.on事件名 = function () {
  this
}

（2）jQuery事件绑定

  • 方式一：
jQuery对象.事件名(function(){
 
})
  • 方式二
jQuery对象.on('事件名', function(){
  
})

image-20221207111035764

2.常用事件

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

3.input框实时监听事件

<input type="text">

<script>
    $(":text").on('input',function(){
        // alert(123)
        console.log($(this).val())
    })
</script>

4.克隆事件

clone() 默认不克隆事件，加true就可以

<!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>
    #b1 {
      background-color: deeppink;
      padding: 5px;
      color: white;
      margin: 5px;
    }
    #b2 {
      background-color: dodgerblue;
      padding: 5px;
      color: white;
      margin: 5px;
    }
  </style>
</head>
<body>

<button id="b1">屠龙宝刀，点击就送</button>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>

<script src="jquery-3.2.1.min.js"></script>
<script>
  // clone方法不加参数true，克隆标签但不克隆标签带的事件
  $("#b1").on("click", function () {
    $(this).clone().insertAfter(this);
  });
  // clone方法加参数true，克隆标签并且克隆标签带的事件
  $("#b2").on("click", function () {
    $(this).clone(true).insertAfter(this);
  });
</script>
</body>
</html>
  • 例子
<button id="d1" style="border: 3px solid dodgerblue">没有克隆的影分身</button>
<hr>
<button id="d2" style="border: 3px solid orange">真正的影分身</button>
<script>
    $('#d2').on('click',function (){
        $('body').append($(this).clone(true))
    })
    $('#d1').on('click',function (){
        $('body').append($(this.clone()))
    })
</script>

image-20221207195537841

5.事件相关补充

（1）阻止后续功能

事件本身有功能了，如何取消本身默认的功能

在事件函数的最后return false

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
  • 取消form表单提交数据的默认功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
<form action="">
    <p>用户名：
        <input type="text">
    </p>
    <p>
        <input type="submit" id="d1">
    </p>
</form>

<script>
    $('#d1').click(function (event) {
        alert('弹出警告框')
        return false
        // event.preventDefault()
    })

</script>
</body>
</html>

（2）事件冒泡

多个标签互相嵌套，并且有相同的功能要执行的时候，会发生事件冒泡的现象

当只想点击span标签发生弹出警告框事件的时候，绑定p标签和div标签的弹出警告框事件也会发生

QQ20221207-200012

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>

</head>
<body>
    <div>
        <p>
            <span>点击span</span>
        </p>
    </div>


    <script>
        $('span').click(function (){
            alert('span')
        })
        $('p').click(function (){
            alert('p')
        })
        $('div').click(function (){
            alert('div')
        })

    </script>
</body>
</html>
  • 阻止事件冒泡

image-20221207200828087

（3）等待页面加载完毕再执行JS代码

  • 完整写法
$(document).ready(function(){
// 在这里写你的JS代码...
})
  • 简写
$(function(){
// 你在这里写你的代码
})

（4）事件委托

事件委托是通过事件冒泡的原理，让父标签去捕获子标签的事件

  • 将body中的所有的点击事件委托给button标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
</head>
<body>
    <button>点我</button>

    <script>
        // $('button').click(function () {
        //     alert('速度一定要快!!!')
        // })
        $('body').on('click','button',function () {
            alert('哈哈哈')
        })
    </script>
</body>
</html>

五、jQuery的简单的动画效果

1.点赞+1

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</html>

点赞特效简单示例

QQ20221207-203952

posted @ 2022-12-07 20:48  Duosg  阅读(64)  评论(0)  编辑  收藏  举报