1
2
3
4
5
Title6
7
8 .important{
9 font-weight:bold;
10 font-size:xx-large;
11 }
12 .yellow{color:yellow;}
13 .blue{color:blue;}
14
15
16
17
18
获得内容 - text()、html() 以及 val()
19 这是段落中的粗体文本
20 显示文本
21 显示HTML
22
23
名称:
24 显示属性value的值
25
26
百度一下
27 显示属性href的值
28 修改href和内容
29
获得内容 - text()、html() 以及 val()
30 这是一个段落
31 这是另一个段落
32
名称:
33 设置文本
34 设置HTML
35 设置值
36
添加新的 HTML 内容
37
这是一个段落
38 追加文本
39
操作 CSS
40 为元素添加 class
41 从元素中移除 class
42 切换 class
43 为 p 元素设置多个样式
44
遍历
45
parent() 方法返回被选元素的直接父元素---46 $("span").parent();返回每个 span 元素的直接父元素47
48
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素----49 ①$("span").parents();返回所有 span 元素的所有祖先50 ②$("span").parents("ul");返回所有 span 元素的所有祖先,并且它是 ul 元素;使用可选参数来过滤对祖先元素的搜索51
52
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素----53 $("span").parentsUntil("div");返回介于 span 与 div 元素之间的所有祖先元素54
55
56
children() 方法返回被选元素的所有直接子元素----57 $("div").children();返回每个 div 元素的所有直接子元素58 $("div").children("p.1");返回类名为 "1" 的所有 p 元素,并且它们是 div 的直接子元素59
60
find() 方法返回被选元素的后代元素,一路向下直到最后一个后代----61 $("div").find("span");返回属于 div 后代的所有 span 元素62 $("div").find("*");返回 div 的所有后代63
64
65
66
67
68 $(function() {69 $("#btn1").click(function() {70 alert("Text:"+$("#test").text());//text() - 设置或返回所选元素的文本内容
71 });72 $("#btn2").click(function() {73 alert("HTML:"+$("#test").html());//html() - 设置或返回所选元素的内容(包括 HTML 标记)
74 });75 $("#btn3").click(function() {76 alert("值为:"+$("#test1").val());//val() - 设置或返回表单字段的值
77 });78 $("#btn4").click(function() {79 alert("值为:"+$("#baidu").attr("href"));//attr() 方法用于获取属性值
80 });81 $("#btn8").click(function() {82 $("#baidu").attr({83 "href":"https://www.12306.cn",84 "title":"铁路链接"
85 });86 //通过修改的 title 值来修改链接名称
87 title=$("#baidu").attr('title');88 $("#baidu").html(title);89 });90
91 $("#btn5").click(function() {92 $("#test2").text(function(i,origText) {93 return "旧文本:"+origText+i;//回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串
94 });95 });96 $("#btn6").click(function() {97 $("#test3").html("设置的HTML");//html() - 设置或返回所选元素的内容(包括 HTML 标记)
98 });99 $("#btn7").click(function() {100 $("#test4").val("设置value的值");//val() - 设置或返回表单字段的值
101 });102
103 $("#btn9").click(function() {104 $("h1,p").addClass("blue");//在添加类时,可以选取多个元素
105 $("input").addClass("important");106 $("body a:first").addClass("important yellow");//在 addClass() 方法中规定多个类
107 });108 $("#btn10").click(function() {109 $("h1,p").removeClass("blue");//在添加类时,可以选取多个元素
110 $("input").removeClass("important");111 $("body a:first").removeClass("important yellow");//在 removeClass() 方法中规定多个类
112 });113 $("#btn11").click(function() {//对被选元素进行添加/删除类的切换操作
114 $("h1,p").toggleClass("blue");//在添加类时,可以选取多个元素
115 $("input").toggleClass("important");116 $("body a:first").toggleClass("important yellow");//在 toggleClass() 方法中规定多个类
117 });118 $("#btn12").click(function() {119 $("p").css({"background-color":"yellow","font-size":"200%"});//设置多个 CSS 属性
120 });121
122 });123
124 functionappendText() {125 vartxt1= "
文本。使用HTML创建
";126 vartxt2=$("130 //after() 方法在被选元素之后插入内容;before() 方法在被选元素之前插入内容
131 //append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加
132 }133
134
135
136
137
138