前言:jq的第二节课。
内容:
1.管理选择结果:
(1)获取元素个数:$("img").size():获取页面中所有“img”个数;
(2)提取元素:$("img[title]"):获取所有设置了title属性的“img”标签;$("img[title]")[1]:表示获取所有设置了title属性的“img”标签中的第二个元素,等价于$("img[title]").eq(1);例:var iNum=$("li").index($("li[title=isaac]")[0])是获取<li title="isaac">标签在整个列表中所处的位置,并返回给iNum;$(this)表示当前操作对象;$(this).index表示获取当前操作对象的索引。
(3)添加、删除、过滤元素:$("img[alt],img[title]").addClass("myClass"):所有设置了alt属性(即若图片显示错误的话,给出的一个错误提示)的img标签和所有设置了title属性的img标签添加样式;删除样式的格式为:removeClass();
$("li[title]").not("title*=isaac")是所有设置了title属性的li标签,但不包括title值中任意匹配字符串Isaac的那些li标签(注:not()方法所接受的参数不包括特定的元素,只能是通用的表达式);
$("li").filter("[title*=isaac]")等价于$("li[title*=issac]"),filter中的参数不能直接是等于匹配,只能是前匹配^=,后匹配&=,任意匹配*=;filter(函数)函数要求返回布尔值,对于返回值为true的元素保留,否则去除。
$("p").find("span"):在所有的p标签中找span标签,获取一个新的元素集合;
var bHasImage=$("div").is("img"):页面中的div块是否包含img标签。
(4)jQuery链:jQuery语句链接在一起。
$("div").addClass("myClass1").filter(function(index){return index==1||$(this).attr("id")=="fourth"}).addClass("myClass2"):表示整体div加myClass1,然后进行筛选,筛选出的元素再加myClass2,后面的操作都是以前面的操作结果为对象的,如果操作对象为上一步对象,则用end方法,如:$("p").find("span").addClass("myClass1").end().addClass("myClass2")。
$("div").find("p").addClass("myBackground").andSelf().addClass("myBorder"):表示在div中找p,给p加myBackground,然后把div和p合并,添加myBorder,对div和p都有效。
2.标记的属性:
(1)each():遍历元素。
1 $(function(){ 2 $("img").each(function(index){ 3 this.title="这是第"+index+" 副图,id是 "+this.id; 4 }); 5 });
(2)获取属性的值:
*<em>标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来讲,这意味着要把这段文字用斜体表示。
var sTitle=$("em:eq(1)").attr("title"),表示获取第二个em的title属性;
$("a[href^=http://]").attr("target","_blank"),设置属性值;
$("img").attr({src:"1.png",title:"flower",alt:"国家"}):设置多个属性值;
$("button").removeAttr("disabled"):删除属性值。
后记:复习,预习,练习。