JQuery框架
一 Jquery概述
1.1 简介
jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。
特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。
jQuery下载和版本介绍
官网地址：http://jquery.com
注意事项：如果公司使用的老版本插件，我们jq升级后，可能会让插件失效…
* jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读
* jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输 (minimum: 最小,
* 能不空格就不空格,变量名能用一个字母表示就不会写两个字母)
-- 以上两个版本在开发时,无论导入哪一个是没有区别
* 我们今天使用的 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>
<!--
在html中使用jquery的api,一定要记得先导入jquery文件(js)
1. jquery的版本(1.x , 2.x, 3.x 注意高版本不兼容老浏览器)
2. jquery是js封装的框架(js文件)
a. 带min : 生产版, 比较简洁
b. 不带min : 开发版, 阅读性好,但是文件大
3. 使用jquery,一定要记得先导入
-->
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="myDiv">世界上最远的距离，是我在if里你在else里，虽然经常一起出现，但却永不结伴执行。</div>
<script >
// 要比js简洁很多
$("#myDiv").text("重置了")
//跟上面效果一样
document.getElementById("myDiv").innerText = "重置了"
</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(索引)
源生js foreach方法，(e,i)先元素，再索引
Jq each方法 先（i，e）先索引再元素
<!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</div>
<div>第二个div</div>
<script>
/*
* jquery的对象获取:
* 1. jquery对象 = $("选择器") -> 推荐!!!
* 2. jquery对象 = jQuery("选择器")
*
* 重要理解:
* 1. jquery对象对js来说, 看成是数组
* 2. jquery的api, 可以批量操作
* 比如 jquery对象.text() 函数的底层是 遍历+ innerText
*
* 快捷键: iter -> for of循环
* */
// console.log($("div"));
// console.log(jQuery("div"));
// $("div").text("重置文本1")
/*let arr = $("#myDiv")
for (let element of arr) {
element.innerText = "重置文本2"
}*/
</script>
<script>
/*
* jquery对象和js对象的转换
* 1. 对象的理解
* a. jquery对象 : 用jquery的api获取的对象 (在js中,当一个数组)
* b. js对象: 用js的api获取的对象
*
* 2. 为什么要进行转换?
* jquery对象不能使用js的方法(js对象也无法使用jquery的api)
* 不能混用
*
* 3. 转换
* a. jquery对象 -> js对象
* jquery对象[index] ---- 推荐
* jquery对象.get(index)
*
* b. js对象 -> jquery对象
* $(js对象) --- 推荐
* jQuery(js对象)
*
* */
// $("div").innerText = "哈哈" // 不行的
// document.querySelectorAll("div").text("嘻嘻") // 不行的
$("div")[0].innerText = "哈哈1" // 可以的 , 推荐
$("div").get(1).innerText = "哈哈2" // 可以的
let jsObj = document.querySelectorAll("div")
$(jsObj).text("哈哈3") // 可以的,推荐
jQuery(jsObj).text("哈哈4")
</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>
<!--
#script标签放在body标签之前
问题: js代码没有效果了?
原来:
通过id选择器找到标签元素, 然后设置内部文本
原因:
1. 浏览器加载html页面,从上至下加载
2. 当浏览器加载到这个script的时候,body内的标签还没加载,
所以$("#myDiv")找不到 对应的元素
这也是为什么之前推荐script标签写在body标签的底层!!
需求: 我就是要把script标签写在body标签之前
解决:
window.onload : 页面加载事件 (当浏览器加载往整个html页面之后触发)
执行顺序: 从上至下, 当加载window.onload的时候,
因为后续html没加载完,所以事件不被触发,函数不执行
当整个html加载完(意味着标签已经都有了), 事件被触发, 函数执行(自然能找到)
jquery中的页面加载事件:
$(fn) : 页面加载事件
$(fn) 跟window.onload 不同的是, 可以使用多个,不覆盖
-->
<script>
// $("#myDiv").text("哈哈2") // 直接写效果
/* window.onload = function () { //回调函数 callback function
$("#myDiv1").text("哈哈1")
}*/
//window.onload 重复赋值,以后一个为准
/* window.onload = function () {
$("#myDiv2").text("哈哈2")
}*/
</script>
<script>
/* let fn = function () {
$("#myDiv1").text("哈哈1")
}
$(fn)
*/
$(function () {
$("#myDiv1").text("哈哈1")
})
$(function () {
$("#myDiv2").text("哈哈2")
})
</script>
</head>
<body>
<div id="myDiv1">嘻嘻1</div>
<div id="myDiv2">嘻嘻2</div>
<!-- <script>
$("#myDiv").text("哈哈")
</script>-->
</body>
</html>
三 Jquery选择器
3.1 基本选择器
-
标签（元素）选择器
* 语法：$(“html标签名”) 获得所有匹配标签名称的元素 -
id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素 -
类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-基本选择器</title>
<style>
#boss{
color: red;
}
.hero{
color: green;
}
span{
color: blue;
}
</style>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<span class="female">古力娜扎</span> <br>
<span class="female">迪丽热巴</span> <br>
<span class="female hero">黑寡妇</span> <br>
<span class="male hero">钢铁侠</span> <br>
<span class="male hero">超人</span> <br>
<span id="boss">灭霸</span> <br>
<script>
/*
* 1. 标签（元素）选择器
* 语法：$("html标签名") 获得所有匹配标签名称的元素
2. id选择器
* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素
3. 类选择器
* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
* */
// 1.获取span标签的jquery对象
// $("span").text("呵呵")
// 2.获取class有hero的jquery对象
$(".hero").text("呵呵2")
// 3.获得id="boss"的jquery对象
$("#boss").text("呵呵3")
</script>
</body>
</html>
3.2 层级关系选择器
-
后代选择器
* 语法：$(“A B”) 选择A元素内部的所有B元素 -
并集选择器
* 语法：$(“选择器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 id="nd">牛顿</div>
<script>
/*
* 1. 后代选择器
* 语法：$("A B") 选择A元素内部的所有B元素(多层级)
$("A>B") 单层级
2. 并集选择器
* 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素
* */
// 获取div中所有的pan
// $("div span").text("嘻嘻")
// 获取div中的一级子标签span
$("#kangxi>span").text("嘻嘻")
//p下的span 和 id=nd 的标签被选中
// $("p span,#nd").text("嘻嘻2")
</script>
</body>
</html>
3.3 属性选择器
-
属性选择器
* 语法：$(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器 -
复合属性选择器
* 语法：$(“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. 属性选择器
* 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
2. 复合属性选择器
* 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
* 与关系: 必须拥有列出来所有属性(不是满足其中一个)
* */
// 1.获取type='text'的input标签
let jqObj = $("input[type='text']")
console.log(jqObj);
// jquery对象当js数组,遍历出来的元素是js对象
for (let element of jqObj) {
console.log(element.value)
}
// 2.获取type='text' 且 name="nickname" 的input标签
let jqObj2 = $("input[type='text'][name='nickname']")
console.log(jqObj2);
</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){ })
this是js对象，需要先转化一下再用 $(this)
<!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对象的遍历 (只能jquery对象使用)
$.each() 用法示例
-->
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
</ul>
<script>
/*
* 普通for和增强for 通用
* */
// let arr = document.querySelectorAll("li") //js的获取
// let arr = $("li") // jquery的获取
/*for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}*/
/*for (let element of arr) {
console.log(element);
}*/
</script>
<script >
/*
* jquery对象的遍历 (只能jquery对象使用)
$.each(fn) 用法示例
fn = function (index,element) {
1. index(索引) 依次是 0 ~ 数组长度.length-1
2. element : 依次是数组每个元素 (js对象)
this : 依次是数组每个元素
}
* */
// let arr = $("li")
/*arr.each(function (index,element) {
// console.log(index + "->" + element.innerText)
console.log(index + "-->" + this.innerText)
})*/
/*$("li").each(function () {
console.log(this.innerText)
})*/
let arr = document.querySelectorAll("li")
// js对象转成jquery对象,就能调用jquery的api
$(arr).each(function (index,element) {
// console.log(index + "->" + element.innerText)
console.log(index + "-->" + this.innerText)
})
</script>
</body>
</html>
四 Jquery的DOM操作【重点】
4.1 Jquery操作内容
-
text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性 -
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">
<span>天王盖地虎</span> <br>
<span>小鸡炖蘑菇</span>
</div>
<script>
/*
* 1. text(): 获取/设置元素的标签体纯文本内容
* 相当于js： innerText属性
2. html(): 获取/设置元素的标签体超文本内容
* 相当于js： innerHTML属性
*
以text为例:
0. jquery的dom操作 : 因为jquery对象是集合, 通常是批量操作
1. text() : 获取 getInnerText()
--> 返回的内容不是数组,是多个字符串拼接
2. text(参数) : 设置 setInnerText(参数)
* */
// $("span").text("嘻嘻")
let content = $("span").text()
console.log(content)
// $("span").text("<a href='#'>嘻嘻</a>")
$("span").html("<a href='#'>嘻嘻</a>")
</script>
</body>
</html>
4.2 Jquery操作属性
-
val()： 获取/设置元素的value属性值
* 相当于：js对象.value -
attr(): 获取/设置元素的属性
removeAttr() 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute() -
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="checked">烫头<br/>
<input type="reset" value="重置按钮"/>
<input type="submit" value="提交按钮"/><br/>
</form>
<script>
/*
* 1. val()： 获取/设置元素的value属性值
* 相当于：js对象.value
* */
// js方式获取和设置value
/* let value = document.getElementById("username").value
console.log(value)
//这个执行的时候,页面已经加载往,所以源码不变
document.getElementById("username").value = "马尔扎哈"*/
// jquery方式获取和设置value
let value = $("#username").val()
console.log(value)
$("#username").val("古力娜扎")
</script>
<script>
/*
获取元素属性(属性单词: field,attribute,property)
* 2. attr(): 获取/设置元素的属性 (string属性)
removeAttr(属性名) 删除属性
* 相当于：js对象.setAttribute() / js对象.getAttribute()
3. prop():获取/设置元素的属性 (boolean 属性: 某种状态)
removeAttr() 删除属性
jq在1.6版本之后，提供另一组API prop 通常处理属性值为布尔类型操作
例如：checked selected等
规律:
attr(属性名) : 获取该属性名对应的值 -> value = map.get(key)
attr(属性名,属性值) : 设置 -> map.put(key,value)
* */
let result = $("#hobby").attr("name")
console.log(result)
$("#hobby").attr("name","hobby222")
$("#hobby"). removeAttr("name")
// js的状态表示(checked,selected = true/false)
// document.getElementById("hobby").checked = false
// $("#hobby").prop("checked",true) //设置boolean值的选中状态
console.log($("#hobby").prop("checked"))
</script>
</body>
</html>
4.3 Jquery操作样式
-
直接修改jq对象样式属性
语法：
jq对象.css()
css(样式名) 获取
css(样式名,样式值) 设置
优点：支持css语法
举例：font-size -
添加/删除jq对象样式
语法：
jq对象.addClass()
jq对象.removeClass() -
切换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: #ff0000;}
.mp {
color: green
}
.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>
/*
* 1. 直接修改jq对象样式属性 -> 行内样式
语法：
jq对象.css()
css(样式名) -> 获取 value = map.get(key)
css(样式名,样式值) -> 设置 map.put(key,value)
优点：支持css语法
样式名可以直接写小驼峰,也可以写css样式名
2. 添加/删除jq对象样式 -> 内部样式(优先级比较行内低)
语法：
jq对象.addClass("类选择器名字")
jq对象.removeClass("类选择器名字")
# 优先级高的会覆盖优先级低的,优先级一样的后写先覆盖先写
3. 切换jq对象样式
语法：
jq对象.toggleClass() 一下add,一下remove
* */
let $p1 = $('#p1');//获取p1
// let color= $p1.css("backgroundColor") //小驼峰可以
let color= $p1.css("background-color") //css样式也可以
console.log(color)
// $p1.css("backgroundColor","green")
// $p1.css("fontSize","30px")
//批量设置
$p1.css({"backgroundColor" : "yellow","fontSize": "20px"})
</script>
<script >
/*
* .mp {
color: green
}
.mpp {
background-color: lightgray;
}
* */
$("#p2").addClass("mp mpp") // 添加 类选择器样式
$("#p2").removeClass("mpp") // 移除
</script>
<script >
//js方式:给按钮注册点击事件
document.getElementById("toggle").onclick = function () {
$("#p3").toggleClass("mpp") //开关: 一下add 一下remove
// 底层会记录 运行次数, 奇数次执行add , 偶数次执行remove
}
</script>
</body>
</html>
4.4 Jquery操作元素
- $(标签) 创建一个标签
$('<li>xxx</li>')
-
$.prepend() 在父标签中将子标签放在第一个位置
-
$.append() 在父标签中将子标签放在最后一个位置
-
$.empty() 清空子元素 （断子绝孙脚）
-
$.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>
</ul>
<ul>
<li id="single">呼呼1</li>
<li >呼呼2</li>
</ul>
<script>
/*
* 1. $(标签) 创建一个标签
$('<li>xxx</li>')
2. $.prepend(标签对象) 在父标签中将子标签放在第一个位置
3. $.append(标签对象) 在父标签中将子标签放在最后一个位置
4. $.empty() 清空子元素 （杀儿子）
5. $.remove() 删除自己 （自杀）
* */
// let $star = $('#star'); // 无序列表
// let liTag = $('<li>哈哈</li>')
// $star.prepend(liTag)
$('#star').prepend( $('<li>哈哈1</li>') ) //子标签是新建
$('#star').append( $('<li>哈哈2</li>') )
//子标签在页面已存在 ,如果直接将这个子标签添加到另一个标签内部,原来就消失了
// $('#star').append( $("#single") )
//clone: 把已存在的标签复制一份
let copy = $("#single").clone() // 副本
$('#star').append( copy )
// $('#star').empty() // 清空所有子元素(本身在)
$('#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对象.事件属性=function(){}
*
jq对象.事件函数(function(){})
eg:
js.onclick = fn
js.onmouseover = fn
jq.click(fn) -> js的事件属性中的on去掉, 并且是函数
jq.mouseover(fn)
* */
document.getElementById("jsBtn").onclick = function () {
console.log("js按钮被点击了")
}
$("#jqBtn").click(function () {
console.log("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 隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>01-案例-隔行变色</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<th width="100px"><input type="checkbox">全/<input type="checkbox">反选</th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>5</td>
<td>牛奶制品</td>
<td>牛奶制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>6</td>
<td>大豆制品</td>
<td>大豆制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>7</td>
<td>海参制品</td>
<td>海参制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>8</td>
<td>羊绒制品</td>
<td>羊绒制品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>9</td>
<td>海洋产品</td>
<td>海洋产品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>10</td>
<td>奢侈用品</td>
<td>奢侈用品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script>
/*
* 隔行换色:
* 1. 先找到所有tr
* 2. 然后遍历, 奇数行设置绿色, 偶数行设置粉色
*
* jquery简练主要原因:
* 1. 方法名比较短
* 2. 方法支持批量操作,通常无需遍历
* */
// $("tr:odd").css("backgroundColor","green")
//tr标签 11个(0~10) -> gt(0)过滤出index>0 10个(0-9) -> odd(奇数)
$("tr:gt(0):odd").css("backgroundColor","pink")
/*
* 触摸换色
* */
let oldColor;
$("tr").mouseover(function () {
//this表示触发事件的标签 (js对象)
// this.style.backgroundColor = "yellow
// js对象 转成jquery对象,然后调用jquery的api
oldColor = $(this).css("backgroundColor") // 获取
$(this).css("backgroundColor","blue") // 设置
})
$("tr").mouseout(function () {
$(this).css("backgroundColor",oldColor)
})
</script>
</body>
</html>
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" checked>电脑
<input type="checkbox">手机
<input type="checkbox">汽车
<input type="checkbox" checked>别墅
<input type="checkbox" checked="checked">笔记本
<script >
/*
* 全选:
* 按钮点击的时候,事件触发
* 先找到所有checkbox, 设置每个的checked=true
* */
$("#btn1").click(function () {
// boolean类型的值用prop属性 (如果是string类型的属性值 attr)
$("input[type='checkbox']").prop("checked",true) //设置
})
$("#btn2").click(function () {
// 我们自己猜: [false,false,false,false,true]
// 实际上是数组中的第一个属性值 (坑!)
// var result = $("input[type='checkbox']").prop("checked") // 获取
// console.log(result)// jquery对象的获取(因为本身是个集合,获取的值很意外的)
/*
* 这一种推荐!
* */
/*var arr = $("input[type='checkbox']")
arr.each(function (index,element) {
//element : js对象
element.checked = !element.checked
})*/
/*
* 巧妙: 所谓反选,不就是把所有的复选框再重新点一遍吗
* jquery对象.click() : 会触发这个数组每个元素的点击事件
* */
$("input[type='checkbox']").click()
})
</script>
</body>
</html>
6.3 QQ表情
<!DOCTYPE html>
<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>
<script src="../js/jquery-3.2.1.min.js"></script>
</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 id="word">
<strong>请发言：</strong>
<img src="../img/12.gif" height="22" width="22" alt="" />
</p>
</div>
<script>
/*
* 事件: qq表情被点击的时候触发
* 哪个表情被点击就需要被添加到发言框中
* */
$(".emoji ul li img").click(function () {
// console.log("哈哈")
//this : 哪个img触发了点击事件,this就是这张img(js对象)
//坑: 如果是已存在的标签,被append会被剪切
// $("#word").append(this)
let img = $(this).clone()
$("#word").append(img)
})
</script>
</body>
</html>
6.4随机图片（挑老婆）
准备10张图片
按开始按钮，开始按钮不可用，结束按钮可用，10张图片跳
按结束按钮，结束按钮不可能用，开始按钮可用，大图的位置出现停止时小图的图片
<!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>
<!-- 小图 -->
<div style="background-color:red;border: dotted; height: 50px; width: 50px">
<img src="img/01.jpg" id="small" style="width: 50px; height: 50px;">
</div>
<!-- 大图 -->
<div style="border: double ;width: 400px; height: 400px; position: absolute; left: 500px; top:10px">
<img src="" id="big" style="width: 400px; height: 400px; display:none;">
</div>
<!-- 开始和结束按钮 -->
<input id="startBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="开始">
<input id="stopBtn" type="button" style="width: 150px;height: 150px; font-size: 20px" value="停止">
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.准备一个数组
let imgs = [
"img/01.jpg",
"img/02.jpg",
"img/03.jpg",
"img/04.jpg",
"img/05.jpg",
"img/06.jpg",
"img/07.jpg",
"img/08.jpg",
"img/09.jpg",
"img/10.jpg"];
let num=0;
let picture=null;
let time=null;
$("#startBtn").click(function(){
$("#startBtn").prop("disabled",true);
$("#stopBtn").prop("disabled",false);
time=setInterval(function(){
let index=num%imgs.length;
picture=imgs[index]
num++;
$("#small").prop("src",picture);
},50)
})
$("#stopBtn").click(function(){
clearInterval(time);
$("#startBtn").prop("disabled",false);
$("#stopBtn").prop("disabled",true);
$("#big").prop("src",picture).show();
})
</script>
</html>
七 在浏览器中调试代码(补充)
设置断点
注：设置断点以后要重新刷新页面才会在断点停下来
语法错误
总结
！！！！！！！！！学会查文档
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
