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样式。属性比较多的时候

 

posted @ 2015-10-14 17:36  lily521  阅读(154)  评论(0编辑  收藏  举报