jQuery笔记$("1")——jQuery选择器
开始学习jQuery。
以前没学习过js，大多都是改，现在感觉不够了，需要系统的了解一下。
昨天去图书馆借了《锋利的jQuery》开始自学jQuery顺便学习下JS。
开始讲了一些基础的东西，感觉就是在用$(“”)选择html里面的内容对其进行操作。想法比较简单，毕竟刚刚看嘛，做了第一个 jQuery的例子：
知道了格式，alert方法输出”里面的值”。
基本选择器：
层次选择器：
后俩种层选择器与方法的等价关系
结束练习
1.用toggle()。
2.用hide()和show()。
递归做的动作效果
转义字符
手动重置页面元素
以前没学习过js，大多都是改，现在感觉不够了，需要系统的了解一下。
昨天去图书馆借了《锋利的jQuery》开始自学jQuery顺便学习下JS。
开始讲了一些基础的东西，感觉就是在用$(“”)选择html里面的内容对其进行操作。想法比较简单，毕竟刚刚看嘛，做了第一个 jQuery的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-1</title>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
</head>
<body>
</body>
</html>
知道了格式，alert方法输出”里面的值”。
基本选择器：
1．$(“#one”).css(“background”,”#bbffaa”);//改变id为one元素的背景颜色
2．$('.mini’).css(“background”,”#bbffaa”);//改变class为mini元素的背景颜色
3．$('div’).css(“background”,”#bbffaa”);//改变所有元素为<div>的背景颜色
4．$('*').css(“background”,”#bbffaa”);//改变所有元素的背景颜色
5．$(“span,#two”).css(“background”,”#bbffaa”);//改变所有<span>和id为two的元素
层次选择器：
1.$("ancestor descendant")//选取ancestor元素中所有的descendant元素
2.$("parent>child")//选取parent元素下child元素
3.$("prev+next")//选取紧挨着prev的next元素
4.$("prev~siblings")//选取prev之后所有siblings元素
后俩种层选择器与方法的等价关系
1.$(".one+div");等价于$(".one").next("div");
2.$(".one~div");等价于$(".one").nextAll("div");
结束练习
1.用toggle()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
var $needhide = $('ul li:gt(5):not(:last)');//选择从第七个开始除去最后一个的所有li
$needhide.hide();//设置为不可见
var $needbtn = $('div.showmore > a');//匹配showmore元素下的所有a（显示品牌链接）
$needbtn.click(function(){
$needhide.toggle();
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>
2.用hide()和show()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.promoted a { color:#F50;}
</style>
<script src="js/jquery-1.3.1.js" type="text/javascript"> </script>
<script type="text/javascript">
$(function(){
var $needhide = $('ul li:gt(5):not(:last)');
$needhide.hide();
var $needbtn = $('div.showmore > a');
$needbtn.click(function(){
if($needhide.is(':visible')){
$needhide.hide();
$('.showmore a span').text('显示全部');
}
else{
$needhide.show();
$('.showmore a span').text('显示精简');
}
return false;
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href=""><span>显示全部</span></a>
</div>
</div>
</body>
</html>
递归做的动作效果
function animateIt() {
$("#mover").slideToggle("slow", animateIt);
}
animateIt();
转义字符
<div id="id#b">bb</div> <div id="id[1]">cc</div>
$("#id\\#b")
$("#id\\[1\\]")
手动重置页面元素
$("#reset").click(function(){
$("*").removeAttr("style");
$("div[class=none]").css({"display":"none"});
});