课程大纲
Blog链接：
JS语法基础：http://www.cnblogs.com/liwenzhou/p/8004649.html
BOM和DOM:http://www.cnblogs.com/liwenzhou/p/8011504.html
jQuery：http://www.cnblogs.com/liwenzhou/p/8178806.html
1. JavaScript
1. JS基础语法
1. 如何在网页中引入JS?
2. 变量
3. 数据类型
1. Number
2. String
3. Boolean
4. undefined
5. null
6. Object
4. 运算符
强等于 和 弱等于 *****
强等于： === 既判断值相不相等还判断类型相不相等
弱等于： == 只判断值相不相等
5. 流程控制
1. if else
2. while
3. for循环
4. switch
三元运算 *****
6. 函数 *****
1. 函数的定义（3种）
2. 函数的返回值和参数
3. 分析变量作用域
4. 词法分析（了解即可）
7. 对象
1. JSON.parse()/JSON.stringify() *****
2. RegExp ***** regObj.test()
2. BOM (browser object model)
1. location
2. setTimeout和clearTimeout
3. setInterval和clearInterval
3. DOM （document object model）
通过JS代码 操纵 HTML
1. 找标签
1. 基本查找
1. 通过标签名找
2. 通过ID找
3. 通过class类找
2. 做操作
1. 创建标签
document.createElement("p") *****
2. 修改标签的属性
1. 设置属性值：imgEle.setAttribute("属性", "具体的属性值")
2. 获取属性值：imgEle.getAttribute("id")
3. 删除属性： divEle.removeAttribute("age")
3. 修改标签的内容
4. 把标签插入文档树中
4. jQuery
类库，本质上就是JS文件，文件里面定义好了一些现成的方法，直接拿来用就可以了。
JS里面涉及到 DOM操作的时候，都要确保DOM树生成之后再执行。
1. 先导入
自己写的JS文件要放在jQuery引用的下面
2. jQuery查找标签
0. 注意：jQuery对象和DOM对象的区别
1. 基本选择器
1. ID
2. 标签
3. class
4. 配合使用 --> $("div.c1")
5. 所有元素选择器 --> $("*")
6. 组合选择器 --> $("div,p,.c1")
7. 层级选择器
1. 后代
2. 儿子
3. 毗邻
4. 弟弟
2. 基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
3. 属性选择器
$("input[type='checkbox']")
4. 表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
5. 表单状态选择器
:enabled
:disabled
:checked
:selected
6. 筛选器
1. 下一个
2. 上一个
3. 父标签
4. 儿子
5. 兄弟
6. 查找
3. 操作
1. 样式操作
1. 操作样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
2. 操作CSS属性
$("p").css("color", "red"); //将所有p标签的字体设置为红色
2. 位置
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
3. 文本操作
1. html
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
2. text
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
3. val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
4. 属性操作
1. 普通的文本属性
.attr()
2. checkbox和radio
.prop()
00JS引入示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS引入示例</title>
<!--<link rel="stylesheet" href="">-->
<style>
div {
color: red;
}
</style>
<script src="./00.js"></script>
<!--<script>-->
<!--alert("Hello s20 again!");-->
<!--</script>-->
</head>
<body>
</body>
</html>
/**
* Created by Administrator on 2018-03-17.
*/
alert("hello S20");
console.log(123);
// 单行注释
/*
多行注释
*/
// 声明变量
var name = "Alex";
var age = 9000;
var n = 11.11; // JS中只有一个数字类型
var a1 = [11, 22,33, 44, 55]; // 数组
var b1 = true;
var nnn;
// undefined; //声明变量但是没有赋值的时候；函数没有指定返回值时，默认返回的也是undefined
// null; // 多用在你手动把某个变量清空:b1 = null;
// 判断变量的数据类型
console.log(typeof a1);
// 变量命名规范
var $ = "下雪了！";
01DOM查找标签示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>查找标签示例</title>
</head>
<body>
<div id="d1">div</div>
<div id="d2">div</div>
<p class="c1 c2 c3">p标签</p>
<a class="c1" href="">a标签</a>
<div id="d3">
<p id="p1">d3内部的p标签</p>
<a href="">d3内部的a标签</a>
</div>
</body>
</html>
02获取值示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>获取值示例</title>
</head>
<body>
<form action="">
<p><label for="i1">用户名</label>
<input type="text" name="username" id="i1"></p>
<p>
<label for="i2">篮球</label>
<input value="basketball" type="checkbox" name="hobby" id="i2">
<label for="i22">足球</label>
<input value="football" type="checkbox" name="hobby" id="i22">
<label for="i222">双色球</label>
<input value="doublecolorball" type="checkbox" name="hobby" id="i222">
</p>
<p>
<label for="i3">男</label>
<input type="radio" name="gender" id="i3">
<label for="i4">女</label>
<input type="radio" name="gender" id="i4">
</p>
<p>
<label for="s1">从哪儿来</label>
<select name="from" id="s1">
<option value="shahe">沙河</option>
<option value="sanlitun">三里屯</option>
<option value="wudaokou">五道口</option>
<option value="wangjing">望京</option>
</select>
</p>
<label for="t1">个人简介</label>
<textarea name="info" id="t1" cols="30" rows="10">
</textarea>
</form>
</body>
</html>
03样式操作示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>样式操作示例</title>
<style>
.c1 {
height: 200px;
width: 200px;
background-color: red;
border-radius: 50%;
}
.c2 {
background-color: green;
}
</style>
</head>
<body>
<div id="d1" class="c1 c2" onclick="changeColor(this)"></div>
<div id="d2" class="c1 c2"></div>
<script>
function changeColor(ths) {
ths.classList.toggle("c2");
}
// 找到d2这个标签
var d2Ele = document.getElementById("d2");
d2Ele.onclick=function () {
// alert(123);
console.log(this); // 指的是当前触发事件的标签
d2Ele.style.background="blue";
d2Ele.innerText="我是d2标签";
}
</script>
</body>
</html>
04select联动示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>select联动</title>
</head>
<body>
<select id="s1">
<option>请选择省:</option>
</select>
<select id="s2">
<option>请选择市:</option>
</select>
<script>
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
var p = document.getElementById("s1");
var c = document.getElementById("s2");
// 将省市信息从数据库中提取出来，写到第一个select中
for (var i in data){
console.log(i);
// 创建option标签
var optionEle = document.createElement("option");
optionEle.innerText=i;
p.appendChild(optionEle);
}
// 给s1绑定事件，值发生变化触发的时间(onchange事件)
p.onchange=function () {
// 先清空c下面的option
c.innerHTML="";
// 取到用户选中的值
var pValue = this.options[this.selectedIndex].innerText;
var citys = data[pValue];
// 遍历数组
for (var i=0;i<citys.length;i++){
// 创建option标签
var optionEle = document.createElement("option");
optionEle.innerText=citys[i];
c.appendChild(optionEle);
}
}
</script>
</body>
</html>
05补充的z-index属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>补充的z-index属性</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #4d4d4d;
z-index: 998;
}
.modal {
height: 400px;
width: 600px;
margin-top: -200px;
margin-left: -300px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
05透明度相关属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>透明度相关属性</title>
<style>
.c {
height: 200px;
width: 200px;
}
.c1 {
/*background-color: red;*/
background-color: rgba(255,0,0,0.3); /*仅限于修改背景的透明度，子标签不会改变透明度*/
}
.c2 {
background-color: rgb(255,0,0);
opacity: 0.3; /*本身及子标签都会应用该透明的值*/
}
</style>
</head>
<body>
<div class="c c1">
<p>div内部的p标签</p>
</div>
<div class="c c2">
<p>div内部的p标签</p>
</div>
</body>
</html>
06jQuery导入示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery导入示例</title>
</head>
<body>
<div id="d1">111</div>
<p class="c2">p</p>
<div class="c1">c1</div>
<div class="c1 c2">c2</div>
<div id="d2">
<p>ppp</p>
</div>
<!--<script>-->
<!--var d1Ele = document.getElementById("d1");-->
<!--console.log(d1Ele);-->
<!--console.log(d1Ele.innerText);-->
<!--</script>-->
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>
</script>
</body>
</html>
07选择器和筛选器示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>选择器和筛选器示例</title>
</head>
<body>
<ul id="u1">
<li id="i1">001</li>
<li id="i2">002</li>
<li id="i3" class="c1">003</li>
<li id="i4">004</li>
<li id="i5" class="c1">005</li>
</ul>
<div><p>div中的p标签</p></div>
<div><a>div中的a标签</a></div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
08属性选择器示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>属性选择器示例</title>
</head>
<body>
<form action="">
<input type="text">
<input type="password">
<input type="email">
<input type="date">
<input type="checkbox">
<input name="gender" type="radio">
<input name="gender" type="radio">
<input type="submit">
</form>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
09Python链式操作示例
class Person(object):
def __init__(self, name, age):
self.name = name
self.age = age
def say(self):
print("旺旺~")
return self
def run(self):
print("哒哒~")
p = Person("Alex", 9000)
p.say().run()
# p.run()
10左侧菜单实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧菜单实例</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menu-title">菜单一</div>
<div class="menu-items hide">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<div class="menu-title">菜单二</div>
<div class="menu-items hide">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<div class="menu-title">菜单三</div>
<div class="menu-items hide">
<p>111</p>
<p>222</p>
<p>333</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 绑定事件，点击事件，给.menu-title绑定点击事件
// 1. 先找标签
var $titleEles = $(".menu-title");
$titleEles.on("click", function () {
// 2. 写事件触发之后要做的事儿
// 2.1 把我下面的子标签显示出来，具体就是removeClass("hide");
// console.log(this); // this指的是触发当前事件的标签,是DOM对象
$(this).next().toggleClass("hide");
// 2.2 把其他的.menu-items隐藏
$(this).next().siblings(".menu-items").addClass("hide");
});
</script>
</body>
</html>
11位置相关示例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例</title>
<style>
* {
margin: 0;
}
.c1,
.c2,
#d3{
height: 200px;
width: 200px;
}
.c1 {
background-color: red;
}
.c2 {
background-color: green;
position: relative;
left: 200px;
}
#d3 {
background-color: blue;
position: absolute;
left: 200px;
}
</style>
</head>
<body>
<div id="d1" class="c1"></div>
<div id="d2" class="c2">
<div id="d3"></div>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
12返回顶部示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 当屏幕滚轮向下滚动的时候就触发scroll事件
$(window).scroll(function () {
// 判断 window 距离屏幕顶部的距离是否大于100
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
// 点击返回顶部按钮的时候，让屏幕滚动到最上面
$(window).scrollTop(0);
})
</script>
</body>
</html>
13文本操作实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作实例</title>
</head>
<body>
<div id="d1">
<p>我是div中的p标签</p>
<a>我是div中的a标签</a>
</div>
<input id="i1" type="text">
<select name="" id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<textarea name="" id="t1" cols="30" rows="10"></textarea>
<p>
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
</p>
<p>
<label for="c3">篮球</label>
<input name="hobby" id="c3" type="checkbox" value="0">
<label for="c4">足球</label>
<input name="hobby" id="c4" type="checkbox" value="1">
<label for="c4">双色球</label>
<input name="hobby" id="c5" type="checkbox" value="2">
</p>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
14属性操作实例
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>属性操作实例</title>
</head>
<body>
<a id="a1" href="http://www.luffycity.com">点我直达！</a>
<input id="i1" type="checkbox">
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
15作业分解
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>本周作业分解</title>
</head>
<body>
<table id="t1" border="1">
<thead>
<th>序号</th>
<th>内容1</th>
<th>内容2</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="c1"></td>
<td>123</td>
<td>346</td>
</tr>
<tr>
<td><input type="checkbox" id="c2"></td>
<td>123</td>
<td>346</td>
</tr>
<tr>
<td><input type="checkbox" id="c3"></td>
<td>123</td>
<td>346</td>
</tr>
</tbody>
</table>
<input id="b1" type="button" value="全选" >
<input id="b2" type="button" value="反选" >
<input id="b3" type="button" value="取消" >
<script src="jquery-3.3.1.min.js"></script>
<script>
// 点击全选 把所有的checkbox设置成选中
// 找到全选按钮，给它绑定事件
// 事件处理函数中要做的事儿：
// 1. 找到所有的checkbox
// 2. 选中--> prop("checked", true)
// 取消
// 找到取消按钮，给它绑定事件
// 事件处理函数中要做的事儿：
// 1. 找到所有的checkbox
// 2. 选中--> prop("checked", false)
// 反选（根据checkbox不同的状态 来分别处理）
// 找到所有选中的，让它们取消选中
// 找到所有未选中的，让它们选中
</script>
</body>
</html>
浙公网安备 33010602011771号
点我返回顶部