JQuery選擇器
* jQuery 選擇器
* 1获询、基本選擇器
* 完美兼容css選擇器
* id
* class
* 2失乾、過(guò)濾選擇器
*
* 3杭跪、屬性選擇器
* 4悄雅、表單選擇器
*
*
*/
.show {
border: 1px solid red;
border-radius: 50%;
background: saddlebrown;
text-align: center;
}
#box2 {
height: 100px;
width: 99%;
background: steelblue;
}
// $("*").css("color","red");
// $("#box ~ div").css("color","red");
// $("#box + span").css("color","red");
});
?$(function(){
$("ul>li").css("width","200px");
//將所有l(wèi)i標(biāo)簽的顏色改為紅色
// $("ul>li").css("color","red")
//將第一個(gè)li標(biāo)簽顏色改為紅色
// $("ul>li:first").css("color","red")
// $("ul>li").first().css("color","red")
//將最后一個(gè)li標(biāo)簽的顏色改為紅色
// $("ul>li:last").css("color","red")
// $("ul>li").last().css("color","red")
//偶數(shù)
// $("ul>li:even").css("color","red")
//奇數(shù)
// $("ul>li:odd").css("color","red")
//equals? 等于
// $("ul>li:eq(4)").css("color","red")
// $("ul>li").eq(4).css("color","red")
//大于 grent then
// $("ul>li:gt(4)").css("color","red")
//小于? less then
// $("ul>li:lt(3)").css("color","red")
// console.info($("#box").children("ul"))
//將標(biāo)簽的子標(biāo)簽的子標(biāo)簽改為紅色
// $("#box").children("ul").children("li").css("color","red")
//將第一個(gè)標(biāo)簽的下一個(gè)標(biāo)簽改為紅色
// $("#box>ul>li:first").next().css("color","red");
//將第一個(gè)標(biāo)簽以后的所有標(biāo)簽都改為紅色
// $("#box>ul>li:first").nextAll().css("color","red");
//只將Id 為active 的標(biāo)簽顏色改為藍(lán)色
$("#active").prev().css("color","blue");
//將 id 為 active 的標(biāo)簽和其上方的標(biāo)簽都改為藍(lán)色
// $("#active").prevAll().css("color","blue");
//將除 id為 active 的標(biāo)簽以外的標(biāo)簽都改為藍(lán)色
// $("#active").siblings().css("color","blue");
//將id 為active 的標(biāo)簽加一個(gè)紅色的框架
// $("#active:parent").css("border","1px solid red");
// $("#active").parents("div").css("border","1px solid red");
// console.info($("#box>ul>li").eq(3).hasclass("show"))
}
)
<div id = "box">
? ? <ul>
? ? ? ? ? ? <li>這是第一個(gè)標(biāo)簽</li>
? ? ? ? ? ? <li>這是第二個(gè)標(biāo)簽</li>
? ? ? ? ? ? <li id="active">這是第三個(gè)標(biāo)簽</li>
? ? ? ? ? ? <li class="show">這是第四個(gè)標(biāo)簽</li>
? ? ? ? ? ? <li>這是第五個(gè)標(biāo)簽</li>
????</ul>
</div>
JQuery動(dòng)畫(huà)
$(function(){
//JQuery為我們提供了三類(lèi)九種動(dòng)畫(huà)效果
//還有一種自定義動(dòng)畫(huà)效果
// 動(dòng)畫(huà)的參數(shù)分為兩種類(lèi)型
// 字符串? slow normal fast
// 數(shù)字 表示動(dòng)畫(huà)執(zhí)行時(shí)間逢渔，單位是毫秒
});
function closed(){
//消失
// $("#box1").hide(1000);
//漸變的消失效果
// $("#box1").fadeOut(1000);
//卷簾的消失效果
$("#box1").slideUp(5000);
}
function show(){
//顯示
// $("#box1").show(1000);
//漸變的顯示效果
// $("#box1").fadeIn(1000);
//卷簾的顯示效果
$("#box1").slideDown(5000);
}
function toggle(){
//該按鈕具有雙重操作? 消失顯示
// $("#box1").toggle(1000);
//漸變的雙重顯示消失效果
// $("#box1").fadeToggle(1000);
//卷簾的雙重顯示消失效果
$("#box1").slideToggle(5000);
}
//自定義效果
function run(){
$("#box2").animate({
"left":"200px",
"top":"20px",
"height":"500px"
// "width":"500px"
},2000, function(){
$("#box2").animate({
"left":"20px",
"top":"100px",
"height":"10px",
"width":"10px"
},2000 )
})
}
//圖片加載效果
$(function() {
$("img").mouseenter(function(){
$(this).animate({
"top": "30px",
"height": "20px",
"whith":"10px",
"opcity": "0"
},5000,function() {
$(this).attr("src","img/gb2.png");
$(this).animate({
"top": "30px",
"height": "400px",
"opcity": "1"
},2000)
});
}
)
});
