1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">script> 7 <style> 8 .important { 9 font-weight:bold; 10 font-size:xx-large; 11 } 12 .yellow{color: yellow;} 13 .blue{color:blue;} 14 15 style> 16 head> 17 <body> 18 <h1>获得内容 - text()、html() 以及 val()h1> 19 <p id="test">这是段落中的<b>粗体b>文本p> 20 <button id="btn1">显示文本button> 21 <button id="btn2">显示HTMLbutton> 22 23 <p>名称：<input type="text" id="test1" value="这是一个测试">p> 24 <button id="btn3">显示属性value的值button> 25 26 <p><a href="https://www.baidu.com" id="baidu">百度一下a>p> 27 <button id="btn4">显示属性href的值button> 28 <button id="btn8">修改href和内容button> 29 <hr><h1>获得内容 - text()、html() 以及 val()h1> 30 <p id="test2">这是一个段落p> 31 <p id="test3">这是另一个段落p> 32 <p>名称：<input type="text" id="test4" value="这是一个测试">p> 33 <button id="btn5">设置文本button> 34 <button id="btn6">设置HTMLbutton> 35 <button id="btn7">设置值button> 36 <hr><h1>添加新的 HTML 内容h1> 37 <p>这是一个段落p> 38 <button onclick="appendText()">追加文本button> 39 <hr><h1>操作 CSSh1> 40 <button id="btn9">为元素添加 classbutton> 41 <button id="btn10">从元素中移除 classbutton> 42 <button id="btn11">切换 classbutton> 43 <button id="btn12">为 p 元素设置多个样式button> 44 <hr><h1>遍历h1> 45 <p>parent() 方法返回被选元素的直接父元素--- 46 $("span").parent();返回每个 span 元素的直接父元素 47 p> 48 <p>parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素---- 49 ①$("span").parents();返回所有 span 元素的所有祖先 50 ②$("span").parents("ul");返回所有 span 元素的所有祖先，并且它是 ul 元素；使用可选参数来过滤对祖先元素的搜索 51 p> 52 <p>parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素---- 53 $("span").parentsUntil("div");返回介于 span 与 div 元素之间的所有祖先元素 54 p> 55 56 <p>children() 方法返回被选元素的所有直接子元素---- 57 $("div").children();返回每个 div 元素的所有直接子元素 58 $("div").children("p.1");返回类名为 "1" 的所有 p 元素，并且它们是 div 的直接子元素 59 p> 60 <p>find() 方法返回被选元素的后代元素，一路向下直到最后一个后代---- 61 $("div").find("span");返回属于 div 后代的所有 span 元素 62 $("div").find("*");返回 div 的所有后代 63 p> 64 65 66 <script> 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 function appendText() { 125 var txt1 = "文本。使用HTML创建
"; 126 var txt2 = $("").text("文本。使用Jquery创建"); 127 var txt3 = document.createElement("p"); 128 txt3.innerHTML="文本。使用DOM创建"; 129 $("body").append(txt1,txt2,txt3);//append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）；prepend() 方法在被选元素的开头插入内容 130 //after() 方法在被选元素之后插入内容；before() 方法在被选元素之前插入内容 131 //append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加 132 } 133 134 script> 135 136 137 body> 138 html>
Original: https://www.cnblogs.com/chunfang/p/13495872.html
Author: 白月如初12138
Title: Jquery_HTML-对HTML内容删除添加、操作CSS改变样式、遍历定位元素
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/596515/
转载文章受原作者版权保护。转载请注明原作者出处！