通过传入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("<img src='../img/3.png'/>");
// $("#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>
<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() {
//focus:点击文本框时
$("#text1").focus(function() {
var t = $(this).val();
if (t == "xxx@163.com") {
$(this).val("");
}
});
//blur:离开文本框时
$("#text1").blur(function() {
var t = $(this).val();
if (t == "") {
$(this).val("xxx@163.com");
}
});
});
</script>
</head>
<body>
邮箱:<input type="text" id="text1" value="xxx@163.com" /><br />
密码:<input type="text" id="text2" />
<p>
<input type="button" value="登录">
<a href="#">忘记密码</a>
</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() {
//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 = $("<li>" + $(this).val() + "</li>");
$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=$("<ul></ul>");
var li1=$("<li>我是你爹</>")
var li2=$("<li>我是你爹的爹</>")
var li3=$("<li>我是你爹的爹的爹</>")
ul.append(li1);
ul.append(li2);
ul.append(li3);
$(this).after(ul);
});
});
</script>
</head>
<body>
<h2>点击添加</h2>
</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() {
//:first:第一个
//+:下一个,或者next()方法
$("#tj").click(function() {
var li="<li>"+$("#txt").val()+"</li>";
$("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>
获取输入框类容,选中DOM对象
通过replaceWith方法替换掉指定DOM
遍历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() {
$("#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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</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>
使用each方法可以遍历获取到的DOM元素
参数一:下标,从0开始
参数二:对象名
类似于JAVA的加强for循环
int[]arr={1,2,3};
for(int i:arr){
...........
}