JQuery
目录
1、js和jquery对象 获取值
<body>
<div id="div">hello world</div>
<input id='div2' onblur="hello()"></input>
</body>
<script>
var el = $("#div");
alert(el.html())
var s = document.getElementById("div");
alert(s.innerHTML)
function hello() {
var name = $("#div2");
alert(name.val())
var s = document.getElementById("div2");
alert(s.value)
}
</script>
2、对象转换
- js -> jquery
- $(JS的DOM对象)
- jquery -> js
- JQuery对象[索引]
- JQuery对象.get(索引)
3、事件
-
基本使用
<body> <input type="button" id="btn" value="点我"/> </body> <script src="../js/jquery-3.6.0.js"></script> <script> $("#btn").click(function(){ alert('hello world') }); </script> -
事件的绑定与解绑
-
jQuery 对象.on(事件名称,执行的功能);
$("#btn").on("click",function(){ alert("hello") }) -
jQuery 对象.off(事件名称);
如果指定，则会把该对象绑定的所有事件都解绑
$("#btn2").on("click",function(){ $("#btn").off("click") })
-
-
事件的切换
同一个元素可以绑定多个事件
-
单独定义
-
链式定义
hover函数，只能鼠标移动元素之上 和 鼠标移出元素之上 两个事件起作用。
-
-
遍历
-
传统方式
$("#btn").on("click", function () { var lis = $("li") for (var i = 0; i < lis.length; i++) { alert(i + ':' + lis[i].innerHTML) //[] 得到的是JS对象 } }); -
对象.each() --- 得到js对象
<body> <div id="div1">我</div> <br> <div id="div2">喜欢</div> <br> <div id="div3">你</div> <br> <input type="button" id="btn" value="遍历"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script src="../js/jquery-3.6.0.js"></script> <script> // 获取id以div开头的 // 开头$("*[id^=AA]") // 结尾$("*[id$=AA]") $("*[id^=div]").each(function () { alert($(this).html()) }) $("#btn").click(function () { $("li").each(function (index, ele) { alert(index + ':' + ele.innerHTML) }) }); </script>
-
4、选择器
1、基础选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 元素选择器 | $("元素的名称") | 根据元素名称获取元素对象们 |
| id选择器 | $("#id的属性值") | 根据id属性值获取对象们 |
| 类选择器 | $(.class的属性值) | 根据class属性值获取对象们 |
2、层级选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 后代选择器 | $("A B") | A下所有的B(包括B的子集) |
| 子选择器 | $("A > B") | A下所有的B(不包括B的子集) |
| 兄弟选择器 | $("A + B") | A相邻的下一个B |
| 兄弟选择器 | $("A ~ B") | A相邻的所有B |
3、属性选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 属性名选择器 | $("A[属性名]") | 根据指定属性名获取元素对象们 |
| 属性值选择器 | $("A[属性名 = 属性值]") | 根据指定属性名和属性值获取元素对象们 |
<body>
<input type="text">
<div>
<input type="password">
<input type="password">
</div>
</body>
<script src="../js/jquery-3.6.0.js"></script>
<script>
var it = $("input[type]")
alert(it.length)
var it1 = $("input[type='password']")
alert(it1.length)
</script>
4、过滤器选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 首元素选择器 | $("A:first"); | 获得选择的元素中的第一个元素 |
| 尾元素选择器 | $("A:last"); | 获得选择的元素中的最后一个元素 |
| 非元素选择器 | $("A:not(B)"); | 不包括指定内容的元素 |
| 偶数选择器 | $("A:even"); | 偶数，从 0 开始计数 |
| 奇数选择器 | $("A:odd"); | 奇数，从 0 开始计数 |
| 等于索引选择器 | $("A:eq(index)"); | 指定索引元素 |
| 大于索引选择器 | $("A:gt(index)"); | 大于指定索引元素 |
| 小于索引选择器 | $("A:lt(index)"); | 小于指定索引元素 |
5、表单属性选择器
| 选择器 | 语法 | 作用 |
|---|---|---|
| 可用元素选择器 | $("A:enabled"); | 获得可用元素 |
| 不可用元素选择器 | $("A:disabled"); | 获得不可用元素 |
| 单选/复选框被选中的元素 | $("A:checked"); | 获得单选/复选框选中的元素 |
| 下拉框被选中的元素 | $("A:selected"); | 获得下拉框选中的元素 |
<body>
<input type="text" disabled>
<input type="text" >
<input type="radio" name="gender" value="men" checked>男
<input type="radio" name="gender" value="women">女
<input type="checkbox" name="hobby" value="study" checked>学习
<input type="checkbox" name="hobby" value="sleep" checked>睡觉
<select>
<option>---请选择---</option>
<option selected>本科</option>
<option>专科</option>
</select>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 1.可用元素选择器 $("A:enabled");
let ins1 = $("input:enabled");
//alert(ins1.length);
// 2.不可用元素选择器 $("A:disabled");
let ins2 = $("input:disabled");
//alert(ins2.length);
// 3.单选/复选框被选中的元素 $("A:checked");
let ins3 = $("input:checked");
//alert(ins3.length);
//alert(ins3[0].value);
//alert(ins3[1].value);
//alert(ins3[2].value);
// 4.下拉框被选中的元素 $("A:selected");
let select = $("select option:selected");
alert(select.html());
</script>
</html>
5、DOM
1、操作文本
常用方法
| 方法 | 作用 |
|---|---|
| html() | 获取标签的文本 |
| html(value) | 设置标签的文本内容，解析标签 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作文本</title>
</head>
<body>
<div id="div">我是div</div>
<input type="button" id="btn1" value="获取div的文本">
<input type="button" id="btn2" value="设置div的文本">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1. html() 获取标签的文本内容
$("#btn1").click(function(){
//获取div标签的文本内容
let value = $("#div").html();
alert(value);
});
//2. html(value) 设置标签的文本内容，解析标签
$("#btn2").click(function(){
//设置div标签的文本内容
//$("#div").html("我真的是div");
$("#div").html("<b>我真的是div</b>");
});
</script>
</html>
2、操作标签
- 标签父子关系方法: append(element) prepend(element)
- 标签兄弟关系方法：before(element) after(element)
- 移除自己：remove() ；移除自己嵌套的所有子标签：empty()
- 注意：append prepend before after 这四个方法均为移动标签到指定位置
常用方法
| 方法 | 作用 |
|---|---|
| $("元素") | 创建指定元素 |
| append(element) | 添加成最后一个子元素，由添加者对象调用 |
| appendTo(element) | 添加成最后一个子元素，由被添加者对象调用 |
| prepend(element) | 添加成第一个子元素，由添加者对象调用 |
| prependTo(element) | 添加成第一个子元素，由被添加者对象调用 |
| before(element) | 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用 |
| after(element) | 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用 |
| remove() | 删除指定元素(自己移除自己) |
| empty() | 清空指定元素的所有子元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作对象</title>
</head>
<body>
<div id="div"></div>
<input type="button" id="btn1" value="添加一个span到div"> <br><br><br>
<input type="button" id="btn2" value="将加油添加到城市列表最下方">
<input type="button" id="btn3" value="将加油添加到城市列表最上方">
<input type="button" id="btn4" value="将雄起添加到上海下方">
<input type="button" id="btn5" value="将雄起添加到上海上方">
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="gz">广州</li>
<li id="sz">深圳</li>
</ul>
<ul id="desc">
<li id="jy">加油</li>
<li id="xq">雄起</li>
</ul> <br><br><br>
<input type="button" id="btn6" value="将雄起删除">
<input type="button" id="btn7" value="将描述列表全部删除">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
/*
1. $("元素") 创建指定元素
2. append(element) 添加成最后一个子元素，由添加者对象调用
3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
4. prepend(element) 添加成第一个子元素，由添加者对象调用
5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
6. before(element) 添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
7. after(element) 添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
8. remove() 删除指定元素(自己移除自己)
9. empty() 清空指定元素的所有子元素
*/
// 按钮一：添加一个span到div
$("#btn1").click(function(){
let span = $("<span>span</span>");
$("#div").append(span);
});
//按钮二：将加油添加到城市列表最下方
$("#btn2").click(function(){
//$("#city").append($("#jy"));
$("#jy").appendTo($("#city"));
});
//按钮三：将加油添加到城市列表最上方
$("#btn3").click(function(){
//$("#city").prepend($("#jy"));
$("#jy").prependTo($("#city"));
});
//按钮四：将雄起添加到上海下方
$("#btn4").click(function(){
$("#sh").after($("#xq"));
});
//按钮五：将雄起添加到上海上方
$("#btn5").click(function(){
$("#sh").before($("#xq"));
});
//按钮六：将雄起删除
$("#btn6").click(function(){
$("#xq").remove();
});
//按钮七：将描述列表全部删除
$("#btn7").click(function(){
$("#desc").empty();
});
</script>
</html>
3、操作样式
- 都玩一玩：addClass(value) removeClass(value)
常用方法
| 方法 | 作用 |
|---|---|
| css(name) | 根据样式名称获取css样式 |
| css(name,value) | 设置CSS样式 |
| addClass(value) | 给指定的对象添加样式类名 |
| removeClass(value) | 给指定的对象删除样式类名 |
| toggleClass(value) | 如果没有样式类名，则添加。如果有，则删除 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作样式</title>
<style>
.cls1{
background: pink;
height: 30px;
}
</style>
</head>
<body>
<div style="border: 1px solid red;" id="div">我是div</div>
<input type="button" id="btn1" value="获取div的样式">
<input type="button" id="btn2" value="设置div的背景色为蓝色">
<br><br><br>
<input type="button" id="btn3" value="给div设置cls1样式">
<input type="button" id="btn4" value="给div删除cls1样式">
<input type="button" id="btn5" value="给div设置或删除cls1样式">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 1.css(name) 获取css样式
$("#btn1").click(function(){
alert($("#div").css("border"));
});
// 2.css(name,value) 设置CSS样式
$("#btn2").click(function(){
$("#div").css("background","blue");
});
// 3.addClass(value) 给指定的对象添加样式类名
$("#btn3").click(function(){
$("#div").addClass("cls1");
});
// 4.removeClass(value) 给指定的对象删除样式类名
$("#btn4").click(function(){
$("#div").removeClass("cls1");
});
// 5.toggleClass(value) 如果没有样式类名，则添加。如果有，则删除
$("#btn5").click(function(){
$("#div").toggleClass("cls1");
});
</script>
</html>
4、操作属性
- 带选中状态的标签，比如：radio checkbox option 标签的属性设置，推荐使用 prop(name,[value]) 和 removeProp():
- 其他标签使用：attr(name,[value]) 和 removeAttr() 即可
常用方法
| 方法 | 作用 |
|---|---|
| attr(name,[value]) | 获得/设置属性的值 |
| removeAttr(): | 删除属性 |
| prop(name,[value]) | 获得/设置属性的值(checked，selected) |
| removeProp(): | 删除属性 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作属性</title>
</head>
<body>
<input type="text" id="username">
<br>
<input type="button" id="btn1" value="获取输入框的id属性">
<input type="button" id="btn2" value="给输入框设置value属性">
<br><br>
<input type="radio" id="gender1" name="gender">男
<input type="radio" id="gender2" name="gender">女
<br>
<input type="button" id="btn3" value="选中女">
<br><br>
<select>
<option>---请选择---</option>
<option id="bk">本科</option>
<option id="zk">专科</option>
</select>
<br>
<input type="button" id="btn4" value="选中本科">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
// 1.attr(name,[value]) 获得/设置属性的值
//按钮一：获取输入框的id属性
$("#btn1").click(function(){
alert($("#username").attr("id"));
});
//按钮二：给输入框设置value属性
$("#btn2").click(function(){
$("#username").attr("value","hello...");
});
// 2.prop(name,[value]) 获得/设置属性的值(checked，selected)
//按钮三：选中女
$("#btn3").click(function(){
$("#gender2").prop("checked",true);
});
//按钮四：选中本科
$("#btn4").click(function(){
$("#bk").prop("selected",true);
});
</script>
</html>
DOM 操作小结
-
操作文本 html() html(…)：获取或设置标签的文本，解析标签。
-
操作对象
$(“元素”)：创建指定元素。
append(element)：添加成最后一个子元素，由添加者对象调用。 prepend(element)：添加成第一个子元素，由添加者对象调用。 before(element)：添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用。
after(element)：添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用。
remove()：删除指定元素(自己移除自己)。
empty(): 清空调用者标签所有嵌套的其他标签
-
操作样式
addClass(value)：给指定的对象添加样式类名。
removeClass(value)：给指定的对象删除样式类名。
-
操作属性
attr(name,[value])：获得/设置属性的值。
prop(name,[value])：获得/设置属性的值(checked，selected)。
镜花水月
