ECMAScript

就是JS的基本语法

定义变量 let 变量名 = 值;

运算符 ==和===的区别

定义循环

定义if语句

数组 let arr = [“”,””]; let arr = new Array(“”,””) push() pop()

函数 function 函数名(){} let 变量名 = function(){}

BOM

定时器

​ setTimeout(function(){},毫秒)

​ setInterval(function(){},毫秒)

地址对象

​ location.href 获取浏览器地址栏中的值

​ location.href=”http://www.baidu.com" 跳转到百度

历史记录

​ history.go(-1) 回退

​ history.go(1)前进

弹出确认框

​ let flag = confirm(“确定要删除吗”) 会弹出一个框,如果点击确定flag就是true,否则就是false

JQuery是什么

  • jQuery 是一个 JavaScript 库,或者说是JS的工具类
  • 所谓的库,就是一个 JS 文件,里面封装了很多预定义的函数,比如获取元素,执行隐藏、移动等,目的就 是在使用时直接调用,不需要再重复定义,这样就可以极大地简化了 JavaScript 编程。
  • jQuery 官网:https://www.jquery.com

JQuery快速入门

步骤

1.引入jquery.js

2.创建标签

3.编写js操作标签

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引入jquery.js -->
<script src="jquery-3.3.1.min.js"></script>

</head>
<body>
<!-- 创建两个div标签 -->
<div></div>
<hr>
<div></div>


<script>
//3.编写js操作标签
//jquery对象$(), 本质是一个数组,我们操作jquery对象就是操作数组中的每一个元素
$("div").css({
"background-color":"red",
"width":"100px",
"height":"100px",
"border":"1px solid black"
});
</script>
</body>
</html>

JQuery对象和JS原生对象的相互转换

jquery对象$(), 本质是一个数组,我们操作jquery对象就是操作数组中的每一个元素

把jquery对象转JS对象,就是通过索引取出元素

1
2
let jqObj = $("#div");
let jsObj = jqObj[0];

把js对象转换成jquery对象,使用$()包裹起来

1
2
let jsObj = "abc";
let jqObj = $(jsObj);

入口函数

结论:所有的代码都写到入口函数中,保证JS在页面DOM树加载完毕后运行

onload需要资源加载完毕才执行,入口函数在资源加载之前执行

onload只能绑定一次,入口函数可以写多个

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<h1>哈哈哈</h1>

<script>
//onload事件需要等dom元素加载完毕,并且资源也加载完毕才会执行,比如页面有很多个图片,要等图片加载完毕后才能执行。如果网速特别慢,那么需要等很久
window.onload = function(){
console.log($("h1"))
}

//入口函数$(function(){});以后把所有的代码都放到入口函数中。入口函数只需要等页面的标签加载完毕就能马上运行
$(function(){
console.log($("h1"))
});
</script>
</body>
</html>

绑定事件

使用on绑定事件,效率更高,并且可以给动态添加的元素绑定事件

格式: jq对象.on(“事件名”,function(){})

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<hr>
<div></div>

<script>
//通过jquery初始化div的样式
$("div").css({
"background-color":"red",
"width":"100px",
"height":"100px",
"border":"1px solid black"
});




//绑定事件 on('事件名',function(){}) 好处:效率高
$("div").on("mouseenter",function(){//鼠标移入
// this: 鼠标移入哪个div,this就表示哪个div,是一个原生的JS对象,使用$()变成jq对象,就可以调用jq对象的css方法
$(this).css({
"opacity":"0.5"
});
});

$("div").on("mouseleave",function(){
$(this).css({
"opacity":"1"
});
});



</script>
</body>
</html>

给动态添加的元素绑定事件

$(“父辈以上的标签”).on(‘事件名’,’真正要绑定事件的标签’,function(){})

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>

<ul>
<li>周星驰</li>
<li>貂蝉</li>
<li>乐公子</li>
</ul>
<input type="text" placeholder="请输入要添加的内容">
<button type="button">添加</button>

<script>
$(function(){
$("button").on('click',function(){
//获取表单数据,获取表单的值val(),这个方法专门用来获取input输入框的value属性的值,就是用户输入的值
let input = $(":text").val();

//创建li标签
let li = $("<li>"+input+"</li>")

//把li标签添加到ul标签中
$("ul").append(li);
});
})


$(function(){
//给动态添加的元素绑定单击事件
//$("父辈以上的标签").on('事件名','真正要绑定事件的标签',function(){})
$("html").on('click','li',function(){
let content = $(this).text();
alert(content);
});
});
</script>
</body>
</html>

遍历的5中方式

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
//重点掌握遍历方式1和遍历方式4
let arr = ["刘哲","崔乐","楚雄","阿威"];

/*遍历方式1:普通for循环*/
console.log("-----------------*遍历方式1:普通for循环--------------------");
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}

/*遍历方式2:增强for 使用 for..of*/
console.log("-----------------遍历方式2:增强for 使用 for..of-------------------");
for(let element of arr){//element表示数组中的元素
console.log(element);
}

