首页 前端知识 靡语IT: JQuery-JavaScript代码库-获取内容及删除篇

靡语IT: JQuery-JavaScript代码库-获取内容及删除篇

2024-06-22 10:06:16 前端知识 前端哥 470 33 我要收藏

4.1 JQuery 获取内容和属性

JQuery 拥有可操作 HTML 元素和属性的强大方法。

4.1.1 JQuery DOM操作

JQuery 中非常重要的部分,就是操作 DOM 的能力。

JQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

"W3C" 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。

4.1.2 获得内容 - text(),html()以及val()

三个简单实用的用于DOM操作的JQuery方法:

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

实例:

通过 jQuery text() 和 html() 方法来获得内容

<script>
$("#btn1").click(function(){ 
    alert("Text:"+$("#test").text()); 
}); 
$("#btn2").click(function(){ 
    alert("HTML: " + $("#test").html()); 
});
</script>
<body>
    <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
</body>

实例:

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("值为: " + $("#test").val());
  });
});
</script>
<body>
    <p>名称: <input type="text" id="test" value="欣知大数据"></p>
    <button>显示值</button>
</body>

4.1.3 获取属性 attr()

jQuery attr() 方法用于获取属性值。

实例:

$("button").click(function(){ 
    alert($("#runoob").attr("href")); 
});

4.1.4 获取属性 -attr()和prop()的区别

*attr**prop* 的区别介绍:

对于 HTML 元素本身就带有的固有属性,在处理时,使用 *prop* 方法。

对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 *attr* 方法。

实例1:

<a href="https://www.runoob.com" target="_self" class="btn">欣知大数据</a>

这个例子里 <a>元素的 DOM 属性有: href、target和 class,这些属性就是 <a> 元素本身就带有的属性,也是 W3C 标准里就包含有这几个属性,或者说在 IDEA 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop() 方法。

<a href="#" id="link1" action="delete" rel="nofollow">删除</a>

这个例子里 <a>元素的 DOM 属性有: href,id和action,明显,前两个是固有属性,而后面一个action 属性是我们自己自定义上去的,<a>元素本身是没有这个属性的。这种就是自定义的 DOM 属性。处理这些属性时,建议使用attr方法

4.1.5 获取属性 -attr()和 prop()的结果区别

*prop()函数的结果:*

1.如果有相应的属性,返回指定属性值。

2.如果没有相应的属性,返回值是空字符串。

*attr()函数的结果:*

1.如果有相应的属性,返回指定属性值。

2.如果没有相应的属性,返回值是 undefined。

对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。

对于HTML元素我们自己自定义的DOM属性,在处理时,使用 attr 方法。

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

4.2 JQuery - 添加元素

4.2.1 添加新的Html元素

添加新内容的四个 jQuery 方法:

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

4.2.2 JQuery append()方法

JQuery append() 方法在被选元素的结尾插入内容(仍然在该元素的内部)

实例:

$("p").append("追加文本");

案例:

<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });
​
  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
</script>
​
​
<body>
    <p>这是一个段落。</p>
    <p>这是另外一个段落。</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>

4.2.3 JQuery prepend()方法

JQuery prepend() 方法在被选元素的开头插入内容

实例:

$("p").prepend("在开头追加文本");

4.2.4 通过append()方法和prepend()方法添加若干元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

function appendText() { 
    var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 
    var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 
    var txt3=document.createElement("p"); 
    txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM 
    $("body").append(txt1,txt2,txt3); // 追加新元素 
}
​
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
​
</body>

4.2.5 JQuery after()和before()方法

JQuery after() 方法在被选元素之后插入内容。

JQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本"); 
$("img").before("在前面添加文本");

4.2.6 通过after()和before()方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效)

function afterText() { 
    var txt1="<b>I </b>"; // 使用 HTML 创建元素 
    var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 
    var txt3=document.createElement("big"); // 使用 DOM 创建元素 
    txt3.innerHTML="jQuery!"; 
$("img").after(txt1,txt2,txt3); // 在图片后添加文本 
}
​
<body>
    <img src="/img/logo.png" >
    <br><br>
    <button onclick="afterText()">之后插入</button>
</body>

4.2.7 考虑过append/prepend和after/before的区别吗?

append:

<p>
   <span class="s1">s1</span>
</p>
    <script>
    $("p").append('<span class="s2">s2</span>');
</script>

使用后结果是这样的:

<p>
<span class="s1">s1</span>
<span class="s2">s2</span>
</p>

after:

<p>
    <span class="s1">s1</span>
</p>
<script>
    $("p").after('<span class="s2">s2</span>');
</script>

使用后结果是这样的:

<p>
    <span class="s1">s1</span>
</p>
    <span class="s2">s2</span>

总结

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加

4.2.8 参数可以是list

function afterText(){
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after([txt1,txt2,txt3]);          // 在图片后添加文本

4.3 JQuery - 删除元素

4.3.1 删除元素/内容

如需删除元素和内容,一般可使用以下两个 jQuery 方法:

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

4.3.2 JQuery remove()方法

jQuery remove() 方法删除被选元素及其子元素。

实例:

$("#div1").remove();

案例:

<script>
$(document).ready(function(){
    $("button").click(function(){
            $("#div1").remove();
    });
});
</script>
<body>
​
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
​
这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>
​
</div>
<br>
<button>移除div元素</button>
</body>

4.3.2 JQuery empty()方法

jQuery empty() 方法删除被选元素的子元素

实例:

$("#div1").empty();

4.3.3 过滤被删除的元素

jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class="italic" 的所有 <p> 元素:

实例:

$("p").remove(".italic");

案例:

<body>
​
<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>
​
</body>
​
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").remove(".italic");
     });
});
</script>
​

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13288.html
标签
评论
发布的文章

Java操作读取JSON文件

2024-07-21 00:07:04

Vue3.0环境搭建之npm的安装

2024-07-21 00:07:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!