jQuery概述
什么是jQuery
jQuery是一款优秀的javascript的轻量级框架之一，封装了dom操作、事件绑定、Ajax等功能。
特别值得一提的是基于jQuery平台的插件非常丰富，大多数前端业务场景都有其封装好的工具可直接使用。
jQuery下载和版本介绍
官网地址：http://jquery.com
==注意事项==
如果公司使用的老版本插件，我们jq升级后，可能会让插件失效....
jQuery版本
-
jquery-x.js开发版本：有良好的缩进格式和注释，方便开发者阅读 -
jquery-x.min.js生产版本：代码进行压缩，体积小方便网络传输==注意事项==
在讲解过程中我们使用 3.2.1版本
框架（Framework）是完成某种功能的半成品，抽取重复繁琐的代码，提供简洁强大的方法实现。
jquery入门
<!-- 当前页面如果想使用jq，需要引入jq的库，通script标签中的src属性进行即可 -->
<script src="js/jquery-3.4.1.js"></script>
<script>
//我们的jq代码还是在script标签中书写，前提得有jq的库
//js原生版
window.onload = function(){
alert(666);
}
//jq版
jQuery(function(){
alert(888);
})
//jq简化写法1
$(document).ready(function(){
alert(999);
})
//jq简化写法2 推荐
$(function(){
//今后的jq代码都在这里书写
});
</script>
jq与js的页面加载的区别
语法
-
js
window.onload = 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>
</head>
<body>
<script>
// js页面加载
/* window.onload = function () {
alert("js页面加载事件1");
};
window.onload = function () {
alert("js页面加载事件2");
};*/
// jq页面加载
$(function(){
alert("jq页面加载事件1");
});
$(function(){
alert("jq页面加载事件2");
});
</script>
</body>
</html>
操作内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(function(){
//js原生写法
//var id = document.getElementById("mydiv").innerHTML;获取内容
var id = document.getElementById("mydiv").innerHTML='你是我的小饼干';
alert(id);
//jq通过#来拿到id
alert($("#mydiv").html());//获取内容
$("#mydiv").html("小甜心");//改变内容
});
</script>
</head>
<body>
<div id="mydiv">我爱你中国</div>
</body>
</html>
jq与js的转换
jQuery虽然本质上也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象而不是js对象。
通过js方式获取的是js对象，通过jQuery方式获取的是jQuery对象。
-
js 转 jq
$(js对象)
-
jq 转 js
jq对象[索引]
jq对象.get(索引)
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
//js写法
document.getElementById("mydiv").innerHTML="我是dom对象的修改";
//jq写法
$("#mydiv").html("我是jq对象的修改");
//js ---> jq
$(document.getElementById("mydiv")).html("js 转 jq");
//jq ---> js
//方式一
$("div")[0].innerHTML = "jq转成js方式一";
//方式二
$("div").get(1).innerHTML = "jq转成js方式二"
});
</script>
</head>
<body>
<div id="mydiv">1111</div>
<div id="mydiv">2222</div>
</body>
</html>
事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(function(){
//获取button标签
$("button").click(function(){
$("p").hide();//p会被隐藏标签
$("p").hide("slow");//用600毫秒的时间将段落缓慢的隐藏
});
});
</script>
</head>
<body>
<P>我爱你,我爱你江一燕</P>
<button type="button">点我啊</button>
</body>
</html>
解绑事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn" type="button">使用on绑定事件</button>
<button id="btn2" type="button">使用off解绑事件</button>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(function () {
//使用on绑定事件
$("#btn").on("click",function () {
alert("我被点击了。。")
})
//使用off解绑事件
$("#btn2").click(function () {
$("#btn").off("click");//解绑指定单击事件
$("#btn").off();//解绑所有事件
});
});
</script>
</body>
</html>
Jq循环
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(function () {
var arr =['a','b','c','d'];
$(arr).each(function(){
alert(this);//代表是当前引用对象， 用的是谁，this代表谁
});
});
</script>
Jq操作css样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>aaaaaaa</li>
<li>bbbbbbb</li>
<li>ccccccc</li>
</ul>
<script src="../js/jquery-3.2.1.js"></script>
<script>
$(function () {
$("li").mouseover(function () {
$(this).css("background","orange");
}).mouseout(function () {
$(this).css("background","white");
});
});
</script>
</body>
</html>
jQuery选择器
基本选择器
-
标签选择器（元素选择器）
语法： $("html标签名") 获得所有匹配标签名称的元素
-
id选择器
语法： $("#id的属性值") 获得与指定id属性值匹配的元素
-
类选择器
语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
-
并集选择器
语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素
<span class="female">古力娜扎</span> <span class="female" id="dlrb">迪丽热巴</span> <span class="female hero">黑人</span> <span class="male hero">钢铁侠</span> <span class="male hero">超人</span> <script src="js/jquery-3.4.1.js"></script> <script> //标签名选择器 var b = $("span"); $(b).each(function(){ console.info(this) }) //类选择器 var a = $(".female"); $(a).each(function(){ console.info(this) }) console.info( $(".female").text() ); //id选择器 console.info( $("#dlrb").text() ) //组合选择器 console.info( $("#dlrb , .male ").text() ) </script>
层级选择器
-
后代选择器
语法： $("A B ") 选择A元素内部的所有B元素
-
子选择器
语法： $("A > B") 选择A元素内部的所有B子元素
<div id="kangxi"> <span>儿子：雍正</span> <p> <span>孙子：乾隆</span> </p> </div> <div>牛顿</div> <script src="js/jquery-3.4.1.js"></script> <script> // 1.父子 console.info($("#kangxi > span").text() ); // 2.祖 后代 console.info($("div span").text()); //3.兄弟 console.info( $("div ~ div").text()); //4.跟班 console.info( $("span + p").text()); </script>
过滤器
属性过滤选择器
-
首元素选择器
语法： :first 获得选择的元素中的第一个元素
-
尾元素选择器
语法： :last 获得选择的元素中的最后一个元素
-
偶数选择器
语法： :even 偶数，从 0 开始计数
-
奇数选择器
语法： :odd 奇数，从 0 开始计数
-
等于索引选择器
语法： :eq(index) 指定索引元素
<h1>表格信息</h1> <h2>这是一张商品表</h2> <table border="1" width="600"> <tr> <th>商品编号</th> <th>商品名称</th> <th>售价</th> <th>数量</th> </tr> <tr> <td>001</td> <td>冰箱</td> <td>3000</td> <td>100</td> </tr> <tr> <td>002</td> <td>洗衣机</td> <td>2000</td> <td>50</td> </tr> <tr> <td>003</td> <td>热水器</td> <td>1500</td> <td>20</td> </tr> <tr> <td>004</td> <td>手机</td> <td>2188</td> <td>200</td> </tr> </table> <div>slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div> <div>fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div><script src="js/jquery-3.4.1.js"></script> <script> $(function(){ // 1．设置表格第一行，显示为红色 $("tr:first").css("background","red"); // 2．设置表格除第一行以外 显示为蓝色 $("tr:gt(0)").css("background","blue"); // 3．设置表格偶数行背景色 金色 $("tr:even").css("background","yellow"); // 4．设置表格奇数行背景色 绿色 $("tr:odd").css("background","green"); // 5．设置页面中所有标题 显示为灰色 $(":header").css("background","gray"); // 6．设置页面中正在执行动画效果div背景黄色 $("div").click(function () { $(this).slideUp("slow"); $("div:animated").css("background","green"); }); // 7. 设置<html>背景颜色为金色 $(":root").css("background-color","yellow"); }); </script>
内容过滤选择器
<div>今天是个晴天</div>
<div>明天要去人民公园a</div>
<div>
<span>JavaScript</span> 是网页开发中脚本技术
</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div>
<p>jQuery</p>
是 JavaScript一个 轻量级框架
</div>
<div></div>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
// 1．设置含有文本内容 ”公园” 的 div 的字体颜色为红色
$("div:contains('公园')").css("color","red");
// 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
$("div:empty").html("这是一个空的div").css("color","red");//空div找出来,写入
// 3．设置包含p元素 的 div 背景色为黄色
$("div:has(p)").css("background","yellow");//div中包含p
// 4．设置所有含有子元素的span字体为蓝色
$("span:parent").css("color","blue");//span是子元素
});
</script>
可见性过滤选择器
<form>
<input type="hidden" />
<input type="text" name="xxx" style="display: none;" />
</form>
<table>
<tr>
<td>洗衣机</td>
</tr>
<tr>
<td>热水器</td>
</tr>
<tr style="display: none">
<td>电冰箱</td>
</tr>
</table>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function(){
//1、选中from中不可见元素，添加class属性
//匹配所有display:none 或者 input中的 type:hidden 元素
$("form :hidden").attr("class","yanqi");
$("tr :hidden").attr("class","yanqi");
$("input:hidden").addClass("yanqi");//只能添加class属性
//2．设置table所有 可见 tr 背景色 金色
$("table tr:visible").css("background","yellow");
//3．设置table所有 隐藏tr 字体颜色为红色，显示出来
$("table tr:hidden").css("color","red").show();
});
</script>
属性选择器
-
属性名称选择器
语法： $("A[属性名]") 包含指定属性的选择器
-
属性选择器
语法： $("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/> <input type="password" name="password" value="密码"/><br/> <p class="p-yanqi">我是class="p-yanqi"</p> <script> // 1.获取type 的input标签 $("input[type]").attr("id","118"); // 2.获取type=“password”的input标签 $("input[type='password']").attr("autocomplete","off"); // 3.获取属性名以xx开始 $("p[class^='p']").css("color","green"); // 4.获取属性名以xx结尾 $("p[class$='2']").css("color","red"); // 5.属性值中包含的属性 $("input[type*='wo']").attr("abc","99"); // 6.获取 type ='text' 并且 name='nickname' 的标签 $("input[type='text'][name='nickname']").attr("value","一燕"); </script> </body> </html>
子元素过滤选择器
<table border="1" width="400" id="mytable">
<tr><td>1</td><td>冰箱</td></tr>
<tr><td>2</td><td>洗衣机</td></tr>
<tr><td>3</td><td>热水器</td></tr>
<tr><td>4</td><td>电饭锅</td></tr>
<tr><td>5</td><td>电磁炉</td></tr>
<tr><td>6</td><td>豆浆机</td></tr>
<tr><td>7</td><td>微波炉</td></tr>
<tr><td>8</td><td>电视</td></tr>
<tr><td>9</td><td>空调</td></tr>
<tr><td>10</td><td>收音机</td></tr>
<tr><td>11</td><td>排油烟机</td></tr>
<tr><td>12</td><td>加湿器</td></tr>
<tr><td>13 电暖气</td></tr>
</table>
<script src="js/jquery-3.4.1.js"></script>
<script>
$(function () {
// 1.在每个表格 下3的倍数行，字体颜色为红色 3 6 9 12
$("tr:nth-child(3n)").css("color","red");
// 2.每个表格 奇数行 背景色 黄色
$("tr:nth-child(odd)").css("background","yellow");
// 3.每个表格 偶数行 背景色 灰色
$("tr:nth-child(even)").css("background","gray");
// 4.每个tr 只有一个td的 字体为 蓝色
$("td:only-child").css("color","blue");
});
</script>
表单过滤选择器
<form action="#">
用户名 <input type="text" name="username" /><span id="span"></span> <br/>
密 码 <input type="password" name="password" /> <br/>
<input type="button" value="提交" />
</form>
<script src="js/jquery-3.4.1.js"></script>
<script>
// 1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
$(":text, :password").blur(function () {
var value = $(this).val();//获取输入框的值
if(value == ""){
$("#span").html("不能为空！");
}else{
$("#span").html("");
}
});
// 2．对button 添加 点击事件，提交form表单
$(":button").click(function () {
$("form").submit();
});
</script>
表单对象属性过滤选择器
-
可用元素选择器
语法： :enabled 获得可用元素
-
不可用元素选择器
语法： :disabled 获得不可用元素
-
选中选择器
语法： :checked 获得单选/复选框选中的元素
-
选中选择器
语法： :selected 获得下拉框选中的元素
<form> <input type="text" value="不可用值1" disabled="disabled"> <input type="text" value="可用值1"> 性别 <input type="radio" value="男" name="gender" checked="checked"/>男 <input type="radio" value="女" name="gender"/>女 <br/> 爱好 <input type="checkbox" value="体育" name="hobby"/> 体育 <input type="checkbox" value="读书" name="hobby" checked="checked"/> 读书 <input type="checkbox" value="音乐" name="hobby"/> 音乐 <input type="checkbox" value="绘画" name="hobby"/> 绘画 <br/> 城市 <select name="city" id="edu"> <option value="">请选择</option> <option value="北京">北京</option> <option value="上海" selected="selected">上海</option> <option value="天津">天津</option> </select> <br/> <input type="button" value="打印"/> </form> <script src="js/jquery-3.4.1.js"></script> <script> // 1. 获取可用的输入框 $("input[type='text']:enabled").attr("id","77"); // 2. 获取不可用的输入框 $("input[type='text']:disabled").attr("id","88"); // 3. 获取选中的复选框 $("input[type='checkbox']:checked").val(); // 4. 获取选中的下列选择框 $("#edu option:selected").val(); // 点击button 打印radio checkbox select 中选中项的值 $(":button").click(function () { //单选 alert( $("input[name='gender']:checked").val() ); //多选 $("input[name='hobby']:checked").each(function () { alert($(this).val()); }); //下拉 alert($("select option:selected").val()); }) </script>
对象遍历
语法
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>
/*
内置的两个参数：
index: 索引
element：遍历到的元素
*/
$("li").each(function(index,element){
//遍历索引
console.info(index);
//遍历元素
console.info(element);
//遍历元素中的数据
console.info( $(element).html() );
console.info( $(this).html() );
})
</script>
</body>
</html>
jQuery操作DOM
操作内容
相关方法
| 方法 | 描述 |
|---|---|
| text() | 获取/设置元素的标签体纯文本内容 |
| html() | 获取/设置元素的标签体超文本内容 |
代码演示
<!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、获取标签中内容,innerHTML 从开始标签 -- 结束中间所有内容
console.info( $("#myDiv").html() );
//2、设置标签中内容,直接把之前的所有内容替换掉
$("#myDiv").html("<h1>宝塔镇河妖</h1>");
//3、做拼接
$("#myDiv").html( $("#myDiv").html() + "<h1>宝塔镇河妖</h1>" );
//4、获取标签中的纯文本
console.info($("#myDiv").text());
//设置标签中的纯文本
$("#myDiv").text("小鸡炖蘑菇")
</script>
</body>
</html>
操作属性
相关方法
| 方法 | 描述 | 对比 |
|---|---|---|
| val() | 获取/设置元素的value属性值 | 相当于：js对象.value |
| attr() | 获取/设置元素的属性 | 相当于：js对象.setAttribute() / js对象.getAttribute() |
| removeAttr() | 删除属性 | |
| prop() | 获取/设置元素的属性 | |
| removeProp() | 删除属性 |
attr和prop区别
attr: 主要用于设置属性的值这一类的操作
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.获取文本框value属性
// 方式一:attr()
// 2.1 获取value属性
console.log($("#username").attr('type'));
// 2.2 新增or修改value属性值
$("#username").attr("class","username");
// 2.3 删除value属性
$("#username").removeAttr("value");
// 方式二: val()
// 获取属性值
console.log($("#username").val());
// 设置属性值
$("#username").val('哈哈哈~~');
// 2.获取爱好的checked属性
/*
方式一： attr
选中返回： checked
末选中返回: undefined
*/
console.log($("#hobby").attr('checked'));
/*
方式二：prop()
jq在1.6版本之后，弥补这个设计缺陷，如果该属性被选中返回true 末被选中返回false
*/
console.log($("#hobby").prop('checked'));//返回属性的值的状态
$("#hobby").prop('checked',false);//设置属性
$("#username").prop("id","999");//也可以设置属性，注意不能自定义属性
</script>
</body>
</html>
操作样式
相关方法
| 方法 | 描述 |
|---|---|
| css() | 获取/设置样式 |
| addClass() | 添加class属性值 |
| removeClass() | 删除class属性值 |
| toggleClass() | 切换class属性，无添加，有删除 |
代码演示
<!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;
}
.mpp {
background-color: lightgray;
}
</style>
</head>
<body>
<p id="p1">1. 设置一个css样式</p>
<p id="p2">2. 通过class设置样式</p>
<p id="p3">3.
<button id="toggle">切换</button>
class样式
</p>
<script>
let $p1 = $('#p1');//获取p1
let $p2 = $('#p2');//获取p2
let $p3 = $('#p3');//获取p3
// 1. 获取$p1的背景色
console.log($p1.css('background-color'));
// 1.1 设置$p1的背景色为gray色
$p1.css('background-color', 'gray');
// 2. 通过class设置样式
$p2.addClass('mp mpp');
$p2.removeClass('mpp');
// 3. toggleClass() 切换一个class
$('#toggle').click(function () {
$p3.toggleClass('mpp');
});
</script>
</body>
</html>
操作元素(节点操作)
相关方法
| 方法 | 描述 |
|---|---|
| $(标签) | 创建一个标签 $('<li>xxx</li>') |
| prepend() | 在父标签中将子标签放在第一个位置 |
| append() | 在父标签中将子标签放在最后一个位置 |
| empty() | 清空子元素 |
| remove() | 删除自己 |
代码演示
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>13-dom操作元素</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<ul id="star">
<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的事件与js的事件的功能和作用一样，只是在使用语法上稍微有些差异。
jq事件绑定语法
jq对象.事件函数(function(){})
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>14-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').οnclick=function () {
alert('js事件绑定')
}
// jq事件绑定
$('#jqBtn').click(function () {
alert('jq事件绑定')
})
</script>
</body>
</html>
常见事件
点击事件
| 事件 | 描述 |
|---|---|
| click() | 单击事件 |
| dblclick() | 双击事件 |
焦点事件
| 事件 | 描述 |
|---|---|
| blur() | 失去焦点 |
| focus() | 元素获得焦点 |
鼠标事件
| 事件 | 描述 |
|---|---|
| mousedown() | 鼠标按钮被按下 |
| mouseup() | 鼠标按键被松开 |
| mousemove() | 鼠标被移动 |
| mouseover() | 鼠标移到某元素之上 |
| mouseout() | 鼠标从某元素移开 |
键盘事件
| 事件 | 描述 |
|---|---|
| keydown() | 某个键盘按键被按下 |
| keyup() | 某个键盘按键被松开 |
| keypress() | 某个键盘按键被按下并松开 |
改变事件
| 事件 | 描述 |
|---|---|
| change() | 域的内容被改变 |
表单事件
| 事件 | 描述 |
|---|---|
| submit() | 提交按钮被点击 |
案例
全选/全不选
<table id="tab1" border="1" width="800" align="center" >
<tr>
<td colspan="5"><input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" οnclick="selectAll(this)" ></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect"></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
<script src="js/jquery-3.4.1.js"></script>
<script>
//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可
function selectAll(obj){
//alert(obj.checked);//true false
//获取下边的复选框 选中复选框为true，没选中为false
$(".itemSelect").prop("checked",obj.checked);
}
</script>
左右移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#leftName , #btn,#rightName{
float: left;
width: 100px;
height: 300px;
}
#toRight,#toLeft{
margin-top:100px ;
margin-left:30px;
width: 50px;
}
.border{
height: 500px;
padding: 100px;
}
</style>
</head>
<body>
<div class="border">
<select id="leftName" multiple="multiple">
<option>张三</option>
<option>李四</option>
<option>王五</option>
<option>赵六</option>
</select>
<div id="btn">
<input type="button" id="toRight" value="-->"><br>
<input type="button" id="toLeft" value="<--">
</div>
<select id="rightName" multiple="multiple">
<option>钱七</option>
</select>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script>
//需求：实现下拉列表选中条目左右选择功能
$(function () {
//toRight
$("#toRight").click(function () {
//append 元素后面添加
//获取右边的下拉列表对象，append(左边下拉列表选中的option)
$("#rightName").append($("#leftName > option:selected"));
});
//toLeft
$("#toLeft").click(function () {
//appendTo 获取右边选中的option，将其移动到左边下拉列表中
$("#rightName > option:selected").appendTo($("#leftName"));
});
});
</script>
</body>
</html>
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
