jQuery 【关于jQuery 、 jQuery简介、基础选择器、属性选择器、jQuery扩展】(一)-全面详解（学习总结---从入门到深化）

news2024/11/25 20:38:34

目录

关于jQuery 

 jQuery简介

 选择器之基础选择器(一)

选择器之基础选择器(二)

 选择器之属性选择器(一)

选择器之属性选择器(二)

选择器之jQuery扩展(一)

选择器之jQuery扩展(二)

关于jQuery 

 现在是否还需要学习jQuery，毫无疑问到目前为止，我们仍然需要学习jQuery，原因如下：

1 各大网站还在应用（京东、百度）
2 一些广告页面、落地页还在应用
3 源码非常优秀，有助于理解JavaScript
4 其实对DOM操作并不能完全移除，只要涉及到DOM操作，jQuery是非常方便的

 jQuery简介

 jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画操作更加简单。

jQuery最大的优点就是简化DOM操作

官网文档：https://jquery.com/
中文文档：https://www.jquery123.com/

 体验jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="./js/jquery-3.6.0.min.js" charset="utf-8"></script>
</head>

<body>
    <div class="container">
        <p class="name">Hello jQuery</p>
    </div>
    <script type="text/javascript">
        $('.name').html("Hello 体验 jQuery")
    </script>
</body>
</html>

jQuery版本说明
jQuery分为三个大版本：1.x 2.x 3.x

1.x版本
兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
2.x版本
不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x版本
不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用  3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.6.0

 jQuery重点讲解知识点


1 选择器
2 DOM操作
3 CSS操作
4 事件处理
5 遍历
6 动画

 选择器之基础选择器(一)

 JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>
    <script>
        // 类选择器
        var div1 = document.getElementsByClassName("box")[0]
        var div2 = document.getElementsByClassName("box")[1]
        div1.innerHTML = "JS类选择器1"
        div2.innerHTML = "JS类选择器2"
        // 元素选择器
        var span = document.getElementsByTagName("span")[0]
        span.innerHTML = "JS元素选择器"
        // ID选择器(ID是唯一的)
        var a = document.getElementById("it");
        a.innerHTML = "JSID选择器"
    </script>
</body>
</html>

jQuery实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <div class="box">类选择器</div>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it" href="#">ID选择器</a>
    <script>
        // $就是jQuery的缩写，他就代表了jQuery
        // 类选择器
        $(".box").html("jQuery类选择器")
        // 元素选择器
        $("span").html("jQuery元素选择器")
        // ID选择器
        $("#it").html("jQuery ID选择器")
    </script>
</body>
</html>

选择器之基础选择器(二)

 子元素选择器 ("parent > child")
选择所有指定“parent”元素中指定的"child"的直接子元素

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 14px;
       }
    </style>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="topnav">
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    <script>
        $(".topnav > li").css("border", "3px double red");
    </script>
</body>
</html>

后代元素选择器（"parent child"）
选择所有指定“parent”元素中指定的"child"的后代元素
 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-size: 14px;
       }
    </style>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="topnav">
        <li>Item 1</li>
        <li>Item 2
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>Item 3</li>
    </ul>
    <script>
        $(".topnav li").css("border", "3px double red");
    </script>
</body>
</html>

 选择器之属性选择器(一)

 Attribute Selector [name="value"]
选择指定属性是给定值的元素

attribute: 属性
Selector: 选择器
name: 选中的属性
value: 属性值

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
 <body>
    <div>
        <input type="radio" name="user" value="name" />
        <span>name</span>
    </div>
    <div>
        <input type="radio" name="user" value="age" />
        <span>age</span>
    </div>
    <script>
       $('input[value="name"]').next().html("username");
    </script>
 </body>
</html>

Attribute Selector [name|="value"]
选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
 <body>
    <a href="#" alt="txc">童小纯</a>
    <a href="#" alt="txc-web">童小纯-前端</a>
    <a href="#" alt="txcxiaotong">txcxiaotong</a>
    <script>
        $('a[alt|="txc"]').css('border','3px solid green');
    </script>
 </body>
</html>

