jq第二讲

一、对选择器选择结果的处理

    1、获取元素的个数

    $("img").size();         返回img元素的个数

    2、提取元素

    $("img[title]")[1]          获取所有设置了title属性的img标记中的第二个元素。

    $("img[title]").eq(1)        与上面例子有相同效果

           $("li").index($("li[title=abc]").eq(1)

                        获取<li title="abc">标记在整个列表中所处的位置,并返回给index值。

    3、添加、删除

    $("img[alt],img[title]").addClass("mycss");

                        所有设置了alt属性的img标记和所有设置了title属性的img标记添加mycss样式。

    $("img").eq(3).removeClass("mycss");

                        所有img标签中第四个标签上去掉mycss样式。

    4、筛选:filter方法

    $("li").filter("[title*=abc]") 在li元素中title包含abc的li元素

    $("li[title*=abc]") 与上面例子有相同效果

                       注意:filter中的参数,不能直接是等于匹配,只能是前匹配^=,后匹配&=,任意匹配*=。

                                filter(函数) 函数要求返回布尔值,对于返回值为true的元素保留,否则去除。

    5、查找:find方法

    $("p").find("span") 在所有p标记元素中搜索span标记,获取一个新的元素集合。

    6、判断:is方法

           $("div").is("img") 页面中的div块中是否包含img标记。

    

二、jQuery链

    jQuery语句链接在一起的表现方式。

    $("div").addClass("myclass1").filter(function(index){return index == 1 || $(this).attr("id") == "four" }).addClass("myclass2");

                       首先$("div").addClass("myclass1")给所有的div加上myclass1的样式,

                       然后再返回的结果集中index等于1或当前元素的id为four的元素加上myclass2的样式

    $("p").find("span").addClass("myClass1").addClass("myClass2")

                       给p标签里面的span标签加上myClass1和myClass2的样式。

    $("p").find("span").addClass("myClass1").end().addClass("myClass2")

                       给p标签里面的span标签加上myClass1的样式,给p标签自己加上myClass2的样式。

                       end():表示结果标签的父标签

    $("div").find("p").addClass("myBackground").andSelf().addClass("myBorder")

                       给div标签里面的p标签加上myBackground的样式,给div以及div里面的p标签加上myBorder的样式。

                       andSelf():表示结果标签以及结果标签的父标签的集合

    

三、功能函数及方法

    1、遍历集合中的元素

    $(function(){                         //指定当前页面

              $("div").each(function(index) {           //遍历所有div对象

                   var i = index + 1;                     //index为位置标号需要加1来表示顺序号

                     $(this).attr("title", "我是第" + i + "个div");       //给当前对象赋新的title属性

              });

    });

    ** this:作为函数调用时this 绑定到全局对象;作为方法调用时this 绑定到该方法所属的对象。

                         this是包含它的函数作为方法被调用时所属的对象。

                

    2、获取/设置属性的值

       *<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。

    var sTitle=$("em:eq(1)").attr("title");         获取第二个em的title属性

    $("a[href^=http://]").attr("target","_blank");     设置属性值

    $("img").attr({src:"06.jpg",title:"公寓",alt:"国家"});   设置多个属性值

    $("img").removeAttr("title");               删除img的title属性值

    

    attr         获取对象的属性值

    removeAttr     删除对象的属性

原文地址:https://www.cnblogs.com/huang3/p/4863750.html