筆記-JavaWeb學習之旅17
1.過濾選擇器
首元素選擇器：first 得到選擇的元素中的第一個元素javascript
尾元素選擇器：last得到選擇元素中的最後一個元素css
非元素選擇器：not(selector) 不包括指定內容的元素html
偶數選擇器：even偶數，從0開始計數java
奇數選擇器：odd奇數，從0開始計數jquery
等於索引選擇器：eq(index)指定索引元素程序員
大於索引選擇器：gt(index) 大於指定索引元素app
小於索引選擇器：lt(index)小於指定索引元素dom
標題選擇器：header 得到標題(h1-h6)元素，固定寫法jquery插件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本過濾選擇器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("backgroundColor","red");
});
// <input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("backgroundColor","red");
});
// <input type="button" value=" 改變class不爲 one 的全部 div 元素的背景色爲 紅色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("backgroundColor","red");
});
// <input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("backgroundColor","red");
});
// <input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("backgroundColor","red");
});
// <input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改變全部的標題元素的背景色爲 紅色" id="b9"/>
$("#b9").click(function(){
$(":header").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改變第一個 div 元素的背景色爲 紅色" id="b1"/>
<input type="button" value=" 改變最後一個 div 元素的背景色爲 紅色" id="b2"/>
<input type="button" value=" 改變class不爲 one 的全部 div 元素的背景色爲 紅色" id="b3"/>
<input type="button" value=" 改變索引值爲偶數的 div 元素的背景色爲 紅色" id="b4"/>
<input type="button" value=" 改變索引值爲奇數的 div 元素的背景色爲 紅色" id="b5"/>
<input type="button" value=" 改變索引值爲大於 3 的 div 元素的背景色爲 紅色" id="b6"/>
<input type="button" value=" 改變索引值爲等於 3 的 div 元素的背景色爲 紅色" id="b7"/>
<input type="button" value=" 改變索引值爲小於 3 的 div 元素的背景色爲 紅色" id="b8"/>
<input type="button" value=" 改變全部的標題元素的背景色爲 紅色" id="b9"/>
<h1>有一種奇蹟叫堅持</h1>
<h2>自信源於努力</h2>
<div id="one">
id爲one
</div>
<div id="two" class="mini" >
id爲two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
<div class="mini" >class是xinlaid mini</div>
</div>
</body>
</html>
表單過濾選擇器
可用元素選擇器：enabled 得到可用元素ide
不可用元素選擇器：disabled 得到不可用元素
選中選擇器 checked 得到單選/複選框選中的元素
選中選擇器：selected 得到下拉框選中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表單屬性過濾選擇器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
#job{
margin: 20px;
}
#edu{
margin-top:-70px;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//獲取全部的表單，而且是純文本框可用的，改變他們的值
$("input[type='text']:enabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
$("input[type='text']:disabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取複選框選中的個數" id="b3"/>
$("#b3").click(function(){
//獲取全部複選框，checked表示選中的個數
alert($("input[type='checkbox']:checked").length);
})
// <input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"/>
$("#b4").click(function(){
//經過id獲取器得到下拉框元素
alert($("#job > option:selected").length);
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 對象的 val() 方法改變表單內不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 對象的 length 屬性獲取複選框選中的個數" id="b3"/>
<input type="button" value=" 利用 jQuery 對象的 length 屬性獲取下拉框選中的個數" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br><br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序員</option>
<option>中級程序員</option>
<option>高級程序員</option>
<option>系統分析師</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>碩士</option>
<option>大專</option>
</select>
<br/>
<div id="two" class="mini" >
id爲two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
</body>
</html>
DOM操做
(須要分清楚是對標籤體的內容仍是對標籤體的屬性進行操做)
內容操做
html():獲取/設置元素的標籤體內容
text()：獲取/設置元素的標籤體純文本內容
val()：獲取/設置元素的value屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 獲取myinput的value值
// 經過id選擇器獲取元素對象
var value = $("#myinput").val();
alert(value);
// 獲取mydiv的標籤體內容,使用html方法
alert($("#mydiv").html());
// 獲取mydiv文本內容
alert($("#mydiv").text());
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="張三" /><br />
<div id="mydiv"><p><a href="#">標題標籤</a></p></div>
</body>
</html>
屬性操做
1.通用屬性操做
- attr(): 獲取/設置元素的屬性
- removeAttr():刪除屬性
- prop():獲取/設置元素的屬性
- removeProp():刪除屬性
attr和prop的區別
若是操做的是元素的固有屬性，則建議使用Prop
若是操做的是元素自定義的屬性，則建議使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>獲取屬性</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
//獲取北京節點的name屬性值
//name是標籤體的屬性，li標籤中沒有name屬性，因此是自定義的屬性，建議使用attr
//獲取標籤元素，使用方法attr獲取屬性值
var value = $("#bj").attr("name");
alert(value);
//設置北京節點的name屬性的值爲dabeijing
var value1 = $("#bj").attr("name","dabeijing");
//新增北京節點的discription屬性 屬性值是didu
var value2 = $("#bj").attr("discription","didu");
//刪除北京節點的name屬性並檢驗name屬性是否存在
$("#bj").removeAttr("name")
//得到hobby的的選中狀態,checked是固有屬性，建議使用prop
var checked = $("#hobby").prop("checked");
alert(checked);
});
</script>
</head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html>
2.對class屬性的操做
1.addClass():添加class屬性值
2.removeClass():刪除class屬性值
3.toggleClass():切換class屬性(若是存在該屬性值就刪除掉，不存在該屬性值就添加)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樣式操做</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
/*待用的樣式*/
.second{
width: 300px;
height: 340px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="採用屬性增長樣式(改變id=one的樣式)" id="b1"/>
//使用attr獲取/設置屬性的值
$("#b1").click(function () {
$("#one").attr("class","second");
})
// <input type="button" value=" addClass" id="b2"/>
$("#b2").click(function () {
$("#one").addClass("second");
})
// <input type="button" value="removeClass" id="b3"/>
$("#b3").click(function () {
$("#one").removeClass("second");
})
// <input type="button" value=" 切換樣式" id="b4"/>
$("#b4").click(function () {
$("#one").toggleClass("second");
})
// <input type="button" value=" 經過css()得到id爲one背景顏色" id="b5"/>
$("#b5").click(function () {
alert($("#one").css("backgroundColor"))
})
// <input type="button" value=" 經過css()設置id爲one背景顏色爲綠色" id="b6"/>
$("#b6").click(function () {
$("#one").css("backgroundColor","green")
})
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="採用屬性增長樣式(改變id=one的樣式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切換樣式" id="b4"/>
<input type="button" value=" 經過css()得到id爲one背景顏色" id="b5"/>
<input type="button" value=" 經過css()設置id爲one背景顏色爲綠色" id="b6"/>
<h1>有一種奇蹟叫堅持</h1>
<h2>自信源於努力</h2>
<div id="one" class="one">
id爲one
</div>
<div id="two" class="mini" >
id爲two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<span class="spanone"> span
</span>
</body>
</html>
CRUD操做
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>內部插入腳本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="將反恐放置到city的後面" id="b1"/>
$("#b1").click(function () {
$("#city").append($("#fk"));
})
// <input type="button" value="將反恐放置到city的最前面" id="b2"/>
$("#b2").click(function () {
$("#city").prepend($("#fk"));
})
// <input type="button" value="將反恐插入到天津後面" id="b3"/>
$("#b3").click(function () {
$("#tj").after($("#fk"));
})
// <input type="button" value="將反恐插入到天津前面" id="b4"/>
$("#b4").click(function () {
$("#tj").before($("#fk"));
})
});
</script>
</head>
<body>
<input type="button" value="將反恐放置到city的後面" id="b1"/>
<input type="button" value="將反恐放置到city的最前面" id="b2"/>
<input type="button" value="將反恐插入到天津後面" id="b3"/>
<input type="button" value="將反恐插入到天津前面" id="b4"/>
<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>
<div id="foo1">Hello1</div>
</body>
</html>
JQuery高級
動畫
三種方式顯示和隱藏元素
1.默認顯示和隱藏方式
- show([speed],[easing],[fn])
- hide([speed],[easing],[fn])
- toggle([speed],[easing],[fn])
speed:動畫的速度，三個預約義的值("slow","normal","fast")或表示動畫時長的毫秒數值
easing:用來指定切換效果，默認是"swing",可用參數"linear"
fn:在動畫完成是執行的函數，每一個函數執行一次
2.滑動顯示和隱藏方式
1.slideDown([speed],[easing],[fn])
2.slideUp([speed],[easing],[fn])
3.slideToggle([speed],[easing],[fn])
3.淡入淡出顯示和隱藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
//隱藏div
function hideFn(){
//默認方式
//$("#showDiv").hide("slow","swing")
//滑動方式
//$("#showDiv").slideUp("slow","swing")
//淡入淡出方式
$("#showDiv").fadeOut("8000","swing")
}
//點擊按鈕顯示div
function showFn(){
//默認方式
//$("#showDiv").show("slow","linear");
//滑動方式
//$("#showDiv").slideDown("slow","linear");
//淡入淡出方式
$("#showDiv").fadeIn("5000","linear");
}
//點擊按鈕切換div顯示和隱藏
function toggleFn(){
//默認方式
//$("#showDiv").toggle("slow","swing");
//滑動方式
//$("#showDiv").slideToggle("slow","swing");
//淡入淡出方式
$("#showDiv").fadeToggle("5000","swing");
}
</script>
</head>
<body>
<input type="button" value="點擊按鈕隱藏div" onclick="hideFn()">
<input type="button" value="點擊按鈕顯示div" onclick="showFn()">
<input type="button" value="點擊按鈕切換div顯示和隱藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div顯示和隱藏
</div>
</body>
</html>
遍歷
js遍歷方式 for(初始化值;循環結束條件；步長)
jq遍歷方式
1.jq對象.each(callback)
2.$.each(object,[callback])
3.for...of;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//獲取遍歷對象
var citys = $("#city li");
//第一種方式，不能得到索引
citys.each(function (index,element) {
// alert(this.innerHTML)
// });
//第二種方式，能夠得到索引，在回調函數中定義參數
if("上海"==$(element).html()){
return false;//false至關於java的break,true至關於continue
}
alert(index+":"+$(element).html());//把得到的js對象強制轉換jq對象
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重慶</li>
</ul>
</body>
</html>
事件綁定
1.jquery標準的綁定方式：jq對象.事件方法(回調函數)
2.on綁定事件/off解除綁定
jq對象.on("事件名稱"，回調函數)
jq對象.off("事件名稱")
3.事件切換：toggle
jq對象.toggle(fn1,fn2....)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//綁定單機事件
$("#btn").on("click",function () {
alert("我被點擊了")
})
//解除單機事件
$("#btn2").click(function () {
$("#btn").off("click");//若不傳遞click參數，則將btn上的全部綁定事件解綁
})
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on綁定點擊事件">
<input id="btn2" type="button" value="使用off解綁點擊事件">
</body>
</html>
案例1
當頁面加載完，3秒後，自動顯示廣告
廣告顯示5秒後，自動消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>廣告的自動顯示與隱藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
setTimeout(adShow,3000);
setTimeout(adHide,8000);
})
function adShow() {
$("#ad").fadeIn("slow","swing")
}
function adHide() {
$("#ad").fadeOut("slow","swing")
}
</script>
</head>
<body>
<!-- 總體的DIV -->
<div>
<!-- 廣告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
案例2--抽獎
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽獎</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script language='javascript' type='text/javascript'>
var imgs = [
"man00.jpg",
"man01.jpg",
"man02.jpg",
"man03.jpg",
"man04.jpg",
"man05.jpg",
"man06.jpg",
];
var satrtId;
var index;
$(function () {
//點擊開始按鈕，須要循環加載圖片
$("#startID").click(function () {
$("#startID").prop("disabled",false);//設置按鈕可用
$("#stopID").prop("disabled",true);//設置按鈕不可用
//使用定時器，循環加載圖片
satrtId= setInterval(function () {
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//隨機得到數字
index = Math.floor(Math.random()*7);
$("#img1ID").prop("src",imgs[index]);//得到隨機圖片
},20);
})
//點擊中止按鈕，加載大方框圖片
$("#stopID").click(function () {
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//結束定時器
clearInterval(satrtId)
var img = $("#img2ID").prop("src",imgs[index]).hide();
img.show(1000);
})
})
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="man00.jpg" width="800px" height="500px"/>
</div>
<!-- 開始按鈕 -->
<input
id="startID"
type="button"
value="點擊開始"
style="width:150px;height:150px;font-size:22px">
<!-- 中止按鈕 -->
<input
id="stopID"
type="button"
value="點擊中止"
style="width:150px;height:150px;font-size:22px">
</body>
</html>
插件機制
實現方式：
1.$.fn.extend(object),加強經過jquery獲取對象的功能 $("#id")
(使用對象調用方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//使用jquery插件 給jq對象添加2個方法 check()選中全部複選框，uncheck()取消選中全部複選框
//1.定義jqeury的對象插件
$.fn.extend({
//該方法全部的jq對象均可以調用
check:function () {
this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});
$(function () {
$("#btn-check").click(function () {
$("input[type='checkbox']").check();//獲取全部的複選框對象
})
})
$(function () {
$("#btn-uncheck").click(function () {
$("input[type='checkbox']").uncheck();//獲取全部的複選框對象
})
})
</script>
</head>
<body>
<input id="btn-check" type="button" value="點擊選中複選框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="點擊取消複選框選中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">籃球
<input type="checkbox" value="volleyball">排球
</body>
</html>
2.$.extend(object),加強JQuery對象自身的功能，$/JQuery
（使用$來調用方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery對象進行方法擴展</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//對全局方法擴展2個方法，擴展min方法：求2個值的最小值；擴展max方法：求2個值最大值
$.extend({
max:function (a,b) {
return a>=b ? a:b;
},
min:function (a,b) {
return a<=b ? a:b;
}
})
//調用全局方法
var max = $.max(2,3);
alert(max);
var min = $.min(2,3);
alert(min);
</script>
</head>
<body>
</body>
</html>
相關文章
- 1. 筆記-JavaWeb學習之旅14
- 2. 筆記-JavaWeb學習之旅9
- 3. 筆記-JavaWeb學習之旅13
- 4. 筆記-JavaWeb學習之旅16
- 5. 筆記-JavaWeb學習之旅10
- 6. 筆記-JavaWeb學習之旅7
- 7. 筆記-JavaWeb學習之旅12
- 8. 筆記-JavaWeb學習之旅15
- 9. 筆記-JavaWeb學習之旅18
- 10. 筆記-JavaWeb學習之旅11
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面試的幾個實用小技巧，不妨看看！
- 2. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 3. Mac實用技巧 |如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 4. 如何使用Mac系統中自帶的預覽工具將圖片變成黑白色?
- 5. Mac OS非兼容Windows軟件運行解決方案——「以VMware & Microsoft Access爲例「
- 6. 封裝 pyinstaller -F -i b.ico excel.py
- 7. 數據庫作業三ER圖待完善
- 8. nvm安裝使用低版本node.js(非命令安裝)
- 9. 如何快速轉換圖片格式
- 10. 將表格內容分條轉換爲若干文檔
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 筆記-JavaWeb學習之旅14
- 2. 筆記-JavaWeb學習之旅9
- 3. 筆記-JavaWeb學習之旅13
- 4. 筆記-JavaWeb學習之旅16
- 5. 筆記-JavaWeb學習之旅10
- 6. 筆記-JavaWeb學習之旅7
- 7. 筆記-JavaWeb學習之旅12
- 8. 筆記-JavaWeb學習之旅15
- 9. 筆記-JavaWeb學習之旅18
- 10. 筆記-JavaWeb學習之旅11