1.查找节点介绍
2.创建节点
3.插入节点
4.程序（查找，并操作属性与文本节点）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 //操作文本节点: 通过 jQuery 对象的 text() 方法
10 var $text=$("#bj").text();
11 alert($text);
12 $("#bj").text("japanes");
13
14 //操作属性节点: 通过 jQuery 对象的 attr() 方法
15 var $attr=$(":text[name=‘username‘]").attr("value");
16 alert($attr);
17 $(":text[name=‘username‘]").attr("value","google");
18
19 })
20 </script>
21 </head>
22 <body>
23 <p>你喜欢哪个城市?</p>
24 <ul id="city">
25 <li id="bj" name="BeiJing">北京</li>
26 <li>上海</li>
27 <li id="dj">东京</li>
28 <li id="se">首尔</li>
29 </ul><br>
30
31 <p>你喜欢哪款单机游戏?</p>
32 <ul id="game">
33 <li id="rl">红警</li>
34 <li>实况</li>
35 <li>极品飞车</li>
36 <li>魔兽</li>
37 </ul><br>
38
39 gender:
40 <input type="radio" name="gender" value="male" />Male
41 <input type="radio" name="gender" value="female" />Female<br>
42
43 name:
44 <input type="text" name="username" value="atguigu" />
45 </body>
46 </html>
5.程序（前后添加节点）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 //append和appendTo
10 $("<li id=‘nj‘>南京</li>").appendTo($("#city")); //first method
11
12 $("#city").append("<li id=‘ny‘>纽约</li>");
13
14 //prepend和prependTo
15 $("<li id=‘wh‘>武汉</li>").prependTo($("#city"));
16
17 $("#city").prepend("<li id=‘sx‘>山西</li>");
18 })
19 </script>
20 </head>
21 <body>
22 <p>你喜欢哪个城市?</p>
23 <ul id="city">
24 <li id="bj" name="BeiJing">北京</li>
25 <li>上海</li>
26 <li id="dj">东京</li>
27 <li id="se">首尔</li>
28 </ul><br>
29
30 <p>你喜欢哪款单机游戏?</p>
31 <ul id="game">
32 <li id="rl">红警</li>
33 <li>实况</li>
34 <li>极品飞车</li>
35 <li>魔兽</li>
36 </ul><br>
37
38 gender:
39 <input type="radio" name="gender" value="male" />Male
40 <input type="radio" name="gender" value="female" />Female<br>
41
42 name:
43 <input type="text" name="username" value="atguigu" />
44 </body>
45 </html>
6.程序（插入节点）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 $("<li id=‘guigu‘>硅谷</li>").insertAfter($("#bj"));
10
11 $("#bj").after("<li id=‘at‘>安踏</li>");
12
13 $("<li id=‘nj‘>南京</li>").insertBefore($("#bj"));
14
15 $("#bj").before("<li id=‘wh‘>武汉</li>");
16
17 })
18 </script>
19 </head>
20 <body>
21 <p>你喜欢哪个城市?</p>
22 <ul id="city">
23 <li id="bj" name="BeiJing">北京</li>
24 <li>上海</li>
25 <li id="dj">东京</li>
26 <li id="se">首尔</li>
27 </ul><br>
28
29 <p>你喜欢哪款单机游戏?</p>
30 <ul id="game">
31 <li id="rl">红警</li>
32 <li>实况</li>
33 <li>极品飞车</li>
34 <li>魔兽</li>
35 </ul><br>
36
37 gender:
38 <input type="radio" name="gender" value="male" />Male
39 <input type="radio" name="gender" value="female" />Female<br>
40
41 name:
42 <input type="text" name="username" value="atguigu" />
43 </body>
44 </html>
二：练习
1.需求
需求1: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
2.程序
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
7 <script type="text/javascript">
8 $(function(){
9 function showText(li){
10 alert($(li).text())
11 }
12 $("li").click(function(){
13 showText(this);
14 });
15 //需求一
16 $(":submit").click(function(){
17 //type
18 var $type=$(":radio[name=‘type‘]:checked");
19 if($type.length==0){
20 alert("请选择类型");
21 return false;
22 }
23 var type=$type.val()
24
25 //name
26 var $name=$(":text[name=‘name‘]");
27 var name=$name.val();
28 name=$.trim(name);
29 if(name==""){
30 alert("请输入内容");
31 return false;
32 }
33
34 //appendTo
35 $("<li>"+name+"</li>").appendTo($("#"+type))
36 .click(function(){
37 showText(this);
38 })
39
40 //
41 return false;
42 })
43
44 })
45 </script>
46 </head>
47 <body>
48 <p>你喜欢哪个城市?</p>
49 <ul id="city">
50 <li id="bj">北京</li>
51 <li>上海</li>
52 <li>东京</li>
53 <li>首尔</li>
54 </ul><br><br>
55
56 <p>你喜欢哪款单机游戏?</p>
57 <ul id="game">
58 <li id="rl">红警</li>
59 <li>实况</li>
60 <li>极品飞车</li>
61 <li>魔兽</li>
62 </ul><br><br>
63
64 <form action="dom-7.html" name="myform">
65 <input type="radio" name="type" value="city">城市 <input type="radio" name="type" value="game">游戏
66 name: <input type="text" name="name" /> <input type="submit" value="Submit" id="submit" />
67 </form>
68 </body>
69 </html>
时间： 2024-10-26 03:26:46