使用JQuery删除html页面中的元素

1、使用JS代码引用JQuery

有些网站自带JQuery，但是有些没有。
在控制台运行下面的代码可以验证当前网站是否加载了JQuery

if (jQuery) { alert("JQuery已引用成功！");
} else { // jQuery 未加载
}

对于没有JQuery的网站，可以在编辑HTML元素中的<head></head>标签种手动添加JQuery
随便选择一个版本即可

微软CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>百度CDN
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>新浪CDN
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

也可以通过运行JS代码引入JQuery，下面的代码实现了一个自动在head中添加元素的方案
参考了https://www.codenong.com/1140402/ 网站的几个解决方案，经测试可行。

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

2、JQuery如何选择元素

如果你需要选择带空格的class的元素，比如<element class="a b">使用：

$('.a.b')

如果这个元素还有id可以选择，比如 <element class="a b" id = 'c'>使用：

$('#a.b.c')

你也可以直接选择所有指定的id，比如 <element class="a b" id = 'c'>使用：

$('#c')

3、JQuery如何删除元素

你可以使用remove() 方法移除被选元素，包括所有文本和子节点。
下面的代码会删除所有的p元素

$("p").remove();

你可以使用parent和parents方法找到某一特定的祖先元素

<!--
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
parent取得很明确就是当前元素的父元素
parents则是当前元素的祖先元素
-->
<html><head></head><body><div id="div1"><div id="div2"><p></p></div><div id="div3" class="a"><p></p></div><div id="div4"><p></p></div></div></body><script type="text/javascript" src="jquery-1.7.1.min.js"></script><script type="text/javascript">$("p").parent();              //取得的是div2、div3、div4$('p').parent('.a');        //取得是div3$('p').parent().parent();    //取得是div1（这点比较奇特，不过Jquery对象本身的特点决定了这是可行的）$('p').parents();           //取得的是div1、div2、div3、div4$('p').parents('.a');      //取得的是div3</script>
</html>

你可以使用css方法修改页面的样式

$(".detail.layout-main").css('width','100%');// $("main").css('display','content');
// $("main").css('float','left');
// $("#mainBox").css('width','100%');
// $(".main_father.clearfix.d-flex.justify-content-center").css("width","100%");

4、通过函数组合代码

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.4.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);(function(){'use strict';// var articleBox = $("div.detail.layout-main");// articleBox.removeAttr("style");$(".xm-comment.v_j").remove();$(".xm-player-case").remove();$(".xui-header-inner._uH").remove();$(".dl-pc.xz_").remove();$(".side.layout-side").remove();$("#rootFooter").remove();$(".sound-detail-relative-tracks._Qz").remove();$(".more-intro-wrapper.cY_").remove();$(".xui-header._uH").remove();$(".detail.layout-main").css('width','100%');// $("main").css('display','content');// $("main").css('float','left');// $("#mainBox").css('width','100%');// $(".main_father.clearfix.d-flex.justify-content-center").css("width","100%");window.print();
})();

对于Chrome打印页面中的页面显示不全问题，可以使用缩放页面缩放到70%或50%解决