web前端（Jquery框架）
2024-06-26 19:12:26
Jquery框架
- Jquery概述
- 简介
- 自定义JS框架
- Jquery基础语法
- HTML引入Jquery
- jQuery与JS区别
- Jquery选择器
- 基本选择器
- 层级关系选择器
- 属性选择器
- 过滤选择器
- 对象遍历
- Jquery的DOM操作
- Jquery操作内容
- Jquery操作属性
- Jquery操作样式
- Jquery操作元素
- Jquery事件绑定
- 示例
- 隔行换色
- 商品全选
- QQ表情
Jquery概述
简介
jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。
特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。
jQuery下载和版本介绍
官网地址：http://jquery.com
注意事项：如果公司使用的老版本插件，jq升级后，可能会让插件失效…
* jquery-x.js 开发版本：有良好的缩进格式和注释，方便开发者阅读* jquery-x.min.js 生产版本：代码进行压缩，体积小方便网络传输 (minimum: 最小, 能不空格就不空格,变量名能用一个字母表示就不会写两个字母)-- 以上两个版本在开发时,无论导入哪一个是没有区别
小结：jq本质上就是js的一个类库文件，我们使用它时，进行引入，就可以简化代码
自定义JS框架
框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。
xxx.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">xxxxxxx</div><script>// 通过js原生的方式// document.getElementById('myDiv').innerHTML='js修改的内容';// jQuery('myDiv').innerHTML='js修改的内容';$('myDiv').innerHTML='自定义js文件';</script>
</body>
</html>
Jquery基础语法
HTML引入Jquery
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>引入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">xxxxxx</div><script >// 要比js简洁很多$("#myDiv").text("重置了")//跟上面效果一样document.getElementById("myDiv").innerText = "重置了"
</script>
</body>
</html>
jQuery与JS区别
jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。两者的关系与区别总结如下：
1. jQuery对象与js对象相互转换js --> jq$(js对象) 或者 jQuery(js对象)jq --> jsjq对象[索引] 或者 jq对象.get(索引)
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>对象相互转换</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><div id="myDiv">div1</div><div>div2</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 = "xx" // 不行的// document.querySelectorAll("div").text("xx") // 不行的$("div")[0].innerText = "xx1" // 可以的 , 推荐$("div").get(1).innerText = "xx2" // 可以的let jsObj = document.querySelectorAll("div")$(jsObj).text("xx3") // 可以的,推荐jQuery(jsObj).text("xx4")</script>
</body>
</html>
2. 页面加载事件jswindow.οnlοad=function(){}jq$(function(){})区别js：只能定义一次，如果定义多次，后加载会进行覆盖jq：可以定义多次
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>页面加载事件</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("xx2") // 直接写效果/* window.onload = function () { //回调函数 callback function$("#myDiv1").text("xx1")}*///window.onload 重复赋值,以后一个为准/* window.onload = function () {$("#myDiv2").text("xx2")}*/</script><script>/* let fn = function () {$("#myDiv1").text("xx1")}$(fn)*/$(function () {$("#myDiv1").text("xx1")})$(function () {$("#myDiv2").text("xx2")})</script>
</head>
<body><div id="myDiv1">xx1</div><div id="myDiv2">xx2</div><!-- <script>$("#myDiv").text("xx")</script>-->
</body>
</html>
Jquery选择器
基本选择器
1. 标签（元素）选择器* 语法：$("html标签名") 获得所有匹配标签名称的元素2. id选择器* 语法：$("#id的属性值") 获得与指定id属性值匹配的元素3. 类选择器* 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>基本选择器</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">xxxx</span> <br>
<span class="female">xxxx</span> <br>
<span class="female hero">xxxx</span> <br><span class="male hero">xxx</span> <br>
<span class="male hero">xxx</span> <br><span id="boss">xxx</span> <br><script>// 1.获取span标签的jquery对象// $("span").text("xx")// 2.获取class有hero的jquery对象$(".hero").text("xx2")// 3.获得id="boss"的jquery对象$("#boss").text("xx3")
</script>
</body>
</html>
层级关系选择器
1. 后代选择器* 语法：$("A B") 选择A元素内部的所有B元素2. 并集选择器* 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>层级关系选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="xxx"><span>儿子：xxx</span><p><span>孙子：xxx</span></p>
</div>
<div id="nd">aaa</div><script>/** 1. 后代选择器* 语法：$("A B") 选择A元素内部的所有B元素(多层级)$("A>B") 单层级2. 并集选择器* 语法：$("选择器1,选择器2....") 获取多个选择器选中的所有元素* */// 获取div中所有的pan// $("div span").text("xx")// 获取div中的一级子标签span$("#xxx>span").text("xx")//p下的span 和 id=nd 的标签被选中// $("p span,#nd").text("xxx2")</script>
</body>
</html>
属性选择器
1. 属性选择器* 语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器2. 复合属性选择器* 语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>属性选择器</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>
过滤选择器
获得所有的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>过滤选择器</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul><li>xxx</li><li>xxxx</li><li>xxxxx</li><li>xxxxxx</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>
对象遍历
* 语法：jq对象.each(function(index,element){})
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>对象遍历</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><!--jquery对象的遍历 (只能jquery对象使用)$.each() 用法示例--><ul id="city"><li>xx</li><li>xx</li><li>xx</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操作
Jquery操作内容
1. text(): 获取/设置元素的标签体纯文本内容* 相当于js： innerText属性2. html(): 获取/设置元素的标签体超文本内容* 相当于js： innerHTML属性
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>dom操作内容</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body><div id="myDiv"><span>xxxxx</span> <br><span>xxxxx</span></div><script>/** 1. text(): 获取/设置元素的标签体纯文本内容* 相当于js： innerText属性2. html(): 获取/设置元素的标签体超文本内容* 相当于js： innerHTML属性*以text为例:0. jquery的dom操作 : 因为jquery对象是集合, 通常是批量操作1. text() : 获取 getInnerText()--> 返回的内容不是数组,是多个字符串拼接2. text(参数) : 设置 setInnerText(参数)* */// $("span").text("xxx")let content = $("span").text()console.log(content)// $("span").text("<a href='#'>xx</a>")$("span").html("<a href='#'>xx</a>")</script>
</body>
</html>
Jquery操作属性
1. val()： 获取/设置元素的value属性值* 相当于：js对象.value2. 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>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="xxx"/> <br/>爱好<input id="hobby" type="checkbox" name="hobby" value="perm" checked="checked">xx<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 = "xxxx"*/// jquery方式获取和设置valuelet value = $("#username").val()console.log(value)$("#username").val("xxxx")
</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>
Jquery操作样式
1. 直接修改jq对象样式属性语法：jq对象.css()css(样式名) 获取css(样式名,样式值) 设置优点：支持css语法举例：font-size2. 添加/删除jq对象样式语法：jq对象.addClass()jq对象.removeClass()3. 切换jq对象样式语法：jq对象.toggleClass() 切换样式
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>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">设置一个css样式</p>
<p id="p2">批量设置css样式</p>
<p id="p3">通过class设置样式</p>
<p id="p4"><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>
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>dom操作元素</title><script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star"><li>xxxx</li><li>xxxx</li>
</ul><ul><li id="single">xx1</li><li >xx2</li></ul>
<script>/** 1. $(标签) 创建一个标签$('<li>xxx</li>')2. $.prepend(标签对象) 在父标签中将子标签放在第一个位置3. $.append(标签对象) 在父标签中将子标签放在最后一个位置4. $.empty() 清空子元素5. $.remove() 删除自己 * */// let $star = $('#star'); // 无序列表// let liTag = $('<li>xx</li>')// $star.prepend(liTag)$('#star').prepend( $('<li>xx1</li>') ) //子标签是新建$('#star').append( $('<li>xx2</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>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() 提交按钮被点击。
示例
隔行换色
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>隔行变色</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>商品全选
<!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>
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("xx")//this : 哪个img触发了点击事件,this就是这张img(js对象)//坑: 如果是已存在的标签,被append会被剪切// $("#word").append(this)let img = $(this).clone()$("#word").append(img)})</script>
</body>
</html>
web前端（Jquery框架）相关推荐
- Web前端主流框架有哪些？哪种比较好？一文带你搞懂！
最近在某乎上看到这样一个问题--前端为什么会越来越复杂. 在评论中,看到一个回答,大意是这样的:相对于后端来说,前端的发展路径更容易分叉,总要有一种新的方法去解决一个新的问题.随着用户审美的提高,对产 ...
- Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
- 2014年最受欢迎WEB前端UI框架
2014年已经过了一半,WEB前端受到更多人的观注,WEB前端也已经逐渐成为一种职业头衔! 相应的WEB前端UI框架更是受到新人追捧,下边为大家列出目前最受欢迎.最优秀的前端框架以供大家选择一款适合自 ...
- web前端开源框架_9个用于前端Web开发的开源CSS框架
web前端开源框架 当大多数人想到Web开发时,通常会想到HTML或JavaScript. 他们通常会忘记对访问网站的能力有更大影响的技术: 级联样式表(CSS) . 根据Wikipedia的说法,C ...
- JQuery Web前端JAVAscript 框架大全
JQuery -JAVAscript库 JQuery简介: JQUery可以通过一行简单的标记被添加到网页中. 什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是 ...
- 腾讯Web前端JX框架入门教程(一)
什么是JX框架 JX框架(Javascript eXtension tools)是模块化的非侵入式Web前端框架,适用于Web Page和Web App项目的开发,特别适合构建和组织大规模.工业级的W ...
- web前端常用框架总结
web框架 目前主流的 JavaScript 框架排名中,jQuery 和 Ext 可算是佼佼者,获得了用户的广泛好评.国内的一些框架很多也是仿照 jQuery 对 JavaScript 进行了包装, ...
- web前端技术框架选型参考
一.出发点 随着Web技术的不断发展,前端架构框架.UI框架.构建工具.CSS预处理等层出不穷,各有千秋.太多的框架在形成初期,都曾在web领域 掀起过一场技术浪潮,可有些却仅仅是昙花一现,随着他们用 ...
- Web前端——jQuery库
Web前端笔记 第七部分:jQuery 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库 ...
- Web安全-JQuery框架XSS漏洞浅析
文章目录 框架简介 漏洞检测 漏洞复现 漏洞简述 漏洞分析 复现过程 修复建议 新版漏洞 漏洞复现 漏洞原理 修复方案 漏洞验证 框架简介 jQuery是一个快速.简洁的JavaScript框架,是一 ...
最新文章
- JUC系列(十一) | Java 8 CompletableFuture 异步编程
- 为什么relativelayout.layoutParams的width为-1
- C++回调机制的几种实现方式
- Leetcode No.146 ****
- 美团服务体验平台对接业务数据的最佳实践-海盗中间件
- devops测试_使用DevOps管道自动执行用户验收测试
- 存量累计超20亿部“宁闲不卖”如何“唤醒”依旧有经济价值的旧手机？
- Windows安全加固系列
- vb webbrowser html源码,VB WebBrowser控件常用源码
- 华为网络设备-FTP文件传输
- Ubuntu20.04、22.04安装nvidia显卡驱动——超详细、最简单
- DOS专题之基本命令
- java实现订单轨迹_B端零售业：订单轨迹日志功能设计思考
- 服务器硬盘上面的12gb和6gb的区别,4GB和6GB有什么区别？看完千万别买错，已有多人后悔！...
- 怎么设置CAD多段线线宽？CAD多段线线宽设置技巧
- 从php角度分析预防xss和Sql注入
- linux设置用户的执行权限,Linux下ACL权限控制以及用sudo设置用户对命令的执行权限...
- CPU 运行频率监控
- 从拜占庭将军问题到分布式系统的一致性
- 电压放大器原理（电压放大器适用于什么场合使用）
热门文章
- linux 上plsql命令_Linux环境Oracle常用命令
- gearman java例子_GearMan Java版试用 02- 简单应用之Worker编写和说明
- python标准库math中用来实现上取整_python中取整
- js判断元素是否隐藏
- 信息学奥赛一本通 1239：统计数字 | 1847：【07NOIP提高组】统计数字 | OpenJudge NOI 2.4 7909 | 洛谷 P1097 [NOIP2007 提高组] 统计数字
- 10年前被删的初恋，凌晨1点突然加我…
- JAVA_SE_Day05
- 自制炒股盯盘神器——python实现GUI版本
- Linux/Win/MacOS系统 安装JDK（Java）教程，JDK下载
- JAVA毕设项目漫画网站系统（java+VUE+Mybatis+Maven+Mysql）