Attribute Selector [name*="value"]
选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txcweb" />
    <input name="xiaotongweb" />
    <input name="itxiaotong" />
    <script>$('input[name*="txc"]').val('study!');</script>
</body>
</html>

选择器之属性选择器(二)

 

Attribute Selector [name~="value"]
选择指定属性用空格分隔的值中包含一个给定值的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txc web" />
    <input name="txcxiaotongweb" />
   <script>$('input[name~="txc"]').val('study!');</script>
</body>
</html>

Attribute Selector [name$="value"]
选择指定属性是以给定值结尾的元素。这个比较是区分大小写的
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txcweb" />
    <input name="txcxiaotongweb" />
    <script>$('input[name$="web"]').val('study!');</script>
</body>
</html>

Attribute Selector [name^="value"]
选择指定属性是以给定字符串开始的元素
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <input name="txc-itxiaotong" />  
    <input name="txc web" />
    <input name="xttxcweb" />
    <script>$('input[name^="txc"]').val('study!');</script>
</body>
</html>

选择器之jQuery扩展(一)

:eq(index) Selector
在匹配的集合中选择索引值为index的元素。
 

温馨提示
index下标计算是从0开始的

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <ul class="nav">
        <li>List 1, item 1</li>
        <li>List 1, item 2</li>
        <li>List 1, item 3</li>
    </ul>
    <script>
        $("li:eq(2)").css("border","2px solid red")

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

:even Selector
选择所引值为偶数的元素

特别注意
这是基于0的索引，所以 :even 选择器是选择第一个元素，第三个元素，依此类推在匹配。

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>
    <script>$("tr:even").css("background-color", "#bbbbff");</script>
</body>
</html>

:odd Selector
选择索引值为奇数元素

特别注意
这是基于0的索引，所以 :odd 选择器是选择第二个元素，第四个元素，依此类推在匹配。

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row with Index #0</td>
        </tr>
        <tr>
            <td>Row with Index #1</td>
        </tr>
        <tr>
            <td>Row with Index #2</td>
        </tr>
        <tr>
            <td>Row with Index #3</td>
        </tr>
    </table>
    <script>$("tr:odd").css("background-color", "#bbbbff");</script>
</body>
</html>

选择器之jQuery扩展(二)

 :first Selector
选择第一个匹配的元素

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:first").css("background-color", "red");</script>
</body>
</html>

:last Selector
选择最后一个匹配的元素
 

<!DOCTYPE html>
<html>
<head>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1</td>
        </tr>
        <tr>
            <td>Row 2</td>
        </tr>
        <tr>
            <td>Row 3</td>
        </tr>
    </table>
    <script>$("tr:last").css("background-color", "red");</script>
</body>
</html>

:gt(index) Selector
选择匹配集合中所有大于给定index（索引值）的元素。
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>

        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:gt(4)").css("backgroundColor","yellow");
    </script>
</body>
</html>

:lt(index) Selector
选择匹配集合中所有索引值小于给定index参数的元素
 

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>gt demo</title>
    <script src="./js/jquery-3.6.0.min.js">
</script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TD #0</td>
            <td>TD #1</td>
            <td>TD #2</td>
        </tr>
        <tr>
            <td>TD #3</td>
            <td>TD #4</td>
            <td>TD #5</td>
        </tr>
        <tr>
            <td>TD #6</td>
            <td>TD #7</td>
            <td>TD #8</td>
        </tr>
    </table>
    <script>
        $("td:lt(4)").css("backgroundColor","yellow");
    </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1217256.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【Synopsys Bug记录】Synopsys工具显示license过期

【Synopsys Bug记录】Synopsys工具显示license过期

首先查找网络配置&#xff0c;打开终端&#xff0c;输入ifconfig&#xff0c;看是否有ens33 若没有ens33&#xff0c;则说明linux的网卡因为某些原因未启用&#xff0c;我们需要更改ifcfg-ens33文件&#xff1b; 输入指令 cd ./etc/sysconfig/network-scripts sudo vim ifcfg-…
阅读更多...
关于 内部类 你了解多少？（详解！！）

关于 内部类 你了解多少？（详解！！）

