1.jQuery概述
jQuery是在JS基础上进行的封装,基础语言还是JS,简化JS语法。
2.jQuery对象和DOM对象
1.jQuery对象:
(1)jQuery对象是通过jQuery()或 $()包装DOM对象后产生的对象;
(2)jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法,eg: $("#id").html();
(3)jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法。
2.jQuery对象转成DOM对象:
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到对应的DOM对象。
(2)使用jQuery中的get(index)方法得到相应的DOM对象。
//jquery语法
//var jobj = jquery("#txtid")
var jobj = $("#txtid")//jquery对象
console.log(jobj.val())
//jquery对象转doom
//var t = jobj[0]
var t = jobj.get(0)
console.log(t.value)
3.DOM对象转成jQuery对象:
对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象。转换以后就可以使用jQuery中的方法了。
//dom转为jquery对象
var j = $(t);
console.log(j.val())
3.选择器
1.选择器是jQuery的根基,在jQuery中对事件处理,遍历DOM操作都依赖于选择器;
2.jQuery选择器的优点:简洁的写法;
3.基本选择器:
基本选择器是jQuery中最常用的选择器,也是最简单的选择器。
(1)id选择器:
$("#id")
var jobj = $("#txtid")//jquery对象
console.log(jobj.val())
(2)标签选择器:
$(“标签名”)
//标签选择器
var j = $("input")
j.val("aaa")
console.log(j.val())
(3)类选择器
$(".class")
//类选择器
var j = $(".btn")
console.log(j.length)
(4)通配选择器
$("*")
//通配选择器
var j = $("*")
console.log(j.length)
(5)选择器组合
$("#id,.class,标签名")
//选择器组合
var j = $("#txtid,.btn")
console.log(j.length)
4.层次选择器
如果想通过DOM标签之间的层次关系来获取特定标签,则需要使用层次选择器:
(1)后代选择器(获得标签1所有的标签名为标签2的后代标签)
标签名1 标签名2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("div ul")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul>第一个ul
<ul>
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul>第二个ul
<ul>
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul>第三个ul
<ul>
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
(2)只考虑子节点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("div>ul")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul>第一个ul
<ul>
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul>第二个ul
<ul>
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul>第三个ul
<ul>
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
(3)下一个兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("div+ul")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul>第一个ul
<ul>
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul>第二个ul
<ul>
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul>第三个ul
<ul>
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<ul>1</ul>
<ul>2</ul>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
(4)表示下面所有的兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("div~ul")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul>第一个ul
<ul>
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul>第二个ul
<ul>
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul>第三个ul
<ul>
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<ul>1</ul>
<ul>2</ul>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
5.过滤选择器
(1)基本过滤
:first 匹配获取第一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:first")
console.log(jobj.html())
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ul id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul id="ul2">第二个ul
<ul id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul id="ul3">第三个ul
<ul id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<ul>1</ul>
<ul>2</ul>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:last 匹配获取最后一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:last")
console.log(jobj.html())
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ul id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ul>
</ul>
<ul id="ul2">第二个ul
<ul id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ul>
</ul>
<ul id="ul3">第三个ul
<ul id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ul>
</ul>
</div>
<ul>1</ul>
<ul>2</ul>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:even 索引为偶数的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:even")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:odd 匹配索引为奇数的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:odd")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:eq(index) 匹配指定索引
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:eq(1)")
console.log(jobj.html())
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:lt(index) 匹配小于指定下标的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:lt(2)")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:gt(index) 匹配大于指定下标的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("ul:gt(2)")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
:empty 是否为空(0-不为空,1-为空)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var jobj = $("#ulE:empty")
console.log(jobj.length)
}
</script>
</head>
<body>
<div>
<ul id="ul1">第一个ul
<ol id="ul1_1">
<li>第一个ul的第一个孙子</li>
<li>第一个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul2">第二个ul
<ol id="ul2_1">
<li>第二个ul的第一个孙子</li>
<li>第二个ul的第二个孙子</li>
</ol>
</ul>
<ul id="ul3">第三个ul
<ol id="ul3_1">
<li>第三个ul的第一个孙子</li>
<li>第三个ul的第二个孙子</li>
</ol>
</ul>
<ul>1</ul>
<ul>2</ul>
<ul id="ulE"></ul>
</div>
<input type="button" value="操作" id="btn" onclick="test()" />
</body>
</html>
6.表单选择器
(1):input 匹配所有 input, textarea, select 和 button 元素
(2):text 查找所有的文本框
(3):password 匹配所有的密码框
(4):radio 匹配所有的单选按钮
(5):button 匹配所有的按钮
(6):submit 匹配所有的提交按钮
(7):reset 匹配所有的重置按钮
(8):image 匹配所有的图像域
(9):checkbox 匹配所有的选择框
(10):file 匹配所有的文件域
(11):hidden 匹配所有的不可见元素
4.jQuery操作标签属性
1.val()获得匹配的标签中第一个的值;
2.val(111)为所有匹配标签设置值;
3.attr(“属性”)获得匹配的标签中第一个指定属性的值,可以拿到自定义属性的值;
4.attr(“属性”,“属性值”)为匹配到的所有标签中的指定属性设置值;
5.prop(“属性”)只能获得标签中本身有的属性,操作一些true、false建议使用prop;
6.removeAttr(“属性”)删除属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- jqurey搭建 -->
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
function test(){
var j = $("#txtid");
j.val("aaa")//为所有匹配标签设置值 只能操作文本框的value属性
console.log(j.val())//获得匹配的标签中第一个的值 只能操作文本框的value属性
console.log(j.attr("aaa"))//获得标签指定属性的值,可以获得自定义的属性值
j.attr("type","button");
console.log(j.prop("type"))
j.removeAttr("aaa")
console.log(j)
var c = $("#che")
c.removeAttr("checked")
}
function add(){
var d = $("#div")
d.prop("style","background-color: red;")
}
</script>
</head>
<body>
<input type="text" id="txtid" aaa="aa" />
<input type="button" value="测试" onclick="test()" />
<input type="checkbox" checked="checked" id="che" />
<div id="div" >
aaa
</div>
<input type="button" id="btn1" onclick="add()" />
</body>
</html>