jQuery样式之.attr和.remove

举例了解jQuery中样式之.attr和.removeAttr使用方法：

jQuery中用attr()方法来获取和设置元素属性,attr是attribute（属性）的缩写，在jQuery DOM操作中会经常用到attr()

attr()有4个表达式

attr(传入属性名)：获取属性的值
attr(属性名, 属性值)：设置属性的值
attr(属性名,函数值)：设置属性的函数值
attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

removeAttr()删除方法

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<title>无标题文档</title>
</head>

<body>
    <h2>.attr()与.removeAttr()</h2>
    <h3>.attr</h3>
    <form>
        <input type="text" value="设置value" />
        <input type="text" value="获取value"/>
        <input type="text" value="回调拼接value" />
        <input type="text" value="删除value" />
    </form>

    <script type="text/javascript">
    	//找到第一个input，通过attr设置属性value的值
    	$('input:first').attr('value','.attr( attributeName, value )')
    </script>

    <script type="text/javascript">
    	//找到第二个input，通过attr获取属性value的值
    	$('input:eq(1)').attr('value')
    </script>

    <script type="text/javascript">
    	//找到第三个input，通过使用一个函数来设置属性
    	//可以根据该元素上的其它属性值返回最终所需的属性值
    	//例如，我们可以把新的值与现有的值联系在一起：
    	$('input:eq(2)').attr('value',function(i, val){
    		return '通过function设置' + val
    	})
    </script>

    <script type="text/javascript">
    	//找到第四个input，通过使用removeAttr删除属性
    	$('input:ea(3)').removeAttr('value')
    </script>


</body>
</html>

浏览器中预览效果：

jQuery样式之.attr和.remove

猜你喜欢