要實(shí)現(xiàn)的效果，點(diǎn)擊一個(gè)li標(biāo)簽，當(dāng)前l(fā)i標(biāo)簽的下一個(gè)li標(biāo)簽內(nèi)的img彈出來，同時(shí)，讓其他彈出的img隱藏
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的鏈?zhǔn)讲僮?lt;/title>
<link rel="stylesheet" type="text/css" href="css/6.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$("ul").find("li:eq(0)").click(function(){
$(this).addClass("current") //為當(dāng)前節(jié)點(diǎn)添加current類名的樣式
.next().fadeIn("slow") //顯示下一個(gè)元素節(jié)點(diǎn)
.parent().siblings().find(".current").removeClass("current")
//找到另一個(gè)類名為.current的節(jié)點(diǎn)，并刪除其類名
.next().hide();
});
/*
current這個(gè)類是給li標(biāo)簽添加亮度的
代碼思路是，點(diǎn)擊第一個(gè)li標(biāo)簽時(shí)，給當(dāng)前的li標(biāo)簽添加亮度，讓當(dāng)前所在的ul的第二個(gè)li標(biāo)簽慢慢彈出；再去找ul標(biāo)簽里面有彈出的
代碼解釋
$("ul").find("li:eq(0)");是找ul標(biāo)簽里面的第一個(gè)li標(biāo)簽。
點(diǎn)擊li標(biāo)簽的時(shí)候，
$(this),代表選中的那個(gè)li標(biāo)簽。
$(this).addClass("current");給選中的li標(biāo)簽添加一個(gè)current類。
next()表示下一個(gè)li標(biāo)簽，也就是img外面的li標(biāo)簽
fadeIn("slow"); img慢慢彈出
parent()指的是當(dāng)前選中的li標(biāo)簽的parent，此時(shí)所在的位置就是ul標(biāo)簽了
siblings(),此時(shí)指向到了ul標(biāo)簽的姐妹。
find(".current"), 找到另一個(gè)類名為.current的節(jié)點(diǎn)，
removeClass("current") 找到后移除。此時(shí)所在的是li的第一個(gè)標(biāo)簽
next().hide(),找到它的下一個(gè)標(biāo)簽，隱藏。
*/
});
</script>
</head>
<body>
<div class="containt">
<ul>
<li>萌寵：貓</li>
<li></li>
</ul>
<ul>
<li>萌寵：狗</li>
<li></li>
</ul>
<ul>
<li>萌寵：鼠</li>
<li></li>
</ul>
<ul>
<li>萌寵：兔</li>
<li></li>
</ul>
</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery控制頁面css</title>
<link rel="stylesheet" type="text/css" href="css/13.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$(".nav li").mouseover(function(){
$(this).addClass("current"); //添加一個(gè)類名
}).mouseout(function(){
$(this).removeClass("current"); //刪除一個(gè)類名
});
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li>兄弟連</li>
<li>兄弟會</li>
<li>猿代碼</li>
<li>專家講師</li>
<li>戰(zhàn)地日記</li>
<li>小電影</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery控制頁面css</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$("div").css("color","red") //顏色
.css("fontSize","30px") //字體大小
.css("fontweight","bold") //字體加粗
.css("textAlign","center") //字體居中
.css("padding","100px"); //內(nèi)補(bǔ)白
})
</script>
</head>
<body>
<div>讓學(xué)習(xí)成為一種習(xí)慣</div>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery對頁面的事件處理</title>
<link rel="stylesheet" type="text/css" href="css/15.css">
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
var s = ["大師傅","二師兄","小弟弟"]; //主語數(shù)組
var v = ["在冰箱里","夢中女孩","你在夢中"]; //狀語數(shù)組
var o = ["洗澡","唱歌","說話"]; //動(dòng)詞數(shù)組
var snum = 0,vnum = 0,onum = 0; //數(shù)組的偏移量
var stime = 0,vtime = 0,otime = 0; //記錄定時(shí)器的值
$("button").click(function(){
stime = setInterval(function(){ //主語開始隨機(jī)
snum = ++snum%(s.length);
$("li:eq(0)").html(s[snum]);
},100);
vtime = setInterval(function(){ //狀語開始隨機(jī)
vnum = ++vnum%(v.length);
$("li:eq(1)").html(v[vnum]);
},100);
otime = setInterval(function(){ //動(dòng)詞開始隨機(jī)
onum = ++onum%(o.length);
$("li:eq(2)").html(o[onum]);
},100);
});
$("li").click(function(){ //jQuery對象集合綁定點(diǎn)擊事件
var name = $(this).attr("class");
if(name == "0"){
clearInterval(stime); //主語抽取
}else if(name == "1"){
clearInterval(vtime); //狀語抽取
}else if(name == "2"){
clearInterval(otime); //動(dòng)詞抽取
}
});
});
</script>
</head>
<body>
<div>
<h1>點(diǎn)擊對應(yīng)的文字，即停止?jié)L動(dòng)</h1>
<ul>
<li class="0">123</li>
<li class="1">123</li>
<li class="2">123</li>
</ul>
<button>開 始</button>
</div>
</body>
</html>
- ajax的封裝
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery 處理頁面動(dòng)畫效果</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$.ajax({
url: "http://localhost:3000/textajax", //請求地址
type:"get", //請求方式
dataType:"text", //接收數(shù)據(jù)的格式
success: function(msg){ //執(zhí)行成功的回調(diào)函數(shù)
alert(msg);
},
error:function(){ //執(zhí)行失敗的回調(diào)函數(shù)
alert("ajax請求錯(cuò)誤");
}
});
});
</script>
</head>
<body>
</body>
</html>
/**
服務(wù)器端代碼
*/
app.get("/testajax",function(req,res){
res.send("你已經(jīng)學(xué)會jQuery了ajax文本");
});
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>層次選擇器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/04.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>編程語言排名</h1>
<ul>
<li id="one">
<ul>
<li>java語言占例:</li>
<li></li>
</ul>
</li>
<li id="two">
<ul>
<li>c語言占例:</li>
<li></li>
</ul>
</li>
<li id="three">
<ul>
<li>c++語言占例:</li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
<script>
/**
@param
obj： jQuery對象
val： 所占的百分比
color： 進(jìn)度條填充顏色
return void
*/
var progress = function(obj,val,color){
var i = 0; //計(jì)數(shù)器
var length = 2000; //進(jìn)度條最大長度
val *= 10; //為了體驗(yàn)感，內(nèi)部把val值放大十倍
var flag = setInterval(function(){
i ++;
if(i > val){
clearInterval(flag); //達(dá)到指定的值后，就清除計(jì)數(shù)
}else{
obj.html(i/10+"%").css("background",color).css("width",(i/1000)*length+"px");
}
},10);
};
/**
關(guān)于"li:eq(index)"它為jQuery基本過濾選擇器（在此提前學(xué)習(xí)）
含義為：選取索引等于index的元素(index從0開始)
*/
progress($("#one ul li:eq(1)"),20,"red");
progress($("#one+li ul li:eq(1)"),14,"green");
progress($("#two~li ul li:eq(1)"),7,"pink");
</script>
- 注意，這段js代碼要放在body體后面才可以生效。因?yàn)樗歉淖兊脑璫ss
內(nèi)容過濾選擇器 contains(內(nèi)容)") 感覺這個(gè)跟全文索引有點(diǎn)相似
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內(nèi)容過濾選擇器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/06.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>電話號碼過濾</h1>
<input type="text" name="search">
<div>
<button>搜索指定號碼的人員</button>
<button>查找未錄入號碼的人員</button>
</div>
<ul>
<li>張三：<span>186123123123</span></li>
<li>李四：<span>186321321321</span></li>
<li>王五：<span>186132132132</span></li>
<li>趙六：<span></span></li>
<li>錢七：<span>186312312312</span></li>
<li>孫八：<span></span></li>
</ul>
</body>
</html>
<script>
//綁定第一個(gè)"搜索指定號碼的人員"按鈕
$("button:contains(搜索)").click(function(){
//使用表單過濾選擇器獲取
var val = $(":text").val();
//首先讓所有待選項(xiàng)全部隱藏
$("li").css("display","none");
//顯示被選擇的選項(xiàng)
$("li:contains("+val+")").css("display","block");
});
//綁定第二個(gè)"查找未錄入號碼的人員"按鈕
$("button:contains(查找)").click(function(){
//同上，讓所有待選項(xiàng)全部隱藏
$("li").css("display","none");
/**
parent方法：取得一個(gè)包含著所有匹配元素的唯一父元素的元素集合
*/
$("span:empty").parent().css("display","block");;
});
</script>
圖片上第一個(gè)翻到最后一個(gè)，再從最后這一個(gè)翻到第一個(gè)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可見性過濾選擇器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/07.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>直隱直現(xiàn)的輪播圖</h1>
</body>
</html>
<script>
var i = 0; //定義幀數(shù)的變量
var len = $("img").length - 1; //判斷執(zhí)行方向
setInterval(function(){
/**
next()方法：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合
prev()方法：取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合
*/
if(i++%(2*len) < len){
$("img:visible").css("display","none").next().css("display","block");
}else{
$("img:visible").css("display","none").prev().css("display","block");
}
},1000);
</script>
表單對象屬性過濾選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單對象屬性過濾選擇器</title>
<script src="js/jquery-2.2.4.min.js"></script>
<link href="css/10.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>我的郵箱</h1>
<ul>
<li><input type="checkbox" name="email[]" value="1"> 寶龍來信 內(nèi)容:xxxxxx</li>
<li><input type="checkbox" name="email[]" value="2"> 萬濤來信 內(nèi)容:請進(jìn)入</li>
<li><input type="checkbox" name="email[]" value="3"> 明霞來信 內(nèi)容:請雙擊</li>
<li><input type="checkbox" name="email[]" value="4"> 滔滔來信 內(nèi)容:保密</li>
</ul>
<div>
<button>全選</button> <button>反選</button> <button>全不選</button>
</div>
</body>
</html>
<script>
/**
prop()方法和attr()方法的功能和用法一樣：
注意：在jQuery1.6以上,若要檢索和更改DOM屬性時(shí)候，使用prop()方法
比如：checked、selected或disabled等
原因：隨著一些內(nèi)置屬性，當(dāng)刪除屬性時(shí)會報(bào)錯(cuò)。
*/
$("button:contains(全選)").click(function(){
$("input").prop("checked",true);
});
$("button:contains(反選)").click(function(){
var objchecked = $("input:checked");
$("input:not(:checked)").prop("checked",true);
objchecked.prop("checked",false);
});
$("button:contains(全不選)").click(function(){
$("input").prop("checked",false);
});
</script>
