jquery与js区别混淆（一）

最新推荐文章于 2021-11-25 15:18:22 发布

原创最新推荐文章于 2021-11-25 15:18:22 发布 · 546 阅读

3 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

16 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细对比了jQuery与原生JavaScript在DOM操作上的不同，包括入口函数、内容获取、属性操作、元素及内容的增删改查。通过具体实例说明了两者在执行时机、获取内容、操作属性和元素等方面的具体差异。

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
或者
$(function(){
    // 执行代码
});

JavaScript 入口函数:

window.onload = function () {
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

JQuery获取内容

$().html() 获取选中标签的内容（包括html标签）
$().text() 获取选中的标签的文本内容
$().val() 获取表单元素的内容（value）

JS获取内容

innerHTML 获取选中标签的内容（包括html标签）
innerText 获取选中的标签的文本内容
nodeValue 只能获取文本节点里的内容
表单元素.value 获取表单元素的内容

JQuery操作属性

$().attr('属性名') 获取属性值
$().attr('属性名','属性值'）修改属性值
可同时设置多个属性

$("#runoob").attr({

"href" : "http://www.baidu.com",

"title" : "百度"

});

JS中的属性操作

element.getAttribute('属性名') 获取属性值
element.setAttribute('属性名’,'属性值') 修改属性值
element.removeAttribute(‘属性名’) 删除属性

jQuery对元素和内容的操作

$(selector).append() - 在被选元素的结尾插入内容（或节点）（插入元素是被选元素的子元素）
$(selector).prepend() - 在被选元素的开头插入内容（或节点）
$(selector).after() - 在被选元素之后插入内容（或节点）（插入元素与被选元素同级）
$(selector).before() - 在被选元素之前插入内容（或节点）
$(selector).remove() - 删除被选元素（及其子元素）在使用 remove() 的过滤器删除时，不能删除带有过滤器的子元素。
$(selector).empty() - 从被选元素中删除空元素

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 是在元素外面追加。

在使用 remove() 的过滤器删除时，不能删除带有过滤器的子元素。

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
   这是 div 中的一些文本。
   <p class="part">这是在 div 中的一个段落。</p>
   <p>这是在 div 中的另外一个段落。</p>
</div>

<br>
<button>移除div元素</button>
<p>
在使用 remove() 的过滤器删除时，不能删除带有过滤器的子元素。
</p>

$(document).ready(function(){
   $("button").click(function(){
       $("#div1").remove(".part");
   });
});无法删除

如果子元素符合过滤器中条件而父元素不符合的话，是不会删除符合条件的子元素，即过滤器中条件只能作用于同级，不能作用于子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").remove(".italic");
});删除成功
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有 class="italic" 的 p 元素。</button>

</body>
</html>