20151007jq2结果集处理
$("img").size()获取元素的个数
$("img[title]")获取所有设置了title属性的img标签
$("img[title]").eq(1)==$("img[title]")[1] 获取所有设置了title属性的img标签中的第二个元素
index()方法获取索引值
<div></div>
<div title="你好"></div>
<div></div>
<div></div>
<input type="button" value="按钮">
获取到设置了title属性的div在整个div里的索引
$("div").index($("div[title='你好']"))
<div></div>
<div title="你好"></div>
<div></div>
<div title="你好"></div>
<div></div>
<input type="button" value="按钮">
获取到设置了title属性等于你好的第二个div在整个div里的索引
$("div").index($("div[title='你好']").eq(1))
当单击div时弹出在DIV中的索引及内容
$("div").click(function(){
$(this).index();//获取当前点击div的索引
$(this).text();//获取当前点击div的内容
});
val() 获取到表单的value的值
.addclass()添加样式
$("div").addClass("myClass1 myClass2");
.removeClass()删除样式
$("div").removeClass("myClass1");
给设置了alt属性或者title属性的img添加CSS样式(class)
$("img[alt],img[title]").addclass("imgborder");
.imgborder{border:1px solid #f00;}
<img src="" alt="" />
移除位置等于4的css样式
$("img").eq(3).removeclass("imgborder");
.img{border:1px solid #f00;}
id的选择级比class要高一些,如果元素有设置ID,JQuery里添加class是不起作用的。
.not()
设置了title属性的li标签中不包含title属性值包括issac的li标签
$("li[title]").not("[title*=issac]")
filter()方法 筛选出 不能直接是等匹配只能是^= &= *=
筛选出title属性值包括issac的li标签
$("li").filter("[title*=isaac]") 等同于$("li[title*=isaac"])
find()方法 查找
$("p").find("span")在所有的p标记元素中搜索span标记
is方法 返回值ture false
var bHasImge=$("div").is("img")页面中的div块中是否包含img标记
JQuery链
整体div加myclass1,然后进行筛选,筛选出的元素再加上myclass2 (筛选出索引等于1或者当前id=four的div)
$("#btn1").click(function () { $("div").addClass("myclass1").filter(function (index) { return index==1 || $(this).attr("id") == "four" }).addClass("myclass2"); });
<input type="button" value="按钮" id="btn1" /> <div id="one">aaaa</div> <div id="two">bbbb</div> <div id="three">cccc</div> <div id="four">dddddddd</div> <div id="five">eeeee</div>
.myclass1{ color:#f00;} .myclass2{ font-size:100px;}
end() andSelf()方法
1、给p里的span加上myclass1和myclass2的样式
$("p").find("span").addClass("myclass1").addClass(“myClass2")
2、给p里的span加上myclass1,给p加上myClass2
$("p").find("span").addClass("myclass1").end().addClass("myClass2")
3、给div里的p加上myBackground,给div以及div里面的p加上myBorder
$("div").find("p").addClass("myBackground").andSelf().addClass("myBorder")
each()对结果集遍历
示例遍历div,给div加上title属性。
$("div").each(function (index) { var i = index + 1; $(this).attr("title", "我是第" + i + "个div"); });
attr() 获取属性值 设置属性值
$("div").eq(4).attr("id") 获取索引为4的div的id属性值
$("div").eq(3).attr("title","你好吗?");设置索引为3的div的title属性值为你好吗?
设置多个属性值
$("div").eq(3).attr({"title":"你好吗?","ID":"six"});
$("div").eq(3).removeAttr("title");移除属性
.css()设置结果集的css样式("color","red") 内联样式 优先级最高 属性比较少的时候
$("div").eq(3).css({"color":"red","font-size":"20px});
.addClass()加入已经写好的css样式。属性比较多的时候