【Web前端】jQuery入门与基础（一）

ST_小罗

于 2025-05-24 12:24:10 发布

阅读量598

点赞数 14

分类专栏： Web前端文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/ST_LUOTY/article/details/148125902

版权

Web前端专栏收录该内容

5 篇文章

订阅专栏

jQuery简介

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

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

<--例子：-->
<!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选择器

基础选择器

在Javascript中：

类选择器是document.getElementsByClassName(),

元素选择器是document.getElementsByTagName()，

ID选择器是document.getElementById()

例子：

<!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中，要使用$()来选择相应元素

选择类使用：$(".ClassName"),用 . 选择类

选择元素使用：$("TagName")，

选择ID使用:$("#IdName")，用 # 选择ID

例子：

<!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定位ul标签下的li标签
    $(".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="jQuery">jQuery</a>
  <a href="#" alt="jQuery-web">jQuery-前端</a>
  <a href="#" alt="HTML">HTML</a>
  <script>
    $('a[alt|="jQuery"]').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="jQuery-Web" />  
  <input name="jQueryWeb" />
  <input name="HTMLWeb" />
  <input name="HTML" />
  <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="jQuery-Web" />  
  <input name="jQueryWeb" />
  <input name="HTMLWeb" />
  <input name="HTML" />
  <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="jQuery-Web" />  
  <input name="jQueryWeb" />
  <input name="CSS" />
  <input name="HTML" />
  <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="jQuery-Web" />  
  <input name="CSSWeb" />
  <input name="CSS" />
  <input name="HTML" />
  <script>$('input[name^="CSS"]').val('study!');</script>
</body>
</html>

扩展选择器

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

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

jQuery_DOM操作

Class操作

addClass()给元素添加class

值得注意的是这个方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上。

$("p").addClass("myClass");

也可以同时添加多个class.

$("p").addClass("myClass1 myClass2");

removeClass()移除元素中每个匹配元素上一个，多个或全部样式。

一：通过class名字移除元素

$('p').removeClass('myClass yourClass')

二：移除全部class

$('p').removeClass()

三：配合addClass() 一起使用用来切换元素的样式

$('p').removeClass('myClass noClass').addClass('yourClass');

toggleClass()这是一个开关方法，如果class存在则删除，如果class不存在则添加。

$('#foo').toggleClass(className, addOrRemove);

hasClass()判断一个元素上是否具有某个class。

<!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>
  <div id="mydiv" class="foo bar"></div>
  <script>
    var flag = $('#mydiv').hasClass('foo')
    if(flag){
      $('#mydiv').html("div具有foo class")
     }
  </script>
</body>
</html>

文本操作

html()获取元素中的HTML内容

$('div.demo-container').html();

html()方法还可以设置元素的html内容

$('div.demo-container').html('<p>All new content. <em>You bet!</em></p>');

val()用于获取<input>标签中的内容

$(".input").val();

也可以设置<input>标签内容

$(".input").val("username")

属性操作

attr()获取匹配的元素的属性的值或设置匹配元素的一个或多个属性

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      padding: 10px;
      width: 100px;
     }
    div {
      color: red;
      font-size: 24px;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <img />
  <div><B>Attribute of Ajax</B></div>
  <script>
    $("img").attr({
      src: "。/1.jpeg",
      title: "jQuery",
      alt: "jQuery Logo"
     });
    $("div").text($("img").attr("alt"));
  </script>
</body>
</html>

removeAttr()为匹配的元素集合中的每个元素中移除一个属性（attribute）

img.removeAttr("title")

DOM 插入并包裹现有内容

.wrap() 在每个匹配的元素外层包上一个html元素

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>jQuery</p>
  <script>
    $("p").wrap("<div class='container'></div>");
  </script>
</body>
</html>

.unwrap() 将匹配元素集合的父级元素删除，保留自身在原来的位置

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div>
    <p>jQuery</p>
  </div>
  <script>
    $("p").unwrap();
  </script>
</body>
</html>

.wrapAll() 在所有匹配元素外面包一层HTML结构

<!DOCTYPE html>
<html>
<head>
 <style>
  div { border: 2px solid blue; }
  p { background:yellow; margin:4px; }
 </style>
 <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>jQuery</p>
  <p>HTML</p>
  <p>web</p>
  <script>
    $("p").wrapAll("<div></div>");
  </script>
</body>

.wrapInner()在匹配元素里的内容外包一层结构

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      background: #bbf;
     }
  </style>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>jQuery</p>
  <p>HTML</p>
  <p>web</p>
  <script>$("p").wrapInner("<b></b>");</script>
</body>
</html>

DOM 插入现有元素内

.append() 在每个匹配元素里面的末尾处插入参数内容

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>I would like to say: </p>
  <script>
    $("p").append("<strong>Hello</strong>");
  </script>
</body>
</html>

.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>, jQuery</p>
  <script>
    $("p").prepend("<strong>Hello</strong>");
  </script>
</body>
</html>

DOM 插入现有元素外

.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>I would like to say: </p>
  <script>$("p").after("<b>Hello</b>");</script>
</body>
</html>

.before() 根据参数设定，在匹配元素的前面插入内容，作为其兄弟节点

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>I would like to say: </p>
  <script>$("p").before("<b>Hello</b>");</script>
</body>
</html>

DOM 移除

.empty() 从DOM中移除集合中匹配元素的所有子节点

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>
     Hello, <span>Person</span> <a href="javascript:;">and person</a>
  </p>
  <script>
    $("p").empty();
  </script>
</body>
</html>

.remove() 将匹配元素集合从DOM中删除

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <script>
    $("p").remove();
  </script>
</body>

DOM 替换

.replaceAll() 用集合的匹配元素替换每个目标元素

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>Hello</p>
  <script>
    $("<b>World</b>").replaceAll("p");
  </script>
</body>
</html>

.replaceWith() 用提供的内容替换集合中所有匹配的元素

<!DOCTYPE html>
<html>
<head>
  <script src="./js/jquery-3.6.0.min.js"></script>
</head>
<body>
  <p>Wrold</p>
  <script>
    $("p").replaceWith("<div>Hello</div>");
  </script>
</body>
</html>