HTML中jQuery元素添加

最新推荐文章于 2024-06-12 07:30:55 发布

程序猿11号

最新推荐文章于 2024-06-12 07:30:55 发布

阅读量213

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_46383618/article/details/107512074

版权

jQuery元素添加方法

一、attr（）方法：直接使用jQuery语句

二、在body中使用anload标签属性

三、调用function匿名方法实现

四、$(document)方法添加元素

五、addClass(class|fn)方法

六、toggleClass(class|fn[,sw])

jQuery元素添加方法

一、attr（）方法：直接使用jQuery语句

格式：attr（）方法：attr(name|properties|key,value|key,fn)：

设置或返回被选元素的属性值。
1、name：返回name属性的属性值：

2、properties：使用JavaScript对象设置属性的属性值：

3、key,value：

4、key,fn：

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<a id="bd">百度</a>
		<script>
			var id = $("#title").attr("id");//获取
			console.log(id);
			$("#bd").attr("href","http://www.baidu.com");//代码要写在a标签的下面，除非写成方法
		</script>
	</body>
</html>

结果展示：

点击即可跳转到百度页面

二、在body中使用anload标签属性

格式：<body οnlοad="t()">

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
                <script>                
                function t(){
		        $("#bd").attr("href","http://www.baidu.com");
	        }
                </script> 
	</head>
	<body onload="t()">
		<a id="bd">百度</a>
	</body>
</html>

与attr方法结果一样

三、调用function匿名方法实现

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
                <script> 
                $(function t(){
			$("#bd").attr("href","http://www.baidu.com");
		});//相当于onload,可以省写onload
			
		$(document).ready(function t(){
			$("#bd").attr("href","http://www.baidu.com");
		});//上面那个的原始代码
                </script> 
	</head>
	<body >
		<a id="bd">百度</a>
	</body>
</html>

与attr方法结果一样

四、$(document)方法添加元素

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
                <script> 
		$(document).ready(function t(){
			$("#bd").attr("href","http://www.baidu.com");
		});//上面那个的原始代码
                </script> 
	</head>
	<body >
		<a id="bd">百度</a>
	</body>
</html>

与attr方法结果一样