要實現的效果，點擊一個li標簽，當前li標簽的下一個li標簽內的img彈出來，同時，讓其他彈出的img隱藏
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery的鏈式操作</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") //為當前節點添加current類名的樣式
.next().fadeIn("slow") //顯示下一個元素節點
.parent().siblings().find(".current").removeClass("current")
//找到另一個類名為.current的節點，并刪除其類名
.next().hide();
});
/*
current這個類是給li標簽添加亮度的
代碼思路是，點擊第一個li標簽時，給當前的li標簽添加亮度，讓當前所在的ul的第二個li標簽慢慢彈出；再去找ul標簽里面有彈出的
代碼解釋
$("ul").find("li:eq(0)");是找ul標簽里面的第一個li標簽。
點擊li標簽的時候，
$(this),代表選中的那個li標簽。
$(this).addClass("current");給選中的li標簽添加一個current類。
next()表示下一個li標簽，也就是img外面的li標簽
fadeIn("slow"); img慢慢彈出
parent()指的是當前選中的li標簽的parent，此時所在的位置就是ul標簽了
siblings(),此時指向到了ul標簽的姐妹。
find(".current"), 找到另一個類名為.current的節點，
removeClass("current") 找到后移除。此時所在的是li的第一個標簽
next().hide(),找到它的下一個標簽，隱藏。
*/
});
</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"); //添加一個類名
}).mouseout(function(){
$(this).removeClass("current"); //刪除一個類名
});
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li>兄弟連</li>
<li>兄弟會</li>
<li>猿代碼</li>
<li>專家講師</li>
<li>戰地日記</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"); //內補白
})
</script>
</head>
<body>
<div>讓學習成為一種習慣</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 = ["大師傅","二師兄","小弟弟"]; //主語數組
var v = ["在冰箱里","夢中女孩","你在夢中"]; //狀語數組
var o = ["洗澡","唱歌","說話"]; //動詞數組
var snum = 0,vnum = 0,onum = 0; //數組的偏移量
var stime = 0,vtime = 0,otime = 0; //記錄定時器的值
$("button").click(function(){
stime = setInterval(function(){ //主語開始隨機
snum = ++snum%(s.length);
$("li:eq(0)").html(s[snum]);
},100);
vtime = setInterval(function(){ //狀語開始隨機
vnum = ++vnum%(v.length);
$("li:eq(1)").html(v[vnum]);
},100);
otime = setInterval(function(){ //動詞開始隨機
onum = ++onum%(o.length);
$("li:eq(2)").html(o[onum]);
},100);
});
$("li").click(function(){ //jQuery對象集合綁定點擊事件
var name = $(this).attr("class");
if(name == "0"){
clearInterval(stime); //主語抽取
}else if(name == "1"){
clearInterval(vtime); //狀語抽取
}else if(name == "2"){
clearInterval(otime); //動詞抽取
}
});
});
</script>
</head>
<body>
<div>
<h1>點擊對應的文字，即停止滾動</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 處理頁面動畫效果</title>
<script src="js/jquery-2.2.4.min.js"></script>
<script>
$(function(){
$.ajax({
url: "http://localhost:3000/textajax", //請求地址
type:"get", //請求方式
dataType:"text", //接收數據的格式
success: function(msg){ //執行成功的回調函數
alert(msg);
},
error:function(){ //執行失敗的回調函數
alert("ajax請求錯誤");
}
});
});
</script>
</head>
<body>
</body>
</html>
/**
服務器端代碼
*/
app.get("/testajax",function(req,res){
res.send("你已經學會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： 進度條填充顏色
return void
*/
var progress = function(obj,val,color){
var i = 0; //計數器
var length = 2000; //進度條最大長度
val *= 10; //為了體驗感，內部把val值放大十倍
var flag = setInterval(function(){
i ++;
if(i > val){
clearInterval(flag); //達到指定的值后，就清除計數
}else{
obj.html(i/10+"%").css("background",color).css("width",(i/1000)*length+"px");
}
},10);
};
/**
關于"li:eq(index)"它為jQuery基本過濾選擇器（在此提前學習）
含義為：選取索引等于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體后面才可以生效。因為它是改變的原css
內容過濾選擇器 contains(內容)") 感覺這個跟全文索引有點相似
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>內容過濾選擇器</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>
//綁定第一個"搜索指定號碼的人員"按鈕
$("button:contains(搜索)").click(function(){
//使用表單過濾選擇器獲取
var val = $(":text").val();
//首先讓所有待選項全部隱藏
$("li").css("display","none");
//顯示被選擇的選項
$("li:contains("+val+")").css("display","block");
});
//綁定第二個"查找未錄入號碼的人員"按鈕
$("button:contains(查找)").click(function(){
//同上，讓所有待選項全部隱藏
$("li").css("display","none");
/**
parent方法：取得一個包含著所有匹配元素的唯一父元素的元素集合
*/
$("span:empty").parent().css("display","block");;
});
</script>
圖片上第一個翻到最后一個，再從最后這一個翻到第一個
<!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>直隱直現的輪播圖</h1>
</body>
</html>
<script>
var i = 0; //定義幀數的變量
var len = $("img").length - 1; //判斷執行方向
setInterval(function(){
/**
next()方法：取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合
prev()方法：取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
*/
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"> 寶龍來信 內容:xxxxxx</li>
<li><input type="checkbox" name="email[]" value="2"> 萬濤來信 內容:請進入</li>
<li><input type="checkbox" name="email[]" value="3"> 明霞來信 內容:請雙擊</li>
<li><input type="checkbox" name="email[]" value="4"> 滔滔來信 內容:保密</li>
</ul>
<div>
<button>全選</button> <button>反選</button> <button>全不選</button>
</div>
</body>
</html>
<script>
/**
prop()方法和attr()方法的功能和用法一樣：
注意：在jQuery1.6以上,若要檢索和更改DOM屬性時候，使用prop()方法
比如：checked、selected或disabled等
原因：隨著一些內置屬性，當刪除屬性時會報錯。
*/
$("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>
