属性操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性操作</title> </head> <body> <img src="../img/qiuqian.jpg" alt="秋千" id="img" title="qiuqian"> <button onclick="changeImg()">换图</button> <button onclick="deleteAlt()">变提示</button> </body> <script src="../js/jquery.min.js"></script> <script> /*js提供的方法*/ /*getAttribute*/ // var src = document.getElementById("img").getAttribute("src"); /*点符号法*/ // var src = document.getElementById("img").src; /*jquery提供的属性获取的方法*/ var src = $("#img").attr("src"); console.log(src); /*jquery提供的修改属性的方法*/ /*方法1：键值对方法 比较慢 属性需要一个一个修改*/ // $("#img").attr("src","../img/city.jpg"); // $("#img").attr("alt","city"); /*方法2：对象方法 比较简单*/ function changeImg() { var img = { src: "../img/city.jpg", alt: "city" }; /*对象方法*/ // $("#img").attr({src:"../img/city.jpg",alt:"city"}); //这个等于正上边var加正下边这行代码的作用 $("#img").attr(img); } /*jquery提供的移除属性的方法*/ function deleteAlt() { $("#img").removeAttr("alt") } </script> </html>
分别给不同的元素添加不同的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分别给不同的元素添加不同的属性</title> </head> <body> <ul> <li id="l1">北京大学1</li> <li id="l2">北京大学2</li> <li>北京大学3</li> <li>北京大学4</li> </ul> </body> <script src="../js/jquery.min.js"></script> <script> $("li").attr("id", function (i, att) { /*1：i：元素的索引 * 2：att：某元素属性原来的值*/ console.log(att); return "li" + (i + 1); }); </script> </html>
样式类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .h1{ color:red; text-align: center; font-family: 宋体; } .h2{ color: #7db5ff; text-align: center; font-family: 宋体; } .h3{ color: #31ff22; text-align: center; font-family: 宋体; } .h4{ color: #ffff20; text-align: center; font-family: 宋体; } .h5{ color: #3c42ff; text-align: center; font-family: 宋体; } </style> <title>样式类</title> </head> <body> <h1 class="title"> 如月制衡日只剩！ </h1> <ul> <li>北京大学1</li> <li>北京大学2</li> <li>北京大学3</li> <li>北京大学4</li> </ul> </body> <script src="../js/jquery.min.js"></script> <script> /*方法1：attr属性方法实现*/ // $(".title").attr("style","font-family: 宋体;text-align: center;color:red;") /*方法2：添加样式类*/ // $(".title").addClass("h1") /**/ $("li").addClass(function (i) { return "h"+(i+1); }); /*等于 $("li").attr("class",function (i) { return "h"+(i+1); });*/ </script> </html>
移除和切换样式类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .qh{ color: #585858; font-size: 50px; text-align: center; } </style> <title>移除和切换样式类</title> </head> <body> <div class="qh" id="jredu">清华大学</div> <button onclick="toggleCss()">切换样式类</button> </body> <script src="../js/jquery.min.js"></script> <script> /*移除样式类*/ // $(".qh").removeClass("qh"); /*切换样式泪 没有就添加 有就删除*/ function toggleCss() { $("#jredu").toggleClass("qh") } /*切换样式 没有就添加 有就不变了*/ function toggleCss() { $("#jredu").toggleClass("qh",true) } </script> </html>
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>html</title> </head> <body> <div>jieruijiaoyu</div> <div>jieruijiaoyu2</div> </body> <script src="../js/jquery.min.js"></script> <script> /*获取所有匹配元素中第一个元素的内容*/ console.log($("div").html()); /*修改所有匹配元素的内容 可以解析标签*/ $("div").html("ccy"); /*分别给不同的元素返回不同的结果*/ $("div").html(function (index,val) { return "杰瑞教育"+(index+1); }); </script> </html>
文本
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本</title> </head> <body> <div>jieruijiaoyu</div> <div>jieruijiaoyu2</div> </body> <script src="../js/jquery.min.js"></script> <script> /*获取所有匹配元素的内容*/ console.log($("div").text()); /*设置所有匹配元素的内容*/ // $("div").text("北大"); $("div").text(function (index,val) { return val+"hh"; }); /*html和xml不同点总结： * 1：html不能适用于xml 但是text可以。 * 2：html设置内容的时候有解析标签的能力，但是text不可以。 * 3：html只获取第一个匹配元素的值，text获取全部匹配元素的内容。*/ </script> </html>