/*遍历方式3:增强for 使用 for..in*/
console.log("-----------------遍历方式2:增强for 使用 for..in-------------------");
for(let index in arr){//index表示索引
console.log(arr[index]);
}

/*遍历方式4:调用jquery对象的each方法*/
console.log("-----------------*遍历方式4:调用jquery对象的each方法-------------------")
$(arr).each(function(index,element){//index表示索引从0开始,element表示元素 这两个是变量名,可以随便起
console.log(`索引是:${index},元素是:${element}`);
});

/*遍历方式5:调用jquery的静态each(要遍历的对象,function(索引,元素))方法*/
console.log("-----------------遍历方式5:调用jquery的静态each(要遍历的对象,function(索引,元素))方法--")
$.each(arr,function(index,element){
console.log(`索引是:${index},元素是:${element}`);
});
</script>
</body>
</html>

选择器

基本选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h1></h1>
<h1 class="c"></h1>
<h1 id="w">world</h1>


<script>
//$("选择器")
console.log($("h1"))//标签选择器,所有的h1标签都能获取到
console.log($(".c"))//类选择器,获取class="c" 的标签
console.log($("#w"))//ID选择器,获取id="w" 的标签
</script>
</body>
</html>

层级选择器

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>
<div>
<span>
<div>哈哈哈</div>
</span>
<span>
<div>嘿嘿嘿</div>
</span>
</div>
</h1>


<script>
//$("选择器")
console.log($("h1>div").length);//子元素选择器 表示把h1标签下的直接子元素div标签获取到,只能获取到1个
console.log($("h1 div").length);//子孙元素选择器 表示把h1标签下的所有的div标签都获取到,获取到3个
</script>
</body>
</html>

属性选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<h1 id="le">乐乐</h1>
<img src="xx.jpg" alt="xxx">
<input type="text">

<script>
//$("[属性名]") $("[属性名='属性值']")
console.log($("[id='le']"));//获取id属性的值为le的标签
console.log($("[src]"))//获取含有src属性的标签
console.log($("[src='xx.jpg']"));
console.log($("input[type='text']"))//获取type属性=text的input标签
</script>
</body>
</html>

过滤选择器

:first,:last,:eq(index),:even,:odd,:gt(index),:lt(index)

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div>第0个</div>
<div>第1个</div>
<div>第2个</div>
<div>第3个</div>
<div>第4个</div>
<div>第5个</div>
<div>第6个</div>
<div>第7个</div>

<script>
//$("选择器")
//获取第一个div
console.log($("div:first"));
//获取最后一个div
console.log($("div:last"));

//获取指定索引的div标签
console.log($("div:eq(5)"));

//获取索引为偶数的div
console.log($("div:even"));
//获取索引为奇数的div
console.log($("div:odd"));


//获取索引大于2的div,不包含2
console.log($("div:gt(2)"));
//获取索引小于2的div,不包含2
console.log($("div:lt(2)"));
</script>
</body>
</html>

表单和值选择器

表单选择器:获取type=指定值的input标签,格式 :type的值

值选择器:用来获取被选中的下拉框或者单选和复选框

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
47
48
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="">
帐号:<input type="text" placeholder="请输入用户名" name="username"> <br>
密码:<input type="password" placeholder="请输入密码" name="password"> <br>
性别: <input type="radio" name="gender" value="man" checked><input type="radio" name="gender" value="woman"><br>
爱好: <input type="checkbox" name="hobby" value="eat" checked><input type="checkbox" name="hobby" value="drink" checked><br>
所属村: <select name="town">
<option value="nmc">淖马村</option>
<option value="dmc" selected>大马村</option>
<option value="xmc">小马村</option>
</select>
</form>


<script>
$(function(){
//表单选择器,简化$("input[type='text']") 这个代码
console.log($(":text"));//等价于$("input[type='text']") 获取type属性等于text的input标签
console.log($(":password"))//获取type属性等于password的input标签
console.log($(":radio"));//获取到2个 获取type属性等于radio的input标签
console.log($(":checkbox"));//获取到2个 获取type属性等于checkbox的input标签


//值选择器:获取被选中的单选框、多选框、下拉框
//获取被选中的单选框 :checked
console.log("获取被选中的单选框")
console.log($(":radio:checked"));

//获取被选中的多选框 :checked
console.log("获取被选中的多选框")
console.log($(":checkbox:checked"));


//获取被选中的下拉框 :selected
console.log("获取被选中的下拉框")
console.log($("select>option:selected"));
});
</script>
</body>
</html>

DOM操作

操作标签内容

<div>内容</div>

操作文本内容 text()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>

<script>
//向div中插入纯文本内容,页面会显示 今天你中午吃了几碗面
$("div").text("今天你中午吃了几碗面");

//获取标签中的纯文本内容
let text = $("div").text();
console.log(text);
</script>
</body>
</html>

操作htm内容 html()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>

<script>
//向div中插入html代码
$("div").html("<h1>今天你中午吃了几碗面</h1>");

//获取div中的html代码
let html = $("div").html();
console.log(html);
</script>
</body>
</html>

标签的创建、添加、删除

