JQuery通俗易懂之常见的DOM属性

最新推荐文章于 2021-03-07 09:04:38 发布

CLFuture

最新推荐文章于 2021-03-07 09:04:38 发布

阅读量221

点赞数

分类专栏： jQuery 文章标签： Jquery常见ＤＯＭ属性

本文链接：https://blog.csdn.net/m0_37510446/article/details/94452209

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天主要讲解Jquery的三大常用DOM属性，如下：
1.addClass()
2.attr()
3.val()
接下来分别对其进行一一讲解：
1.addClass()
1.1语法：.addClass(className)
其中的className可以为一个或多个
作用：为我们所选中的元素添加指定的样式的类名
1.2语法：.addClass(function(index,currentClass))
作用：返回一个或多个使用空格隔开的要添加的样式名，其中的index参数表示当前元素的位置

记住一点：这个方法只是添加一个样式类名，不会替换之前已经存在的样式类名

<!DOCTYPE html>
<html>
<head>
  <style>
       h3{  margin:10px;
			font-size:16ps;
	  }
		.colors{
			background-color:green;
		}
		.sizes{
			font-size:200px;
		}
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<h3>I am best in the world</h3>
<script>
$("h3").addClass("colors sizes");
  </script>
</body>
</html>

调用addClass方法之前
在这里插入图片描述
调用addClass（）方法之后

以上就是添加样式之后的区别
这个方法，通常会和.removeClass一起使用，除去之前的样式，使用现在添加的样式

<!DOCTYPE html>
<html>
<head>
  <style>
       h3{  margin:10px;
			font-size:16ps;
		   color:yellow;
	  }
		.colors{
			background:green;
		}
		.sizes{
			font-size:200px;
			background-color:black;
		}
  </style>
  <script src="https://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
	<h3>I am best</h3>
<script>
$("h3").addClass("colors sizes").removeClass("sizes");
  </script>
</body>
</html>

执行上面这段代码可以发现，只留下了colors的样式，Sizes的样式被移除了

2.attr()
2.1语法：$(selector).attr(attribute)
作用：返回属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		alert("图片宽度: " + $("img").attr("width"));
	});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>返回图片的宽度</button>
</body>
</html>

2.2语法：$(selector).attr(attribute,value)
作用：设置属性和值
设置单个值的时候，使用逗号将属性和值分隔开

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
	$("img").attr("width","500");
	});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>设置图片的宽度为500</button>
</body>
</html>

2.3语法：$(selector).attr(attribuet,function(index,currentvalue))
作用：使用函数设置属性和值
该function函数其实就是对当前的属性值进行操作

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
	$("img").attr("width",function(n,v){
	return v-100;
	});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>将图片的宽度减少100</button>
</body>
</html>

2.4语法：$(selector).attr({attribute:value,attribute:value...})
作用：设置多个属性和值
设置对个值的时候，使用：赋值，逗号分隔

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("img").attr({width:"600"},{height:"600"});
	});
});
</script>
</head>
<body>
<img src="imgk.jpg" alt="Pulpit Rock" width="200" height="200"
<br>
<button>将宽度和高度均设置为600</button>
</body>
</html>

3.val()
该方法根据参数不同有三种：
3.1$(selector).val()
返回第一个匹配元素的value属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
alert("返回属性值"+$("input").val());
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user"></h3>
<button>输入字段，点击，该字段会显示</button>
</body>
</html>

3.2$(selector).val(value)
设置所有匹配元素的value属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
$("input").val("yeyeye");
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user"></h3>
<button>点击</button>
</body>
</html>

3.3$(selector).val(function(index,currentvalue))
通过函数设置value属性
此处的index代表集合中元素的位置
currentvalue代表被选元素的当前值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
<script>
$(function(){
$("button").click(function(){
$("input").val(function(n,c){
	return c-10;
});
})
});
</script>
</head>
<body>
<h3>年龄:<input type="text" name="user" value=20></h3>
<button>点击</button>
</body>
</html>