1.概念
JavaScript框架,简化JS开发
jQuery-xxx.js与jquery-xxx.min.js的区别
- jQuery-xxx.js:开发版本,主要给程序员看的,有良好的缩进和注解,体积大一些
- jquery-xxx.min.js:生产版本,程序中使用,没有缩进,体积小一些,程序加载更快
2.JQuery与JS对象区别于转换
1.JQuery对象的操作时,更加方便
2 JQuery对象与JS对象方法不通用
3 两者相互转换
jquery----->JS:jquery对象索引 或者 jquery对象.get(索引)
js----->jquery : $(js对象)
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
window.onload=function () {
var div1= document.getElementById("div1");
alert(div1.innerHTML)
var div2 = $("#div2");
alert(div2.html())
alert($(div1).html())
alert(div2[0].innerHTML)
}
</script>
</head>
<body>
<div id="div1">div1.....</div>
<div id="div2">div2....</div>
</body>
</html>
3.选择器:筛选具有相同特征的元素(标签)
3.1基本语法学习
3.1.1事件绑定
jQuery中将事件好像写在事件里面
<script>
//js中的使用方法
$("#bt").click(function () {
alert(12);
})
//jQuery中的使用方法
// $("#bt")[0].οnclick=function () {
// alert(34)
// }
</script>
3.1.2入口函数(载入页面内容时用的)
js中用window.onload而jQuery中用$(function)
<script>
//jquery中的使用方法
// $(function () {
// $("#bt").click(function () {
// alert(1223);
// })
// })
//js中的使用方法
window.onload=function () {
$("#bt").click(function () {
alert(1223)
})
}
</script>
3.1.2样式控制
<script>
$(function () {
$("#div1").css("backgroundColor","pink");
var d =document.getElementById("div2")
d.style.backgroundColor="red"
})
</script>
3.2分类
3.2.1基本选择器
1.标签选择器
语法:$(“html标签名”) 获取所有匹配标签名称的元素
2.id选择器
语法: $("#id的属性值") 获取与指定id属性值匹配的元素
3.类选择器
语法: $(".class属性值") 获取与指定iclass属性值匹配的元素
3.2.2基本选择器
1.后代选择器
语法:$(“A B”) 选择A元素内部的所有B元素
2.子选择器
语法:$(“A > B”) 选择A元素内部的所有B子元素
3.2.3属性选择器
1.属性名称选择器
语法:$(“A [属性名]”) 含有指定属性的选择器
2.属性选择器
语法:$(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器
!=不等于
^= 以…开头
$= 以…结尾
*= 包含…
2.复合属性选择器
语法:$(“A[属性名=‘值’][]…”)包含多个属性条件的选择器
3.2.4过滤选择器
1.首元素称选择器
语法::first 获得选择元素的第一个元素
样例
$("#div1:first").css("backgroundColor","pink");
2.尾元素选择器
语法::last 获得选择元素的最后一个元素
3.非元素选择器
语法::not(selector) 不包含指定内容的元素
4.偶数选择器
语法::even 偶数,从0开始计数
5.奇数选择器
语法::odd 奇数,从0开始计数
6.等于索引选择器
语法::eq(index) 指定索引元素
7.大于索引选择器
语法::gt(index) 大于指定元素
8.小于索引选择器
语法::lt(index) 小于指定索引元素
9.标题选择器
语法::header 获得标题(h1-h6)元素,固定写法
3.2.5表单过滤选择器
1.可用元素称选择器
语法::enabled 获得可用元素
2.不可用元素选择器
语法::disabled 获得不可用元素
3.选中元素选择器
语法::checked 获取单选/复选选中的元素
语法::selected 获取下拉框选中的元素
4.DOM操作
4.1内容操作
1.html() 获取/设置元素的标签体内容
2.text() 获取/设置标签纯文本内容
val() 获取/设置value属性值
样例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function (){
alert($("#div1").html())
$("#div1").html("div1")
alert($("#div2").text())
$("#div2").text("div2")
alert($("#div3").val())
$("#div3").val("div3")
})
</script>
</head>
<body>
<div id="div1"><a>我是div1</a></div>
<div id="div2"><a>我是div2</a></div>
<input type="text" value="张三" id="div3">
</body>
</html>
4.2属性操作
1.通用属性操作
1.attr();获取/设置元素的属性
2.removeAttr():删除属性
3.prop();获取/设置元素的属性
4.removeProp();删除属性
attr和prop区别:如果操作的是元素的固有属性,则建议使用prop;如果操作的是元素的自定义属性,则建议使用attr
样例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function () {
alert($("#city1").attr("name"))
alert($("#city2").attr("name"))
alert($("#city1").attr("value"))
$("#city1").attr("value","I like wh")
alert($("#input").prop("type"))
})
</script>
</head>
<body>
<li>
<ul name="city1" value="wh" id="city1">武汉</ul>
<ul name="city2" value="xy" id="city2">襄阳</ul>
</li>
<input type="text" name="输入" id="input">
</body>
</html>
2.Class属性操作
1.addClass() 添加Class属性
2.removeClass() 删除Class属性
3.toggleClass()切换Class属性:toggleClass(“one”)(判断对象上是否存在class=“one”,如果存在将属性值one删除,否则添加class=“one”)
样例展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one{
color: blue;
}
.two{
background-color: red;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#bt").click(function () {
$("#div1").toggleClass("one")
})
$("#bt1").click(function () {
$("#div1").addClass("two")
})
$("#bt2").click(function () {
$("#div1").removeClass("two")
})
})
</script>
</head>
<body>
<div id="div1" class="one" >你是谁</div>
<input id="bt1" type="button" value="添加">
<input id="bt2" type="button" value="删除">
<input id="bt" type="button" value="切换">
</body>
</html>
4.3CRUD操作
1.append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2追加到对象1元素内部,并且在末尾
2.prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2): 将对象2追加到对象1元素内部,并且在开头
3.appendTo():父元素将子元素追加到末尾
* 对象1.appendTo(对象2): 将对象1追加到对象2元素内部,并且在末尾
4.prependTo():父元素将子元素追加到开头
* 对象1.prependTo(对象2): 将对象1追加到对象2元素内部,并且在开头
5.after():添加元素到元素后面
* 对象1.after(对象2):将对象2 添加到对象1后面,对象1与对象2是兄弟关系
6.before():添加元素到元素前面
* 对象1.before(对象2):将对象2 添加到对象1前面,对象1与对象2是兄弟关系
7.insertAfter():添加元素到元素后面
* 对象1.insertAfter(对象2):将对象1添加到对象2后面,对象1与对象2是兄弟关系
8.insertBefore():添加元素到元素前面
* 对象1.insertBefore(对象2):将对象1添加到对象2前面,对象1与对象2是兄弟关系
9.remove():将对象删除
* 对象.remove():将对象删除掉
10.empty():清空元素的所有后代元素
* 对象.empty():将对象的后代元素全部清空,但保留当前对象及其属性节点
样例展示1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("#btn1").click(function () {
$("#city").prepend($("#hhl"))
})
$("#btn2").click(function () {
$("#city").append($("#glz"))
})
$("#btn3").click(function () {
$("#wh").after($("#sx"))
})
$("#btn4").click(function () {
$("#xy").before($("#sx"))
})
$("#btn5").click(function () {
$("#glz").remove();
})
$("#btn6").click(function () {
$("#saw").empty()
})
})
</script>
</head>
<body>
湖北省内主要城市
<ul id="city">
<li id="wh">武汉</li>
<li id="yc">宜昌</li>
<li id="xy">襄阳 </li>
</ul>
湖北省内旅游景点
<ul id="saw">
<li id="hhl">黄鹤楼</li>
<li id="sx">三峡</li>
<li id="glz">古隆中</li>
</ul>
<input type="button" id="btn1" value="将黄鹤楼加在湖北省内主要城市的前面">
<input type="button" id="btn2" value="将古隆中放在湖北省内主要城市的后面">
<input type="button" id="btn3" value="将三峡放在武汉的后面">
<input type="button" id="btn4" value="将三峡放在襄阳的前面">
<input type="button" id="btn5" value="将古隆中删除掉">
<input type="button" id="btn6" value="删除湖北省内旅游景点的列表">
</body>
</html>
样例展示2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(function () {
$("tr:gt(0):odd").css("backgroundColor","pink")
$("tr:gt(0):even").css("backgroundColor","yellow")
})
function selectall(obj) {
$(".che").prop("checked",obj.checked)
}
</script>
<body>
<table border="1" width="400">
<tr>
<td><input type="checkbox" onclick="selectall(this)">全选</td>
<td>编号</td>
<td>名称</td>
</tr>
<tr>
<th><input type="checkbox" class="che"></th>
<th>1</th>
<th>苹果</th>
</tr>
<tr>
<th><input type="checkbox" class="che"></th>
<th>2</th>
<th>香蕉</th>
</tr>
<tr>
<th><input type="checkbox" class="che"></th>
<th>3</th>
<th>橘子</th>
</tr>
<tr>
<th><input type="checkbox" class="che"></th>
<th>4</th>
<th>葡萄</th>
</tr>
</table>
</body>
</html>