jQuery中对属性的操作【attr\prop addClass\removeClass\toggleClass html()\text()\val()】（属性、属性节点 CSS类文本）

最新推荐文章于 2024-05-04 15:52:42 发布

jing_jing6

最新推荐文章于 2024-05-04 15:52:42 发布

阅读量431

点赞数

文章标签： jquery

本文链接：https://blog.youkuaiyun.com/jing_jing6/article/details/105678453

版权

一个元素下有很多的属性，原生JS就可以对这些属性进行操作。
jQuery操作DOM（文本）、属性、css类等相关的方法，这使访问和操作元素和属性变得很容易。

属性节点的操作

         attr(name|pro|key,val|fn)

如果是一个参数，显示属性节点的值
如果是两个参数，设置属性节点的值
显示时，只显示第一个标签的属性节点值,也可以用eq()进行指定
设置时，全部都设置
对于第一个参数，可以添加自定义的属性节点，添加的属性会在标签中显示


<body>
<span class="span1" name="aaa"></span>
<span class="span1" name="bbb"></span>
<span class="span1" name="ccc"></span>
</body>


$(function{
//显示属性节点
	let aa=$("span").attr("class");
	console.log(aa);
	//特定显示属性节点
	let  bb=$("span").eq(2).attr("name");
	console.log(bb);
	//设置已有的属性节点
	$("span").attr("name","hhhh");
	//自动添加一个新的属性节点，并设置其值
	$("span").attr("nnn","mmm");
})

		removeAttr(name)

只能有一个参数，但可以删除多个属性节点，用空格进行分隔

$("span").removeAttr("name class");

属性的操作

		prop(n|p|k,v|f)
		removeProp(name)

和attr相同
可以对特定属性进行操作
但是不可以添加新的属性节点，因为他操作的是属性；
所以可以添加新的属性

<span class="span1" name="aaa"></span>
<span class="span1" name="bbb"></span>
<span class="span1" name="ccc"></span>
<input type="checkbox" checked />

     //添加属性
     $("span").prop("nnn","mmm");
     console.log($("span").prop("nnn"));//mmm
     //删除属性
     $("span").removeProp("nnn");

属性节点也是属性的一种，所以可以对属性节点进行操作（不可以添加）

//操作属性节点，查询
   console.log($("span").prop("class"));//span1
   console.log($("span").prop("name"));//undefined

//操作属性节点，改属性节点的值
   let aa=$("span").eq(1).prop("class","ff");
   //返回一个jQuery对象
   console.log(aa);

那什么时候用attr，什么时候用prop

当操作属性节点时，当具有 checked selected disable 等具有true和false属性节点时使用prop
剩下的操作属性节点用attr

console.log($("input").prop("checked"));//true\false
console.log($("input").attr("checked"));//checked\undefined

css类操作

		 1.addClass(class|fn) 添加类

        2.removeClass([class|fn]) 删除类

        3.toggleClass(class|fn[,sw]) 替换类

         多个参数用空格分离

<body>
<button>添加类</button>
<button>删除类</button>
<button>替换类</button>
<div style="height: 50px; width:50px;"></div>
</body>

<style>
.class1{background: maroon; }
.class2{border:10px solid black;}
</style>

  $(document).ready(function()
{
   let btn=document.getElementsByTagName('button');
   btn[0].onclick=function()
  	 {$("div").addClass('class1 class2')};
   btn[1].onclick=function()
  	 {$("div").removeClass('class1')};
   btn[2].onclick=function()
  	 {$("div").toggleClass('class1 class2')};
})

文本操作

 html([val|fn])
        和JS中的innerHTML是一样的
 text([val|fn])
        和JS中的innertext是一样的
  val([val|fn|arr])
        和JS中的value是一样的

一个参数是设置，没有参数是获取

<body>
<button>设置HTML</button>
<button>获取HTML</button>
<button>设置TXT</button>
<button>获取TXT</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>

<style>
   div{border:1px solid black;height: 200px; width:200px;}
</style>

            $(document).ready(function()
            {
                let btn=document.getElementsByTagName('button');
                btn[0].onclick=function()
                {
                  $("div").html("<p>aaaa</p>")
                };
                btn[1].onclick=function()
                {
                    console.log($("div").html());
                }
                btn[2].onclick=function()
                {
                    $("div").text("<p>aaaa</p>")
                }
                btn[3].onclick=function()
                {
                    console.log($("div").text);
                }
                btn[4].onclick=function()
                {
                    $('input').val("aaaaaaa");

                }
                btn[5].onclick=function()
                {
                    console.log($('input').val());
                }
            })
        </script>