目录
如果使用ES6箭头函数，this指向的不是DOM，指向的是当前函数的调用者。
重点归纳
- JS库：JQuery
- JQuery中的语法
- 添加事件
- 操作属性
- 增删样式
知识点
JQuery的选择器
导入JS库
面试题：
导入的JS库中，带min的是运行环境，把换行、代码缩进都省略了，格式乱
不带min的是生产环境，能改，有注释
文档就绪函数
JQuery.js提供了一个文档就绪函数 $（JS也有）：当页面的文档部分加载完毕之后，要执行的函数
因为有文档就绪函数script可以在任何位置，意义不大，因为我们一般在后边写js
基本选择器
id选择器--------返回值固定的一个
类选择器--------返回值为一堆
标签选择器------返回值为一堆
*号选择器-------返回值为所有标签
层级选择器
div p-------div里的p，后代
div>p-------直接子元素
div+p-------相邻元素
过滤选择器
:first------------获取第一个元素
:last-------------获取最后一个元素
:eq(index)--------获取指定位置的元素
例：tr:eq(5)
:gt(index)--------获取大于指定位置
:it(index)--------获取小于指定元素
:not(selector)----获取除了selector以外的所有选择器
内容选择器
:empty-------匹配所有不包含子元素的选择器
:parent------含有子元素的父元素
属性选择器
[name]-----------包含name属性的选择器
[type=text]------所有属性是text的选择器
[type!=text]-----所有属性不是text的选择器
JQuery事件
先说JS的一个事情
window有一个事件onload：
window.onload----------窗口加载
面试题
1.文档就绪和窗口加载有什么区别？
window.onload比文档就绪的东西多，多了窗口边框（BON-DOM）
2.他们在什么时候触发？
(1) JQuery文档就绪函数在页面加载完之后触发，浏览器解析完HTML标签
window.onload除了要解析完HTML之外，还要解析引入的JS等,等到浏览器创建好DOM对象
(2) JQuery文档就绪可以执行多次
window.onload只能执行一次
用什么库抓对象就用这个库的语法，不能混用
例：用JQuery抓元素，只能用JQuery的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script src="./js/jquery-3.0.0.min.js"></script>
<script>
window.onload = function(){
alert("window1");
};
$(function(){
alert("JQuery1");
});
window.onload = function(){
alert("window2");
};
$(function(){
alert("JQuery2");
});
</script>
</body>
</html>添加事件
1.可以再标签加onclick()
(万能的方法，但low)
2.添加事件方法
click()------单击事件
blur()-------失去焦点事件
mouseover()--鼠标悬停事件
change()-----元素改变时发生的事件
......
几乎所有的事件都是方法
法一：$().click();（选择器.click();）
法二：addEventListener("","");
两种方法的前提条件：
除了live()事件，添加事件的标签必须真实存在于HTML的页面上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn1">按钮1</button>
<button id="btn2" onclick="fun()">按钮2</button>
<div id="btns"></div>
<script src=""></script>
<script>
$(() => {
$("#btn1").click(() => {
$("<button id='cr'>创建</button>").appendTo($("#btns"));
});
})
function fun() {
$("#cr").click(() => {
alert("cr");
});
};
</script>
</body>
</html>script标签只可以做一件事：
要么是导入js文件，要么写js代码
<script src="./js/jquery-1.9.1.js"></script>
<script> </script>添加元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 600px;
border: 1px solid;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<!--
script标签只可以做一件事：
要么是导入js文件，要么写js代码
-->
<div id="container">
<p id="p123">123</p>
</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
$(() => {
/*
appendTo():参数是一个元素
在xxx里的后面追加内容
prepareTo():在xxx里的前面追加内容
*/
$("<p>456</p>").appendTo($("#container"));
$("<p>789</p>").prependTo($("#container"));
//在div之外插入元素
$("<p>888</p>").insertAfter($("#container"));
$("<p>888</p>").insertBefore($("#container"));
// 替换元素：用一个元素替换已有的指定元素
$("#p123").replaceWith($("<p>456</p>"));
// 在元素的内部的后面追加
$("#container").append($("<p>100</p>"));
// 在元素的内部的前面追加
$("#container").prepend($("<p>200</p>"));
// 在元素的外部的后面追加
$("#container").after($("<p>5000</p>"));
// 在元素的外部的前面追加
$("#container").before($("<p>5000</p>"));
// 清空标签内所有内容
$("p").remove();
// 删除指定位置的内容
$("p:eq(0)").remove();
// 删除大于指定位置的内容
$("p:gt(5)").remove();
});
</script>
</body>
</html>操作属性
JQuery========JS:
1.html()========innerHTML
获取元素HTML
传参：添加元素
2.text()========innerText
获取文本
传参：添加文本
3.Val()=========input.Value
Val()函数除了可以获取文本值，还可以传参给文本框赋值，还可以操作单选框、复选框、下拉菜单的状态
4.attr()========两个参数setAttribute() / 一个参数getAttribute()
attr()拿不到动态变化的属性
例如：checked
prop()也是拿属性，可以一个参数拿状态，两个参数赋值状态，返回布尔值，拿没拿到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 600px;
border: 1px solid;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div id="div1">
<input type="text" id="username">
<input type="checkbox" id="swimming" value="swimming">游泳
<button id="checkAll">全选</button>
</div>
<script src="./js/jquery-1.9.1.js"></script>
<script>
$(() => {
// $("#div1").html("<p>123</p>");
// $("#div1").text("<p>456</p>");
// 赋值
$("#username").val("666");
$("#checkAll").click(() => {
$("#swimming").val("swimming");
// alert($("input[type=checkbox]").attr("value","sss"));
// alert($("input[type=checkbox]").attr("checked"));
alert($("input[type=checkbox]").prop("checked", true));
alert($("#sheng").prop("selected"));
});
});
</script>
</body>
</html>添加、删除、添加或删除样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
.f {
color: red;
font-size: 50px;
}
</style>
</head>
<body>
<!--
添加、删除、添加或删除样式
-->
<button id="addStyle">添加样式</button>
<button id="delStyle">删除样式</button>
<button id="toggleStyle">添加 / 删除样式</button>
<div id="div1">123123</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=> {
$("#addStyle").click(() => {
$("#div1").addClass("a f");
});
$("#delStyle").click(() => {
$("#div1").removeClass("a f");
});
$("#toggleStyle").click(() => {
$("#div1").toggleClass("a f");
});
})
</script>
</body>
</html>JQuery的遍历操作（this的使用）
each()：在遍历中会有一个this对象（this就是当前正在遍历的dom对象（dom对象就是一个JS对象，可以用JS语法））
each()不能用箭头函数（this指向问题），要用必须传参
参数一：index-----遍历元素的下标
参数二：？？？----当前正在遍历的项
this指向问题？
如果使用ES6箭头函数，this指向的不是DOM，指向的是当前函数的调用者。
练习
复选框问题：
有几个爱好的复选框，设置全选/全不选、反选等按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
你的爱好是？
<input type="checkbox" id="checkAll">全选 / 全不选
<br>
<br>
<input type="checkbox" id="soccer">足球
<input type="checkbox" id="basketball">篮球
<input type="checkbox" id="badminton">羽毛球
<input type="checkbox" id="ping-pong">乒乓球
<br>
<br>
<input type="button" value="全选" id="btn1">
<input type="button" value="全不选" id="btn2">
<input type="button" value="反选" id="btn3">
<script src="./js/jquery-1.9.1.js"></script>
<script>
$(() => {
$("#checkAll").click(() => {
if ($("#checkAll").prop("checked")) {
$("#soccer").prop("checked", true);
$("#basketball").prop("checked", true);
$("#badminton").prop("checked", true);
$("#ping-pong").prop("checked", true);
// $("#").val("");
// alert($("#sheng").prop("selected"));
} else {
$("#soccer").prop("checked", false);
$("#basketball").prop("checked", false);
$("#badminton").prop("checked", false);
$("#ping-pong").prop("checked", false);
}
});
$("#btn1").click(() => {
$("#soccer").prop("checked", true);
$("#basketball").prop("checked", true);
$("#badminton").prop("checked", true);
$("#ping-pong").prop("checked", true);
$("#checkAll").prop("checked", true);
});
$("#btn2").click(() => {
$("#soccer").prop("checked", false);
$("#basketball").prop("checked", false);
$("#badminton").prop("checked", false);
$("#ping-pong").prop("checked", false);
$("#checkAll").prop("checked", false);
});
$("#btn3").click(() => {
if ($("#soccer").prop("checked")) {
$("#soccer").prop("checked", false)
} else {
$("#soccer").prop("checked", true)
}
if ($("#basketball").prop("checked")) {
$("#basketball").prop("checked", false)
} else {
$("#basketball").prop("checked", true)
}
if ($("#badminton").prop("checked")) {
$("#badminton").prop("checked", false)
} else {
$("#badminton").prop("checked", true)
}
if ($("#ping-pong").prop("checked")) {
$("#ping-pong").prop("checked", false)
} else {
$("#ping-pong").prop("checked", true)
}
if ($("#soccer").prop("checked") &&
$("#basketball").prop("checked") &&
$("#badminton").prop("checked") &&
$("#ping-pong").prop("checked")) {
$("#checkAll").prop("checked", true);
} else {
$("#checkAll").prop("checked", false);
}
});
$("#soccer").click(() => {
fun();
});
$("#ping-pong").click(() => {
fun();
});
$("#basketball").click(() => {
fun();
});
$("#badminton").click(() => {
fun();
});
function fun() {
if ($("#ping-pong").prop("checked") &&
$("#basketball").prop("checked") &&
$("#badminton").prop("checked") &&
$("#soccer").prop("checked")) {
$("#checkAll").prop("checked", true);
} else if ($("#soccer").prop("checked") ||
$("#basketball").prop("checked") ||
$("#badminton").prop("checked") ||
$("#ping-pong").prop("checked")) {
$("#checkAll").prop("checked", false);
} else {
$("#checkAll").prop("checked", true);
}
}
});
</script>
</body>
</html>动画函数
1.隐藏、显示、隐藏或显示
可以传参：
第一个参数可能是动画时间
第二个是函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">隐藏 / 显示</button>
<div class="a" id="div1"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=>{
$("#btn1").click(() => {
$("#div1").hide(5000,() => {
alert("div已经隐藏了");
});
});
$("#btn2").click(() => {
$("#div1").show(5000);
});
$("#btn3").click(() => {
$("#div1").toggle();
});
});
</script>
</body>
</html>2.淡入、淡出、淡入或淡出、透明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<hr>
<button id="btn4">隐藏</button>
<button id="btn5">显示</button>
<button id="btn6">隐藏 / 显示</button>
<button id="btn7">透明</button>
<div class="a" id="div2"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=>{
$("#btn4").click(() => {
$("#div2").fadeOut(5000);
});
$("#btn5").click(() => {
$("#div2").fadeIn(5000);
});
$("#btn6").click(() => {
$("#div2").fadeToggle();
});
$("#btn7").click(() => {
$("#div2").fadeTo(1000,0.2);
})
});
</script>
</body>
</html>3.上拉、下拉（恢复）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<hr>
<button id="btn8">隐藏</button>
<button id="btn9">显示</button>
<button id="btn10">隐藏 / 显示</button>
<div class="a" id="div3"></div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(()=>{
$("#btn8").click(() => {
$("#div3").slideUp(5000);
});
$("#btn9").click(() => {
$("#div3").slideDown(5000);
});
$("#btn10").click(() => {
$("#div3").slideToggle();
});
});
</script>
</body>
</html>
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
