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

  • 相关阅读:
    一道思考题所引起动态跟踪 ‘学案’
    Docker学习重点(3)~docker命令:帮助命令、镜像命令、容器命令、常用其他命令
    Docker学习重点(2)~docker安装、配置阿里云镜像加速
    Linux 常见必备
    Docker学习重点(4)~docker 部署环境
    本地虚拟机运行Linux的发行版软件(centos)部署项目
    Docker学习重点(1)~docker基本介绍
    AWS云服务器rpf配置踩坑记
    Asp.Net Core WebApi使用Swagger分组展示接口
    Asp.Net Core WebApi中集成Jwt认证
  • 原文地址:https://www.cnblogs.com/16lily521/p/4877875.html
Copyright © 2020-2023  润新知