JQuery 内容选择器+JQuery属性和属性节点

最新推荐文章于 2024-06-06 09:30:00 发布

不倒翁丶

最新推荐文章于 2024-06-06 09:30:00 发布

阅读量149

点赞数

分类专栏： JQuery 前端文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46059971/article/details/106806955

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JQuery

8 篇文章 0 订阅

订阅专栏

014 内容选择器

前情需要html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width:50px;
            height:50px;
            border:5px dashed yellow;
            margin-top:10px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
    <div></div>
    <div>DIV</div>
    <div>More DIV</div>
    <div><span></span></div>
    <div><p></p></div>
</body>
</html>

:empty 选择器

<!-- 1.empty    ：查找没有文本和子元素的元素；-->
<script>
   $(function(){
       var $emptyDiv = $("div:empty");
       console.log($emptyDiv);
   });
</script>

:parent 选择器

<!-- 2.parent   ：查找有文本内容或子元素的元素； -->
<script>
   $(function(){
       var $parentDiv = $("div:parent");
       console.log($parentDiv);
   });
</script>

:contains（‘内容’）选择器

<!-- 3.contains ：查找包含指定文本的元素 -->
<script>
    $(function(){
        var $containsDiv = $("div:contains('DIV')");
        console.log($containsDiv);
    });
</script>

:has（‘标签名’）选择器

<!-- 4.has  ：查找包含指定子元素的元素-->
<script>
    $(function(){
        var $hasDiv = $("div:has('span')");
        console.log($hasDiv);
    });
</script>

015 属性和属性节点

什么是属性？

属性：对象的变量。

怎样操作属性？

– 1.赋值操作：

Let’s Coding：

<script>
	var obj = new Object();
	// 赋值操作
		// 1. 对象.属性名 = '值';
		obj.name = "张三";
		// 2. 对象名["属性名"] = "值";
		obj['age'] = 18;
</script>

– 2.获取操作：

Let’s Coding：

<script>
// 获取操作(结合上述赋值代码运行)
	// 1. 对象.属性名;
	var objName = obj.name;
	console.log(objName);
	// 2. 对象["属性名"];
	var objAge = obj.age;
	console.log(objAge);
</script>

什么是属性节点？

属性节点：<span name="font"></span> ：name 即为属性节点

浏览器中：该元素的Attribute属性中的所有属性都为属性节点；

怎样操作节点？

设置属性节点：DOM元素.setAttribute(“属性名称”,“属性值”);

Let’s Coding:

<script>
	// 提前写好一个span标签
	var span = document.getElementsByTagName("span")[0];
	// 设置对象name 属性
	span.setAttribute("name","win");
</script>

获取属性节点：DOM元素.getAttribute(“属性名称”);

Let’s Coding:

<script>
	// 提前写好一个span标签
	var span = document.getElementsByTagName("span")[0];
	// 设置对象 name 属性
	span.setAttribute("name","win");
	// 获取对象 name 属性;
	console.log(span.getAttribute("name"));		// win
</script>