jquery设置input的value值 jquery判断字符串是否为空( 四 )

removeClass() 将元素的类样式移除
toggleClass() 样式的切换；有->无，无->有
<style>div{width: 100px;height: 100px;background-color: #000;}.a{background: palevioletred;border-radius: 50%;}.b{border:5px dashed darkcyan;opacity: 0.6;}.cn{background: #000;color: #FFF;font-family: 字魂49号-逍遥行书;}</style><body><button id="btn1">试试</button><button id="btn2">取消透明度</button><button id="btn3">样式切换</button><hr><div></div><h1>中华人民共和国</h1>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("#btn1").click(function(){// $("div").addClass("a");$("div").addClass("a b");});?$("#btn2").click(function(){$("div").removeClass("b");});?$("#btn3").click(function(){$("h1").toggleClass("cn");});</script></body>节点操作<input><button id="test">测试</button>?<ul><li>西游记</li><li>三国演义</li><li>水浒传</li></ul>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("#test").click(function(){var bookname = $("input").val();// 通过工厂函数，创建新的 li 节点var newli = $("<li>"+bookname+"</li>");?/* 添加子节点 */// newli 添加到 ul 后面$("ul").append(newli);// newli 添加到 ul 后面newli.appendTo("ul");// newli 添加到 ul 前面$("ul").prepend(newli);newli.prependTo("ul");?/* 添加同辈节点 */// newli 添加到最后的 li 的后面$("li:last").after( newli );newli.insertAfter("li:last");//newli 添加到最后的 li 的前面$("li:last").before(newli);newli.insertBefore("li:last");?/* 替换节点 */// 将第二个 li 替换成 newli$("li:eq(1)").replaceWith(newli);newli.replaceAll( "li:eq(1)" );?/* 复制节点 */// 复制第一个 li ，并插入到最后一个 li 的后面$("li:first").clone().insertAfter("li:last");?/* 删除节点 */// 清空了节点上的文本（节点并没有消失）$("li:eq(1)").empty();// 删除节点$("li:eq(1)").remove();});</script>遍历节点祖先元素用于向上遍历 DOM 树的方法
parent() 返回被选元素的直接父元素，仅仅是上一级parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分<p><button>测试</button></p><ul><li>a</li><li><b>b</b></li><li>c</li></ul>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){// 找爸爸var x = $("b").parent().html();// 找祖宗 ulvar x = $("b").parents("ul").html();// 找祖宗 bodyvar x = $("b").parents("body").html();alert( x );});</script>同辈元素next() 获取紧邻匹配元素之后的元素
prev() 获取紧邻匹配元素之前的元素
siblings([selector]) 获取位于匹配元素前面和后面的所有同辈元素
<button>测试</button><p>p1</p><ul><li>a</li><li><b>b</b></li><li>c</li></ul><p>p2</p><p id="x">p3</p>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){// 紧邻的下一个元素var x = $("ul").next().text();// 紧邻的上一个元素var x = $("ul").prev().text();// 所有的兄弟中 id=x 的var x = $("ul").siblings("#x").text();// ul 的所有兄弟：1 个 button ， 3 个 p ， 2 个 scriptvar arr = $("ul").siblings();for(var i = 0 ;i< arr.length ;i++){alert(arr[i]);}});</script>后代元素后代是子、孙、曾孙等等
children([selector]) 方法返回被选元素的所有直接子元素<button>测试</button><ul><li>a</li><li>b</li><li>c</li></ul>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){// 所有子节点：a b cvar x =$("ul").children().text();// ul 中的第一个子节点var x =$("ul").children("li:first").text();alert(x);});</script>find(选择器) 方法返回被选元素的后代元素，一路向下直到最后一个后代<button>测试</button><ul><li>盘古</li><li>蚩尤</li><li>刑天<p>龚工</p></li><h3>祝融</h3></ul>?<script src="https://www.520longzhigu.com/diannao/js/jquery-3.4.1.min.js"></script><script>$("button").click(function(){// 在 ul 中查找 p 元素，忽略层级var x = $("ul").find("p").text();// 在 ul 中查找 h3 元素，忽略层级var x = $("ul").find("h3").text();// 不知道找什么var x = $("ul").find().text();alert(x);});</script>元素的过滤first() 过滤第一个元素

以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：