目录 1. 什么是内部类&#xff1f; 2. 内部类的分类 3. 内部类 3.1 实例内部类 3.2 静态内部类 4. 局部内部类 5. 匿名内部类 6.对象的打印 “不积跬步无以至千里&#xff0c;不积小流无以成江海。”每天坚持学习&#xff0c;哪怕是一点点&#xff01;&#xff01;&a…
阅读更多...
企业微信获取第三方应用凭证

企业微信获取第三方应用凭证

上一篇介绍了如何配置通用开发参数及通过url回调验证&#xff0c; 本篇将通过服务商后台配置关联小程序应用配置和获取第三方凭证及如何配置企业可信IP。 当然上篇配置的回调设置也不会白费&#xff0c;在下方的指令和数据回调会用到。 第三方应用开发流程 官方企业微信第三方…
阅读更多...
来讲解一手事务隔离级别

来讲解一手事务隔离级别

简介 在数据库管理系统中&#xff0c;事务是一组被视为单一工作单元的操作&#xff0c;这些操作要么全部执行成功&#xff0c;要么全部回滚。为了确保在多用户并发访问数据库时数据的一致性和可靠性&#xff0c;引入了事务隔离级别的概念。事务隔离级别定义了一个事务对于其他…
阅读更多...
集群搭建（redis7）

集群搭建（redis7）

一、主从复制(replica)&#xff08;不推荐&#xff09; 介绍 主从复制 mmaster以写为主&#xff0c;slave以读为主当master数据变化时&#xff0c;自动将新的数据异步同步到其他slave数据库 读写分离down机恢复数据备份水平扩容支撑高并发 基本操作 配从不配主 权限细节 maste…
阅读更多...
CMA认证和CNAS认可的联系和区别？哪个更权威?

CMA认证和CNAS认可的联系和区别？哪个更权威?

一、CMA认证是什么? 　　CMA认证是指中国计量认证&#xff0c;省级以上的计量行政部门根据中国计量法的规定&#xff0c;对申请CMA测试资质的第三方检测机构进行评估&#xff0c;对检测水平和检测可靠性达到国家标准的实验室授予计量认证合格证书(CMA资质)。 二、CNAS认可是什…
阅读更多...
制造业数据标准化的优势分析

制造业数据标准化的优势分析

之前我们介绍过>>数据驱动工作效率提升的5个层次——以PreMaint设备数字化平台为例&#xff0c;这次我们将深入分析数据标准化在制造业中的优势。 从持续的供应链中断和疯狂的通货膨胀&#xff0c;到日益昂贵和难以采购的原材料&#xff0c;制造企业正面对越来越多的挑战…
阅读更多...
rsync远程同步（rsync+inotify）

rsync远程同步（rsync+inotify）

目录 一、概述 1、关于rsync 2、rsync的特点&#xff1a; 3、备份方式&#xff1a; 4、同步方式&#xff1a; 二、rsync相关命令 1、rsync常用命令的选项&#xff1a; 2、启动和关闭rsync服务&#xff1a; 3、关闭 rsync 服务 三、 免交互&#xff1a; 1、免密同步&a…
阅读更多...
Java_实现图书管理系统

Java_实现图书管理系统

目录 前言 框架核心思想 框架的实现 书类和书架类的实现 功能接口实现 功能的声明 父类用户和子类管理员&#xff0c;子类普通用户 Main方法 前言 java图书管理系统的详细解析;从思考到实现,一步步带你学会图书管理系统. 框架核心思想 下图只是一个图书管理系统的初步…
阅读更多...
历年国自然标书申请 面上项目614份 2001-2019年 面上标书

历年国自然标书申请 面上项目614份 2001-2019年 面上标书

这里列举几例 清华任丰原 哈尔滨 杨宝峰 # 关注微信&#xff1a;生信小博士&#xff0c;10元领取 关注微信之后&#xff0c; 点开付费合集即可领取
阅读更多...
Strus2 系列漏洞

Strus2 系列漏洞

