zoukankan      html  css  js  c++  java
  • ASP.NET动态网站制作(10)-- JQ(2)

    前言: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"):删除属性值。

    后记:复习,预习,练习。

  • 相关阅读:
    使用 HTML5 可以做的五件很棒的事情
    分享最新20款非常棒的 CSS 工具
    最新17个紫色风格网页设计作品欣赏
    最新70佳很酷的名片设计作品欣赏
    50个优秀的名片设计作品欣赏
    推荐12个漂亮的CSS3按钮实现方案
    推荐10个很棒的 CSS3 开发工具
    30个复古风格的网页设计作品欣赏
    非常流行的十款 jQuery 插件推荐
    20个漂亮的WordPress作品集主题分享
  • 原文地址:https://www.cnblogs.com/zoe-yan/p/4867573.html
Copyright © 2011-2022 走看看