• Jquery 第二课(jq:元素获取、添加、删除、过滤、判断、遍历、取值,样式设置、改变对象、切换、判断)


    1、获取元素:

      1).size(): 获取元素的个数。

        $(“img”).size():获取有多少个img。

      2).eq():获取元素。

        $(“img[title]”).eq(1):获取第二个带有title属性的img标签。

        也可以写作: $(“img[title]”)[1],此括号里的1代表索引1,所以是对应第二个,一般多用eq()。

      3).get() :获得由选择器指定的DOM元素。

        x=$("p").get(0):获取第一个 p 元素的值。

      4)index():获取某项标签的索引。

        $(“div”).index($(this)):获取当前操作的这个div在所有div中的索引。

      5)find():搜寻标记获得新的集合。

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

      *$(this):表示当前操作对象。

      【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ,说明这句话的意思。

        答案: 1)  $(“li”):对所有的li标签进行查找;

            2)  $(“li”).index() :查找()内对象在所有li标签中的索引;

            3)  $(“li[title=isaac]”)[0]:查找第一个拥有“title=isaac”这个title属性的li标签;

            4)  最终解释为:对所有的li标签进行查找,查找出“第一个拥有‘title=isaac’这个属性的li标签"在所有li标签中的索引。

    2、添加元素:addClass()

      $(“img[title]”).addClass(“myClass”) :给所有带有title属性的img标签,添加上myClass的样式。

    3、删除元素:not()

      $(“li[title]”).not(“[title*=isaac]”) :在所有设置了title属性的li标签中,删除掉带有[title*=isaac]这种title属性的li标签。([title*=isaac]:含有isaac字符串的title)

      

    注意:not()方法所接受的参数不能包含特定的元素,只能是通用的表达式。
    错误:$(“li[title]”).not(“img[title*=isaac]”)
    正确: $(“li[title]”).not(“[title*=isaac]”)

    4、过滤元素:filter()

      $(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) :对所有的li标签,过滤筛选出包含有[title*=isaac]这种title属性的标签。

    注意:

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

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

    5、判断元素:is()

      var bImge=$(“div”).is(“img”) :判断页面中的div块中是否包含img标记,返回布尔值,是或否。

    6、遍历元素:each()

      *遍历:将选中的标签,一个一个全部经历一遍。

      在js中:

    $(function(){
      $(“img”).each(function(index){
        this.title="这是第"+index+"副图,id是"+this.id+",name是"+this.name;
      });
    });

       在html中:

      <img id="img1" name="a1" src="1.jpg">

      遍历所有的img,让每一个img都设置一个title属性值为:这是第 n 幅图,id是img1,name是a1

    7、获取属性/设置属性值:attr()

      attr()有2个作用:一个是获取属性值,一个是为属性设置值。

      1)获取属性值:

        var s = $("#txt").attr("value");  获取到txt里面的value属性值

      2)设置属性值:

        $("#txt").attr({"value":"xxxxx","title":"aaaaa"});  查询txt,为其中的value设值xxxxx的值,为title设值aaaaa的值

    8、设置元素样式:

      1)添加样式:addClass()

    $("#btn").click(function(){    
      $(this).addClass("b");    //找到id为btn的标签,点击后让它在原样式基础上加上样式b
    });

      2)删除样式:removeClass()

    $("#btn").click(function(){    
      $(this).removeClass("b");    //找到id为btn的标签,点击后让它在原样式基础上移除样式b
    });

      3)写入样式:css()

    $("#btn").click(function(){    
      $(#d1).css("color","blue");    //找到id为btn的标签,点击后让id为d1的标签拥有“颜色变成蓝色”的css样式
    });

    4)切换样式:toggleClass()


    $("#btn").click(function(){    
      $(#d1).toggleClass("highlight");    //点击时不断切换,样式交替执行,一会儿有此样式一会儿没有
    });

      

    9、改变操作对象:

      1).end():为当前对象的前一步对象进行操作

      2).andself():为当前对象和它的前一步对象都进行操作

      【例】说明以下三句话的含义:

      1)$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)

      2)$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

      3)$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)

      答:1)在所有p标签中,找到span标签为它们加上myClass1样式,再加上myClass2样式

        2)在所有p标签中,找到span标签为它们加上myClass1样式,然后返回至上一个对象$(“p”),为所有p标签加上myClass2样式

        3)在所有p标签中,找到span标签为它们加上myClass1样式,并且为它们自己以及上一个对象$(“p”)加上myClass2样式

    10、动态切换:

      1)mouseover():鼠标移动上去时改变样式

    $(“p”).mouseover(function(){     

      $(this).css(“color”,”red”);

    });

      2)mousetout():鼠标移走后改变样式

    $(“p”).mouseout(function(){     

      $(this).css(“color”,”red”);

    });

      3)hover(事件1,事件2):鼠标放上去事件1,移开事件2

    $(“p”).hover(function(){     

      $("#d1").addClass(“c”);

      },function(){     

          $("#d1").removeClass(“c”);

    });

         对p标签中id=d1的标签,鼠标放上时加c样式,移开时移除c样式。

    11、判断样式:hasClass()

      $(“li”).hasClass(“myClass”);  判断li中是否含有myClass的样式,返回为布尔型,是或否

  • 相关阅读:
    详解事件驱动跟消息驱动机制相比
    浏览器加载 CommonJS 模块的原理与实现
    全面理解 javascript 的 argements caller callee call apply 之caller
    在javaScript中检测数据类型的几种方式
    Netbeans IDE 安装Emmet插件并解决Emmet插件无效果问题
    JS的 try catch使用心得
    safari 浏览器 input textarea select 等不能响应用户输入
    js十大排序算法
    js实现 页面加载 完成 后顺序 执行
    原生JS封装 toast 弹层,自动关闭
  • 原文地址:https://www.cnblogs.com/admi88/p/4896454.html
Copyright © 2020-2023  润新知