Add jQuery elements in HTML

table of Contents

jQuery element adding method

1. Attr() method: use jQuery statement directly

Two, use the anload tag attribute in the body

Three, call function anonymous method to achieve

Four, $(document) method to add elements

Five, addClass(class|fn) method

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


jQuery element adding method

1. attr() method : use jQuery statement directly

Format: attr() Method: attr(name|properties|key,value|key,fn):

Sets or returns the attribute value of the selected element.
1. name: return the property value of the name property:

2. properties: use the JavaScript object to set the property value of the property:

3. key, value:

4. key, fn:

Code example:

<!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>

Result display:

Click to jump to Baidu page

Two, use the anload tag attribute in the body

Format: <body οnlοad="t()">

Code example:

<!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>

Same result as attr method

Three, call function anonymous method to achieve

Code example:

<!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>

Same result as attr method

Four, $(document) method to add elements

Code example:

<!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>

Same result as attr method

Five, addClass(class|fn) method

Set the attribute value of the class attribute for the matched element. Use spaces to separate multiple attribute values. The following example:

At the same time, removeClass([class|fn]): delete the attribute value of the class attribute of the matching element, multiple attribute values ​​are separated by spaces, as in the following example:

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

Switch styles-delete the class name if it exists, add it if the class name does not exist.
 

 

 

Guess you like

Origin blog.csdn.net/m0_46383618/article/details/107512074