目录 1、S2-001 2、S2-005 3、S2-007 4、S2-008 5、S2-009 6、S2-012 7、S2-013/S2-014 8、S2-015 9、S2-016 10、S2-019 11、s2-032 12、S2-045 13、S2-048 14、S2-052 15、S2-053 16、S2-057 17、S2-devMode Strusts 中使用 OGNL 为表达式语言。OGNL(Object…
阅读更多...
OpenAI 开发者大会2023 解读

OpenAI 开发者大会2023 解读

概述 宏观上还是分成两点&#xff1a;新的底层模型GPT-4 Turbo、新的应用生态GPTs。其余的名词都是服务于上面两个&#xff0c;很多名词是面向开发者的&#xff08;非普通用户&#xff0c;主要是在页面上使用&#xff09;容易导致混淆&#xff0c;比如什么JSON 格式、函数调…
阅读更多...
使用uniapp写小程序，真机调试的时候不显示log

使用uniapp写小程序，真机调试的时候不显示log

项目场景&#xff1a; 当小程序文件太大的情况下使用真机调试&#xff0c;但是真机调试的调试器没有任何反应 问题描述 使用uniapp写小程序&#xff0c;真机调试的时候不显示log 原因分析&#xff1a; 提示&#xff1a;因为真机调试的时候没有压缩文件&#xff0c;所以调试的…
阅读更多...
EtherCAT从站EEPROM分类附加信息详解：SM（同步管理器）

EtherCAT从站EEPROM分类附加信息详解：SM（同步管理器）

0 工具准备 1.EtherCAT从站EEPROM数据&#xff08;本文使用DE3E-556步进电机驱动器&#xff09;1 分类附加信息——SM&#xff08;同步管理器&#xff09; 1.1 分类附加信息规范 在EEPROM字64开始的区域存储的是分类附加信息&#xff0c;这里存储了包括设备信息、SM配置、FM…
阅读更多...
有向无权图的最短路径

有向无权图的最短路径

在运筹学领域的经典模型中&#xff0c;最大流问题、多商品网络流问题和最短路径问题等都依附在图上对问题进行描述&#xff0c;同样&#xff0c;当我们梳理问题的数学模型&#xff0c;或理解相关问题的求解算法时&#xff0c;也要依靠它。因此&#xff0c;我将总结和图相关的问…
阅读更多...
Android NDK JNI 开发native层崩溃日志栈分析

Android NDK JNI 开发native层崩溃日志栈分析

问题&#xff1a; 在Android的JNI开发中&#xff0c;你是否看到如下一堆崩溃日志&#xff0c;不知如何下手分析问题&#xff0c;崩溃在哪一行&#xff1f; 11-16 17:20:44.844 23077 23077 W test_jni_h: jni_preload: Starting for processln 11-16 17:20:44.844 23077 2307…
阅读更多...
AWD比赛中的一些防护思路技巧

AWD比赛中的一些防护思路技巧

## 思路1&#xff1a; 1、改服务器密码 &#xff08;1&#xff09;linux&#xff1a;passwd &#xff08;2&#xff09;如果是root删除可登录用户&#xff1a;cat /etc/passwd | grep bash userdel -r 用户名 &#xff08;3&#xff09;mysql&#xff1a;update mysql.user set…
阅读更多...
基于SpringBoot+Vue的二手物品交易平台

基于SpringBoot+Vue的二手物品交易平台

基于SpringBootVue的二手物品交易平台的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootMyBatisVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 主页 详情 管理员界面 摘要 本项目是基于Spring Boot 和 Vue 技术栈构建…
阅读更多...
latex简单使用

latex简单使用

​​文章目录 公式详解 普通公式公式居中带标号公式上标下标根号分式括号运算符列表 无序列表有序列表插入图片 单图多图排版表格脚注与定理子标题目录与附录 目录附录参考文献字体设置 字体样式 加粗斜体字母大写等线自定义字体字体大小 第一种设置第二种设置第三种设置 页面…
阅读更多...
系列六、JVM的内存结构【栈】

系列六、JVM的内存结构【栈】

一、产生背景 由于跨平台性的设计&#xff0c;Java的指令都是根据栈来设计的&#xff0c;不同平台的CPU架构不同&#xff0c;所以不能设计为基于寄存器的。 二、概述 栈也叫栈内存&#xff0c;主管Java程序的运行&#xff0c;是在线程创建时创建&#xff0c;线程销毁时销毁&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023