js处理html文本找出遍历体,Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素...

1

2

3

4

5

Title

6

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