标签：样式 addclass click input query child move doc app
<body > <p>你最喜欢的名人是？</p> <ul> <li title="这是乔布斯"><font color="green">乔布斯</font></li> <li title="这是比尔盖茨" class="lc">比尔盖茨</li> <li title="这是詹姆斯高斯林">詹姆斯高斯林</li> </ul> <input type="text" id="userName"/> <input type="button" value="获取数据" onclick="getUserName()"/> <input type="button" value="设置数据" onclick="setUserName()"/> <p id="jq" style="color: red">Jquery掉渣天</p> </body>
<script type="text/javascript"> $(document).ready(function(){ // 1，查找节点 var li2=$("ul li:eq(1)"); // 获取节点 "1"代表第二个元素 var li2_txt=li2.text(); // 获取文本 比尔盖茨 alert(li2_txt); // 2，创建节点 append() var li1=$("<li title=‘这是马化腾‘>马化腾</li>"); var li2=$("<li title=‘这是李彦宏‘>李彦宏</li>"); var li22=$("ul li:eq(1)"); $("ul").append(li1); //自动添加到最末尾 li2.insertAfter(li22); //在指定的节点后面添加，添加在"比尔盖茨"之后 // 3，删除节点 remove() $("ul li:eq(1)").remove(); }); </script>
<script type="text/javascript"> $(document).ready(function(){ // 获取属性 var li2=$("ul li:eq(1)"); var li2_attr=li2.attr("title"); //attr 查找 title 属性的值 alert(li2_attr); // 设置属性 $("ul li:eq(1)").attr("title","哈哈哈"); //attr 修改 title 属性的值 // 删除属性 $("ul li:eq(1)").removeAttr("title"); //removeAttr 删除 title 属性 </script>
<script type="text/javascript"> $(document).ready(function(){ // 获取样式 var li2=$("ul li:eq(1)"); var li2_class=li2.attr("class"); //class样式为 lc alert(li2_class); // 设置样式 $("ul li:eq(1)").attr("class","lc2"); // 追加样式 $("ul li:eq(1)").addClass("lc3"); // 移除样式 $("ul li:eq(1)").removeClass("lc"); </script>
<script type="text/javascript"> $(document).ready(function(){ // 获取html var l1_html=$("ul li:eq(0)").html(); alert(l1_html); // 设置html $("ul li:eq(0)").html("<font color=red>哈哈</font>"); // 获取文本 var l1_text=$("ul li:eq(0)").text(); alert(l1_text); // 设置文本 $("ul li:eq(0)").text("呵呵"); }); //获取值 function getUserName(){ var userName=$("#userName").val(); alert(userName); } //设置值 function setUserName(){ $("#userName").val("Cocoomg"); } </script>
<script type="text/javascript"> $(document).ready(function(){ //获取所有子节点children() var b=$("body").children(); alert(b.length); var u=$("ul").children(); alert(u.length); for(var i=0;i<u.length;i++){ // alert((u[i]).html()); //不可以，(u[i])取出的是原生（未由jQuery包装过）的DOM节点，没有这些功能 // alert($(u[i]).html()); //可以，用$ 包装 alert(u[i].innerHTML); //可以 } //获取邻近的下一个兄弟节点next() var l=$("ul li:eq(1)").next(); alert(l.html()); //获取邻近的上一个兄弟节点prev() var l=$("ul li:eq(1)").prev(); alert(l.html()); }); </script>
<script type="text/javascript"> $(document).ready(function(){ // 获取css样式 var c=$("#jq").css("color"); alert(c); // 设置css样式 $("#jq").css("color","blue"); }); </script>
标签：样式 addclass click input query child move doc app
原文地址：https://www.cnblogs.com/Cocoomg/p/9901159.html
