jQuery笔记

本文最后更新于：2023年7月19日 晚上

一、jQuery

  • jQuery是一个JavaScript库 确实

  • jQuery极大的简化了JavaScript编程 Maybe

  • jQuery 很容易学习 $是核心

  • 本文主要涉及对DOM元素的操作`

  • w3cschool

二、jQuery与HTML

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准

##### 1. 获取DOM的内容

  • text() 设置或者获取所选元素的文本内容

  • html() 设置或者获取所选元素的内容（包括HTML标记）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){ //获取 id为btn1的按钮
        alert("Text: " + $("#test").text()); //获取id为test的标签
      });
      $("#btn2").click(function(){  
        alert("HTML: " + $("#test").html());
      });
    });
    </script>
    </head>

    <body>
    <p id="test">这是段落中的<b>粗体</b>文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    </body>

  • val()

    val方法 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert("Value: " + $("#test").val()); //获取input标签
      });
    });
    </script>
    </head>

    <body>
    <p>姓名：<input type="text" id="test" value="米老鼠"></p>
    <button>显示值</button>
    </body>

  • attr()获取标签的属性

    attr方法 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert($("#w3s").attr("href"));
      });
    });
    </script>
    </head>

    <body>
    <p><a href="http://www.w3school.com.cn"id="w3s">W3School.com.cn</a></p> 
      <!--返回a标签中属性herf的值-->
    <button>显示 href 值</button>
    </body>
2.改变DOM的内容（设置内容）

  • text()、html()、val() 设置值

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("#test1").text("Hello world!");
      });
      $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
      });
      $("#btn3").click(function(){
        $("#test3").val("Dolly Duck");
      });
    });
    </script>
    </head>

    <body>
    <p id="test1">这是段落。</p>
    <p id="test2">这是另一个段落。</p>
    <p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    </body>

  • attr()设置属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#w3s").attr(
          "href","http://www.w3school.com.cn/jquery"
          "title","W3School jQuery教程"
        );
        //注意这个属性啊啊啊啊 不然拿不到标签
      });
    });
    </script>
    </head>

    <body>也是
    <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
    <button>改变 href 值</button>
    <p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
    </body>

  • 回调函数

    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
    <script>
      $("#btn1").click(function(){
      $("#test1").text(function(i,origText){
         <!-- .attr()回调函数-->
        return "Old text: " + origText + " New text: Hello world!
        (index: " + i + ")";
      });
    });

    $("#btn2").click(function(){
      $("#test2").html(function(i,origText){
        <!-- .text()回调函数-->
        return "Old html: " + origText + " New html: Hello <b>world!</b>
        (index: " + i + ")";
      });
    });
      
    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
         <!-- .attr()回调函数-->
        return origValue + "/jquery";
      });
    });

    </script>
3.追加
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
<script>
$("p").append("Some appended text."); //在p标签文本前面拼
$("p").prepend("Some prepended text."); //在p标签文本后面拼
  
function appendText()
{
var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
var txt3=document.createElement("p");  // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // 追加新元素
}

$("img").after("Some text after");

$("img").before("Some text before");
function afterText()
{
var txt1="<b>I </b>";                    // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love ");     // 通过 jQuery 创建新元素
var txt3=document.createElement("big");  // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // 在 img 之后插入新元素
}
</script>
4.删除
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
29
30
31
32
<!--删除元素 remove-->
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic"); //删除所有class=‘italic’的标签
  });
});
</script>
</head>
<body>

<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
  
<!--清空元素 empty--> 
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty(); //清空div(中)的元素
  });
});
</script>
</head>

<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

5.设置样式
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<script>
  <!-- .表示类，所以.blue 用 addClass 将style绑定到标签上-->
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue"); //将 h1、h2、p style设置为蓝色（应用.blue）
    $("div").addClass("important"); //将div 加粗加大（应用.important）
  });
  
  $("button").click(function(){
    $("#div1").addClass("important blue"); //可以同时对一个标签设置多个样式类
  });
  
  $("button").click(function(){
 		$("h1,h2,p").removeClass("blue"); //移除blue样式
	});
  
  $("button").click(function(){
  	$("h1,h2,p").toggleClass("blue"); //toggle 来回切换样式 点一下应用，点一下取消
	});
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>
  1. jQuery中CSS方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
    //$("p").css("background-color") 返回p标签的背景颜色 格式：rgb(255, 0, 0)
  });
  $("button").click(function(){
    $("p").css("background-color","yellow"); //设置p标签背景颜色为黄色
    //指定css属性 语法 css("propertyname","value");
  });
  $("button").click(function(){
    $("p").css({"background-color":"yellow","font-size":"200%"});
    //同时设置多个css属性
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>

  1. jQuery与DOM尺寸

    jQuery 尺寸

6. jQuery遍历元素

​ jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

图示解释：

遍历 DOM 树 
1
2
3
4
5
6
7
<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

1.父与子遍历
jQuery遍历父标签 
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
  
  //遍历祖先
$(document).ready(function(){
  //修改span标签的上一级父标签的css
  $("span").parent().css({"color":"red","border":"2px solid red"});
  //修改span标签的所有父标签的css
  $("span").parents().css({"color":"red","border":"2px solid red"});
  //修改span标签的div父标签，自己拓展 parents("#xxx")-id  parents(".xxx")-class
  $("span").parents("div").css({"color":"red","border":"2px solid red"});
  ////修改介于 <span> 与 <div> 元素之间的所有祖先元素：
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
  
  //遍历后代
$(document).ready(function(){
  //设置div标签的所有子标签样式
   $("div").children().css({"color":"red","border":"2px solid red"});
  //设置 <div> 的直接子元素中类名为 "1" 的所有 <p> 元素的样式
   $("div").children("p.1").css({"color":"red","border":"2px solid red"});
	//设置 <div> 的所有后代的样式：
   $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="ancestors">
  <div style="width:500px;">div (曾祖父)
    <ul>ul (祖父)  
      <li>li (直接父)
        <span>span</span>
      </li>
    </ul>   
  </div>

  <div style="width:500px;">div (祖父)   
    <p>p (直接父)
        <span>span</span>
      </p> 
  </div>
</div>

</body>
</html>
2.同胞元素遍历
jQuery遍历子标签 
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
29
30
31
32
33
34
35
36
37
38
<style>
.sty *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  //设置所有与h2标签同胞元素的所有标签元素的标签样式
  $("h2").siblings().css({"color":"red","border":"2px solid red"});
  //设置所有与h2标签同胞元素的所有 <p> 元素的标签样式
  $("h2").siblings("p").css({"color":"red","border":"2px solid red"});
  //设置 <h2> 的下一个同胞元素的标签样式
  $("h2").next().css({"color":"red","border":"2px solid red"});
  //设置 <h2> 的所有跟随（同级的，顺序在他下面的）的同胞元素的标签样式
  $("h2").nextAll().css({"color":"red","border":"2px solid red"});
  //设置介于 <h2> 与 <h6> 元素之间的所有同胞元素的标签样式
  $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="sty">

<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <p>p</p>
</div>

</body>
3.进一步过滤（筛选）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  $(document).ready(function(){
  //选取首个 <div> 元素内部的第一个 <p> 元素
  $("div p").first(); 
  //选取首个 <div> 元素内部的最后一个 <p> 元素
  $("div p").last();
  //选取被选元素中带有指定索引号的元素
  $("p").eq(1);
  // <div><p>1</p><p>2</p><p>3</p></div>
  //选取类名为 "intro" 的所有 <p> 元素
  $("p").filter(".intro");
  //选取类名不带有 "intro" 的所有 <p> 元素
  $("p").not(".intro");
});
</script>

其他一些遍历的方法

Notes
#jQuery
jQuery笔记
https://anonymouslosty.ink/2022/08/09/jQuery笔记/
作者
Ling yi
发布于
2022年8月9日
更新于
2023年7月19日
许可协议