- jQuery 是一个快速的，简洁的 javaScript 库，使用户能更方便地处理 HTML,css,dom...
- 提供方法、events、选择器，并且方便地为网站提供 AJAX 交互
- 其宗旨是—WRITE LESS,DO MORE,写更少的代码,做更多的事情.
- jQuery 实现了浏览器的兼容问题得到解决
JQuery 基本开发步骤
jQuery 快速入门
实现点击弹窗功能
- 初次使用jquery , 你会觉得语法比较奇怪，其实jquery的底层仍然是js,只是做了封装
- $(function () {} 等价 window.onload = function () {}
- (id) {} ...]
- $("#btn01") 底层: document.getElementById("btn01")
- 注意 ("#btn01") 不能写成 ("btn01") , 必须要有 #
- 通过$("#btn01") 返回的对象就是 jquery对象(即进行了封装)，而不是原生的dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery快速入门</title>
<!-- 引入jquery库-->
<script type="text/javascript" src="jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
/**
* 使用dom编程
* 1. 代码比较麻烦
* 2. document.getElementById("btn01") 返回的是dom对象
*/
// window.onload = function () {
// // 先得到对象
// let byId = document.getElementById("btn01");
// // 绑定一个事件
// byId.onclick = function () {
// alert("hello js !!"); // }
// }
/**
* 老师说明
* 1. 初次使用jquery , 你会觉得语法比较奇怪，其实jquery的底层仍然是js,只是做了封装
* 2. $(function () {} 等价 window.onload = function () {}
* 3. $() 可以理解成是一个函数 [可以定义 function $(id) {} ...] * 3. $("#btn01") 底层: document.getElementById("btn01")
* 4. 注意 $("#btn01") 不能写成 $("btn01")
* 5. 通过$("#btn01") 返回的对象就是 jquery对象(即进行了封装)，而不是原生的dom对象
*/
//使用jquery
//1. 引入jquery库文件->感情的自然流露
//2. $(function(){}) 等价原生的js的, 当页面加载完毕就会执行 function(){}
/* $(function() {} ) 就类似于 window.onload= function(){} */
$(function () {
// 得到btn01这个对象 --> jQuery对象
// $btn01 是一个jQuery对象, 其实就是一个jQuery对象包装
// 这时候我们就能使用jQuery对象的相关方法和事件
// 通过debug我们发现jQuery是数组对象
// jquery中, 我们获取对象的方法是 $("#id")
// 默认规则是 jQuery变量名用 $ 开头
var $btn01 = $("#btn01");
alert($btn01);
// 2. 绑定事件
$btn01.click(function () {
alert("hello jQuery ~~~");
})
});
</script>
</head>
<body>
<button id="btn01">按钮1</button>
</body>
</html>
jQuery对象
- jQuery 对象就是对 DOM 对象进行包装后产生的对象
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $("#id").html();
- 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $ ,
比如: var $variable = jQuery 对象
var variable = DOM 对象
DOM 对象转成 jQuery 对象
- 对于一个 DOM 对象，只需要用$()把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。$(DOM 对象)
- DOM 对象转换成 JQuery 对象后，就可以使用 jQuery 的方法了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
window.onload = function () {
let username = document.getElementById("username");
alert("username value = " + username.value);
// 直接使用 $()包起来就是
let $username = $(username);
alert("jQuery val = " + $username.val())
} </script>
</head>
<body>
用户名 <input type="text" id="username" name="username" value="韩顺平教育"/>
</body>
</html>
jQuery转化为dom对象
(1) jQuery 是一个数组对象, 封装了dom对象
(2) 可以通过[index]来获取, 或者可以get(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
// 需要写外面的$() 记住了
$(function () {
let $username = $("#username");
alert("$username = " + $username.val());
/*
jQuery对象转化为dom对象
(1) jQuery 是一个数组对象, 封装了dom对象
(2) 可以通过[index]来获取, 或者可以get(index)
*/ // 方式一 $name[]
let usernameElement = $username[0];
alert(usernameElement);
alert("username value = " + usernameElement.value);
// 方式二
let username = $username.get(0);
alert("username value ~~~= " + username.value);
});
</script>
</head>
<body>
用户名 <input type="text" id="username" name="username" value="韩顺平教育"/>
</body>
</html>
选择器 (重点)
基本选择器
基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素
- #id 用法: $("#myDiv"); 返回值 单个元素的组成的集合 这个就是直接选择 说明: 这个就是直接选择 html 中的 id=”myDiv”
- Element 用法: $("div") 返回值 集合元素
说明: element 的英文翻译过来是”元素”,所以 element 其实就是 html 已经定义的标签 元素,例如 div, input, a 等等. - class 用法: $(".myClass") 返回值 集合元素
说明: 这个标签是直接选择 html 代码中 class=”myClass”的元素或元素组 (因为在同一 html 页面中 class 是可以存在多个同样值的) - * 用法: $("*") 返回值 集合元素 说明: 匹配所有元素,多用于结合上下文来搜索
- selector1, selector2, selectorN 用法: $("div,span,p.myClass") 返回值 集合元素
说明: 将每一个选择器匹配到的元素合并后一起返回.你可以指定任意多个选择器, 并 将匹配到的元素合并到一个结果内.其中 p.myClass 是表示匹配元素 p class=”myClass”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 60px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
// 1. 改变id为one的元素背景颜色为2 #0000FF
$("#b1").click(function () {
// 如果想不起来就可以直接在下面input写一个style属性 根据提示ctrl + c ctrl + v
$("#one").css("background", "#0000FF");
});
// 2.改变 class为 mini的所有元素的背景色为 #FF0033
$("#b2").click(function () {
$(".mini").css("background", "#FF0033");
});
// 3. 改变元素名为 <div> 的所有元素的背景色为 #00FFFF
$("#b3").click(function () {
$("div").css("background", "#00FFFF");
});
// 4. 改变所有元素的背景色为 #00FF33
$("#b4").click(function () {
$("*").css("background", "#00FF33");
})
// 5.改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF
$("#b5").click(function () {
$("#two, .mini, span").css("background", "#3399FF");
})
});
</script>
</head>
<body>
<input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
<input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b3"/>
<input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
<input type="button" value=" 改变所有的<span>元素和 id 为 two class为 .mini 的元素的背景色为 #3399FF" id="b5"/>
<hr/>
<div id="one" class="mini">div id为one</div>
<div id="two">div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span>
</body>
</html>
层级选择器
如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻 元素, 兄弟元素等, 则需要使用层次选择器.
- ancestor descendant
用法: $(”form input”) ; 返回值 是 集合元素
说明: 在给定的祖先元素下匹配所有后代元素.这个要下面讲的”parent > child”区分 开. - parent > child 用法: $(”form > input”) ; 返回值 集合元素 这里可以省略 > 说明: 在给定的父元素下匹配所有子元素.注意:要区分好后代元素与子元素
- prev + next 用法: $(”label + input”) ; 返回值 集合元素 说明: 匹配所有紧接在 prev 元素后的 next 元素
- prev ~ siblings
用法: $(”form ~ input”) ; 返回值 集合元素
说明: 匹配 prev 元素之后的所有 siblings 元素. 注意:是匹配之后的元素,不包含该元素在内,并且 siblings 匹配的是和 prev 同辈的元素,其后辈元素不被匹配. 注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; - siblings()
用法 : $("#two").siblings("div") 注意 : 这个强调的是全部的, jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 80px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
// 1. 改变 <body> 内所有 <div> 的背景色为 #0000FF
$("#b1").click(function () {
$("div").css("background", "#0000FF");
})
// 2. 改变 <body> 内第一个子 <div> 的背景色为 #FF0033
$("#b2").click(function () {
$("body > div").css("background", "#FF0033");
})
// 3. 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF
$("#b3").click(function () {
$("#one + div").css("background", "#0000FF");
})
// 4. 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF, 强调后面的兄弟
$("#b4").click(function () {
$("#two ~ div").css("background", "#0000FF");
})
// 5. 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF, 强调所有兄弟
$("#b5").click(function () {
$("#two").siblings("div").css("background", "#0000FF");
})
})
</script>
</head>
<body>
<input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变 <body> 内第一个子 <div> 的背景色为 #FF0033" id="b2"/>
<input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
<input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
<hr/>
<div id="one" class="mini">
div id为one
</div>
<div id="two">
div id为two
<div id="two01">
id two01
</div>
<div id="two02">
id two02
</div>
</div>
<div id="three" class="mini">
div id为three
<div id="three01">
id three01
</div>
</div>
<div id="four" class="mini">
div id为four
</div>
</body>
</html>
过滤器
基础过滤选择器
- :first 用法: $("tr:first") ; 返回值 单个元素的组成的集合
说明: 匹配找到的第一个元素 - :last 用法: $("tr:last") 返回值 集合元素
说明: 匹配找到的最后一个元素.与 :first 相对应. - :not(selector) 用法: $("input:not(:checked)")返回值 集合元素
说明: 去除所有与给定选择器匹配的元素.有点类似于”非”, 意思是没有被选中的
input(当 input 的 type="checkbox"). - :even 用法: $("tr:even") 返回值 集合元素
说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js 的数组都是从 0 开始计数的.
例如要选择 table 中的行,因为是从 0 开始计数,所以 table 中的第一个 tr 就为偶数 0. - : odd 用法: $("tr:odd") 返回值 集合元素
说明: 匹配所有索引值为奇数的元素,和:even 对应,从 0 开始计数. - :eq(index)用法: $("tr:eq(0)") 返回值 集合元素
说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个 tr 元素.括号里面的是索引值,
不是元素排列数. - :gt(index)用法: $("tr:gt(0)") 返回值 集合元素
说明: 匹配所有大于给定索引值的元素 - :gt(index)用法: $("tr:gt(0)") 返回值 集合元素
说明: 匹配所有大于给定索引值的元素 - :header(固定写法)用法: $(":header").css("background", "#EEE") 返回值 集合元素
说明: 匹配如 h1, h2, h3 之类的标题元素.这个是专门用来获取 h1,h2 这样的标题元素. - :animated(固定写法) 返回值 集合元素
说明: 匹配所有正在执行动画效果的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础过滤选择器-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 80px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//*****改变第一个 div 元素的背景色为 #0000FF
$("#b1").click(function () {
// $("div:first").css("background", "#0000FF");
$("div:eq(0)").css("background", "#107db7")
})
//*****改变最后一个 div 元素的背景色为 #0000FF
//小伙伴可以理解成 基础过滤器就是写 简单select
//所谓最后一个指的是是从上到下，从左到右去搜，最后的一个
//老韩要求：不需要你记得住, 但是可以看懂...
$("#b2").click(function () {
$("div:last").css("background", "#0000FF");
})
//***改变class不为 one 的所有 div 元素的背景色为 #0000FF
$("#b3").click(function () {
$("div:not(.one)").css("background", "#0000FF");
})
//********改变索引值为偶数的 div 元素的背景色为 #0000FF
$("#b4").click(function () {
$("div:even").css("background", "#0000FF");
})
//********改变索引值为奇数的 div 元素的背景色为 #0000FF
$("#b5").click(function () {
$("div:odd").css("background", "#0000FF");
})
//*****改变索引值为大于 3 的 div 元素的背景色为 #0000FF
$("#b6").click(function () {
$("div:gt(3)").css("background", "#a0107a");
})
//改变索引值为等于 3 的 div 元素的背景色为 #0000FF
$("#b7").click(function () {
$("div:eq(3)").css("background", "#0000FF");
})
//**改变索引值为小于 3 的 div 元素的背景色为 #0000FF
$("#b8").click(function () {
$("div:lt(3)").css("background", "#0000FF");
})
//****改变所有的标题元素的背景色为 #0000FF
$("#b9").click(function () {
$(":header").css("background", "#0000FF");
})
});
</script>
</head>
<body>
<h1>H1标题</h1>
<h2>H2标题</h2>
<h3>H3标题</h3>
<input type="button" value="改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
<input type="button" value="改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
<hr/>
<div id="one" class="mini">
div id为one
</div>
<div id="two">
div id为two
<div id="two01">
id two01
</div>
<div id="two02">
id two02
</div>
</div>
<div id="three" class="one">
div id为three class one
<div id="three01">
id three01
</div>
</div>
</body>
</html>
内容过滤选择器
内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上
- :contains(text) 用法: $("div:contains('John')") 返回值 集合元素
说明: 匹配包含给定文本的元素.这个选择器比较有用，当我们要选择的不是 dom 标签 元素时,它就派上了用场了,它的作用是查找被标签"围"起来的文本内容是否符合指定的内容的. - :empty 用法: $("td:empty") 返回值 集合元素
说明: 匹配所有不包含子元素或者文本的空元素 - :has(selector)
用法: $("div:has(p)").addClass("test") 返回值 集合元素
说明: 匹配含有选择器所匹配的元素的元素.这个解释需要好好琢磨,但是一旦看了使
用的例子就完全清楚了:给所有包含 p 元素的 div 标签加上 class="test". - :parent 用法: $("td:parent") 返回值 集合元素
说明: 匹配含有子元素或者文本的元素.注意:这里是":parent",可不是".parent", 与上
面讲的":empty"形成反义词.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容过滤选择器应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 80px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
</style>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//********改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF $("#b1").click(function () {
$("div:contains('di')").css("background", "#0000FF");
})
//**************改变不包含子元素(或者文本元素) 的 div 的背景色为 pink $("#b2").click(function () {
$("div:empty").css("background", "pink");
})
//******改变含有 class 为 mini 元素的 div 元素的背景色为 green $("#b3").click(function () {
// has() 这个会选择父类的div
// $("div:has(.mini)").css("background", "green"); // 这个就会直接训着
$("div.mini").css("background", "pink");
})
//****改变含有子元素(或者文本元素)的div元素的背景色为 yellow $("#b4").click(function () {
$("div:parent").css("background", "yellow");
})
//****改变索引值为大于 3 的 div 元素的背景色为 #0000FF $("#b5").click(function () {
$("div:gt(3)").css("background", "#0000FF");
})
//***改变不含有文本 di; 的 div 元素的背景色 pink //不要求，小伙伴记住, 但是需要可以看懂.
$("#b6").click(function () {
$("div:not(:contains('di'))").css("background", "pink");
})
});
</script>
</head>
<body>
<input type="button" value="改变含有文本 ‘di’ 的 div 元素的背景色为 black" id="b1"/>
<input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为 pink" id="b2"/>
<input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 green" id="b3"/>
<input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 yellow" id="b4"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b5"/>
<input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色 pink" id="b6"/>
<hr/>
<div id="xxxx">
<div id="one" class="mini">
div id为one
</div>
</div>
<div id="two">
div id为two
<div id="two01">
id two01
</div>
<div id="two02">
id two02
</div>
</div>
<div id="three" class="one">
div id为three class one
<div id="three01">
id three01
</div>
</div>
<div id="four" class="one">
XXXXXXXXXX
</div>
<div id="five" class="one"></div>
<div id="mover">
执行动画
</div>
</body>
</html>
可见度选择器
可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素
- :hidden 用法: $("tr:hidden") 返回值 集合元素 说明: 匹配所有的不可见元素，input 元素的 type 属性为"hidden" 的话也会被匹配到.意思是 css 中 display:none 和 input type="hidden"的都会被匹配到
- :visible 用法: $("tr:visible") 返回值 集合元素 说明: 匹配所有的可见元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见度过滤选择器-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman;
}
div.visible {
/*设置为none就是不可见*/
display: none;
}
</style>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//*****改变所有可见的div元素的背景色为 #0000FF $("#b1").click(function () {
$("div:visible").css("background", "red");
})
//**选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF $("#b2").click(function () {
$("div:hidden").css("background", "green");
$("div:hidden").show();
})
//**选取所有的文本隐藏域, 并打印它们的值
$("#b3").click(function () {
// 1. 先得到所有的hidden元素
// 2. $inputs 是一个jQuery对象, 而且是一个数组对象
let $inputs = $("input:hidden");
alert("$inputs = " + $inputs.length);
// 1. 方式一 for循环
// for (let i = 0; i < $inputs.length; i++) {
// // 这个取出的是dom对象
// console.log("值 = " + $inputs[i].value) // }
// 方式二 each方法 推荐
// 遍历时会将, $inputs 数组的元素取出, 传给function() {} 中的 this对象中, 每一次循环都会覆盖循环
$inputs.each(function () {
// this对象就是dom对象
console.log("值(dom)" + this.value);
// 使用jQuery方法 --> jQuery方法取出
console.log("值(jQuery) = " + $(this).val());
})
})
});
</script>
</head>
<body>
<input type="button" value="改变所有可见的div元素的背景色为 #0000FF" id="b1"/> <br/><br/>
<input type="button" value="选取所有不可见的div, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/> <br/><br/>
<input type="button" value="选取所有的文本隐藏域, 并打印它们的值" id="b3"/> <br/><br/>
<hr/>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" class="visible">
div id为one
</div>
<div id="two" class="visible">
div id为two
</div>
<div id="three" class="one">
div id为three
</div>
</body>
</html>
属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素
- [attribute] 用法: $("div[id]") ; 返回值 集合元素 说明: 匹配包含给定属性的元素. 例子中是选取了所有带"id"属性的div 标签.
- [attribute=value] 用法: $("input[name='newsletter']").attr("checked", true); 返回值 集合元素 说明: 匹配给定的属性是某个特定值的元素.例子中选取了所有name属性是newsletter 的 input 元素
- [attribute!=value] 用法: $("input[name!='newsletter']").attr("checked", true); 返回值 集合元素
说明: 匹配所有
不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于 :not([attr=value]), 要 匹 配 含 有 特 定 属 性 但 不 等 于特定值的元素, 请使用[attr]:not([attr=value]).之前看到的 :not 派上了用场. - [attribute^=value] 用法: $("input[name^='news']") 返回值集合元素 说明: 匹配给定的属性是以某些值开始的元素
- [attribute$=value]用法: $("input[name$='letter']") 返回值集合元素 说明: 匹配给定的属性是以某些值结尾的元素.
- [attribute*=value]用法: $("input[name*='man']") 返回值集合元素 说明: 匹配给定的属性是以包含某些值的元素.
- [attributeFilter1][attributeFilter2][attributeFilterN]用法: $("input[id][name$='man']") 返回值 集合元素 说明: 复合属性选择器,需要同时满足多个条件时使用.是一个组合,这个例子中选择的是所有含有 id 属性,并且它的 name 属性是以 man 结尾的元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤选择器-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman,serif;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman,serif;
}
div.visible {
display: none;
}
</style>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//*****含有属性title 的div元素.
$("#b1").click(function () {
$("div[title]").css("background", "green");
})
//****属性title值等于test的div元素
$("#b2").click(function () {
$("div[title = 'test']").css("background", "green");
})
//属性title值不等于test的div元素(没有属性title的也将被选中)
$("#b3").click(function () {
$("div[title != 'test']").css("background", "green");
})
//属性title值 以te开始 的div元素
$("#b4").click(function () {
$("div[title ^= 'te']").css("background", "pink");
})
//属性title值 以est结束 的div元素
$("#b5").click(function () {
$("div[title $= 'est']").css("background", "yellow");
})
//属性title值 含有es的div元素
$("#b6").click(function () {
$("div[title *= 'es']").css("background", "black");
})
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
$("#b7").click(function () {
$("div[id][title *= 'es']").css("background", "green");
})
});
</script>
</head>
<body>
<input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>
<div id="one" title="test">
div id为one test
</div>
<div id="one-1" title="texxx">
div id为one-1 texxx
</div>
<div id="one-2" title="xxxest">
div id为one-2 xxxest
</div>
<div id="one-3" title="xxxesxxxxxt">
div id为one-3 xxxesxxxxxt
</div>
<div id="two" title="ate">
div id为two
</div>
<div id="three" class="one">
div id为three
</div>
</body>
</html>
子元素过滤选择器
顾名思义, 和子元素相关的选择器
- :nth-child(index/even/odd/equation) 用法: $("ul li:nth-child(2)") 返回值集合元素 说明: 匹配其父元素下的第 N 个子或奇偶元素.这个选择器和之前说的基础过滤(Basic Filters)中的 eq() 有些类似,不同的地方就是前者是从 0 开始,后者是从1 开始.
- :first-child 用法: $("ul li:first-child") 返回值 集合元素 说明: 匹配第一个子元素.':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.这里需要特别点的记忆下区别.
- :last-child 用法: $("ul li:last-child") 返回值 集合元素 说明: 匹配最后一个子元素.':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素.
- : only-child 用法: $("ul li:only-child") 返回值 集合元素 说明: 如果某个元素是父元素中唯一的子元素,那将会被匹配.如果父元素中含有其他元素,那将不会被匹配.意思就是:只有一个子元素的才会被匹配!
- nth-child() 选择器详解如下：
- :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
- :nth-child(2): 能选取每个父元素下的索引值为 2 的元素
- :nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
- :nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1 的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素过滤选择器示例-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 70px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman, serif;
}
div.visible {
display: none;
}
</style>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
//****每个class为one的div父元素下的第2个子元素
$("#b1").click(function () {
$("div .one:nth-child(2)").css("background", "yellow")
})
//*****每个class为one的div父元素下的第一个子元素
//老师再说 $("div .one")
$("#b2").click(
function () {
$("div .one:first-child").css("background", "pink")
// $("div .one:nth-child(1)").css("background", "blue")
}
)
//*****每个class为one的div父元素下的最后一个子元素
$("#b3").click(
function () {
$("div .one:last-child").css("background", "yellow");
}
)
//**如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素
$("#b4").click(
function () {
$("div .one:only-child").css("background", "yellow")
}
)
});
</script>
</head>
<body>
<input type="button" value="每个class为one的div父元素下的第2个子元素" id="b1"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的第一个子元素" id="b2"/><br/><br/>
<input type="button" value="每个class为one的div父元素下的最后一个子元素" id="b3"/><br/><br/>
<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素" id="b4"/><br/><br/>
<div class="one">
<div id="one" class="one">
XXXXXXXXX id=one
</div>
<div id="two" class="one">
XXXXXXXXX id=two
</div>
<div id="three" class="one">
XXXXXXXXX id=three
</div>
<div id="four" class="one">
XXXXXXXXX id=four
</div>
</div>
<div class="one">
<div id="five" class="one">
XXXXXXXXX id=five
</div>
</div>
</body>
</html>
表单属性过滤选择器
此选择器主要对所选择的表单元素进行过滤
- :enabled 用法: $("input:enabled") 返回值 集合元素 说明: 匹配所有可用元素.意思是查找所有 input 中不带有disabled="disabled"的input. 不为 disabled,当然就为 enabled 啦.
- :disabled 用法: $("input:disabled") 返回值 集合元素 说明: 匹配所有不可用元素.与上面的那个是相对应的.
- :checked 用法: $("input:checked") 返回值 集合元素 说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select 中的option).
- :selected 用法: $("select option:selected") 返回值 集合元素 说明: 匹配所有选中的 option 元素.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器-应用实例</title>
<script type="text/javascript" src="./jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
// 选择所有的button
// this will choose the button <input type="button" value="按钮1"/><br/>
// and <button>按钮2</button>
let length = $(":button").length;
alert("长度1 = " + length);
// this will choose the button <input type="button" value="">
let $input = $("input[type=button]");
alert("长度2 = " + $input.length);
// this will choose the button <button>按钮2</button>
var $button = $("button");
alert("长度3 = " + $button.length);
}
) </script>
</head>
<body>
<form>
<input type="text"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="image" src="../image/2.png" height="100"/><br/>
<input type="file"/><br/>
<input type="submit"/><br/>
<input type="reset"/><br/>
<input type="password"/><br/>
<input type="button" value="按钮1"/><br/>
<select> <option/>
</select><br/>
<textarea></textarea><br/> <button>按钮2</button>
<button>按钮3</button>
<br/></form>
</body>
</html>
DOM操作
查找节点, 修改属性
查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的attr() 方法来获取它的各种属性值, 不填属性直接弹出属性值, 填属性属于是设置值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作节点的属性</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
$("button").click(function () {
// 不填属性直接弹出属性值, 填属性属于是设置值
$("img").attr("src", "../image/1.png");
$("img").attr("height", "500");
alert($("img").attr("src"))
})
}
) </script>
</head>
<body>
<img src="../image/2.png" height="100"/>
<br/>
<button>设置图像的 height 属性</button>
</body>
</html>
创建节点
- 创建节点: 使用 jQuery 的工厂函数 (html标签); 会根据传入的html 标记字符串创建一个 jQuery 对象, 并返回.
- 动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中;
- 当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个元素, 可以使用 (" <p></p>"), 但不能使用 ("</p> ")
- 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
内部插入法
- append(content) : 向每个匹配的元素的内部的结尾处追加内容, 举例A.append(B) (1) A, B 都是jquery对象 (2) 表示把B对象插入到A对象内部的结尾处 (3) 结果是: B对象成为A对象的子元素/节点
-
appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处, 举例A.appendTo(B) (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象内部结尾处 (3)结果是 A对象成为B对象的子元素/节点
-
prepend(content):向每个匹配的元素的内部的开始处插入内容, 举例说明A.prepend(B) (1) A, B都是jquery对象 (2) 表示把B对象插入到A对象内部的开始处 (3) 结果 B成为A的子元素/节点
-
prependTo(content) :将每个匹配的元素插入到指定的元素内部的, 举例说明A.prependTo(B) (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象内部的开始处 (3) 结果 A成为B的子元素/节点
-
老韩说明: 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)
外部插入法
- after(content) :在每个匹配的元素之后插入内容 , 举例说明A.after(B) (1) A, B都是jquery对象 (2) 表示B对象插入到A对象后面 (3) 结果:B成为A的兄弟节点
-
.before(content):在每个匹配的元素之前插入内容, 举例 A.before(B) (1)A, B都是jquery对象 (2) 表示B对象插入到A对象前面 (3) 结果是B成为A的兄弟节点，并且在A的前面
-
.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面, 举例说明 A.insertAfter(B) (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果：A成为B的后一个兄弟节点
-
.insertAfter(content): 把所有匹配的元素插入到另一个、指定的元素元素集合的后面, 举例说明 A.insertAfter(B) (1) A, B都是jquery对象 (2) 表示把A对象插入到B对象的后面 (3) 结果：A成为B的后一个兄弟节点
-
老韩说明: 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)
-
注意: 以上方法不但能将新的 DOM 元素插入到文档中, 也能对原有的DOM元素进行移动(可以完成很多需求.)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman, serif;
}
div.mini {
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family: Roman, serif;
}
</style>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
// first use dom element
// 添加重庆li到 上海下(使用dom的传统方法)
$("#b1").click(function () {
// 1. 创建重庆li
let cq_li = document.createElement("li");
cq_li.setAttribute("id", "cq");
cq_li.setAttribute("name", "chongqing");
cq_li.innerHTML = "重庆";
// 3. 添加到指定元素的后面
document.getElementById("sh").append(cq_li);
})
// 2. 添加重庆li到 上海下
$("#b2").click(function () {
// 创建重庆li
let $qc_li = $("<li id=\"cq\" name=\"chongqing\">重庆</li>");
// 内部插入法append
// $("#sh").append($qc_li);
// 外部插入法(更加合理), 推荐使用这种
$("#sh").after($qc_li);
// $qc_li.insertAfter("#sh");
})
// 3. 添加成都li到 北京前
$("#b3").click(function () {
let $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都</li>");
// 添加到北京li前面 [内部和外部的区别]
// $("#bj").prepend($cd_li);
$("#bj").before($cd_li);
})
// 4. 添加成都li到 北京和上海之间
$("#b4").click(function () {
let $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都~~~</li>");
// 北京的后面
$("#bj").after($cd_li);
// 上海的前面
// $("#sh").before($cd_li);
})
// 5. 添加成都li到 吉林前面
$("#b5").click(function () {
let $cd_li = $("<li id=\"cd\" name=\"chengdu\">成都~~</li>");
$("#jl").before($cd_li);
})
}
)
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="jl" name="jilin">吉林</li>
<li id="my" name="mianyang">绵阳</li>
</ul>
<input type="button" id="b1" value="添加重庆li到 上海下(使用dom的传统方法)"/><br/><br/>
<input type="button" id="b2" value="添加重庆li到 上海下"/><br/><br/>
<input type="button" id="b3" value="添加成都li到 北京前"/><br/><br/>
<input type="button" id="b4" value="添加成都li到 北京和上海之间"/><br/><br/>
<input type="button" id="b5" value="添加成都li到 吉林前面"/><br/>
</body>
</html>
删除节点
- .remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.
- empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).
remove()删除选定元素及其所有子元素。所以如果您想要完全删除一个元素及其所有内容（包括子元素），则应使用remove()方法。empty()只删除选定元素的子元素。如果您只想删除元素中的文本或其他内容，而不删除元素本身或其它子元素，那么应该使用empty()。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点-应用实例</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function() {
$("#b1").click(function() {
$("p").remove();
});
$("#b2").click(function() {
$("p").empty();
});
$("#b3").click(function() {
$("#sh").remove();
});
}
) </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
<li id="fk" name="fakong">反恐</li>
<li id="cq" name="chuangqi">传奇</li>
</ul>
<p>Hello</p> how are <p>you?</p>
<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
</html>
复制节点
- clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.
- 2.clone(true): 复制元素的同时也复制元素中的的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制节点-应用实例</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script> $(
function () {
//点击p, 弹出文本信息
$("p").click(function () {
// 隐式传入this --> p 的dom对象
alert("段落的内容 = " + $(this).text());
})
//克隆p, 插入到按钮后面
//老韩解读
//1. $("p").clone() 表示克隆p元素，但是没有复制事件
// $("P").clone().insertAfter($("button"));
//2. $("p").clone(true) 表示克隆p元素，同时复制事件
$("P").clone(true).insertAfter($("button"));
}
) </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///////////////////////////////////////////////<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>
替换节点
- replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或DOM/juqery 元素A.replaceWith(B)
- replaceAll(): 颠倒了的 replaceWith() 方法.A.replaceAll(B)
- 注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失
//方式一
$("p").replaceWith("登陆");
//方式二
$("登陆").replaceAll("p");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>复制节点-应用实例</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script> $(
function () {
//点击p, 弹出文本信息
$("p").click(function () {
// 隐式传入this --> p 的dom对象
alert("段落的内容 = " + $(this).text());
})
//克隆p, 插入到按钮后面
//老韩解读
//1. $("p").clone() 表示克隆p元素，但是没有复制事件
// $("P").clone().insertAfter($("button"));
//2. $("p").clone(true) 表示克隆p元素，同时复制事件
$("P").clone(true).insertAfter($("button"));
}
) </script>
</head>
<body>
<button>保存</button>
<br><br><br><br><br>
///////////////////////////////////////////////<br>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
</body>
</html>
属性操作
- attr(): 获取属性和设置属性
- attr()传递一个参数时, 即为某元素的获取指定属性
- attr()传递两个参数时, 即为某元素设置指定属性的值
- jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等, 后面我们还会举例说明.
- removeAttr(): 删除指定元素的指定属性
样式操作
- 获取 class 和设置 class : class 是元素的一个属性, 所以获取class 和设置class 都可以使用 attr() 方法来完成.
- 追加样式: addClass()
- 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的class
- 切换样式: toggleClass() --- 控制样式上的重复切换. 如果类名存在则删除它, 如果类名不存在则添加它.
- 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个class, 如果有, 则返回true; 否则返回 false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除节点-应用实例</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function() {
$("#b1").click(function() {
$("p").remove();
});
$("#b2").click(function() {
$("p").empty();
});
$("#b3").click(function() {
$("#sh").remove();
});
}
) </script>
</head>
<body>
您喜欢的城市:<br>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="sh" name="shanghai">上海</li>
<li id="tj" name="tianjin">天津</li>
</ul>
您爱好的游戏:<br>
<ul id="game">
<li id="fk" name="fakong">反恐</li>
<li id="cq" name="chuangqi">传奇</li>
</ul>
<p>Hello</p> how are <p>you?</p>
<p name="test">Hello, <span>Person</span> <a href="#">and person</a></p>
<input type="button" value="删除所有p" id="b1"/>
<input type="button" value="所有p清空" id="b2"/>
<input type="button" value="删除上海这个li" id="b3"/>
</body>
</html>
获取 HTML, 文本和值
- 设置或返回所选元素的内容（包括 HTML 标记）: html()
- 读取和设置某个元素中的文本内容: text(). 该方法既可以用于HTML 也可以用于XML文档.
- 读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>val()课堂练习</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
// $("#b3").click(function () {
// let $b1 = $("#b1"); // alert($b1.val()); // 值
// let val = $b1.val("离谱");
// }) // 通过上面的案例得出, 可以通过val() 获取属性值
// 没想到要绑定两个事件就轻松解决了
// 需要绑定两个事件, 获取焦点和失去焦点
let defaultValue = "";
$("#b1").focus(function () {
let val = $(this).val();
defaultValue = this.defaultValue;
if (val === defaultValue) {
$(this).val(""); // default become ""
}
})
// 失去焦点
$("#b1").blur(function () {
let val = $(this).val();
if (val === "") {
$(this).val(defaultValue); // value become defaultValue
}
})
}
) </script>
</head>
<body>
<input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br>
<input type="password" value="" id="b2"/><br>
<input type="button" value="登陆" id="b3"/>
</body>
</html>
常用遍历节点方法
- 取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.
- 取得匹配元素后面的同辈元素的集合:next() / nextAll();
- 取得匹配元素前面的同辈元素的集合:prev() / prevAll();
- 取得匹配元素前后所有的同辈元素: siblings()
- 获取指定的第几个元素: nextAll().eq(index)
- 对获取到的同辈元素进行过滤 nextAll().filter("标签")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用遍历节点方法-应用实例</title>
<style type="text/css">
div, span {
width: 140px;
height: 60px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Roman, serif;
}
</style>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
// 查找所有子元素 class 为 one 的div的
$("#b1").click(function () {
// 遍历class为one的所有div
$("div.one").children().each(function () {
alert("子div的元素 = " + $(this).text());
})
// 获取指定某一个div 其中index从0开始
alert($("div.one").children().eq(1).text());
})
// 获取后面的同辈元素 (class 为 one 的div的
$("#b2").click(function () {
// nextAll() 获取后面所有的同辈标签
// filter("div") 过滤非div的标签
$("div.one").nextAll().filter("div").each(function () {
alert("同辈div的元素 = " + $(this).text());
})
// 如果我们希望得到, 后面的同辈元素的第几个, 可以使用eq()
// 获取到后面同辈div元素的第二个
let text = $("div.one").nextAll().filter("div").eq(1).text();
alert(text);
// 如果我们希望得到紧邻的后面的同辈元素
alert("后面的同辈元素 " + $("div.one").next().text())
})
// 获取前面的同辈元素 (class 为 one 的div的
$("#b3").click(function () {
$("div.one").prevAll().filter("div").each(function () {
alert("前面的元素 = " + $(this).text());
})
// 获取前面紧邻的标签
alert($("div.one").prev().filter("div").text());
})
// 获取所有的同辈元素 (class 为 one 的div的)
$("#b4").click(function () {
$("div.one").siblings().filter("div").each(function () {
alert($(this).text());
})
})
})
</script>
</head>
<body>
<input type="button" value="查找所有子元素 (class 为 one 的div的)" id="b1"/><br/><br/>
<input type="button" value="获取后面的同辈元素 (class 为 one 的div的)" id="b2"/><br/><br/>
<input type="button" value="获取前面的同辈元素 (class 为 one 的div的)" id="b3"/><br/><br/>
<input type="button" value="获取所有的同辈元素 (class 为 one 的div的)" id="b4"/>
<hr/>
<div>
ccccccc
</div>
<p class="one">
ccccccc
</p>
<div class="one">
<div id="one">
XXXXXXXXX one
</div>
<div id="two">
XXXXXXXXX two
</div>
<div id="three">
XXXXXXXXX three
</div>
<div id="four">
XXXXXXXXX four
</div>
</div>
<div>
tttttttttt
</div>
<div>
aaaaaaa
</div>
<div>bbbbbb</div>
<p>hello, pp</p>
</body>
</html>
CSS-DOM 操作
- 获取和设置元素的样式属性: css()
- 获取和设置元素透明度: opacity 属性
- 获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $("p:first").height("2em");
- 获取元素在当前视窗中的相对位移:
offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-dom操作</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
$("#b1").click(function () {
let width = $("img").width();
alert("width=" + width);
let offset = $("img").offset();
alert("img top=" + offset.top);
alert("img left=" + offset.left);
})
}
) </script>
</head>
<body>
<br/><br/><br/>
hello,world~<img src="../image/1.png" width="200">
<button id="b1" type="button">获取图片信息</button>
</body>
</html>
多选框应用-综合课堂练习
思路 :
- 绑定事件
- 选择对应的对象
- 插入[内部插入/
外部插入]
jQuery 中的事件 -- 加载 DOM
- 老韩说明：在页面加载完毕后, 浏览器会通过 JavaScript 为DOM元素添加事件.
- 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, window.onload = function(){}
- 在 jQuery 中使用
$(document).ready()方法.
<script>
// 只有写在这里面的代码才能加载dom树之后拿到对象
// js原生的方式
window.onload = function () {
alert("success");
}
$(document).ready(function () {
alert("success");
})
// 上面方式的简化
$(
function () {
alert("success");
}
)
</script>
作业
作业一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对多选框进行操作</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
// 1. 绑定按钮
$("#b1").click(function () {
// 2.弹出测试一下有没有成功
// alert("hello!");
// 3.获取顺序性是checkbox的input标签同时是被选中的
$("input[type='checkbox']:checked").each(function () {
alert("checkbox name=" + $(this).val() + " checked=" + $(this).length);
})
})
}
) </script>
</head>
<body>
<h1>对多选框进行操作</h1>
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="网球"/>网球
<input type="checkbox" name="hobby" value="排球"/>排球
<input type="button" id="b1" value="点击测试"/>
</body>
</html>
作业二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据给出的示意图，完成相应的功能</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
// 使单选下拉框的'2号'被选中
// 1. 先绑定按钮
$("#input1").click(function () {
// alert("hello world");
// 2. 先选择2号下拉框 jQuery对象
// let $one = $("#one > option:eq(1)");
// // 3.设置为true
// $one.attr("selected", true);
// 可以这样写
$("#one").val("2号");
})
// 使多选下拉框选中的'2号'和'5号'被选中
// 1. 绑定事件
$("input:eq(1)").click(
function () {
// alert("hello world");
// alert("hello~"); // 2. 选择2号和 5号
// $("#many > option").filter(":eq(1), :eq(4)").attr("selected", true);
// 还可以这样
$("#many").eq(["2号", "5号"]);
}
);
// 如何在不使用id的情况下使用第二个
// let val = $("input:eq(1)").val();
// alert(val);
// 绑定事件
// 使复选框的'复选2'和'复选4'被选中
$("input:eq(2)").click(function () {
// alert("hello world");
// $("input[name='c']").each(function () {
// // alert($(this).attr("value"));
// $(this).attr("checked", true);
// })
// $("input[name='c']").filter(":eq(1), :eq(3)").attr("checked", true);
$("input[type='checkbox']").val(["check2", "check4"]);
})
// 使单选框的'单选2'被选中
$("input:eq(3)").click(function () {
// alert("hello world");
// $("input[value='radio2']").attr("checked", true);
// 这里需要写数组
$("input[type=radio]").val(["radio2"]);
})
})
</script>
</head>
<body>
<input type="button" id="input1" value="使单选下拉框的'2号'被选中"/><br>
<input type="button" id="input2" value="使多选下拉框选中的'2号'和'5号'被选中"/><br>
<input type="button" id="input3" value="使复选框的'复选2'和'复选4'被选中" /><br>
<input type="button" id="input4" value="使单选框的'单选2'被选中"/><br>
<br/>
<select id="one">
<option>1号</option>
<option>2号</option>
<option>3号</option>
</select>
<select id="many" multiple="multiple" style="height:120px;">
<option selected="selected">1号</option>
<option>2号</option>
<option>3号</option>
<option>4号</option>
<option>5号</option>
<option selected="selected">6号</option>
</select>
<br/>
<br/>
<input type="checkbox" name="c" value="check1"/> 复选1
<input type="checkbox" name="c" value="check2"/> 复选2
<input type="checkbox" name="c" value="check3"/> 复选3
<input type="checkbox" name="c" value="check4"/> 复选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
作业三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据给出的示意图，完成相应的功能. homework03.html</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(
function () {
$('#checkedAll_2').on('change', function () {
if ($(this).is(':checked')) { // 这里简单的写法是 this.checked this是dom对象, 因为checked是input的一个基本顺序性
console.log("The checkbox is checked.");
// 在此处添加您要执行的代码
// 这个attr 方法有点小问题 可以使用 prop 代替
$("input[name='items']").prop('checked', true);
} else {
console.log("The checkbox is not checked.");
$("input[name='items']").prop('checked', false);
}
});
// 全选
$("#CheckedAll").click(function () {
// alert("hello");
$("input[name='items']").each(function () {
$(this).prop('checked', true);
})
});
// 全不选
$("#CheckedNo").click(function () {
// alert("hello");
$("input[name='items']").each(function () {
$(this).prop('checked', false);
})
});
// 反选
$("#CheckedRev").click(function () {
// alert("hello");
// 1. 选择非checked的
$("input[name='items']").each(function () {
if ($(this).is(':checked')) {
$(this).prop('checked', false);
} else {
$(this).prop('checked', true);
}
})
})
}
) </script>
</head>
<body>
<form method="post" action="">
请选择您的爱好!
<br><input type="checkbox" id="checkedAll_2"/>全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br/>
<input type="button" id="CheckedAll" value="全 选"/>
<input type="button" id="CheckedNo" value="全不选"/>
<input type="button" id="CheckedRev" value="反 选"/>
<input type="button" id="send" value="提 交"/>
</form>
</body>
</html>
作业四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 JQuery 实现动态添加用户效果</title>
<script type="text/javascript" src="../jQueryLab/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function () {
/*
最终的效果
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<td>姓名</td>
<td>email</td>
<td>电话</td>
<td></td>
</tr>
</tbody>
</table>
1. 使用的是 jQuery dom操作
2. 添加的内容对象到 table -> tbody
3. 逐步去构建td
*/ // 先获取到提交的信息
$("#addUser").click(function () {
// alert("hello");
let name = $("#name").val();
let email = $("#email").val();
let tel = $("#tel").val();
// 取出对象信息
console.log(name, email, tel);
// 创建节点加入到 dom树中
let $tr = $("<tr/>");
let $name = $("<td/>").text(name);
let $email = $("<td/>").text(email);
let $tel = $("<td/>").text(tel);
// 构建delete
// <a id="Jerry" href="deleteEmp?id=Jerry">Delete</a> let $delete = $("<tr/>");
let $a = $("<a/>").text("Delete");
$a.attr("id", name);
$a.attr("href", "deleteEmp?id=" + name);
$a.click(function() {
// 调用一个删除方法
// 函数的返回值返回给调用者。如果没有添加 return，则函数调用者将无法得到返回值。
// 在这种情况下，添加或不添加 return 的影响取决于是否需要获取函数的返回值
return deleteEmp($a);
});
$delete.append($a);
$tr.append($name, $email, $tel, $delete);
$("#usertable tbody").append($tr);
})
$("a").click(function() {
// 调用一个删除方法
// 函数的返回值返回给调用者。如果没有添加 return，则函数调用者将无法得到返回值。
// 在这种情况下，添加或不添加 return 的影响取决于是否需要获取函数的返回值
// return 为 false时就会放弃提交
return deleteEmp($(this));
})
});
function deleteEmp($a) {
let confirm = window.confirm("确认是否删除" + $a.attr("id") + "的个人信息");
if (!confirm) {
return false;
}
// 继续删除, 需要删除tr 也就是当前a标签的 父元素的父元素
$a.parent().parent().remove();
return false;
}
</script>
</head>
<body>
<center>
<br><br>
添加用户:<br><br>
姓名: <input type="text" name="name" id="name"/>
email: <input type="text" name="email" id="email"/>
电话: <input type="text" name="tel" id="tel"/><br><br>
<button id="addUser">提交</button>
<br><br> <hr> <br><br> <table id="usertable" border="1" cellpadding="5" cellspacing=0>
<tbody>
<tr>
<th>姓名</th>
<th>email</th>
<th>电话</th>
<th> </th>
</tr>
<tr> <td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a id="Tom" href="deleteEmp?id=Tom">Delete</a></td>
</tr>
<tr> <td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
