标签：类库 jQuery 元素 span function 标签 JavaScript div

目录

• jQuery类库
• 一、jQuery简介
  • 1.特点
  • 2.使用jQuery的不同方式
  • 3.jQuery底层本质
  • 4.标签对象与jQuery对象
• 二、jQuery查找标签
  • 1.基本选择器
  • 2.组合选择器
  • 3.层级选择器
  • 4.属性选择器
  • 5.基本筛选器
  • 6.表单筛选器
  • 7.筛选器方法
  • 8.链式操作的本质
• 三、操作标签
  • 1.class操作
  • 2.位置操作
  • 3.文本操作
  • 4.创建标签
  • 5.属性操作
  • 6.文档处理
• 四、jQuerty事件
  • 1.JS绑定事件与jQuery绑定事件
  • 2.常用事件
  • 3.input框实时监听事件
  • 4.克隆事件
  • 5.事件相关补充
    • （1）阻止后续功能
    • （2）事件冒泡
    • （3）等待页面加载完毕再执行JS代码
    • （4）事件委托
• 五、jQuery的简单的动画效果
  • 1.点赞+1

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.基本筛选器

筛选器	作用
: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的标签

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")

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类名，如果有就移除，如果没有就添加。

2.位置操作

$(window).scrollTop()

• 例

$(window).scrollTop()
6618.5

3.文本操作

text()        innerText
html()        innerHTML
val()         value
jQuety对象[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(){
  
})

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>

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标签的弹出警告框事件也会发生

<!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>

• 阻止事件冒泡

（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>

点赞特效简单示例

标签：类库,jQuery,元素,span,function,标签,JavaScript,div
From： https://www.cnblogs.com/DuoDuosg/p/16964510.html