可以自己做网站的软件/seo文章优化方法
删除id为div1的元素
$("#div1").remove();
删除 class=“italic” 的所有
元素:
$(“p”).remove(".italic");
控制元素的隐藏和显示的几种方法。
使用jquery控制div的显示与隐藏,一句话就能搞定,例如:
1.$("#id").show()表示为display:block,
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").hide()表示为d…("#id").toggle()切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,则切换为可见的。
3.$("#id").css(‘display’,‘none’);//隐藏
$("#id").css(‘display’,‘block’);//显示
或者
$("#id")[0].style.display=‘none’;
display=none 控制对象的隐藏搜索
display=block控制对象的显示
4.$("#id").css(‘visibility’,‘hidden’);//元素隐藏
$("#id").css(‘visibility’,‘visible’);//元素显示
CSS visibility 属性规定元素是否可见。
visible 元素可见。
hidden 元素不可见。
collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。
inherit 从父元素继承 visibility 属性的值。
注意:
display:none和visible:hidden都能把网页上某个元素隐藏起来,在视觉效果上没有区别,但是在一些DOM操作中两者有区别:
display:none —不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是看不见也摸不到。
visible:hidden— 使对象在网页上不可见,但该对象在网页上所占的空间没有改变,即它仍然具有高度、宽度等属性,通俗来说就是看不见但摸得到。
//第1种方法 ,给元素设置style属性
$("#hidediv").css(“display”, “block”);
第2种方法
给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性
$("#hidediv").attr(“class”, “blockclass”);
第3种通过jquery的css方法,设置div隐藏
$("#blockdiv").css(“display”, “none”);
$("#hidediv").show();//显示div
$("#blockdiv").hide();//隐藏div
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery便利多个相同的class,点击显示隐藏图标,显示及隐藏其下的内容</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"><script type="text/javascript" src="bootstrap/js/jquery.min.js"></script><script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body><style>body{background-color: #FFFFFF;letter-spacing: 2px;}.box{padding-top: 100px;width: 50%;margin: 0 auto;}ul li ul{margin: 20px 0 20px 40px;}.img_sh{margin: 20px 0;}.img_sh img{float: left;padding-right: 10px;}</style>
<script>//页面加载完毕后加载window.onload = function () {//遍历class类名叫img_sh的li$(".img_sh").each(function () {//将遍历到的类赋给livar li = $(this);//执行操作,li的子元素p标签里的子元素类名为jia的加号图片点击后执行函数li.children("p").children(".jia").click(function () {//点击的自身加号图片要隐藏li.children("p").children(".jia").hide();//点击完的加号图片要隐藏,而相反类名为jian的减号图片要显示,toggle的作用是取反(既显示或隐藏)li.children("p").children(".jian").toggle();//下面的ul列也是取反li.children("ul").toggle();})//同理li.children("p").children(".jian").click(function () {li.children("p").children(".jian").hide();li.children("p").children(".jia").toggle();li.children("ul").toggle();})})}
</script><div class="container-fluid"><div class="box "><ul class="list-unstyled"><li class="img_sh"><p> 刘吉祥jq测试<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: none"><img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: block" ></p><ul class="list-unstyled" style="display: block"><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li></ul ></li><li class="img_sh"><p>刘吉祥jq测试<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" ><img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none"></p><ul class="list-unstyled" style="display: none"><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li></ul ></li><li class="img_sh"><p>刘吉祥jq测试<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" ><img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none"></p><ul class="list-unstyled" style="display: none"><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li></ul ></li><li class="img_sh"><p>刘吉祥jq测试<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" ><img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none"></p><ul class="list-unstyled" style="display: none"><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li></ul ></li><li class="img_sh"><p>刘吉祥jq测试<img src="images/img01.jpg" alt="" class="img-responsive jia" style="display: block" ><img src="images/img02.jpg" alt="" class="img-responsive jian" style="display: none"></p><ul class="list-unstyled" style="display: none"><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li><li>●  吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮;</li></ul ></li></ul></div></div>
</body>
</html>
https://www.jb51.net/article/145446.htm