目录
一、JQuery介绍
JQuery是辅助JS开发的JS类库,它的核心思想是“写得更少,做得更多”,解决了很多浏览器兼容性的问题。
二、程序示例
1、Hello程序示例
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() { // 相当于window.onload = function() {}
var $btnObj = $("#btn_01"); // JQ中规定,变量前也要加$. #同样是按id查找
$btnObj.click(function() {
alert("JQuery的单击事件");
});
});
</script>
</head>
<body>
<button id="btn_01">Hello</button>
</body>
2、常见问题
(1)JQuery中的$是什么?
- $是一个函数。
(2)怎么为按钮添加点击响应函数(事件)?
- 使用JQuery查询到标签对象;
- 使用 标签对象.click( function() {} ) 来绑定;
- 注意 $ 符号。
三、核心函数介绍($)
$ 是jQuery的核心函数,能完成jQuery的很多功能。$() 就是调用 $ 这个函数。
1、传入参数为【函数】时:
表示页面加载完成后自动执行。相当于:
window.onload = function() {}
2、传入参数为【HTML字符串】时:
会创建这个HTML标签对象。下面这个样例会创建出一个按钮:
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
$("<button id=\"btn_01\">Hello</button>").appendTo("body");
});
</script>
</head>
<body>
</body>
3、传入参数为【选择器字符串】时:
如下是根据id查询标签对象:
var $Obj = $("#id的属性值");
诸如其他的标签名选择器、类选择器,都是一样的。
var $Obj = $(".class_value");
var $Obj = $("div");
4、传入的参数为【DOM对象】时:
会将dom对象转换为jQuery对象。
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
var btnObj = document.getElementById("btn01");
alert(btnObj);
var jqObj = $(btnObj);
alert(jqObj);
});
</script>
</head>
<body>
<button id = "btn01">按钮1</button>
</body>
四、如何区分jQuery对象和Dom对象
1、什么是jq对象,什么是dom对象?
(1)Dom对象
通过 getElementById()、getElementsByName()、getElementsByTagName()、createElement() 等方法得到的对象,都是 Dom 对象。
alert的效果:[object HTMLxxxElement]
(2)jQuery对象
通过 jQuery 提供的 API 创建的对象、jQuery 包装的 Dom 对象、jQuery 提供的 API 查询到的对象,都是 jQuery 对象。
alert的效果:[obejct Object]
2、jQuery对象的本质
jQuery对象是 Dom 对象的数组 + jQuery 提供的一系列函数功能。
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
var $btnObj = $("button");
for (var i = 0; i < $btnObj.length; ++ i) {
alert($btnObj[i]); // 会输出[obejct HTMLButtonElement],说明是DOM对象
}
// 或者使用each()遍历,其中this相当于$btnObj[i]
$btnObj.each(function () {
alert(this);
});
});
</script>
</head>
<body>
<button id = "btn01">按钮1</button>
<button id = "btn02">按钮2</button>
<button id = "btn03">按钮3</button>
</body>
3、Dom对象和jQuery对象的转换
(1)Dom对象转为jQuery对象
// 1.先有dom对象
var dom_obj = document.getElementById("id");
// 2.使用 $(dom对象) 转换
var $jq_obj = $(dom_obj);
(2)jQuery对象转为Dom对象
// 1.先有jQuery对象
var $jq_obj = $("button");
// 2.下标访问
alert($jq_obj[0]);
五、jQuery选择器
1、基础选择器
选择字符串的写法与 CSS 一致。
$("div");
$("#id_value");
$(".class_value");
$("span, div, p.class_value");
2、层级选择器
(1)ancestor descendant:在给定祖先标签下,匹配所有后代标签(不是上下层关系也要匹配)。
// 匹配表单中的所有input标签
var $input_objs = $("form input");
(2)parent > child:在给定父标签下,匹配所有子标签(仅上下层之间匹配)。
// 匹配表单的所有下一级的input标签
var $input_objs = $("form > input");
(3)prev + next:返回所有紧接在prev之后的next标签(同级、前后紧挨)。
JS文件:
// 匹配所有紧跟在label后的input标签
var $input_objs = $("label + input");
HTML文件:
<body>
<label>Name:</label>
<input type="text"/>
</body>
(4)prev~siblings:匹配与prev标签之后的所有siblings标签(同级)。
JS文件:
var $input_objs = $("form~input");
HTML文件:
<body>
<form>
<input/>
</form>
<input/> <!-- 同级才会匹配到 -->
<input/> <!-- 同级才会匹配到 -->
</body>
注意:以上所有的prev和next、siblings的标识,可以是标签、#id、.class等等。
3、基本过滤选择器
(1):first
$("button:first"); //获取匹配结果(buttons)的第一个元素(button)。
(2):last
$("button:last"); //获取匹配结果(buttons)的最后一个元素(button)。
(3):not(selector)
$("input:not(:checked)"); //查找所有未选中的input标签。(:checked是表单属性)
(4):even
$("tr:even"); //查找表格的1、3、5……行(即索引值0、2、4……)。
(5):odd
与 :even 类似,取索引值为奇数的。
(6):eq(index)
匹配一个给定索引值的元素。
$("tr:eq(1)"); //查找第二行。
(7):gt(index)
匹配所有大于给定索引值的元素。
(8):lt(index)
匹配所有小于给定索引值的元素。
(9):header
匹配如:h1、h2、h3之类的标题元素。
$(":header").css("background", "#EEE"); //给页面所有标题加上背景色。
(10):animated
匹配所有正在执行动画的元素。
4、内容过滤选择器
(1):contains(text)
匹配包含给定text的元素。
(2):empty
匹配所有空元素(即不包含任何子节点)。
(3):parent
匹配所有非空元素。
(4):has(selector)
匹配包含“selector匹配的元素”的元素。
$("div:has(p)"); //返回包含了p标签的div标签。
5、属性过滤选择器
(1)[attribute]
匹配包含给定属性的元素。
$("div[id]"); //查找所有包含id属性的div标签。
(2)[attribute=value]
匹配包含给定属性值的元素。
$("input[name=‘myName’]"); //查找所有name属性值为myName的input标签。
注意属性值要用 单引号 括起来。
(3)[attribute!=value]
匹配没有这个属性,或者有属性、但是属性值不对的元素。
(4)[attribute^=value]
匹配属性值以value开头的元素。
(5)[attribute$=value]
匹配属性值以value结尾的元素。
(6)[attribute*=value]
匹配属性值包含value的元素。
(7)[selector][selector][selector]
复合属性选择器,需要同时满足多个条件。
$("input[id][name&='man']"); // 返回id属性值以man结尾的input标签
6、表单过滤选择器
(1):input
匹配所有 input、textarea、select、button 元素。
$(":input");
(2):text
匹配所有的单行文本框。也就是<input type="text">的元素。
(3):password
匹配所有的密码框。
(4):radio
匹配所有的单选按钮。
(5):checkbox
匹配所有的复选框。
(6):submit
匹配所有的提交按钮。
(7):reset
匹配所有的重置按钮。
(8):button
匹配所有按钮。
(9):file
匹配所有文件上传域。
(10):hidden
匹配不可见的元素,或type=hidden的元素。
下面四个是属性相关的选择器
(11):enabled
匹配所有可用的元素。
$(":input:enabled"); // 返回所有可用的可输入元素。
(12):disabled
匹配所有不可用的元素。
(13):checked
匹配所有选中的元素。(不包含select中的option)
(14):selected
匹配所有选中的多个option元素。
六、jQuery属性操作
1、html()
它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性的 innerHTML 一样。
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
alert($("div").html()); // 获取
$("div").html("这个div里面啥都没有");
});
</script>
</head>
<body>
<div>
这是一个div标签
<span>
这是一个span标签
</span>
</div>
</body>
2、text()
它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性的 innerText 一样,也是设置或者获取成文本。使用方法类似html()。
3、val()
它可以设置和获取表单项的value属性值。跟 dom 属性 value 一样。
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
$("#btn01").click(function() {
alert($("#btn01").val());
});
$("#btn02").click(function() {
$("#btn02").val("按钮2的value已更改");
alert($("#btn02").val());
});
});
</script>
</head>
<body>
<button id = "btn01" value = "这是按钮1的value">按钮1</button>
<button id = "btn02" value = "这是按钮2的value">按钮2</button>
</body>
val()还可以通过value值设置表单项的选中状态:
<head>
<meta charset="UTF-8">
<title>Title_02</title>
<script type="text/javascript" src="./js/JQuery-3.7.0.js"></script>
<script type="text/javascript">
$(function() {
// 批量操作单选框选中状态
$(":radio").val(["radio1"]);
// 批量操作复选框选中状态
$(":checkbox").val(["checkbox3", "checkbox1", "checkbox2"]);
// 同时操作不同的表单项
$(":radio, :checkbox, #multiple").val(["radio2", "checkbox1", "checkbox2", "opt2"]);
});
</script>
</head>
<body>
单选:
<input type = "radio" value = "radio1"/> radio1
<input type = "radio" value = "radio2"/> radio2
<br/>
多选:
<input type = "checkbox" value = "checkbox1"/> checkbox1
<input type = "checkbox" value = "checkbox2"/> checkbox2
<input type = "checkbox" value = "checkbox3"/> checkbox3
<br/>
下拉多选:
<select id = "multiple" multiple = "multiple"> <!-- 把multiple属性设置成multiple就是多选 -->
<option value = "opt1">opt1</option>
<option value = "opt2">opt2</option>
<option value = "opt3">opt3</option>
</select>
</body>
4、attr()(atrribute)和 prop()
都可以设置和获取属性的值。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// attr()
alert($(":checkbox:first").attr("name")); // 获取
$(":checkbox:first").attr("name", "i don't know checkbox1"); // 设置
// prop()
alert($(":checkbox:eq(1)").prop("name")); // 获取
$(":checkbox:eq(1)").prop("name", "i don't know checkbox2"); // 设置
alert($(":checkbox:eq(0)").attr("checked")); // undefined
alert($(":checkbox:eq(1)").prop("checked")); // false
});
</script>
</head>
<body>
多选:
<input name = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
<input name = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>
那他们的区别是什么呢?看到代码中第三、四个 alert() 的注释,说明 attr() 在操作属性时,对未选中的会返回 undefined,而 prop() 会返回 false。
因此,attr() 不推荐操作 checked、readOnly、selected、disabled 等等。相反,prop() 只推荐操作 checked、readOnly、selected、disabled 等等。
注意:对于 $ 返回的数组,要使用 :eq(index) 来访问单个元素。
4、练习
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("#button1").click(function (){
$(":checkbox").prop("checked", true);
});
$("#button2").click(function (){
$(":checkbox").prop("checked", false);
});
$("#button3").click(function (){
// 查询全部的球类复选框
$(":checkbox[class='hobby']").each(function () {
// 在each遍历的function函数中,有一个this对象,这个this对象就是当前便遍历的dom对象
this.checked = !this.checked;
});
// 最后检查是否全选/全不选
var allNum = $(":checkbox[class = 'hobby']").length; // 所有球类数量
var selectNum = $(":checkbox[class = 'hobby']:checked").length; // 所有选中的球类数量
$("#checkbox1").prop("checked", allNum == selectNum);
});
$("#button4").click(function() {
// 获取选中的球类的复选框
$(":checkbox[class = 'hobby']:checked").each(function() {
alert(this.value); // this是一个dom对象,不能用val()
});
});
// 给全选/全不选的复选框绑定单击事件
$("#checkbox1").click(function() {
// 在事件的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象。
$(":checkbox[class = 'hobby']").prop("checked", this.checked);
});
// 给所有球类复选框绑定单击事件
$(":checkbox[class = 'hobby']").click(function() {
// 检查是否全选/全不选
var allNum = $(":checkbox[class = 'hobby']").length; // 所有球类数量
var selectNum = $(":checkbox[class = 'hobby']:checked").length; // 所有选中的球类数量
$("#checkbox1").prop("checked", allNum == selectNum);
});
});
</script>
</head>
<body>
<form method = "post" action = "">
你爱好的运动是?
<input id = "checkbox1" type = "checkbox" value = "全选/全不选"/>全选/全不选
<br/>
<input id = "checkbox2" class = "hobby" type = "checkbox" value = "足球"/>足球
<input id = "checkbox3" class = "hobby" type = "checkbox" value = "篮球"/>篮球
<input id = "checkbox4" class = "hobby" type = "checkbox" value = "羽毛球"/>羽毛球
<input id = "checkbox5" class = "hobby" type = "checkbox" value = "排球"/>排球
<br/>
<button id = "button1" type = "button" value = "全选"> 全选 </button>
<button id = "button2" type = "button" value = "全不选"> 全不选 </button>
<button id = "button3" type = "button" value = "反选"> 反选 </button>
<button id = "button4" type = "button" value = "提交"> 提交 </button>
</form>
</body>
注意:button标签也要写上 type = "button",否则页面会进行刷新,点击事件失效。
七、Dom对象的增删改
1、内部插入
(1)appendTo()
a.appendTo(b):把 a 插入到 b 的子元素的末尾,成为 b 的最后一个子元素。
(2)prependTo(b)
a.prependTo(b):把 a 插入到 b 的子元素的首位,成为 b 的第一个子元素。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("<h1> 把这个h1标签插入到#div1的子元素的第一位 </h1>").prependTo($("#div1"));
$("<h1> 把这个h1标签插入到#div1的子元素的最后一位 </h1>").appendTo($("#div1"));
});
</script>
</head>
<body>
多选:
<input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
<br/>
<div id = "div1"> 这是一个div1标签(一开始是第一个子元素) </div>
<br/>
多选:
<input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>
2、外部插入
(1)insertAfter()
a.insertAfter(b):把 a 插入到 b 的后一位,得到 ba。
(2)insertBefore()
a.insertBefore(b):把 a 插入到 b 的前一位,得到 ab。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("<h1> 把这个h1标签插入到#div1的前一位 </h1>").insertBefore($("#div1"));
$("<h1> 把这个h1标签插入到#div1的后一位 </h1>").insertAfter($("#div1"));
});
</script>
</head>
<body>
多选:
<input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
<br/>
<div id = "div1"> 这是一个div1标签(一开始是第一个元素) </div>
<br/>
<div id = "div2"> 这是一个div2标签(一开始是第二个元素) </div>
<br/>
多选:
<input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>
3、替换
(1)replaceWith()
a.replaceWith(b):把所有的 a 换成 b。
(2)replaceAll()
a.replaceAll(b):把所有的 b 换成 a。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$(".class1").replaceWith("<h1> .class1换成了h1标签 </h1>");
$("<h1> .class2换成了h1标签 </h1>").replaceAll($(".class2"));
});
</script>
</head>
<body>
多选:
<input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
<br/>
<div class = "class1"> 这是一个div1标签(一开始是第一个元素) </div>
<br/>
<div class = "class1"> 这是一个div2标签(一开始是第二个元素) </div>
<br/>
<div class = "class2"> 这是一个div3标签(一开始是第三个元素) </div>
<br/>
<div class = "class2"> 这是一个div4标签(一开始是第四个元素) </div>
<br/>
多选:
<input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>
4、删除
(1)remove()
a.remove():删除 a 标签。
(2)empty()
a.empty():清空 a 标签中起始标签和结束标签之间的内容,但是保留 a 标签及其属性。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$(".class1").remove();
$(".class2").empty();
});
</script>
</head>
<body>
多选:
<input id = "checkbox1" type = "checkbox" value = "checkbox1"/> checkbox1
<br/>
<div class = "class1"> 这是一个div1标签(一开始是第一个元素) </div>
<br/>
<div class = "class1"> 这是一个div2标签(一开始是第二个元素) </div>
<br/>
<div class = "class2"> 这是一个div3标签(一开始是第三个元素) </div>
<br/>
<div class = "class2"> 这是一个div4标签(一开始是第四个元素) </div>
<br/>
多选:
<input id = "checkbox2" type = "checkbox" value = "checkbox2"/> checkbox2
</body>
5、练习
(1)从左到右、从右到左
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// 选中添加到右边
$("#btn_1").click(function() {
// 把左边多选框中选中的选项,添加到右边的多选框
$("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
// 将选中效果移除
$("select:eq(1) > option:selected").prop("selected", false);
});
// 全部添加到右边
$("#btn_2").click(function() {
// 把左边多选框中所有的选项,添加到右边的多选框
$("select:eq(0) > option").appendTo($("select:eq(1)"));
});
// 选中添加到左边
$("#btn_3").click(function() {
// 把右边多选框中选中的选项,添加到左边的多选框
$("select:eq(1) > option:selected").appendTo($("select:eq(0)"));
// 将选中效果移除
$("select:eq(0) > option:selected").prop("selected", false);
});
// 全部添加到左边
$("#btn_4").click(function() {
// 把左边多选框中所有的选项,添加到右边的多选框
$("select:eq(1) > option").appendTo($("select:eq(0)"));
});
});
</script>
</head>
<body>
<div id = "left">
<select multiple = "multiple">
<option value = "opt_1"> 选项1 </option>
<option value = "opt_2"> 选项2 </option>
<option value = "opt_3"> 选项3 </option>
<option value = "opt_4"> 选项4 </option>
<option value = "opt_5"> 选项5 </option>
<option value = "opt_6"> 选项6 </option>
</select>
<input id = "btn_1" type = "button" value = "选中添加到右边"/>
<input id = "btn_2" type = "button" value = "全部添加到右边"/>
</div>
<div id = "right">
<select multiple = "multiple">
</select>
<input id = "btn_3" type = "button" value = "选中添加到左边"/>
<input id = "btn_4" type = "button" value = "全部添加到左边"/>
</div>
</body>
(2)动态添加、动态删除表格记录
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// 删除函数
var deleteFun = function() {
// 在事件响应的function函数中,this对象是当前正在执行响应对象的dom对象
// 因此,<tr>可以这样获取
var $trObj = $(this).parent().parent();
// 获取name值
var name = $trObj.find("td:eq(0)").text();
// confirm是JS提供的确认提示框函数,返回 true or false
if (confirm("确定是否删除" + name)) {
$trObj.remove();
}
// return false; 可以阻止元素的默认行为
return false;
}
// 为添加按钮添加点击事件
$("#button_submit").click(function() {
// 获取输入框的姓名、邮箱、工资,注意返回的都是string类型,不需要加$符
var name = $("#input_name").val();
var email = $("#input_email").val();
var salary = $("#input_salary").val();
// 创建一个标签对象,添加到显示数据的table中
var $trObj = $("<tr>" +
"<td>" + name + "</td>" +
"<td>" + email + "</td>" +
"<td>" + salary + "</td>" +
"<td><a href = \"delete\">Delete</a></td>" +
"</tr>");
$trObj.appendTo($("#table_1"));
// 给新添加的a标签绑定单击事件
$trObj.find("a").click( deleteFun );
});
// 给a标签的删除链接绑定单击事件
$("table a").click( deleteFun );
});
</script>
</head>
<body>
<table id = "table_1">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@123.com</td>
<td>114514</td>
<td>
<a href = "delete">Delete</a>
</td>
</tr>
</table>
<div id = "div_1">
<h4>添加新员工</h4>
<table>
<tr>
<td>Name:</td>
<td>
<input id = "input_name" type = "text"/>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input id = "input_email" type = "text"/>
</td>
</tr>
<tr>
<td>Salary:</td>
<td>
<input id = "input_salary" type = "text"/>
</td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input id = "button_submit" type = "button" value = "添加"/>
</td>
</tr>
</table>
</div>
</body>
这个练习的难点在于函数:
我们在练习中遇到这样一个问题,要求对原有的记录和新加入的记录都绑定单击事件,这时候我们希望能够函数复用,因此,需要明确函数的定义:
var fun = function() {
alert(1);
}
function fun() {
alert(1);
}
上面这两种定义方式是一样的,都可以得到一个名为 fun 的函数变量,这时候我们再看练习中两处为 a 标签绑定单击事件的 click 的参数就能理解了。
obj.click(function() {
alert(1);
});
var fun = function() {
alert(1);
}
/* 或者用
function fun() {
alert(1);
}
*/
obj.click( fun );
第一种就是我们平常写的,直接在 click 内写一个函数体;
第二种就是对于需要函数复用的情况,在外部定义一个函数,然后再传入 click。
八、CSS样式操作
原理:先定义一个指定类选择器的CSS样式,然后使用下面四个函数对目标元素(标签)的 class 属性操作,即可达到改变样式的需求。
1、addclass()
添加样式。
2、removeClass()
删除样式。
3、toggleClass()
没有的样式则添加,已有的样式则删除。
4、offset()
获取和设置元素的坐标。
5、例子
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
div {
width: 100px;
height: 260px;
}
div.whiteBorder {
boder: 2px white solid;
}
/* 前面的 div 是限制只有 div 标签受到影响 */
/* 后面 .whiteBorder 是一个类选择器 */
div.redDiv {
background-color: red;
}
div.blueBorder {
border: 5px blue solid;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// 查询需要改变样式的那个div
var $divObj = $("div:first");
// 绑定addClass的点击事件
$("#btn_1").click(function() {
// 向标签添加 一个 或 多个 类。
$divObj.addClass("redDiv blueBorder");
});
// 绑定removeClass的点击事件
$("#btn_2").click(function() {
// 从标签删除 一个 或 多个 类。
// 什么都不写,默认全部删除
$divObj.removeClass("redDiv");
});
// 绑定toggleClass的点击事件
$("#btn_3").click(function() {
$divObj.toggleClass("redDiv");
});
// 绑定offset的点击事件
$("#btn_4").click(function () {
// offset - 返回第一个匹配元素相对于文档的位置
// 根据当前浏览器内容页面大小 获取 或 设置 与左上角的距离。
var pos = $divObj.offset();
console.log(pos);
$divObj.offset({
top: 100,
left: 500
});
pos = $divObj.offset()
console.log(pos);
});
});
</script>
</head>
<body>
<table align = "center">
<tr>
<td>
<div class = "border"></div>
</td>
<td>
<div class = "btn">
<input type = "button" id = "btn_1" value = "addClass()"/>
<input type = "button" id = "btn_2" value = "removeClass()"/>
<input type = "button" id = "btn_3" value = "toggleClass()"/>
<input type = "button" id = "btn_4" value = "offset()"/>
</div>
</td>
</tr>
</table>
</body>
九、JQuery动画
1、基本动画
(1)show()
将隐藏的元素显示。
(2)hide()
将可见的元素隐藏
(3)toggle()
可见就隐藏,不可见就显示。
(4)以上动画方法都可以传入两个参数:
- 第一个参数是动画执行时长,以 ms 为单位。
- 第二个参数是动画的回调函数(动画完成后自动调用的函数)。
2、淡入淡出动画
(1)fadeIn()
淡入(缓慢可见)
(2)fadeOut()
淡出(缓慢消失)
(3)fadeTo()
在指定时间内缓慢将透明度修改到指定值。
0:不可见;
1:完全可见。
(4)fadeToggle()
淡入 / 淡出 切换。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
div {
background-color: pink;
border: 1px black solid;
float: left;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// show
$("#btn_1").click(function() {
$("#div_2").show(1000, function() {
alert("show动画执行完成");
});
});
// hide
$("#btn_2").click(function() {
$("#div_2").hide(1000, function() {
alert("hide动画执行完成");
});
});
// toggle
$("#btn_3").click(function() {
$("#div_2").toggle(1000, function() {
alert("toggle动画执行完成");
});
});
/*
此处可实现一个反复显示和隐藏的动画效果
*/
// var tmp = function() {
// $("#div_2").toggle(1000, tmp);
// }
// tmp();
// fadeIn
$("#btn_4").click(function() {
$("#div_2").fadeIn(1000, function() {
alert("fadeIn动画执行完成");
});
});
// fadeOut
$("#btn_5").click(function() {
$("#div_2").fadeOut(1000, function() {
alert("fadeOut动画执行完成");
});
});
// fadeTo
$("#btn_6").click(function() {
$("#div_2").fadeTo(1000, 0.5, function() {
alert("fadeTo动画执行完成");
});
});
// fadeToggle
$("#btn_7").click(function() {
$("#div_2").fadeToggle(1000, function() {
alert("fadeToggle动画执行完成");
});
});
});
</script>
</head>
<body>
<div id = "div_1">
<table align = "center">
<tr>
<td><input type = "button" id = "btn_1" value = "show()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_2" value = "hide()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_3" value = "toggle()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_4" value = "fadeIn()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_5" value = "fadeOut()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_6" value = "fadeTo()"/></td>
</tr>
<tr>
<td><input type = "button" id = "btn_7" value = "fadeToggle()"/></td>
</tr>
</table>
</div>
<div id = "div_2">
JQuery定义了很多动画效果<br/>可以很方便的使用这些动画效果。
</div>
</body>
3、练习
(1)显示相机品牌
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type = "text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless {
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a {
display: block;
width: 120px;
margin: 0 auto;
line-height: 20px;
border: 1px solid #AAA;
}
.showmore a span {
background-color: pink;
text-align: center;
}
.showless a span {
background-color: aquamarine;
text-align: center;
}
.promoted a {
color: #F50;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
// 初始状态:隐藏第六个 <li> 之后的对象
$("li:gt(5):not(:last)").hide();
// 给 a 标签绑定单击事件
$("#a_show").click(function() {
// 让物品 隐藏 或 显示
$("li:gt(5):not(:last)").toggle();
// 点击后样式、内容也需要变化
if ($("li:gt(5):not(:last)").is(":hidden")) {
// 修改文本
$("#a_show span").text("显示全部品牌");
// 修改样式
$("div div").removeClass();
$("div div").addClass("showmore");
// 去除高亮
$("li:contains('索尼')").removeClass();
} else {
$("#a_show span").text("显示部分品牌");
$("div div").removeClass();
$("div div").addClass("showless");
// 添加高亮
$("li:contains('索尼')").addClass("promoted");
}
return false;
});
});
</script>
</head>
<body>
<div class = "SubCategoryBox">
<ul>
<li><a href = "#">佳能</a><i>(30440)</i></li>
<li><a href = "#">索尼</a><i>(27220)</i></li>
<li><a href = "#">三星</a><i>(20808)</i></li>
<li><a href = "#">尼康</a><i>(17821)</i></li>
<li><a href = "#">松下</a><i>(12289)</i></li>
<li><a href = "#">卡西欧</a><i>(8242)</i></li>
<li><a href = "#">富士</a><i>(14894)</i></li>
<li><a href = "#">柯达</a><i>(9520)</i></li>
<li><a href = "#">宾得</a><i>(2195)</i></li>
<li><a href = "#">理光</a><i>(4114)</i></li>
<li><a href = "#">奥林巴斯</a><i>(12205)</i></li>
<li><a href = "#">明基</a><i>(1466)</i></li>
<li><a href = "#">爱国者</a><i>(3091)</i></li>
<li><a href = "#">其他相机品牌</a><i>(7275)</i></li>
</ul>
<div class = "showmore">
<a href = "more.html" id = "a_show">
<span>显示全部相机品牌</span>
</a>
</div>
</div>
</body>
十、JQuery事件操作
1、区别
$(function(){
alert(1); // 1-th 执行
});
$(function(){
alert(2); // 2-th 执行
});
$(function(){
alert(3); // 3-th 执行
});
window.onload = function() {
alert(1); // 不执行
}
window.onload = function() {
alert(2); // 不执行
}
window.onload = function() {
alert(3); // 4-th 执行
}
(1)触发条件
- JQuery 的加载,是在浏览器内核解析完页面的标签,并创建好 DOM 对象之后,就会马上执行;
- 原生 JS 的加载,除了上面的 DOM 对象创建,还需要等待标签所需资源的加载完成,才会执行。
(2)触发顺序
- 当上面两种方法都存在时,会先按 JQuery 的先后顺序执行所有 JQuery 的操作,然后会执行最后一个原生 JS 的操作(因为原生 JS 会覆盖)。
2、其他事件处理方法
(1)click()
它可以绑定单击事件,或者触发单击事件。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("h5").click(function() { // 传 function 是 绑定
alert("单击事件 -- click方法绑定");
});
$(":button").click(function() {
$("h5").click(); // 不传 function 是 触发
});
});
</script>
</head>
<body>
<h5>click方法是什么?</h5>
<input type="button" value = "一个 button"/>
</body>
(2)mouseover() 和 mouseout()
mouseouver:鼠标移入事件;
mouseout:鼠标移出事件。
都可以 绑定 和 触发。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.over {
background-color: pink;
}
.out {
background-color: aquamarine;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("h5").mouseover(function() {
$("h5").removeClass();
$("h5").addClass("over");
});
$("h5").mouseout(function() {
$("h5").removeClass();
$("h5").addClass("out");
});
});
</script>
</head>
<body>
<h5 class = "out"> mouseover() / mouseout() 是什么?</h5>
</body>
(3)bind()
可以给元素一次性绑定 一个 或 多个 事件。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.over {
background-color: pink;
}
.out {
background-color: aquamarine;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("h5").bind("click mouseover", function() {
$("h5").removeClass();
$("h5").addClass("over");
});
});
</script>
</head>
<body>
<h5 class = "out"> mouseover() / mouseout() 是什么?</h5>
</body>
(4)one()
使用方法和 bind() 一样,但是其绑定的方法只能执行一次,之后不再有效。
(5)unbind()
使用方法和 bind() 一样,但是会解除绑定。
(6)on()(旧版本是live())
也是用来绑定事件。可以用来绑定选择器匹配的所有元素的事件。之后动态创建的元素也有效。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("h5").on("click", function() {
alert("h5单击事件——on方法绑定");
});
$("<h5>新的h5标签</h5>").appendTo($("h5:last"));
});
</script>
</head>
<body>
<h5 class = "out"> mouseover() / mouseout() 是什么?</h5>
</body>
3、事件冒泡
事件的冒泡是指,父子元素同时监听同一个事件,当触发子元素的事件发生时,该事件也被传递到了父元素的事件里去响应。
比如:在 div 中写一个 span,为 div 和 span 都绑定点击事件,此时点击 span 会触发两个事件,因为 span 在 div 中,点击了 span 就相当于点击了 div。
如何阻止事件传递:只需要在子元素事件函数体中 return false;即可。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("#content").click(function() {
alert("我是div");
});
$("span").click(function() {
// 此时点击span会触发两个事件,因为span在div中,点击了span就相当于点击了div
alert("我是span");
// return false 即可防止事件传递
return false;
});
});
</script>
</head>
<body>
<div id = "content">
外层div元素<br/>
<span>内层span元素</span><br/>
外层div元素
</div>
<div id = "msg"> </div>
<br/><br/>
<a href = "https://www.baidu.com">百度(baidu.com)</a>
</body>
4、事件对象
每次触发事件,就会有一个事件对象用来记录事件触发的所有相关信息。我们重点关注怎么使用这个 js 事件对象。
(1)如何获取事件对象
在给元素绑定事件的时候,在事件的 function( event ) 的参数列表中添加一个参数,习惯命名为 event,这个 event 就是上面说的 js 事件对象。
原生 JS 获取:
window.onload = function() {
document.getElementById("content").onclick = function(event) {
console.log(event);
}
}
JQuery 获取:
$(function() {
$("#content").click(function(event) {
console.log(event);
});
});
(2)怎么获取当前操作是哪一个事件
我们可以将 event 输出到控制台,观察键值对,会发现有一个 type 属性,对应了响应的事件。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
border: 1px solid black;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("#msg").bind("mouseover mouseout", function(event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
});
</script>
</head>
<body>
<div id = "content">
div1
</div>
<div id = "msg">
div2
</div>
</body>
5、练习
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
text-align: center;
}
#small {
margin-top: 150px;
width: 353px;
height: 222px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type = "text/javascript" src = "./js/JQuery-3.7.0.js"></script>
<script type = "text/javascript">
$(function() {
$("#small").bind("mouseover mouseout mousemove", function(event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mouseout") {
$("#showBig").hide();
} else if (event.type == "mousemove") {
$("#showBig").offset({
left: event.pageX + 20,
top: event.pageY + 20
// 加一个常数,防止鼠标移动速度过快,碰到了大图片。否则会闪烁。
});
}
});
});
</script>
</head>
<body>
<img id = "small" src = "./src/small.jpg"/>
<div id = "showBig">
<img src = "./src/big.jpg"/>
</div>
</body>