JQuery框架

一 Jquery概述
- 1.1 简介
- 1.2 自定义JS框架
二 Jquery基础语法
- 2.1 HTML引入Jquery
- 2.2 jQuery与JS区别
三 Jquery选择器
- 3.1 基本选择器
- 3.2 层级关系选择器
- 3.3 属性选择器
- 3.4 过滤选择器
- 3.5 对象遍历
四 Jquery的DOM操作【重点】
- 4.1 Jquery操作内容
- 4.2 Jquery操作属性
- 4.3 Jquery操作样式
- 4.4 Jquery操作元素
五 Jquery事件绑定
六综合案例
- 6.1 隔行换色
- 6.2 商品全选
- 6.3 QQ表情
- 6.4随机图片（挑老婆）
七在浏览器中调试代码(补充)
总结

一 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 --> jsjq对象[索引] 或者 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. 页面加载事件jswindow.ο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-12. 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").valueconsole.log(value)//这个执行的时候,页面已经加载往,所以源码不变document.getElementById("username").value = "马尔扎哈"*/// jquery方式获取和设置valuelet 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 = fnjs.onmouseover  = fnjq.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的apioldColor = $(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>

七在浏览器中调试代码(补充)

设置断点

注：设置断点以后要重新刷新页面才会在断点停下来

语法错误

总结

！！！！！！！！！学会查文档

WebDay05 JQuery框架相关推荐

jQuery框架学习第二天：jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
web前端学习day_04:jQuery框架
jQuery框架作用:给页面添加动态效果(和js一样),目的是为了提高原生JavaScript代码的开发效率 jQuery就是一个通过js语言所以写的框架由于jQuery框架就是js语言所写,引入 ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
[转载]浅析jQuery框架与构造对象
浅析jQuery框架与构造对象这是一些分析jQuery框架的文字针对jQuery 1.3.2版本面向的读者应具备以下要求 1.非常熟悉HTML 2.非常熟悉javascript语法知识 3.熟悉 ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
jQuery框架的简单使用（H5）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>作业& ...
从零实现一个简易jQuery框架之一—jQuery框架概述
我们知道,不管学习任何一门框架,了解其设计的理念.目的.总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的.因此在这里先梳理一下本人对jQuery框架的一些理解. 设计目的(为什么要 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...

WebDay05 JQuery框架

JQuery框架

一 Jquery概述

1.1 简介

1.2 自定义JS框架

二 Jquery基础语法

2.1 HTML引入Jquery

2.2 jQuery与JS区别

三 Jquery选择器

3.1 基本选择器

3.2 层级关系选择器

3.3 属性选择器

3.4 过滤选择器

3.5 对象遍历

四 Jquery的DOM操作【重点】

4.1 Jquery操作内容

4.2 Jquery操作属性

4.3 Jquery操作样式

4.4 Jquery操作元素

五 Jquery事件绑定

六综合案例

6.1 隔行换色

6.2 商品全选

6.3 QQ表情

6.4随机图片（挑老婆）

七在浏览器中调试代码(补充)

总结

WebDay05 JQuery框架相关推荐

最新文章

热门文章

WebDay05 JQuery框架

JQuery框架

一 Jquery概述

1.1 简介

1.2 自定义JS框架

二 Jquery基础语法

2.1 HTML引入Jquery

2.2 jQuery与JS区别

三 Jquery选择器

3.1 基本选择器

3.2 层级关系选择器

3.3 属性选择器

3.4 过滤选择器

3.5 对象遍历

四 Jquery的DOM操作【重点】

4.1 Jquery操作内容

4.2 Jquery操作属性

4.3 Jquery操作样式

4.4 Jquery操作元素

五 Jquery事件绑定

六 综合案例

6.1 隔行换色

6.2 商品全选

6.3 QQ表情

6.4随机图片（挑老婆）

七 在浏览器中调试代码(补充)

总结

WebDay05 JQuery框架相关推荐

最新文章

热门文章

六综合案例

七在浏览器中调试代码(补充)