jquery操作DOM对象

通过传入id、class、标签名获取DOM对象：


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<style>
			.c{
				color: red;
			}
		style>
		<script>
			$(function() {
				$("h2").click(function() {
					this.style.color="red";
				});
			});
		script>
	head>
	<body>
		<h2>标题标题标题标题标题标题h2>
	body>
html>

给DOM对象添加、删除类css样式：


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<style>
			.c1{
				color: red;
			}
		style>
		<script>
			$(function(){
				$("#p1").click(function(){
					// $("#p1").addClass("c1");
					// $("#p1").removeClass("c1");
					$("#p1").removeClass();
				});
			});
		script>
	head>
	<body>
		<p id="p1" class="c1">
			123654789
		p>
	body>
html>

删除类时传入类名参数，有参则删除指定样式，无参删除全部样式

更改DOM类容：


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<script>
			$(function() {
				$("#an1").click(function() {
					$("#div1").html("");
					// $("#div1").text("你是个屁！");
				});
			});
		script>
	head>
	<body>
		<div id="div1">
			我是你爹
		div>
 
		<input type="button" value="添加图片" id="an1" />
	body>
html>

html方法相当于js的innerHTML方法

text方法相当于js的 innerTEXT方法

jquery获取文本内容对的运用：


DOCTYPE html>
	
		
		
		
		
		
	
	
		邮箱:
		密码:
		
			
			忘记密码

判断文本框是否有过更新输入值，

给定用户默认格式

改变DOM元素值：


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<script>
			$(function() {
				//attr:attr("属性","属性值")
				var img = new Array();
				img[0] = "../img/3.png";
				img[1] = "../img/t1.png";
				img[2] = "../img/t2.png";
				img[3] = "../img/ys.png";
				$("img").attr("src", function() {
					var i = Math.ceil(Math.random() * 3);
					return img[i];
				});
				$("img").attr("width", "100px");
			});
		script>
	head>
	<body>
		<img src="../img/3.png" />
	body>
html>

上面的代码时随机获取1-4的图片作为背景

通过attr方法改变DOM的属性值

第一个参数为：属性名称

第二个参数为：该属性值


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<script>
			$(function() {
				$("#data").blur(function() {
					if ($(this).val() != "") {
						var $t = $("
" + $(this).val() + "
");

$t.appendTo($("ul"));
$(this).val("");
}
});
});
script>
head>
<body>
<ul id="ul1">
<li>戒烟——————李某li>
<li>李白——————李某li>
<li>哦买噶——————李某li>
ul>
<input type="text" id="data" />
body>
html>

获取输入框的值，通过appendTO方法添加到指定的容器中


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>title>
		<script src="../jQuery3.6.0.js">script>
		<script>
			$(function(){
				$("h2").click(function(){
					var ul=$("
");
					var li1=$("
我是你爹")

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title> <script src="../jQuery3.6.0.js">script> <script> $(function() { //:first:第一个 //+:下一个，或者next()方法 $("#tj").click(function() { var li=" "+$("#txt").val()+" "; $("ul li:first+").replaceWith(li);//选中第二个 }); }); script> head> <body> <ul> <li>大河乡东流li> <li>黄河滚滚li> <li>长江幽幽li> <li>我是你爹li> ul> <label> <input type="text" id="txt" /> <input type="button" value="替换" id="tj" /> label> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>title> <script src="../jQuery3.6.0.js">script> <script> $(function() { $("#img1").click(function() { $(this).clone(true).appendTo("#p1") }); $("#s").click(function() { $("ul li:first").remove(); }); $("#tianjia").click(function() { $("img").each(function(index, element) { $(element).css("border", "1px solid red"); $(element).attr("title", "第" + (index + 1) + "张"); }) }); }); script> head> <body> <p id="p1"> <img src="../img/3.png" id="img1" /> p> <ul> <li>1li> <li>2li> <li>3li> <li>4li> ul> <input type="button" id="s" value="删除" /> <p> <img src="../img/3.png" /> <img src="../img/3.png" /> p> <input type="button" value="添加边框" id="tianjia" /> body> html>