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("屬性名")