创建: $("<标签>内容</标签>")

添加: 父dom对象.append(要添加的dom对象)

删除: dom对象.empty() 表示把当前标签中的内容清空 dom对象.remove()表示把自己干掉

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>



<ul>
<li>袜子</li>
<li>钱包</li>
<li>崔乐</li>
</ul>
<script>
//1.创建 一个h1标签,这就表示创建了一个dom对象 语法 $("<标签>内容</标签>")
let h1 = $("<h1>今天中午吃了几碗面</h1>")

//2.把创建好的h1标签添加到div标签中 语法 父dom对象.append(要添加的dom对象)
$("div").append(h1);


//3.删除
//把标签中的内容干掉,标签还在
$("ul").empty();

//把标签直接干掉
$("ul").remove();
</script>
</body>
</html>

操作标签的样式

操作style属性

设置

dom对象.css(“样式名”,”样式值”) //只能设置一个样式

dom对象.css({

​ “样式名1”:”值”,

​ “样式名2”:”值”…..

})//可以设置多个样式

获取

let 值= dom对象.css(“样式名”)

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<button type="button">点击设置样式</button> <button type="button">点击获取样式</button>

<script>
$(function(){
//设置样式
$("button:first").on('click',function(){
//以下方式只能一个一个的设置
// $("div").css("width","200px");
// $("div").css("height","200px");
// $("div").css("border","1px solid black");

//同时设置多个样式
$("div").css({
"width":"200px",
"height":"200px",
"background-color":"red"
});
});

//获取样式
$("button:last").on('click',function(){
//获取背景色
console.log($("div").css('background-color'));
//获取高度
console.log($("div").css('height'));
});
});
</script>
</body>
</html>

操作class属性

前提:页面中先得有样式,并且必须是类样式.xxx{}

添加类样式 dom对象.addClass('类样式')

删除类样式 dom对象.removeClass('类样式')

切换类样式 dom对象.toggleClass('类样式') 有就删除,没有就添加

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
.dv{
width: 200px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<div></div>

<button>添加类样式</button>
<button>删除类样式</button>
<button>切换类样式</button>

<script>
$(function(){
$("button:eq(0)").on('click',function(){
//找到div标签,添加类样式
$("div").addClass("dv")
});
$("button:eq(1)").on('click',function(){
//找到div标签,删除类样式
$("div").removeClass("dv")
});

$("button:eq(2)").on('click',function(){
//找到div标签,如果有dv样式,就删除,如果没有就添加
$("div").toggleClass("dv")
});

})
</script>
</body>
</html>

操作标签的属性

操作原始属性属性

操作原始属性 。原始属性就是W3C规范赋予的属性,比如超链接有href属性,那么href属性就是a标签的原始属性,href不是div标签的原始属性

获取prop(“属性名”)

设置prop(“属性名”,”属性值”)

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<a>百度</a>

<button>添加href属性</button>
<button>获取href属性</button>

<script>
$(function(){

$("button:first").on('click',function(){
//设置原始属性的值 prop("属性名","属性值")
$("a").prop("href","http://www.baidu.com");
});

$("button:last").on('click',function(){
//获取原始属性的值 prop("属性名")
console.log($("a").prop("href"));
});
});
</script>
</body>
</html>

操作自定义属性

一般情况自定义属性的名字建议以data-开头

设置 attr(“属性名”,”属性值”)

获取 attr(“属性名”)

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<a>百度</a>

<button>添加xx属性</button>
<button>获取xx属性</button>

<script>
$(function(){

$("button:first").on('click',function(){
//设置自定义属性的值 attr("属性名","属性值")
$("a").attr("data-xx","今天吃了两碗面");
});

$("button:last").on('click',function(){
//获取自定义属性的值 attr("属性名")
console.log($("a").attr("data-xx"));
});
});
</script>
</body>
</html>

获取表单中用户输入的值

表单标签有 普通文本输入框,密码框,单选框,复选框,下拉框。我们可以通过val()获取用户输入或者选中的值,也可以通过val(“值”) 设置值。本质是操作标签的value属性的值,一般获取用的比较多,这里只演示获取值

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="text" value="今天吃了2碗面">

<select name="" id="">
<option value="1">淖马村</option>
<option value="2">圪僚沟</option>
<option value="3">圪针沟</option>
</select>

<br>
<button>获取输入框中的值</button>
<br>
<button>获取下拉框选中的值</button>

<script>
$(function(){

$("button:eq(0)").on('click',function(){
//获取<input type="text">中用户输入的值
console.log($("input").val())
});


$("button:eq(3)").on('click',function(){
//获取下拉框选中的值
console.log($("select").val())
});

});
</script>
</body>
</html>

设置复选框的选中状态

通过js代码操作复选框的checked属性,设置true或者false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="checkbox">
<input type="checkbox">


<script>
$(function(){
//设置复选框处于选中状态 true表示选中 false表示不选中
$(":checkbox").prop("checked",true)
});
</script>
</body>
</html>

xmind思维导图总结

直链 : http://www.xmind.net/m/EFuHht