jQuery
jQuery-课堂笔记
- ECMAScript：基本语法
- BOM：操作浏览器的
- window弹窗：
- alert()普通弹窗
- confirm()确认弹窗
- prompt()输入弹窗
- window定时器
- 执行一次的
- let timer = setTimeout(函数对象, 延迟毫秒值)
- clearTimeout(timer)
- 执行多次的
- let timer = setInterval(函数对象,间隔毫秒值)
- clearInterval(timer)
- 执行一次的
- location：
- 网址跳转 location.href = “地址”
- window弹窗：
- DOM：操作网页的
- 操作标签
- 获取标签：
- let element = document.querySelector(“选择器”)
- let elements = document.querySelectorAll(“选择器”)
- 创建标签：document.createElement(“标签名称”)
- 插入标签：父标签对象.appendChild(子标签对象)
- 删除标签：标签对象.remove()
- 获取标签：
- 操作标签体
- 获取标签体：let html = 标签对象.innerHTML
- 设置标签体：标签对象.innerHTML = “”;
- 操作属性
- let v = 标签对象.属性名
- 标签对象.属性名 = 值
- 特殊的class属性：
- 获取：标签对象.className
- 设置：标签对象.className = 值
- 操作标签
- js的问题：dom操作的
- 获取标签太麻烦，要写好长：document.querySelector(), document.querySelectorAll()
- 操作标签太麻烦：
- 如果获取到了多个标签document.querySelectorAll()得到的是数组
- 不得不循环遍历数组，再处理每一个
- jQuery可以解决以上问题：
- 简化了获取标签的方法：得到的是数组，但是又对数组做了再封装
- 简化了操作dom的方法：使用jQuery的方法直接操作即可，获取了多少个标签，操作的就是多少个标签，不需要再循环了
一、简介
目标
- 了解jQuery的优点
- 能下载并引入jQuery
讲解
1. 什么是jQuery
- jQuery：是一个优秀的JavaScript轻量级框架之一。
- jQuery 是一个 JavaScript 库。
- 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，**目的就 是在使用时直接调用，**不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
-
- 兼容CSS3和各大浏览器
- 提供了dom、events、animate、ajax等的简易操作
- 还有非常丰富的插件：别人用jQuery写好的功能代码，比如轮播图
- 宗旨是：write less, do more.
- jQuery本质是js，但是功能更强、更简洁。
2. 下载和引入
- 下载：www.jquery.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fH0CResT-1593307378309)(img/image-20200518092324756.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GId0Dywm-1593307378312)(img/image-20200518092505417.png)]
- 引入：在HTML里使用标签
script引入js文件
<script src="jQuery类库的路径">script>
<script>
//使用jQuery
script>
小结
二、和js的区别
目标
- 了解js和jQuery的区别
- 能够进行js对象和jQuery对象的转换
讲解
js对象和jQuery对象说明
-
js对象：js语法提供的对象，或者使用js方法得到的对象
-
jQuery对象：使用jQuery方法得到的对象
js对象和jQuery对象转换【重点】
- js对象转jQuery对象：
$(js对象) - jQuery对象转js对象：
jQuery对象[索引]或者jQuery对象.get(索引) - jquery对象类型类似于数组，可以看做一个数组
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js对象与jQuery对象的转换title>
head>
<body>
<div id="d1">黑马程序员div>
<script src="../js/jquery-3.4.1.min.js">script>
<script>
/**
* 1. 什么是js对象？什么是jQuery对象？
* js对象：用js方式/js语法获取的 是js对象（dom对象）
* jQuery对象：用jQuery方式/jQuery语法获取的 是jQuery对象
*
* 2. js对象和jQuery对象有什么区别？
* jQuery对象都是数组，数组里每个元素是js对象
*
* 3. js对象和jQuery对象能不能转换？可以
* js对象转jQuery对象：$(js对象)
* jQuery对象转js对象：jQuery对象[索引]
*
*/
//获取js对象
let d1Js = document.querySelector("#d1");
//把js对象转换成jQuery对象，就可以使用jQuery对象的方法了
let innerJs = $(d1Js).html();
alert(innerJs);
//获取jQuery对象
let d1Jq = $("#d1");
//把jQuery对象转换成js对象，就可以使用js对象的属性了
let innerJq = d1Jq[0].innerHTML;
alert(innerJq);
script>
body>
html>
小结
- 了解js和jQuery的区别
- js对象不能直接使用jQuery的方法：可以转换成jQuery对象，再使用jQuery的方法
- jQuery对象不能直接使用js的属性：可以转换成js对象，再使用js的属性和方法
- 能够进行js对象和jQuery对象的转换
- js对象=》jQuery对象：
$(js对象) - jQuery对象=》js对象：
jQuery[索引]
- js对象=》jQuery对象：
三、选择器
使用jQuery完成功能只需要两步：
- 操作谁，就找谁【找它】：用选择器
- 找到了，怎么操作【弄它】：用jQuery的方法。找到多少个，操作的就是多少个，不需要循环遍历
目标
- 能够使用不同选择器，获取标签对象
分析
- jQuery操作网页（dom操作），只需要两步：
- 找到它：用jQuery的选择器
- 操作它：用jQuery的dom操作方法
讲解
1. 基本选择器
| 选择器 | 描述 |
|---|---|
$("元素名称")，比如：$("div") |
标签选择器 |
$("#id值")，比如：$("#d1") |
ID选择器 |
$(".类名")，比如：$(".c1") |
类选择器 |
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div, span{
width: 240px;
height: 240px;
background-color: lightblue;
margin: 5px;
display: inline-block;
vertical-align: middle;
}
.indiv{
width:100px;
height:100px;
background-color: lightgreen;
border: 1px solid black;
display: block;
font-size: 14px;
font-family: "宋体";
margin: 3px auto;
}
.sm{
width:60px;
height: 30px;
margin: 0 auto;
background-color: yellow;
display: block;
border: 1px solid black;
}
style>
<title>title>
head>
<body>
<input type="button" name="btn0" id="btn0" value="所有DIV变红" />
<input type="button" name="btn1" id="btn1" value="id=div0的变红"/>
<input type="button" name="btn2" id="btn2" value="class=cls的变红" />
<hr />
<div id="div0" name="div0">div id=div0 name=div0div>
<div id="div1" class="cls">
div id=div1 class=cls
div>
<span id="span1" name="span1" class="cls">
span1 class=cls name=span1
span>
<span id="span2" name="span2">
span id=span2 name=span2
span>
<div id="div2">
div id=div2
div>
<hr />
<script src="../js/jquery-3.4.1.min.js">script>
<script>
//
$("#btn0").click(function(){
$("div").css("background-color", "red");
});
//
$("#btn1").click(function () {
$("#div0").css("background-color", "red");
});
//
$("#btn2").click(function () {
$(".cls").css("background-color", "red");
});
script>
body>
html>
2. 层级选择器
| 选择器 | 描述 |
|---|---|
$("A B")★★ |
后代选择器，获取到A的后代元素B(包括B的子集)。比如：$("div a")找div的后代元素a |
$("A>B")★★ |
子选择器，获取到A的子元素B（不包括B的子集）。比如：$("div>a")找div的子元素a |
$("A+B") |
next选择器，获取A元素后边挨着的B元素（B是A挨着的弟弟） |
$("A~B") |
siblings选择器，获取A元素后边同级所有的B元素（B是A的弟弟妹妹们） |
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div, span{
width: 240px;
height: 240px;
background-color: lightblue;
margin: 5px;
display: inline-block;
vertical-align: middle;
}
.indiv{
width:100px;
height:100px;
background-color: lightgreen;
border: 1px solid black;
display: block;
font-size: 14px;
font-family: "宋体";
margin: 3px auto;
}
.sm{
width:60px;
height: 30px;
margin: 0 auto;
background-color: yellow;
display: block;
border: 1px solid black;
}
style>
<title>title>
head>
<body>
<input type="button" name="btn1" id="btn1" value="div下所有的span变红" />
<input type="button" name="btn2" id="btn2" value="div的子标签span变红" />
<hr />
<div id="div0" name="div0">div id=div0 name=div0div>
<div id="div1" class="cls">
div id=div1 class=cls
<div id="in1" class="indiv">
div class=indiv
<span id="smin1" class="sm">
span class=sm
span>
<div id="smin2" class="sm">
div class=sm
div>
div>
<span id="in2" class="indiv">
span class=indiv
<span id="smin3" class="sm">
span class=sm
span>
<div id="smin4" class="sm">
div class=sm
div>
span>
div>
<span id="span1" name="span1" class="cls">
span1 class=cls name=span1
<div id="in3" class="indiv">
div class=indiv
<span id="smin5" class="sm">
span class=sm
span>
<div id="smin6" class="sm">
div class=sm
div>
div>
<span id="in4" class="indiv">
span class=indiv
<span id="smin7" class="sm">
span class=sm
span>
<div id="smin8" class="sm">
div class=sm
div>
span>
span>
<span id="span2" name="span2">
span id=span2 name=span2
span>
<div id="div2">
div id=div2
div>
<hr />
<script src="../js/jquery-3.4.1.min.js">script>
<script>
//
$("#btn1").click(function () {
$("div span").css("background-color", "red");
});
//
$("#btn2").click(function () {
$("div>span").css("background-color", "red");
});
script>
body>
html>
3. 属性选择器
| 选择器 | 描述 |
|---|---|
$("A[attr]")★ |
获取 含有attr属性的 A元素。$("input[class]")，找含有class属性的input标签 |
$("A[attr=v]")★ |
获取 attr属性值等于v的 A元素。$("input[type='text']")，找文本框 |
$("A[][]...")★ |
复合属性选择器。$("input[class][type='text']")，找有class属性的文本框 |
$("A[attr!=v]") |
获取 attr属性值不等于v的 A元素 |
$("A[attr^=v]") |
获取 attr属性值以v开头的 A元素 |
$("A[attr$=v]") |
获取 attr属性值以v结尾的 A元素 |
$("A[attr*=v]") |
获取 attr属性值里包含v的 A元素 |
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div, span{
width: 240px;
height: 240px;
background-color: lightblue;
margin: 5px;
display: inline-block;
vertical-align: middle;
}
.indiv{
width:100px;
height:100px;
background-color: lightgreen;
border: 1px solid black;
display: block;
font-size: 14px;
font-family: "宋体";
margin: 3px auto;
}
.sm{
width:60px;
height: 30px;
margin: 0 auto;
background-color: yellow;
display: block;
border: 1px solid black;
}
style>
<title>title>
head>
<body>
<input type="button" id="btn1" value="包含class属性的div元素变红"/>
<input type="button" id="btn2" value="class=indiv的div元素变红"/>
<input type="button" id="btn7" value="包含name属性并且class的值以cl开头的span变红" />
<div id="div0" name="div0">div id=div0 name=div0div>
<div id="div1" class="cls">
div id=div1 class=cls
<div id="in1" class="indiv">
div class=indiv
div>
<span id="in2" class="indiv">
span class=indiv
span>
div>
<span id="span1" name="span1" class="cls">
span1 class=cls name=span1
<div id="in3" class="indiv">
div class=indiv
div>
<span id="in4" class="indiv">
span class=indiv
span>
span>
<span id="span2" name="span2">
span id=span2 name=span2
span>
<div id="div2">
div id=div2
div>
<hr />
<script src="../js/jquery-3.4.1.min.js">script>
<script>
//
$("#btn1").click(function () {
$("div[class]").css("background-color", "red");
});
//
$("#btn2").click(function () {
$("div[class='indiv']").css("background-color", "red");
});
//
$("#btn7").click(function () {
$("span[name][class^='cl']").css("background-color", "red");
});
script>
body>
html>
4. 基本过滤选择器
- 通常是和其它选择器配合使用的，用于进行再次过滤
| 选择器 | 描述 |
|---|---|
:first |
获取第一个，$("div:first")找第一个div |
:last |
获取最后一个，$("span:last")找最后 一个span |
:not(selector) |
排除 selector的结果不要，$("div:not(.cls)")找div，但是不要.cls的 |
:even |
获取索引为偶数的，$("div:even") |
:odd |
获取索引为奇数的 |
:eq(n) |
获取索引等于n的， equals |
:gt(n) |
获取索引大于n的, greater than |
:lt(n) |
获取索引小于n的, less than |
tips:
针对前边的选择器选中的结果，进行再次过滤。
比如：
$("div:even")，先找到所有的div，每个div有自己的索引，获取索引为偶数的。注意：不是在整个页面里的索引
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div,
span {
width: 200px;
height: 150px;
background-color: lightblue;
margin: 5px;
display: inline-block;
vertical-align: middle;
}
style>
<title>title>
head>
<body>
<input type="button" name="btn0" id="btn0" value="第一个DIV变红" />
<input type="button" name="btn1" id="btn1" value="最后一个DIV变红" />
<input type="button" name="btn2" id="btn2" value="class不为cls的DIV变红" />
<input type="button" name="btn3" id="btn3" value="下标为偶数的div变红" />
<input type="button" name="btn4" id="btn4" value="下标为奇数的div变红" />
<input type="button" name="btn5" id="btn5" value="下标为2的div变红" />
<input type="button" name="btn6" id="btn6" value="下标大于1的div变红" />
<input type="button" name="btn7" id="btn7" value="下标小于2的div变红" /><br />
<hr />
<h1>传智播客h1>
<h4>
1.记笔记（笔记是知识库）<br />
2.学会利用工具（网络搜索/查手册...）<br />
3.多练习（练解决问题的能力，可以参考代码但不能抄代码）<br />
4.尝试自己解决问题，解决不了再问
h4>
<div id="div0">
div id=div0 name=div0
div>
<div id="div1" class="cls">
div id=div1 class=cls
div>
<span id="span1">
span1 class=cls name=span1
span>
<span id="span2">
span id=span2 name=span2
span>
<div id="div2">
div id=div2
div>
<div id="div3">
div id=div3
div>
<div id="animateDiv">
这是一个div
div>
<hr />
<script src="../js/jquery-3.4.1.min.js">script>
<script>
//
$("#btn0").click(function () {
$("div:first").css("background-color", "red");
});
//
$("#btn1").click(function () {
$("div:last").css("background-color", "red");
});
//
$("#btn2").click(function () {
$("div:not(.cls)").css("background-color", "red");
});
//
$("#btn3").click(function () {
$("div:even").css("background-color", "red");
});
//
$("#btn4").click(function () {
//先找到所有的div，得到一个div数组； 然后从div数组里找索引为偶数的
$("div:odd").css("background-color", "red");
});
//
$("#btn5").click(function () {
$("div:eq(2)").css("background-color", "red");
});
//
$("#btn6").click(function () {
$("div:gt(1)").css("background-color", "red");
});
//
$("#btn7").click(function () {
$("div:lt(2)").css("background-color", "red");
});
//
$("#btn8").click(function () {
$(":header").css("background-color", "red");
});
script>
body>
html>
5. 表单属性选择器【重点】
| 选择器 | 描述 |
|---|---|
:enabled |
获取可用的表单项 |
:disabled |
获取不可用的表单项 |
:checked★★★ |
获取被选中的radio，或者checkbox |
:selected★★★ |
获取被选中的下拉选项option |
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<input type="button" id="btn1" value="用jQuery的val()方法改变不可用的文本框的的值" />
<input type="button" id="btn2" value="用jQuery的val()方法改变表单内可用的文本框的值" />
<input type="button" id="btn3" value="用jQuery的length属性获取多选框中被选中的个数" />
<input type="button" id="btn4" value="用jQuery的text()方法获得“学历”下拉框选中的内容" />
<input type="button" id="btn5" value="用jQuery的val()方法获得单选框被选中的值"/>
<hr />
<form action="#" method="post">
<input type="text" name="u1" id="u1" value="可用文本框1"/>
<input type="text" name="u2" id="u2" value="不可用文本框1" disabled="disabled"/>
<input type="text" name="u3" id="u3" value="可用文本框2"/>
<input type="text" name="u4" id="u4" value="不可用文本框2" disabled="disabled"/>
<br />
性别：<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female"/>女
<br />
学历：<select name="xl" id="xl">
<option value="">--学 历--option>
<option value="zk">专科option>
<option value="bk">本科option>
<option value="ss">硕士option>
<option value="bs">博士option>
select>
<br />
爱好: <input type="checkbox" name="hobby" value="read" />读书
<input type="checkbox" name="hobby" value="write" />写作
<input type="checkbox" name="hobby" value="sport" />健身
<input type="checkbox" name="hobby" value="swim" />游泳
<br />
<input type="submit" value="提交"/>
form>
<script src="../js/jquery-3.4.1.min.js">script>
<script>
//
$("#btn1").click(function () {
$("input[type='text']:disabled").val("222");
});
//
$("#btn2").click(function () {
$("input[type='text']:enabled").val("哥哥");
});
//
$("#btn3").click(function () {
var len = $("input[type='checkbox']:checked").length;
alert(len);
});
//
$("#btn4").click(function () {
var t = $("#xl>option:selected").text();
alert(t);
});
//
$("#btn5").click(function () {
var v = $("input[type='radio']:checked").val();
alert(v);
});
script>
body>
html>
小结
能够使用不同选择器，获取标签对象：$(“选择器”)
- 基本选择器【重要】
$("div")：标签选择器，选择所有的div$("#username")：ID选择器，获取id为username的元素$(".inputItem")：获取类名为inputItem的元素
- 属性选择器
$("a[href]")：含有href属性的a标签$("a[target='_blank']")：获取target属性值为_blank的a标签$("a[class][target='_blank']")：获取含有class属性，并且target值为_blank的a标签
- 层级选择器【重要】
$("li img")：获取li里的所有img标签，无论是子元素、孙子元素、…$("li>img")：获取li的子标签img
- 基本过滤选择器
$("div:first")：获取第一个div$("div:last")：获取最后一个div$("div:not(.cls)")：获取div，但是要排除.cls的结果不要$("div:even")：获取索引为偶数的div$("div:odd")：获取索引为奇数的div$("div:eq(2)")：获取索引为2的div$("div:gt(2)")：获取索引大于2的div$("div:lt(2)")：获取索引小于2的div
- 表单属性选择器【重要】
$("input[type='text']:disabled")：获取禁用的文本框$("input[type='text']:enabled")：获取禁用的文本框$("input[type='checkbox']:checked")：获取被选中的复选框$("input[type='radio']:checked")：获取被选中的单选按钮$("option:selected")：获取被选中的下拉选项
四、dom操作
1. 操作标签体
目标
- 能够操作标签体内容
- 能够操作标签体文本内容
讲解
标签体：开始标签 和 结束标签中间的内容
| 方法 | 参数 | 描述 |
|---|---|---|
html() |
获取标签体 | |
html(string)★★ |
string：要设置的内容 | 设置标签体，设置的html会生效，覆盖式设置 |
text() |
获取标签体里的文本 | |
text(string) |
设置文本，哪怕设置html代码，也不会生效，覆盖式设置 |
html()获取开始标签和结束标签里的所有内容；text()获取开始标签和结束标签里的文本内容html(string)设置的html代码会生效；text(string)设置了html代码不生效
<input type="button" value="获取d1的标签体" id="btnGet">
<input type="button" value="设置d1的标签体" id="btnSet">
<div id="d1">
<span>深圳黑马span>
JavaEE
div>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$("#btnGet").click(function () {
//1. 获取d1的标签体所有内容：开始标签和结束标签中间的所有内容
let v1 = $("#d1").html();
//2. 获取d1的标签体文本内容：开始标签和结束标签中间的文本内容
let v2 = $("#d1").text();
alert(v1);
alert(v2);
});
$("#btnSet").click(function () {
//1. 设置d1的标签体内容：Hello Kitty
。 覆盖式设置，html代码会生效
//$("#d1").html("Hello Kitty
");
//2. 设置d1的标签体文本：Hello Kitty
。覆盖式设置，html代码不生效
$("#d1").text("Hello Kitty
");
});
script>
小结
html()：获取标签体里的内容html(string)：设置标签体内容。是覆盖式设置，设置的html代码会生效text()：获取标签体里的文本text(string)：设置标签体文本。是覆盖式设置，设置的html代码不会生效
2. 操作表单项的值【重点】
目标
- 能够获取不同表单项的值
- 能够设置不同表单项的值
讲解
| 方法 | 参数 | 描述 |
|---|---|---|
val() |
获取表单项的值 | |
val(string) |
string：要设置的值 | 设置表单项的值 |
<input type="button" value="获取文本框的值" id="btn1">
<input type="button" value="获取密码框的值" id="btn2">
<input type="button" value="获取下拉框的值" id="btn3">
<input type="button" value="获取文本域的值" id="btn4">
<br>
<input type="button" value="设置文本框的值" id="btn5">
<input type="button" value="设置密码框的值" id="btn6">
<input type="button" value="设置下拉框的值" id="btn7">
<input type="button" value="设置文本域的值" id="btn8">
<form action="">
<input type="text" id="username" value="老李"> <br>
<input type="password" id="password" value="老赵"> <br>
<select id="game">
<option value="">--选择最喜欢的游戏--option>
<option value="wow">wowoption>
<option value="lol">loloption>
<option value="dota">dotaoption>
<option value="pubg">pubgoption>
select>
<br>
<textarea name="area" id="area" cols="30" rows="5">有房有车textarea>
form>
<script src="../js/jquery-3.3.1.min.js">script>
<script>
$("#btn1").click(function () {
let v = $("#username").val();
alert(v);
});
$("#btn2").click(function () {
let v = $("#password").val();
alert(v);
});
$("#btn3").click(function () {
let v = $("#game").val();
alert(v);
});
$("#btn4").click(function () {
let v = $("#area").val();
alert(v);
});
$("#btn5").click(function () {
$("#username").val("小李");
});
$("#btn6").click(function () {
$("#password").val("11111111111111111111");
});
$("#btn7").click(function () {
$("#game").val("pubg");
});
$("#btn8").click(function () {
$("#area").val("身高148");
});
script>
小结
val()：获取表单项的值val(值)：设置表单项的值- 注意：仅仅适用于表单项标签，而不适用于div、span…非表单项标签
3. 操作属性
目标
- 能够操作标签的属性
- 能够获取checked和selected属性值
讲解
| 方法 | 参数 | 描述 |
|---|---|---|
attr(name) |
name：属性名称 | 获取属性值 |
attr(name,value) |
value：属性值 | 设置属性值 |
prop(name) |
获取属性值 | |
prop(name,value) |
设置属性值 | |
removeAttr(name) |
删除属性 |
- 建议：
- 如果要操作的是
checked和selected属性，必须使用prop()方法 - 其它属性，优先使用
attr()，如果不行，再使用prop()
- 如果要操作的是
- 经验：
- 如果操作的是checked=“checked”, selected=“selected”, disabled="disabled"等等类似的属性，通常要使用prop方法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作属性title>
head>
<body>
<input type="button" value="获取文本框的name属性值" id="btn1">
<input type="button" value="设置文本框的name属性值" id="btn2"><br>
<input type="button" value="获取复选框的选中状态" id="btn3">
<input type="button" value="设置复选框的选中状态" id="btn4"><br>
<hr>
<input type="text" id="username" name="username" class="inputItem"><br>
<input type="checkbox" id="policy" name="policy" value="agree" checked>
同意我们的许可协议
<script src="../js/jquery-3.4.1.min.js">script>
<script>
$("#btn1").click(function () {
let username = $("#username").attr("name");
alert(username);
});
$("#btn2").click(function () {
//打开浏览器，按F12=》Elements里可见效果
$("#username").attr("name", "realname");
});
$("#btn3").click(function () {
let checked = $("#policy").prop("checked");
alert(checked);
});
$("#btn4").click(function () {
$("#policy").prop("checked", false);
});
script>
body>
html>
小结
- 第一类方法：
attr(name)：获取属性值attr(name, value )：设置属性值
- 第二类方法：
prop(name)：获取属性值prop(name,value)：设置属性值
- 使用的时候要注意：
- 如果要操作的是checked、selected属性，必须使用prop方法
- 其它属性，优先尝试attr，如果不行再用prop
练习：全选全消
目标
- 实现复选框的全选全消
实现
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table{
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td,th{
border: 1px solid blue;
text-align: center;
}
.box{
width:100px;
}
style>
head>
<body>
<table>
<tr>
<th class="box">
<input type="checkbox" id="checkall" title="全选/全消"/>
<input type="button" value="反选" id="reverseBtn">
th>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>1td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>2td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>3td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>4td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>5td>
<td>td>
<td>td>
tr>
<tr>
<td>
<input type="checkbox" class="item" />
td>
<td>6td>
<td>td>
<td>td>
tr>
table>
<script src="js/jquery-3.3.1.js">script>
<script>
$("#checkall").click(function(){
$(".item").prop("checked", this.checked);
});
$("#reverseBtn").click(function(){
$(".item").click();
});
script>
body>
html>
小结
4. 操作样式
目标
- 能够直接操作标签的样式
- 能够通过操作类名，操作标签的样式
讲解
| 方法 | 参数 | 描述 |
|---|---|---|
css(name) |
name：样式名称 | 获取样式 |
css(name,value) |
value：样式值 | 设置样式 |
addClass(className) |
添加类名 | |
removeClass(className) |
删除类名 | |
toggleClass(className) |
切换类名：如果有就删掉;如果没有就加上 |
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作样式title>
<style>
.c1{
width:200px;
height:200px;
background-color: yellow;
}
.c2{
width:200px;
height: 200px;
background-color: green;
}
style>
head>
<body>
<input type="button" value="css()方法：获取背景颜色" id="btn1">
<input type="button" value="css()方法：设置背景颜色" id="btn2"><br>
<input type="button" value="添加类名：c2" id="btn3">
<input type="button" value="删除类名：c2" id="btn4">
<input type="button" value="切换类名：c2" id="btn5">
<div id="d1" class="c1">div>
<script src="js/jquery-3.4.1.min.js">script>
<script>
$("#btn1").click(function () {
let color = $("#d1").css("background-color");
alert(color);
});
$("#btn2").click(function () {
$("#d1").css("background-color", "pink");
});
$("#btn3").click(function () {
$("#d1").addClass("c2");
});
$("#btn4").click(function () {
$("#d1").removeClass("c2");
});
$("#btn5").click(function () {
$("#d1").toggleClass("c2");
});
script>
body>
html>
小结
练习：隔行换色
目标
- 实现表格的隔行换色
实现
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">
table{
width: 500px;
margin: 0 auto;
border-collapse: collapse;
}
td,th{
border: 1px solid blue;
text-align: center;
}
.evenTr{
/*偶数行样式*/
background-color: lightblue;
}
.oddTr{
/*奇数行样式*/
background-color: lightgreen;
}
.activeTr{
/*鼠标移入后 所在行样式*/
background-color: #ccc;
}
style>
head>
<body>
<table>
<tr>
<th>学号th>
<th>姓名th>
<th>年龄th>
tr>
<tr>
<td>1td>
<td>td>
<td>td>
tr>
<tr>
<td>2td>
<td>td>
<td>td>
tr>
<tr>
<td>3td>
<td>td>
<td>td>
tr>
<tr>
<td>4td>
<td>td>
<td>td>
tr>
<tr>
<td>5td>
<td>td>
<td>td>
tr>
<tr>
<td>6td>
<td>td>
<td>td>
tr>
table>
<script src="js/jquery-3.3.1.js">script>
<script>
$("tr:gt(0):even").addClass("evenTr");
$("tr:gt(0):odd").addClass("oddTr");
script>
body>
html>
小结
5. 操作标签
目标
- 能够创建并插入标签
- 能够删除标签
讲解
| 方法 | 描述 |
|---|---|
$("完整html代码") |
创建标签。$(" |
parent.append(child) |
把child插入到parent内部最后（child成为parent的小儿子） |
child.appendTo(parent) |
把child插入到parent内部最后（child成为parent的小儿子） |
parent.prepend(child) |
把child插入到parent内部最前（child成为parent的大儿子） |
child.prependTo(parent) |
把child插入到parent内部最前（child成为parent的大儿子） |
remove() |
删除元素 |
empty() |
清空元素 |
小结
练习：QQ表情
目标
- 实现QQ表情选择
实现
<html>
<head>
<meta charset="UTF-8" />
<title>QQ表情选择title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.emoji{margin:50px;}
ul{overflow: hidden;}
li{float: left;width: 48px;height: 48px;cursor: pointer;}
.emoji img{ cursor: pointer; }
style>
head>
<body>
<div class="emoji">
<ul>
<li><img src="img/01.gif" height="22" width="22" alt="" />li>
<li><img src="img/02.gif" height="22" width="22" alt="" />li>
<li><img src="img/03.gif" height="22" width="22" alt="" />li>
<li><img src="img/04.gif" height="22" width="22" alt="" />li>
<li><img src="img/05.gif" height="22" width="22" alt="" />li>
<li><img src="img/06.gif" height="22" width="22" alt="" />li>
<li><img src="img/07.gif" height="22" width="22" alt="" />li>
<li><img src="img/08.gif" height="22" width="22" alt="" />li>
<li><img src="img/09.gif" height="22" width="22" alt="" />li>
<li><img src="img/10.gif" height="22" width="22" alt="" />li>
<li><img src="img/11.gif" height="22" width="22" alt="" />li>
<li><img src="img/12.gif" height="22" width="22" alt="" />li>
ul>
<p class="word">
<strong>请发言：strong>
<img src="img/12.gif" height="22" width="22" alt="" />
p>
div>
<script src="js/jquery-3.3.1.js">script>
<script>
$("ul img").click(function(){
$(this).clone().appendTo(".word");
});
script>
body>
html>
小结
五、事件
基本事件
目标
- 了解jquery的常用事件
- 能够使用jQuery绑定事件
讲解
- jQuery绝大多数的事件写法：
- js事件名称去掉on
- 事件变成方法
- 响应行为作为方法的实参
| js事件写法 | jQuery事件写法 |
|---|---|
onclick单击 |
click(fn) |
ondblclick双击 |
dblclick(fn) |
onsubmit表单提交 |
submit(fn) |
onchange域内容改变 |
change(fn) |
onload加载完成 |
$(fn),$(document).ready(fn) |
onfocus获取焦点 |
focus(fn) |
onblur失去焦点 |
blur(fn) |
onkeydown键盘按键按下 |
keydown(fn) |
onkeypress键盘按键按下、按住 |
keypress(fn) |
onkeyup键盘按键弹起 |
keyup(fn) |
onmousedown鼠标按键按下 |
mousedown(fn) |
onmouseup鼠标按键弹起 |
mouseup(fn) |
onmouseover鼠标移入 |
mouseover(fn) |
onmouseout鼠标移出 |
mouseout(fn) |
onmousemove鼠标移动 |
mousemove(fn) |
什么时候需要使用页面加载完成事件？
如果js功能代码，没有在页面的最后，而又需要在加载完成之后再执行：
建议把功能代码放到页面加载完成事件的响应行为里
小结
事件绑定与解绑
目标
- 掌握事件的解绑方式
讲解
API
on("事件名称", function(){})， 事件绑定的另外一种方式off("事件名称")，解绑事件，注意如果不指定事件名称，则会解绑该元素的所有事件。
示例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定与解绑title>
head>
<body>
<input type="button" value="点击弹窗" id="btn">
<script src="js/jquery-3.4.1.min.js">script>
<script>
//给#btn按钮绑定单击事件，单击弹窗
$("#btn").on("click", function(){
alert("鼠标点击了");
});
//单击事件被解绑了，所以点击#btn按钮，不再弹窗
$("#btn").off("click");
script>
body>
html>
小结
事件的多次绑定
-
单独定义
-
链式定义
<body> <div id="div">我是div</div> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> // 方式一 单独定义 $("#div").mouseover(function(){ //背景色：红色 $(this).css("background","red"); }); $("#div").mouseout(function(){ //背景色：蓝色 $(this).css("background","blue"); }); //方式二 链式定义 $("#div").mouseover(function(){ $(this).css("background","red"); }).mouseout(function(){ $(this).css("background","blue"); }); </script>
jquery遍历
方式四：for of语句
for(ele of 容器对象){
执行功能;
}
方式二：
容器对象.each(function(index,ele){
执行功能;
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍历</title>
</head>
<body>
<input type="button" id="btn" value="遍历列表项">
<ul>
<li>传智播客</li>
<li>黑马程序员</li>
<li>传智专修学院</li>
</ul>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//方式一：传统方式
/*
$("#btn").click(function(){
let lis = $("li");
for(let i = 0 ; i < lis.length; i++) {
alert(i + ":" + lis[i].innerHTML);
}
});
*/
//方式二：对象.each()方法
$("#btn").click(function(){
let lis = $("li");
lis.each(function(index,ele){
alert(index + ":" + ele.innerHTML);
});
});
//方式三：$.each()方法
/*
$("#btn").click(function(){
let lis = $("li");
$.each(lis,function(index,ele){
alert(index + ":" + ele.innerHTML);
});
});
*/
//方式四：for of 语句遍历//遍历后拿到的每个对象是js对象
$("#btn").click(function(){
let lis = $("li");
for(ele of lis){
alert(ele.innerHTML);
}
});
</script>
</html>
六、练习：省市联动
目标
- 实现省、市联动效果
实现
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<select id="province">
<option value="">--选择省--option>
<option value="0">河南省option>
<option value="1">河北省option>
<option value="2">山东省option>
<option value="3">山西省option>
select>
<select id="city">
<option value="">--选择市--option>
select>
<script type="text/javascript" src="js/jquery-3.3.1.js" >script>
<script type="text/javascript">
let cities = [
["郑州市","洛阳市","开封市"],//cities[0]---河南省的市
["石家庄市","保定市","唐山市"],//cities[1]---河北省的市
["济南市","烟台市","青岛市"],//cities[2]---山东省的市
["太原市","晋中市","临汾市"]//cities[3]---山西省的市
];
/*
* 省市联动：
* 选择一个省，在市的下拉框里列出来这个省对应的市的选项
*
* 当省下拉框变化时，用onchange事件
*
* 把市下拉框中的选项，只保留一个提示选项，其它都不要
* 获取到选中的省的值，根据省的值获取到 这个省的所有市的数据
* 循环所有的市，每个市创建一个option标签，把市放到option标签里
* 把每个option标签对象都插入到city下拉框里
*/
$("#province").change(function(){
//清除掉city里原有的下拉选项，留一个提示选项
$("#city").html("");
//获取到省的值，根据省获取市的数据
let cityArr = cities[this.value];//字符串数组
for(let city of cityArr){
//创建标签，把当前市的名称设置到option标签里
$("").html(city).appendTo("#city");
}
});
script>
body>
html>