JS与JQuery

原创已于 2022-08-10 21:26:40 修改 · 121 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

于 2022-07-26 20:59:37 首次发布

本文深入解析jQuery中基本选择器、内容过滤器的应用，包括`:contains`、`:empty`、`:has`和`:parent`等，以及如何使用属性操作来管理DOM元素。了解这些技巧，提升你的前端开发效率。

1、选择器

基本选择器：
$(‘#id属性值’) ----------->document.getElementById()
$(‘tag标签名称’)----------->document.getElementsByTagName();
$(‘.class属性值’) class属性值选择器
$(‘*’) 通配符选择器
$(‘s1,s2,s3’)联合选择器
————————————————————————————————————————
关于一些函数及其用法
在这里插入图片描述
————————————————————————————————————————

2、内容过滤器

2.1 :contains(内容)

包含内容选择器，获得节点内部必须通过标签包含指定的内容

$(“div:contains(beijing)”)
<div>linken love beijing</div>
<div>jack love shanghai</div>

2.2 :empty

获得空元素(内部没有任何元素/文本(空) )节点对象

$(“div:empty”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>

2.3 :has(选择器)

内部包含指定元素的选择器

  $(“div:has(#apple)”)
<div>hello</div>
<div><p></p></div>
<div><span id=”apple”></span></div>
<div><span class=”apple”></span></div>

2.4 :parent

寻找的节点必须作为父元素节点存在(必须是别人的父亲)

$(“div:parent”)
<div>linken love beijing</div>
<div>jack love shanghai</div>
<div></div>
<div><img /></div>
<div>      </div>

3、属性操作

jquery方式操作属性(attribute)：property
$().attr(属性名称); //获得属性信息值
$().attr(属性名称，值); //设置属性的信息
$().removeAttr(属性名称); //删除属性

JS与JQuery的区别：
在这里插入图片描述