JQuery学习第二天
1、CSS选择器
学jQuery选择器之前先了解下css的选择器
标签选择器（td、a、p），ID选择器（#note），类选择器（div.note、.mycss），群组选择器（td,a,p、div.a,li,p），后代选择器（#links a、#footer .mycss），通配选择器（*）
2、JQuery选择器
JQuery选择器完全继承了CSS的选择器，而CSS只是改变样式，Jquery是添加动作；
3、选择器的优势
使用$(“#id”)代替了document.getElementById()函数，而使用$(“name”)代替了document.getElementsByTagName()函数
4、选择器分类
基本选择器：通过元素的id、class和标签名（a,li,ul,p,span等）
层次选择器：获取特定元素例如，后代元素、子元素、相邻元素和兄弟元素
$(“inname mycss”)选取inname元素里面的所有mycss的后代元素
$(“parent>child”)选取parent元素下的child元素（这个和上一个是有区别的）
$(“prev+next”)等同于next()方法是选择prev的下一个元素
$(“prev~myccc”)等同于nextAll()方法
过滤选择器：包括有基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器
表单选择器：有:input、:text、:password、:redio等
5、选择器使用注意事项
选择器中特殊符号：·、#、（、]
这些符号不允许出现，万一有这样的符号，可以使用\\进行转义比如：mycss#b可以写成mycss\\#b
选择器的空格问题，多一个和少一个空格是完全不同的两个结果
6、其他选择器
如果选择器不够用请考虑使用如下选择器：MoreSelectors for jQuery，Basic Xpath等
知识点汇总：
Show()是显示隐藏的匹配元素，css(name,value)是给元素设置样式，text(string)是给元素添加文本内容，filter(expr)选出表达式中元素expr可以多个用逗号隔开，addClass(class)给元算添加指定css类名，而removeClass正好相反
附上一个简单的例子：
<style>
.redclass{ color:red;}
</style>
<div class="Sub">
<ul>
<li>佳能1<i>111</i></li>
<li>佳能2<i>112</i></li>
<li><a href="#">佳能3</a><i>113</i></li>
<li><a href="#">佳能4</a><i>114</i></li>
<li><a href="#">佳能5</a><i>115</i></li>
<li><a href="#">佳能6</a><i>116</i></li>
<li><a href="#">佳能7</a><i>117</i></li>
<li><a href="#">佳能8</a><i>118</i></li>
<li><a href="#">佳能9</a><i>119</i></li>
<li><a href="#">佳能10</a><i>120</i></li>
<li><a href="#">佳能11</a><i>121</i></li>
<li><a href="#">佳能12</a><i>122</i></li>
<li><a href="#">佳能13</a><i>123</i></li>
<li><a href="#">佳能14</a><i>124</i></li>
</ul>
<div class="showmore"><a href="?"><span>显示全部产品</span></a></div>
</div>
<script language="javascript">
$(function(){
var $category=$(‘ul li:gt(5):not(:last)’);
$category.hide();
var $tog=$(‘div.showmore > a’);
$tog.click(function(){
if($category.is(":visible")){
$category.hide();
$(‘.showmore a span’)
.text("显示全部产品");
$(‘ul li’).removeClass("redclass");
}else{
$category.show();
$(‘.showmore a span’)
.text(‘显示精简内容’);
$(‘ul li’).filter(":contains(‘佳能2’),:contains(‘佳能4’)")
.addClass("redclass");
}
return false;
});
})
</script>