回顾
1. bom对象
window对象
三种弹框
alert()
confirm()
prompt()
二种定时器
一次性：setTimout() --- 通过递归实现循环性
循环性：setInterval()
location对象
location.href="新地址"
location.reload()
2. dom对象【重点】
获取元素
getElementById();
querySelectorAll();
操作内容
innerText=纯文本
innerHTML=超文本
操作属性
js对象.属性名
操作样式
js对象.className=css的类选择器 可实现解耦
操作元素
innerHTML=创建新的子标签
3. 正则表达式
表单校验
步骤
let reg=/正则规则/;
reg.test(用户输入的字符串);
合法：true
不合法：false
4. 综合案例
JQuery框架
今日目标
1. 什么框架？
2. jquery基础语法
js与jq区别【重点】
3. jquery选择器
4. jq的dom操作
5. jq的事件
6. 综合案例
一 Jquery概述
1.1 简介
jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。
特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。
jQuery下载和版本介绍
官网地址：http://jquery.com
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7vkTMe6Q-1586533674707)(assets/1586481624933.png)]
注意事项：如果公司使用的老版本插件，我们jq升级后，可能会让插件失效…
* jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读
* jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输
* 我们今天使用的 3.2.1
小结：jq本质上就是js的一个类库文件，我们使用它时，进行引入，就可以简化代码
1.2 自定义JS框架
框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。
感知jq前辈的强大之处
itcast.js
// 抽取获取id的方法
function jQuery(id) {
return document.getElementById(id);
}
// 简化名称方案
function $(id) {
return document.getElementById(id);
}
引入外部js文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>自定义js框架</title>
<script src="../js/itcast.js"></script>
</head>
<body>
<div id="myDiv">世界上最遥远的距离不是生与死，而是你亲手制造的BUG就在你眼前，你却怎么都找不到她。</div>
<script>
// 通过js原生的方式
// document.getElementById('myDiv').innerHTML='我是js修改的内容';
// jQuery('myDiv').innerHTML='我是js修改的内容';
$('myDiv').innerHTML='哈哈我是自定义js文件';
</script>
</body>
</html>
二 Jquery基础语法
2.1 HTML引入Jquery
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入Jquery</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离，是我在if里你在else里，虽然经常一起出现，但却永不结伴执行。</div>
<script>
// 获得div标签的jq对象
$('#myDiv').html('我是jq修改的内容')
</script>
</body>
</html>
2.2 jQuery与JS区别
jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：
1. jQuery对象与js对象相互转换
js --> jq
$(js对象) 或者 jQuery(js对象)
jq --> js
jq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-jq与js对象相互转换</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">通过不同方式获得文本内容</div>
<script>
// 通过js方式修改文本内容
let myDiv = document.getElementById('myDiv');
// myDiv.innerHTML='我是js方式修改的';
// 通过jq方式修改文本内容
let $myDiv = $('#myDiv');
// $myDiv.html('我是jq方式修改的')
// js对象和jq对象的：属性和方法不同通用
// myDiv.html('js操作jq函数');
// $myDiv.innerHTML='jq操作js属性';
// js -- 转换为 jq对象
// $(myDiv).html('js变成jq对象');
// jq 转换为 js对象 注意：jq对象本质上是数组，数组的每一个元素就是js原生对象
console.log($myDiv.length);
$myDiv[0].innerHTML='jq变成js对象';
</script>
</body>
</html>
2. 页面加载事件
js
window.οnlοad=function(){}
jq
$(function(){})
区别
js：只能定义一次，如果定义多次，后加载会进行覆盖
jq：可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-页面加载事件</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<script>
// js页面加载事件
/* window.οnlοad=function () {
alert('js加载事件1');
}
window.οnlοad=function () {
alert('js加载事件2');
}*/
// jq页面加载事件
$(function () {
alert('jq加载事件1')
})
$(function () {
alert('jq加载事件2')
})
</script>
</body>
</html>
三 Jquery选择器
3.1 基本选择器
1. 标签（元素）选择器
* 语法：$("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-基本选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>
<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>
<span id="boss">灭霸</span>
<script>
// 1.获取span标签的jquery对象
console.log($('span'));
// 2.获取class有hero的jquery对象
console.log($('.hero'));
// 3.获得id="boss"的jquery对象
console.log($('#boss'));
</script>
</body>
</html>
3.2 层级关系选择器
1. 后代选择器
* 语法：$("A B") 选择A元素内部的所有B元素
2. 并集选择器
* 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-层级关系选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="kangxi">
<span>儿子：雍正</span>
<p>
<span>孙子：乾隆</span>
</p>
</div>
<div>牛顿</div>
<script>
// 1. 获取所有的p,div的文本
console.log($('p,div').text());
// 2. 获取div的后代span的文本
console.log($('#kangxi span').text());
</script>
</body>
</html>
3.3 属性选择器
1. 属性选择器
* 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
2. 复合属性选择器
* 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>06-属性选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text" name="username" value="用户名"/><br/>
<input type="text" name="nickname" value="昵称"/><br/>
<script>
// 1.获取type='text'的input标签
console.log($('input[type="text"]'));
// 2.获取type='text' 且 name="nickname" 的input标签
console.log($('input[type="text"][name="nickname"]'));
</script>
</body>
</html>
3.4 过滤选择器
获得所有的li标签，在此基础上进行筛选过滤
1. 首元素选择器
* 语法： :first 获得选择的元素中的第一个元素
2. 尾元素选择器
* 语法： :last 获得选择的元素中的最后一个元素
3. 偶数选择器
* 语法： :even 偶数，从 0 开始计数
4. 奇数选择器
* 语法： :odd 奇数，从 0 开始计数
5. 指定索引选择器
* 语法： :eq(index) 指定索引元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-过滤选择器</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul>
<li>大娃（红娃）</li>
<li>二娃（橙娃）</li>
<li>三娃（黄娃）</li>
<li>四娃（绿娃）</li>
<li>五娃（青娃）</li>
<li>六娃（蓝娃）</li>
<li>七娃（紫娃）</li>
</ul>
<script>
// 1.获取第一个元素
console.log($('li:first').text());
// 2.获取偶数索引元素
console.log($('li:even').text());
// 3.获取指定索引2的元素
console.log($('li:eq(2)').text());
</script>
</body>
</html>
3.5 对象遍历
* 语法：
jq对象.each(function(index,element){
})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-对象遍历</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
jquery对象的遍历
$.each() 用法示例
-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
let lis = document.querySelectorAll('li');
// 普通for
for (let i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 增强for
for (let li of lis) {
console.log(li);
}
console.log('--------------------')
// jq的for循环
$('li').each(function (index, element) {
// console.log(index);
// console.log(element);
// console.log(element.innerHTML); // 遍历的元素是js对象
// console.log($(element).html()); // 升级为jq对象
// console.log(this); // 当前遍历的元素，相当于element 补充
})
</script>
</body>
</html>
四 Jquery的DOM操作【重点】
4.1 Jquery操作内容
1. text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性
2. html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-dom操作内容</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv"><p>天王盖地虎</p></div>
<script>
// 1.text()操作内容：innerText
// 1.1 获取纯文本内容
console.log($('#myDiv').text());
// 1.2 设置纯文本内容
$('#myDiv').text('<h1>小鸡炖蘑菇</h1>');
// 2.html()操作内容:innerHTML
// 2.1 获取超文本内容
console.log($('#myDiv').html());
// 2.2 设置超文本内容
$('#myDiv').html($('#myDiv').html()+ '<h1>宝塔镇河妖</h1>');
</script>
</body>
</html>
4.2 Jquery操作属性
1. val()： 获取/设置元素的value属性值
* 相当于：js对象.value
2. attr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute()
3. prop():获取/设置元素的属性
removeAttr() 删除属性
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-dom操作属性</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="#" method="get">
姓名 <input type="text" name="username" id="username" value="德玛西亚"/> <br/>
爱好
<input id="hobby" type="checkbox" name="hobby" value="perm" checked>烫头<br/>
<input type="reset" value="清空按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
// 1.获取文本框value属性
// 方式一：
/* console.log($('#username').attr('value')); // 查看
$('#username').attr('value','盖伦小王子'); // 新增 or 修改
$('#username').removeAttr('value'); // 删除*/
// 方式二： val() 只能给 value属性赋值
console.log($('#username').val()); // 查看
$('#username').val('人在塔在'); // 新增 or 修改
// 2.获取爱好的checked属性
/*
方式一：使用attr() 获取
选中返回：checked
未选中：undefined
*/
// console.log($('#hobby').attr('checked'));
/*
方式二：使用prop() 获取
jq在1.6之后，弥补了这个设计缺陷，如果该属性存在返回true，该属性不存在返回false
*/
console.log($('#hobby').prop('checked'));
</script>
</body>
</html>
4.3 Jquery操作样式
1. 直接修改jq对象样式属性
语法：
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
优点：支持css语法
举例：font-size
2. 添加/删除jq对象样式
语法：
jq对象.addClass()
jq对象.removeClass()
3. 切换jq对象样式
语法：
jq对象.toggleClass() 无添加，有删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>11-dom操作样式</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
#p1{ background-color: red;}
.mp {
color: green;
border: 2px double skyblue;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 批量设置css样式</p>
<p id="p3">3. 通过class设置样式</p>
<p id="p4">4. <button id="toggle">切换</button>class样式 </p>
<script>
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
let $p4 = $('#p4');//获取p4
// 0.获取第一个标签的背景色
console.log($p1.css('background-color'));
// 1. 设置一个css样式
$p1.css('background-color','gray');
// 2. 批量设置css样式
$p2.css({'border':'1px solid red','font-size':'20px'})
// 3. 通过class设置样式
$p3.addClass('mp mpp');
$p3.removeClass('mpp');
// 4. toggleClass() 切换一个class
$('#toggle').click(function () {
$p4.toggleClass('mp')
})
</script>
</body>
</html>
4.4 Jquery操作元素
1. $(标签) 创建一个标签
$('<li>xxx</li>')
2. $.prepend() 在父标签中将子标签放在第一个位置
3. $.append() 在父标签中将子标签放在最后一个位置
4. $.empty() 清空子元素 （断子绝孙脚）
5. $.remove() 删除自己 （满门抄斩）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>12-dom操作元素</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
<!-- <li>马尔扎哈</li>-->
<li>古力娜扎</li>
<li>迪丽热巴</li>
<!-- <li>萨瓦迪卡</li>-->
</ul>
<script>
let $star = $('#star'); // 无序列表
// 1.前面添加马尔扎哈
$('#star').prepend($('<li>马尔扎哈</li>'))
// 2.后面添加萨瓦迪卡
$('#star').append($('<li>萨瓦迪卡</li>'))
// 3.移出所有列表项
// $('#star').empty();
// 4.删除无序列表
$('#star').remove();
</script>
</body>
</html>
五 Jquery事件绑定
jQuery的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。
js对象.事件属性=function(){}
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-jq事件绑定</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="button" value="js方式" id="jsBtn"> <br>
<input type="button" value="jq方式" id="jqBtn"> <br>
<script>
// js事件绑定
document.getElementById('jsBtn').onclick=function () {
alert('js事件绑定')
}
// jq事件绑定
$('#jqBtn').click(function () {
alert('jq事件绑定')
})
</script>
</body>
</html>
常见事件
1. 点击事件：
1. click()：单击事件
2. dblclick()：双击事件
2. 焦点事件
1. blur()：失去焦点
2. focus():元素获得焦点。
3. 鼠标事件：
1. mousedown() 鼠标按钮被按下。
2. mouseup() 鼠标按键被松开。
3. mousemove() 鼠标被移动。
4. mouseover() 鼠标移到某元素之上。
5. mouseout() 鼠标从某元素移开。
4. 键盘事件：
1. keydown() 某个键盘按键被按下。
2. keyup() 某个键盘按键被松开。
3. keypress() 某个键盘按键被按下并松开。
5. 改变事件
1. change() 域的内容被改变。
6. 表单事件：
1. submit() 提交按钮被点击。
六 综合案例
6.1 隔行换色
<script>
// 奇数行
$('tr:even').css('background-color','lightgray');
// 偶数行
$('tr:odd').css('background-color','skyblue');
// 课下作业 实现解耦合...
</script>
6.2 商品全选
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>案例-商品全选</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--
商品全选
1. 全选 点击全选按钮,所有复选框都被选中
2. 反选 点击反选按钮,所有复选框状态取反
-->
<button id="btn1">1. 全选</button>
<button id="btn2">2. 反选</button>
<br/>
<input type="checkbox">电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox">别墅
<input type="checkbox" checked="checked">笔记本
<script >
// 全选
$('#btn1').click(function () {
$('input[type="checkbox"]').prop('checked',true);
})
// 反选，必须遍历才能实现
$('#btn2').click(function () {
$('input[type="checkbox"]').each(function (index,element) { // 注意：element
// js方式 推荐
// element.checked = ! element.checked;
// jq方式 比较麻烦 了解
$(element).prop('checked',!$(element).prop('checked'))
})
})
let str = '哈哈'+1+"呵呵";
let str = '<p align="center"></p>'
</script>
</body>
</html>
6.3 QQ表情
<script>
// 给所有的图片绑定点击事件
$('.emoji img').click(function () {
// this 表示当前 img标签
console.log(this);
$('#word').append($(this).clone())
})
</script>
617
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
