05-jQuery
unit05-jQuery
jQuery简介
什么是jQuery(了解)
jQuery: JavaScript Query JS查询
jQuery是一门轻量的、免费开源的JS函数库（就是JS的简单框架）
jQuery可以极大的简化JS代码
jQuery的核心思想：“写的更少，但做的更多”
轻量的：是指一个技术对代码或程序的侵入程度是比较低的。
或者说代码对该技术依赖程度越低，这个技术越轻。对该技术的依赖程度越高，这个技术越重。
jQuery本质就是一个包含了很多函数的JS文件，如果要在某一个HTML中使用这个JS文件中的函数，就必须得将JS文件引入到HTML中
jQuery的优势(了解)
(1) 可以极大的简化JS代码
(2) 可以像CSS选择器一样获取html元素
css中获取所有的div,给div添加样式:
jQuery中获取所有div,给div添加边框样式:
1
| $("div").css("border", "2px solid red");
|
1
2
| JS获取id为div1的元素: document.getElementById("div1")
jQuery获取id为div1的元素: $("#div1")
|
(3) 可以通过修改css属性控制页面的效果
(4) 可以兼容常用的浏览器
比如: JS中的innerText属性、removeNode()函数、replaceNode( )函数 这些函数在某些浏览器中是无法使用的。
jQuery中提供了相应的函数（ text函数、remove函数、replaceWith函数 ）
常用浏览器：谷歌浏览器、火狐浏览器、苹果浏览器、欧朋浏览器等
jQuery引入
jQuery的函数库文件就是一个普通的JS文件，引入jQuery和引入JS文件的方式一样。
1
2
| <!-- 在使用jQuery之前，必须先引入jQuery的函数库文件 -->
<script src="js/jquery-1.8.3.js"></script>
|
在引入jQuery函数库文件时，如果文件引入路径错误，则会导致文件引入失败，如下图：
image-20200217103533313
文档就绪事件函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <head>
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.js"></script>
<script>
var h1 = document.getElementById( "demo" );
alert( h1.innerHTML );
</script>
</head>
<body>
<h1 id="demo">jQuery的引入示例...</h1>
</body>
|
问题描述：上面的代码在执行时，会报一个错误：
image-20200217105525351
原因描述：在执行获取id为demo的元素时, h1元素还没有被浏览器加载到，所以获取不到h1元素。
解决方式一：
将script标签移到body内部，也就是h1元素的后面
这样浏览器在加载时，会先加载h1元素，再执行获取h1元素的代码，由于在获取h1元素之前，h1元素已经被浏览器加载过了，所以后面再获取就能够获取到！
代码示例：
1
2
3
4
5
6
7
8
9
| <body>
<h1 id="demo">jQuery的引入示例...</h1>
<script>
var h1 = document.getElementById( "demo" );
alert( h1.innerHTML );
</script>
</body>
|
解决方式二：
将获取元素的代码放在文档就绪事件函数中，文档就绪事件函数会在浏览器加载完所有的html元素后（也就是加载完最后一个html元素时）会立即执行。
由于整个html网页都被加载了，h1元素肯定也被加载了，此时再获取h1元素就一定能获取到。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <head>
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.js"></script>
<script>
$(function(){
var h1 = document.getElementById( "demo" );
alert( h1.innerHTML );
});
</script>
</head>
<body>
<h1 id="demo">jQuery的引入示例...</h1>
</body>
|
解决方式三：
将获取元素的代码放在一个自定义的函数中，并将该函数绑定在h1元素的点击事件上，当我们点击h1元素时会执行自定义的函数，函数执行时才获取h1元素，此时就能够获取到h1元素。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <head>
<meta charset="UTF-8">
<script src="js/jquery-1.8.3.js"></script>
<script>
function fn1(){
var h1 = document.getElementById( "demo" );
alert( h1.innerHTML );
}
</script>
</head>
<body>
<h1 id="demo" onclick="fn1()">jQuery的引入示例...</h1>
</body>
|
总结：什么时候该使用文档就绪事件函数?
如果在获取元素时，获取元素的代码执行的时机，比元素本身加载的时间还要早，如果元素还没有加载就获取，必然是获取不到的。
可以将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载了，再获取任何元素都能获取到！
jQuery提供的文档就绪事件函数（简写形式）：
1
2
3
4
5
| <script>
$(function(){
});
</script>
|
其完整写法为：
1
2
3
4
5
| <script>
$(document).ready(function(){
})
</script>
|
JS也为我们提供了文档就绪事件函数，其写法为：
1
2
3
4
5
| <script>
window.onload = function(){
}
</script>
|
jQuery选择器(重点掌握)
基本选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
| (1)元素名选择器
$("div") -- 选中所有的div元素
$("span") -- 选中所有的span元素
(2)class/类选择器
$(".s1") -- 选中所有class值为s1的元素(class值为s1的元素可能是任何元素)
$("span.s1") -- 选中所有class值为s1的span元素
(3)id选择器
$("#one") -- 选中id为one的元素
(4)多元素选择器
$("div,span,.s1,#one") -- 选中所有的div元素,以及所有的span元素,以及所有class值为s1的元素,以及id为one的元素
|
层级选择器
1
2
3
4
5
6
7
8
9
10
11
12
| $("div span") -- 选中所有div内部的所有span元素
$("#one span") -- 选中id为one的元素内部的所有span元素
$("#two+span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").next("span") -- 选中id为two的元素后面紧邻的span兄弟元素
$("#two").prev("span") -- 选中id为two的元素前面紧邻的span兄弟元素
$("#two~span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").nextAll("span") -- 选中id为two的元素后面所有的span兄弟元素
$("#two").prevAll("span") -- 选中id为two的元素前面所有的span兄弟元素
$("#two").siblings("span") -- 选中id为two的元素前、后所有的span兄弟元素
|
基本过滤选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
| (1) 选中第一个div元素
$("div:first")
$("div:eq(0)")
$("div").eq(0)
(2) 选中最后一个div元素
$("div:last")
$("div:eq(-1)")
$("div").eq(-1)
(3) 选中第n+1个div元素(n从零开始)
$("div:eq(n)")
$("div").eq(n)
|
综合案例
创建表格元素
练习1：创建单行单列的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function createTable1(){
var $tab = $("<table></table>");
var $tr = $("<tr></tr>");
var $td = $("<td></td>");
$td.html("Hello TD~~");
$tr.append( $td );
$tab.append( $tr );
$("body").append( $tab );
}
|
练习2.1：创建单行6列的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| function createTable2(){
var $tab = $("<table></table>");
var $tr = $("<tr></tr>");
for(var i=0;i<6;i++){
var $td = $("<td></td>");
$td.html("Hello TD~~");
$tr.append( $td );
}
$tab.append( $tr );
$("body").append( $tab );
}
|
练习2.2：创建5行6列的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| function createTable2(){
var $tab = $("<table></table>");
for(var j=0;j<5;j++){
var $tr = $("<tr></tr>");
for(var i=0;i<6;i++){
var $td = $("<td></td>");
$td.html("Hello TD~~");
$tr.append( $td );
}
$tab.append( $tr );
}
$("body").append( $tab );
}
|
练习3：创建指定行和列的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| function createTable3(){
var rows = $("#rows").val();
var cols = $("#cols").val();
console.log(rows+" : "+cols);
var $tab = $("<table></table>");
for(var j=0;j<rows;j++){
var $tr = $("<tr></tr>");
for(var i=0;i<cols;i++){
var $td = $("<td></td>");
$td.html("Hello TD~~");
$tr.append( $td );
}
$tab.append( $tr );
}
$("body").append( $tab );
}
|
仿QQ好友列表
1
2
3
4
5
6
7
|
function openDiv(thisobj){
$("table span").not(thisobj).next("div").hide();
$(thisobj).next("div").toggle();
}
|
模拟员工信息管理系统
练习1：添加员工信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| function addEmp(){
var id = $("#box1 input[name='id']").val().trim();
var name = $("#box1 input[name='name']").val().trim();
var email = $("#box1 input[name='email']").val().trim();
var salary = $("#box1 input[name='salary']").val().trim();
console.log(id+" : "+name+" : "+email+" : "+salary);
if( id == "" || name == "" || email == "" || salary == "" ){
alert( "添加的员工信息不能为空!" );
return;
}
var flag = false;
$("table tr").each(function(){
var _id = $(this).find("td:eq(1)").text();
if( id == _id ){
alert("您输入的员工ID已存在, 请重新添加!");
flag = true;
}
});
if( flag ){
return;
}
var $tr = $("<tr></tr>");
var $td1 = $("<td><input type='checkbox'/></td>");
var $td2 = $("<td>"+id+"</td>");
var $td3 = $("<td>"+name+"</td>");
var $td4 = $("<td>"+email+"</td>");
var $td5 = $("<td>"+salary+"</td>");
$tr.append( $td1 ).append( $td2 ).append( $td3 ).append( $td4 ).append( $td5 );
$("table").append( $tr );
}
|
练习2：删除员工信息
1
2
3
4
5
| function delEmp(){
$("input:checked").parent("td").parent("tr").remove();
}
|
练习3：修改员工信息（自己完成）
练习4：实现全选或全不选
1
2
3
4
5
6
| function checkAll(){
var isCheck = $("#all").prop("checked");
$("input[type='checkbox'][id!='all']").prop("checked",isCheck);
}
|
jQuery总结
html元素操作
1、创建元素
1
2
| $("<div></div>") -- 创建一个div元素，返回的是一个表示div元素的jQuery对象
$("<div>xxxx</div>") -- 创建一个包含内容的div元素，返回的是一个表示div元素的jQuery对象
|
2、添加子元素
1
2
| $parent.append( $child ) -- 父元素调用方法添加子元素
$("body").append( "<div>我是新来的...</div>" ); -- 往body元素内部追加一个div子元素
|
3、删除元素
1
2
3
4
5
6
7
8
9
10
11
| $("div").remove() -- 删除所有的div元素
JS删除所有div元素：
var divArr = document.getElementsByTagName("div");
var len = divArr.length;
for(var i=0;i<len;i++){
divArr[0].parentNode.removeChild( divArr[0] );
}
|
4、替换元素
1
| $("div").replaceWith("<p>我是来替换的…</p>")
|
html元素内容和值的操作
1
2
3
4
5
| <div>
这是一个div11元素
<span>这是一个span元素</span>
这是一个div1111元素
</div>
|
1、html()函数 (类似于js中的innerHTML属性)
-- 用于获取或设置元素的内容，比如为div、span、p、h1、table、tr、td等元素设置内容
1
2
| $("div").html() -- 获取所有div中的第一个div的内容
$("div").html("xxxx") -- 为所有div设置内容
|
2、text()函数 (类似于js中的innerText属性，innerText在部分浏览器中不兼容)
-- 用于获取或设置元素的文本内容
1
2
| $("div").text() -- 获取所有div中的所有文本内容
$("div").text("xxxx") -- 为所有div设置文本内容
|
3、val()函数 (类似于js中的value属性)
-- 获取或设置表单项元素的value值(input/select/option/textarea)
1
2
| $("input").val() -- 获取所有input元素中的第一个input元素的value值
$("input").val(值) -- 为所有的input元素设置value值
|
元素属性和css属性操作
1
| <input type="text" name="username" id="inp"/>
|
1、prop()函数 – 用于获取或设置元素的属性值
在jQuery1.6版本之后才有这个函数，1.6之前版本的jQuery可以使用attr()函数
1
2
3
4
5
6
7
| $("input[type='checkbox']").prop("checked")
-- 获取input复选框的选中状态, 返回true表示复选框为选中状态,返回false表示复选框为取消选中状态
$("input[type='checkbox']").prop("checked", true)
-- 设置所匹配的复选框元素为选中状态
$("#inp").prop("name");
$("#inp").prop("name","user");
|
2、css()函数 – 用于获取或设置元素的css属性值
1
2
3
4
5
6
7
8
| $("#div1").css("width") -- 获取id为div1元素的宽度
$("#div1").css("width","200px") -- 设置id为div1元素的宽度为200px
$("#div1").css({
"width" : "200px",
"height" : "150px",
"border" : "5px solid red",
"background" : "pink"
});
|
其他函数
1、each() 函数
1
2
3
4
| $(selector).each(function( index,element ){})
-- each()函数可以遍历$(selector)选择器选中的所有元素(即每次都选择器选中的元素中获取一个元素,并执行function 函数)
-- function中的index -- 表示遍历的元素的下标
-- function中的element -- 表示当前正在遍历的元素(也可以通过this获取)
|
2、show()/hide() 函数
show() – 设置元素由隐藏变为显示
hide() – 设置元素由显示变为隐藏
1
| $("div").show() -- 设置所有的div元素为显示
|
等价于:
1
2
3
| $("div").css("display", "block");
$("div").hide() -- 设置所有的div元素为隐藏
|
等价于:
1
| $("div").css("display", "none")
|
2、toggle()/slideToggle()
toggle() – 切换元素的显示状态, 如果元素是显示的, 则切换为隐藏, 否则切换为显示
slidToggle() –切换元素的显示状态, 如果元素是显示的, 则切换为隐藏，否则切换为显示，切换为显示为下拉状态，隐藏为收缩状态。
扩展:为元素绑定点击事件
以点击事件为例，为元素绑定点击事件的方式为:
方式1(js版)：
1
2
3
4
5
6
7
8
| <script>
function fn(){
alert("input按钮被点击了...");
}
</script>
<body>
<input onclick="fn()" type="button" value="点我~!" />
</body>
|
方式2(js版)：
1
2
3
4
5
6
7
8
9
10
11
12
| <script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("input按钮被点击了...");
}
}
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
|
方式3(jQuery版)：
1
2
3
4
5
6
7
8
9
10
11
| <script>
$(function(){
$("#btn").click( function(){
alert("input按钮被点击了...");
});
});
</script>
<body>
<input id="btn" type="button" value="点我~!" />
</body>
|
