Jquery 第二课（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的样式，返回为布尔型，是或否