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

Posted 小哈里

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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%解决

以上是关于使用JQuery删除html页面中的元素的主要内容,如果未能解决你的问题,请参考以下文章

jQuery-替换和删除元素

如何使用jQuery删除html字符串中的元素

jquery如何删除子元素

DOM节点的删除(jQuery)

jQuery 添加和删除HTML元素

使用jquery在页面加载时删除父元素或子元素[重复]