2015.7.22 第十一课 课程重点（jq：元素获取、添加、删除、过滤、判断、遍历、取值，样式设置、改变对象、切换、判断）
1、获取元素：
1）.size()： 获取元素的个数。
$(“img”).size()：获取有多少个img。
2）.eq()：获取元素。
$(“img[title]”).eq(1)：获取第二个带有title属性的img标签。
也可以写作： $(“img[title]”)[1]，此括号里的1代表索引1，所以是对应第二个，一般多用eq()。
3）.get() ：获得由选择器指定的DOM元素。
x=$("p").get(0)：获取第一个 p 元素的值。
4）index()：获取某项标签的索引。
$(“div”).index($(this))：获取当前操作的这个div在所有div中的索引。
5）find()：搜寻标记获得新的集合。
$(“p”).find(“span”)： 在所有p标记元素中搜索span标记，获取一个新的元素集合。
*$(this)：表示当前操作对象。
【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ，说明这句话的意思。
答案： 1） $(“li”)：对所有的li标签进行查找；
2） $(“li”).index() ：查找（）内对象在所有li标签中的索引；
3） $(“li[title=isaac]”)[0]：查找第一个拥有“title=isaac”这个title属性的li标签;
4） 最终解释为：对所有的li标签进行查找，查找出“第一个拥有‘title=isaac’这个属性的li标签"在所有li标签中的索引。
2、添加元素：addClass()
$(“img[title]”).addClass(“myClass”) ：给所有带有title属性的img标签，添加上myClass的样式。
3、删除元素：not()
$(“li[title]”).not(“[title*=isaac]”) ：在所有设置了title属性的li标签中，删除掉带有[title*=isaac]这种title属性的li标签。（[title*=isaac]：含有isaac字符串的title）
注意：not()方法所接受的参数不能包含特定的元素，只能是通用的表达式。
错误：$(“li[title]”).not(“img[title*=isaac]”)
正确： $(“li[title]”).not(“[title*=isaac]”)
4、过滤元素：filter()
$(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) ：对所有的li标签，过滤筛选出包含有[title*=isaac]这种title属性的标签。
注意：
1）filter中的参数，不能直接是等于匹配，只能是前匹配^=,后匹配&=,任意匹配*=
2）filter（函数） 函数要求返回布尔值，对于返回值为true的元素保留，否则去除
5、判断元素：is()
var bImge=$(“div”).is(“img”) ：判断页面中的div块中是否包含img标记，返回布尔值，是或否。
6、遍历元素：each()
*遍历：将选中的标签，一个一个全部经历一遍。
在js中：
$(function(){
$(“img”).each(function(index){
this.title="这是第"+index+"副图，id是"+this.id+"，name是"+this.name;
});
});
在html中：
<img id="img1" name="a1" src="1.jpg">
遍历所有的img，让每一个img都设置一个title属性值为：这是第 n 幅图，id是img1，name是a1
7、获取属性/设置属性值：attr()
attr()有2个作用：一个是获取属性值，一个是为属性设置值。
1）获取属性值：
var s = $("#txt").attr("value"); 获取到txt里面的value属性值
2）设置属性值：
$("#txt").attr({"value":"xxxxx","title":"aaaaa"}); 查询txt，为其中的value设值xxxxx的值，为title设值aaaaa的值
8、设置元素样式：
1）添加样式：addClass()
$("#btn").click(function(){
$(this).addClass("b"); //找到id为btn的标签,点击后让它在原样式基础上加上样式b
});
2）删除样式：removeClass()
$("#btn").click(function(){
$(this).removeClass("b"); //找到id为btn的标签,点击后让它在原样式基础上移除样式b
});
3）写入样式：css()
$("#btn").click(function(){
$(#d1).css("color","blue"); //找到id为btn的标签,点击后让id为d1的标签拥有“颜色变成蓝色”的css样式
});
4）切换样式：toggleClass()
$("#btn").click(function(){
$(#d1).toggleClass("highlight"); //点击时不断切换，样式交替执行，一会儿有此样式一会儿没有
});
9、改变操作对象：
1）.end()：为当前对象的前一步对象进行操作
2）.andself()：为当前对象和它的前一步对象都进行操作
【例】说明以下三句话的含义：
1）$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)
2）$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)
3）$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)
答：1）在所有p标签中，找到span标签为它们加上myClass1样式，再加上myClass2样式
2）在所有p标签中，找到span标签为它们加上myClass1样式，然后返回至上一个对象$(“p”)，为所有p标签加上myClass2样式
3）在所有p标签中，找到span标签为它们加上myClass1样式，并且为它们自己以及上一个对象$(“p”)加上myClass2样式
10、动态切换：
1）mouseover()：鼠标移动上去时改变样式
$(“p”).mouseover(function(){
$(this).css(“color”,”red”);
});
2）mousetout()：鼠标移走后改变样式
$(“p”).mouseout(function(){
$(this).css(“color”,”red”);
});
3）hover（事件1，事件2）：鼠标放上去事件1，移开事件2
$(“p”).hover(function(){
$("#d1").addClass(“c”);
},function(){
$("#d1").removeClass(“c”);
});
对p标签中id=d1的标签，鼠标放上时加c样式，移开时移除c样式。
11、判断样式：hasClass()
$(“li”).hasClass(“myClass”); 判断li中是否含有myClass的样式，返回为布尔型，是或否
