JQuery3.0
使用步骤
1:导入JQuery的js文件
2:使用jquery的语法获取对象
3:使用对象获取jquery的方法
使用document获取的对象叫做dom对象或者js对象
var user=document.getElementById("userId");
使用JQuery语法获取的对象叫做JQuery对象
写法一:var user=$("#user");写法二:var user=JQuery("#user");
JQuery对象和Js对象的区别
注意事项:
两者的方法和属性不能混用
JQuery对象本质上就是js数组之间可以进行转化
js对象和jquery对象之间的转换
js------>jquery
var jqobj=$(js对象);
var jqobj=JQuery(js对象);
jquery------>js
var jsobj=jq对象[index];
var jsobj=jq对象.get(index);
JQuery的选择器
基本选择器
* 所有
#id id选择器
.class 通过class获取
"标签名" 标签选择器
多个选择器用逗号隔开 a,b
案例练习
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>01-基本选择器.html</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
/*页面加载成功事件*/
$(function () {
/* <input type="button" value="选择 id为 one 的元素." id="btn1" />*/
$("#btn1").click(function () {
$("#one").css("background-color","#0cdfff")
});
/* <input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />*/
$("#btn2").click(function () {
$(".mini").css("background-color","#ff503e")
});
/* <input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />*/
$("#btn3").click(function () {
$("div").css("background-color","#0f0");
});
/* <input type="button" value="选择 所有的元素." id="btn4" />*/
$("#btn4").click(function () {
$("*").css("background-color","#f9ff47")
});
/* <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />*/
$("#btn5").click(function () {
$("span,#two").css("background-color","#1c0d19");
});
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<h3>基本选择器.</h3>
<!-- 控制按钮 -->
<input type="button" value="选择 id为 one 的元素." id="btn1" />
<input type="button" value="选择 class 为 mini 的所有元素." id="btn2" />
<input type="button" value="选择 元素名是 div 的所有元素." id="btn3" />
<input type="button" value="选择 所有的元素." id="btn4" />
<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5" />
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
层级选择器
a b :选择a的b后代 (eg:一共三div要id为a的里面的所有div)
a>b :选择a的b孩子(eg:一共三div要id为a里面的id为b的div)
a+b :选择a的b大弟弟(eg:一共三div要id为a的下面的第一个div)
a~b :选择a的所有的b弟弟(eg:一共三div要id为a的下面的所有div)
$('#oneId div').css("background-color","red")
案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>02-层次选择器.html</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function(){
// <input type="button" value="选择 body内的所有div元素." id="btn1" />
$('#btn1').click(function () {
$("body div").css("background-color", "#0f0");
})
// <input type="button" value="在body内,选择子元素是div的。" id="btn2" />
$('#btn2').click(function () {
$('body>div').css("background-color", "#ff7539");
})
// <input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
$('#btn3').click(function () {
$('#one+div').css("background-color","#5b5cff");
})
// <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
$("#btn4").click(function () {
$('#two~div').css("background-color","#ffff7b");
})
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择 body内的所有div元素." id="btn1" />
<input type="button" value="在body内,选择子元素是div的。" id="btn2" />
<input type="button" value="选择 id为one 的下一个div元素." id="btn3" />
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4" />
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
属性选择器
//[属性名] 获取元素上带有该属性名的元素对象
//[属性名='值'] 获取元素上带有该属性名且值为'zhi'的元素对象
属性选择器使用时一般都有和标签选择器联合使用
div[属性名='值']
eg:$("div[title='test']").css("backgroup-color","red");
案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>06-属性选择器.html</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选取含有 属性title 的div元素." id="btn1" />
$('#btn1').click(function () {
$('div[title]').css("background-color","#0f0");
})
// <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
$('#btn2').click(function () {
$('[title="test"]').css("background-color","#ff618d");
})
});
</script>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<input type="button" value="选取含有 属性title 的div元素." id="btn1" />
<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2" />
<br /><br />
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
</body>
</html>
基本过滤(eg:$(“div:first”)😉
: first 第一个
: last 最后一个
: even 偶数
: odd 奇数
: eq(index) 索引=
: gt(index) 索引>
: lt(index) 索引<
:not(选择器) 不为
案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>03-基本过滤选择器.html</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/assist.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
// <input type="button" value="选择第一个div元素." id="btn1" />
$('#btn1').click(function () {
$('div:first').css("background-color","#0f0")
});
// <input type="button" value="选择最后一个div元素." id="btn2" />
$('#btn2').click(function () {
$('div:last').css("background-color","#6984ff")
});
// <input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
$('#btn3').click(function () {
$('div:even').css("background-color","#6984ff")
});
// <input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
$('#btn4').click(function () {
$('div:odd').css("background-color","#6984ff")
});
// <input type="button" value="选择索引值等于3的div元素." id="btn5" />
$('#btn5').click(function () {
$('div:eq(3)').css("background-color","#6984ff")
});
// <input type="button" value="选择索引值大于3的div元素." id="btn6" />
$('#btn6').click(function () {
$('div:gt(3)').css("background-color","#6984ff")
});
// <input type="button" value="选择class不为one的 所有div元素." id="btn7" />
$('#btn7').click(function () {
$('div:not(".one")').css("background-color","#6984ff")
});
});
</script>
</head>
<body>
<h3>基本过滤选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
<input type="button" value="选择第一个div元素." id="btn1" />
<input type="button" value="选择最后一个div元素." id="btn2" />
<input type="button" value="选择索引值为偶数 的div元素." id="btn3" />
<input type="button" value="选择索引值为奇数 的div元素." id="btn4" />
<input type="button" value="选择索引值等于3的div元素." id="btn5" />
<input type="button" value="选择索引值大于3的div元素." id="btn6" />
<input type="button" value="选择class不为one的 所有div元素." id="btn7" />
<br /><br />
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div.
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8" />
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>
表单对象属性
: enabled 可用的
: disabled 不可用的
: checked 选中的(针对的是单选框和复选框)
: selected 选中的(下拉选)
案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单对象属性过滤选择器.html</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript">
$(function() {
//<button id="btn1">对表单内 可用input 赋值操作.</button>
$('#btn1').click(function () {
$('input:enabled').val("设置");
})
//<button id="btn2">对表单内 不可用input 赋值操作.</button>
$('#btn2').click(function () {
$('input:disabled').val("设置");
})
//<button id="btn3">获取多选框选中的个数.</button>
$('#btn3').click(function () {
alert($('input:checked').length);
})
//<button id="btn4">获取下拉框选中的个数.</button>
$('#btn4').click(function () {
alert($('select>option:selected').length);
})
});
</script>
</head>
<body>
<h3> 表单对象属性过滤选择器.</h3>
<br />
<button id="btn1">对表单内 可用input 赋值操作.</button>
<button id="btn2">对表单内 不可用input 赋值操作.</button>
<button id="btn3">获取多选框选中的个数.</button>
<button id="btn4">获取下拉框选中的个数.</button>
<br />
可用元素：<input name="add" value="可用文本框" /> <br/>
不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br/>
可用元素： <input name="che" value="可用文本框" /><br/>
不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br/>
多选框：
<br/>
<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
<input type="checkbox" name="newsletter" value="test2" />test2
<input type="checkbox" name="newsletter" value="test3" />test3
<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
<input type="checkbox" name="newsletter" value="test5" />test5
<br/><br/> 下拉列表1：
<br/>
<select name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/> 下拉列表2：
<br/>
<select name="test2">
<option>浙江</option>
<option>湖南</option>
<option selected="selected">北京</option>
<option>天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/><br/>
</body>
</html>
jquery的DOM操作
val();获取value值/设置value值
html();获取标签体/设置标签体
text();获取标签体/设置标签体
html和text的区别:
设置内容:html就可以将内容解析,text只是作为普通文本
获取内容:html获取所有源码内容text只获取文本内容
案例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//1 获取 username的value属性的值
alert($('input[name="username"]').val());
//2 设置 username的默认值为"许多多"
$('input[name="username"]').val("许多多");
//3通过html获取div标签体的内容
alert($('body>div').html());
//4通过html设置div标签体的内容
$('body>div').html("html设置内容");
//5通过text获取div标签体的内容
alert($('body>div').text());
//6通过text设置div标签体的内容
$('body>div').text("text设置内容");
//7 两者设置值的区别(html设置的值中如果有标签可以被解析,text设置的值都充当文本信息)
//8 两者获取值的区别(html获取标签体所有信息,text获取只是标签体文本信息)
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0;
}
</style>
</head>
<body>
<h3>表单</h3>
<form action="">
<table border="1">
<tr id="tr1">
<td><label>姓名</label></td>
<td><input type="text" name="username" value="tom"/></td>
</tr>
<tr>
<td><span>密码</span></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</td>
</tr>
<tr>
<td></td>
<td>
<button type="button">普通按钮</button>
<input type="submit" value="提交按钮" />
<input type="reset" value="重置按钮" />
</td>
</tr>
</table>
</form>
<h3>公告信息</h3>
<div><strong>未满18慎进</strong></div>
<span id="sp">外span<a href='#'>内超链</a></span>
</body>
</html>
文档处理
内部插入
append a.append(c);将c插入到a的内部后面
prepend a.prepend(c);将c插入到a的内部前面
外部插入
after a.after(c);将c插入到a的后面
before a.before(c);将c插入到a的前面
删除
empty();清空元素(清空所有的子标签留下自己)
remove();移除(自杀且断子绝孙)
案例:内部插入
<!DOCTYPE html>
<html>
<head>
<title>01_内部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//1.在city内部的后面追加 反恐
$('#city').append($('#fk'));
//2.在city内部的前面插入 反恐
$('#city').prepend($('#fk'));
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
</body>
<script type="text/javascript">
</script>
</html>
案例:外部插入
<!DOCTYPE html>
<html>
<head>
<title>02_外部插入节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//1.在 p2 的后面插入 city
$('#p2').after($('#city'));
//2.在 p2 的前面插入 city
$('#p2').before($('#city'));
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p id="p3">I would like to say: p3</p>
<p id="p2">I would like to say: p2</p>
<p id="p1">I would like to say: p1</p>
</body>
<script type="text/javascript">
</script>
</html>
案例:删除
<!DOCTYPE html>
<html>
<head>
<title>03_删除节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//1.清空ul
$('#city').empty();
//2.移除ul
$('#city').remove();
});
</script>
</head>
<body>
<ul id="city">
<li id="bj" name="beijing">北京
<p>海淀区</p>
</li>
<li id="tj" name="tianjin">天津
<p>河西区</p>
</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<p class="hello">Hello</p> how are
<p>you?</p>
</body>
<script type="text/javascript">
</script>
</html>
属性
attr();设置或者获取元素的属性
设置属性(给标签添加属性)
格式1:设置单个属性
jq对象.attr("属性名称":"值");
格式2:设置多个属性
jq对象.attr({
"属性名称":"值:,
"属性名称":"值:,
})
获取属性的值
jq对象.attr("属性名称");
移除属性(删除属性)
jq对象.removeAttr("属性名称")
prop();使用方式和attr一样,优先使用attr方法,若attr方法不能用,则换成prop方法(版本升级后的产物)
checked和selected使用prop获取
class操作
元素.addClass("属性值");添加class属性
元素.removeClass("属性值");移除指定的样式
元素.toggleClass("属性值");有class属性就删除,没有class属性就添加
css样式
css
设置css样式
格式一:设置单个属性
jq对象.css("属性","值");
格式二:设置多个属性
jq对象.css({
"属性":"值",
"属性":"值"
})
获取css样式的值
jq对象.css("属性名称");
获取元素的宽和高
jq对象.width();
jq对象.height();
案例一:表格的隔行换色奇数行红偶数行绿
//注意:
//$("tr"):[a,b,c,d] 索引a-0,b-1,c-2,d-3
//$("tr:gt(0)")则获取新的数组[b,c,d]故此索引b-0,c-1,d-2
需求分析:
当页面加载成功后,给表格的奇数行和偶数行添加不同的背景颜色,表头除外
jQuery:
页面加载成功事件:
$(function(){})
$(document).ready(function(){});
选择器:$("tr:odd")(奇数) $("tr:even")(偶数)
css样式: css方法
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.odd{
background-color: #BCD68D;
}
.even{
background-color: #FFFFCC;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//注意:
//$("tr"):[a,b,c,d] 索引a-0,b-1,c-2,d-3
//$("tr:gt(0)")则获取新的数组[b,c,d]故此索引b-0,c-1,d-2
//页面加载成功后给表格的奇数行添加背景颜色
$("tr:gt(0):odd").css("background", "green");//奇数
//页面加载成功后给表格的偶数行添加背景颜色
$("tr:gt(0):even").css("background", "red");
})
</script>
</head>
<body>
<table id="tab1" border="1" width="800" align="center" >
<tr style="background-color: #999999;">
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
</html>
案例二:全选全不选
需求分析:
当点击头部的复选框时,让其他的复选框的状态和头部复选框的状态保持一致
技术分析:
jQuery:
单击事件:click
获取头部复选框checked属性的值
获取其他复选框并设置值
步骤分析:
//1:给头部复选框添加点击事件
//2:获取头部复选框的状态
//3:获取其他复选框,并设置状态
方式一:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//1:给头部复选框添加点击事件
$("#selectAll").click(function () {
//2:获取头部复选框的状态
var checkedState= $("#selectAll").prop("checked");
//3:获取其他复选框,并设置状态
$(".itemSelect").prop("checked",checkedState);
})
})
</script>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="selectAll"></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>
</body>
</html>
方式二:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function fun(checked) {
//获取其他复选框,并设置状态
$(".itemSelect").prop("checked", checked);
}
</script>
<body>
<table id="tab1" border="1" width="800" align="center">
<tr>
<td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
</tr>
<tr>
<th><input type="checkbox" id="selectAll" onclick="fun(this.checked)"></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>
</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 type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
//给ul中li中的图片添加单击事件
$("ul>li>img").click(function () {
//将被点击的图片复制一份插入到p标签内部的后面
$('.word').append($(this).clone());
//派发单击事件进行删除
rm();
})
})
function rm() {
$(".word>img").click(function () {
$(this).remove();
})
}
</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 class="word">
<strong>请发言：</strong>
<img src="../img/12.gif" height="22" width="22" alt="" />
</p>
</div>
</body>
</html>
总结
jQuery:
对js的封装,本质上就是一个外部的js文件
我们称之为js框架或js类库
jQuery和html整合:
在使用的页面中引入即可
<script></script>
jQuery语法:
$("选择器");jQuery("选择器");
使用jq的语法获取的对象叫做jq对象,其他的都是js对象
jq对象的方法和属性不能与js的方法和属性混用
jq对象本质上是js对象数组
jq对象和js对象的转换
jq-->js
jq对象[index]
jq对象.get(index)
js-->jq
$(js对象)
jQuery(js对象)
jq事件:
页面加载成功事件:
$(function(){})
$(document).ready(function(){})
click(function(){})
change(function(){})
blur(function(){})
focus(function(){})
submit(function(){})
事件和事件源的绑定:
派发:
jq对象.事件方法(function(){});
选择器:
基本选择器:
*
#id
.class
标签
多个,
层级选择器:
a b 后代
a>b 子代
a+b 大弟弟
a~b 所有弟弟
属性选择器:
标签[属性名称="值"]
基本过滤选择器:
:first
:last
:even
:odd
:eq(index)
:gt(index)
:lt(index)
:not("选择器")
表单对象属性选择器:
:enabled
:disabled
:checked
:selected
文档处理:
内部插入:
a.append(b);
a.prepend(b);
外部插入:
a.after(b);
a.before(b);
删除:
empty()
remove()
属性:
attr()
attr("属性","值")
attr({"属性":"值",
"属性":"值"
})
attr("属性名")
prop()
class()
addClass("值")
removeClass()
toggleClass("值")
css:
css("属性","值")
css({"属性":"值",
"属性":"值"
})
css("属性名")