jQuery属性相关

来源：互联网发布：lol爷大干淘宝零食店编辑：程序博客网时间：2024/05/22 05:32

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性相关</title> <script type="text/javascript" src="../jquery-2.2.3.js"></script> <style type="text/css"> .class_p{ font-size: 40px; color: blue; } </style> </head> <body> <div> <ul> <li class="lang_js">javascript</li> <li name="lang_java">javascript & java</li> </ul> </div> <p id="p_1">这是一个段落</p> <div class="div_1"> </div> <input type="button" value="html/text" onclick="fn1(this);" /> <br /> <input type="button" value="addClass" onclick="fn2(this);" /> <br /> <input type="button" value="removeClass" onclick="fn3(this)" /> <br /> <input type="button" value="toggleClass" onclick="fn4(this)" > <br /> <input type="button" value="css" onclick="fn5(this)" /> <br /> <input type="button" value="val" onclick="fn6(this)" /> <script type="text/javascript"> function fn1 (ele) { //获得class="lang_js" 的li var li_1 = $("ul li.lang_js"); var li_2 = $("ul li[name = lang_java]"); //html() 和 text() 的区别和用法 console.log(li_1.html()); console.log(li_2.html()); console.log(li_2.text()); //设值 $(".div_1").html("<span style='color:red;'>这是通过html()设值的span元素</span>"); $(".div_1 span").text("来打我啊！我要10个！"); } function fn2 (ele) { //addClass()：给元素添加类样式 $("#p_1").addClass("class_p"); } function fn3 (ele) { //removeClass(): 移除某个元素的样式 $("#p_1").removeClass("class_p"); } function fn4 (ele) { //toggleClass(): 从添加和移除样式之间进行切换。 $("#p_1").toggleClass("class_p"); } function fn5 (ele) { //css()：给元素设置样式或获取样式 //设值 $(".lang_js").css("color", "red"); //获取 console.log($(".lang_js").css("color")); //同时设值多个样式 $(".lang_js").css({ "font-size" : "50px", color : "green" }); //链式语法也可以同时设值多个样式 $(".lang_js").css("color", "blue").css("font-size", "10px"); } function fn6 (ele) { //val(): 获得value值和设值value值 $(ele).val("改变自己！"); //获得 console.log($(ele).val()); } </script> </body> </html>

0 0