04- jQuery对象(选择器和属性)

最新推荐文章于 2022-10-03 13:23:26 发布

guardwhy

最新推荐文章于 2022-10-03 13:23:26 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/hxy1625309592/article/details/111515349

版权

4.1 选择器

4.1.1 内容选择器

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery内容选择器</title>
  <style type="text/css">
	div{
		width: 150px;
		height: 100px;
		background: red;
		margin-top: 5px;
	}
  </style>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div></div>
<div>我有一瓢酒,可以慰风尘。</div>
<div>君埋泉下泥销骨，我寄人间雪满头。</div>
<div><span></span></div>
<div><p></p></div>
<script type="text/javascript">
  $(function (){
    // 1.empty 作用:找到既没有文本内容也没有子元素的指定元素
    let $div1 = $("div:empty");
	console.log($div1);

	// 2.:parent 作用: 找到有文本内容或有子元素的指定元素
	let $div2 = $("div:parent");
	console.log($div2);

	// 3.:contains(text) 作用:找到包含指定文本内容的指定元素
	let $div3 = $("div:contains('我有一瓢酒,可以慰风尘.')");
	console.log($div3);
    // 4.:has(selector) 作用: 找到包含指定子元素的指定元素
    let $div4 = $("div:has('span')");
    console.log($div4);
  });
</script>
</body>
</html>

执行结果

4.2 属性操作

4.2.1 属性节点

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性节点</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<span name="imooc"></span>
<script type="text/javascript">
  $(function (){
    /*
    1.属性节点：
    在编写HTML代码时,在HTML标签中添加的属性就是属性节点。
    在attributes属性中保存的所有内容都是属性节点。
    2.操作属性节点
	  DOM元素.setAttribute("属性名称", "值");
	  DOM元素.getAttribute("属性名称");
	3.属性和属性节点区别
	任何对象都有属性, 但是只有DOM对象才有属性节点。
    */
	let span = document.getElementsByTagName("span")[0];
	// 设置属性节点
	span.setAttribute("name", "guardwhy");
	// 输出结果
	console.log(span.getAttribute("name"));
  });
</script>
</body>
</html>

执行结果

4.2.2 属性

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<span name="imooc"></span>
<script type="text/javascript">
  $(function (){
    /*
    1.属性: 对象身上保存的变量就是属性
	2.操作属性
		对象.属性名称 = 值;
		对象.属性名称;
		对象["属性名称"] = 值;
		对象["属性名称"];
    */
	// 定义函数
	function Person(){}
	// 创建对象
	let p = new Person();
	// 属性操作
	p.name = "guardwhy";
	console.log(p.name);

  });
</script>
</body>
</html>

4.2.3 属性方法

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性方法</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<span class="obj1" name = "Curry"></span>
<span class="obj2" name = "James"></span>

<script type="text/javascript">
  $(function (){
    /*
     1.attr(name|pro|key,val|fn)
	  作用: 获取或者设置属性节点的值,可以传递一个参数, 也可以传递两个参数。
	  传递一个参数, 获取属性节点的值。传递两个参数, 设置属性节点的值。
	  注意点:
	  如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
	  如果是设置:找到多少个元素就会设置多少个元素，如果设置的属性节点不存在, 那么系统会自动新增。
    */
	// 打印节点
    /*console.log($("span").attr("class"));
    // 设置
	$("span").attr("class","box");
	// 设置属性节点不存在
	$("span").attr("guardwhy", "26");*/

	/*
	2.removeAttr(name)
      删除属性节点
	  注意点:会删除所有找到元素指定的属性节点
	*/
	$("span").removeAttr("class name");
  })
</script>
</body>
</html>

执行结果

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>属性方法2</title>
  <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<span class="obj1" name = "Curry"></span>
<span class="obj2" name = "James"></span>
<input type="checkbox" checked>

<script type="text/javascript">
  $(function (){
    /*
	1.prop方法
	特点和attr方法一致
	2.removeProp方法
	特点和removeAttr方法一致
	*/
	// 1.设置操作
	/*$("span").eq(0).prop("NBA","kobe");
	$("span").eq(1).prop("NBA", "Rondo");*/
	// 打印属性
	// console.log($("span").prop("NBA"));	// kobe

	// 2.移除操作
	/*$("span").removeProp("NBA");*/

    /*
	  注意点:
	  prop方法不仅能够操作属性, 还能操作属性节点.
	  checked,selected或者disabled使用prop(),其他的使用 attr()。
	*/
	console.log($("input").prop("checked"));	// true
	console.log($("input").attr("checked")); 	//checked
  });
</script>
</body>
</html>

执行结果

guardwhy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
04- jQuery对象(选择器和属性)

4.1 选择器4.1.1 内容选择器代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery内容选择器</title> <style type="text/css"> div{ width: 150px; height: 100px; background: red; margin-to
复制链接

扫一扫