包装集

<body>

    <div id="a01">1.包装集——length</div>

    <div id="a02">2.包装集——index(obj)</div>

    <div id="a03">3.包装集——get(index)或者[index]_会由Jquery对象变成Dom对象</div>

    <div id="a04">4.包装集——add()</div>

    <a href="#">我是一个链接</a>

    <div id="a05">5.包装集——clone().appendTo</div>

    <div id="a06">6.包装集——not() [去掉]</div>

    <div id="a07">7.包装集——filter [保留]</div>

    <div id="a08">8.包装集——slice(2,4) [取中间]</div>

    <div id="a09">9.包装集——each </div>

</body>
1.包装集——length
$("#a01").click(function(){

        alert($("#a01").length);

    });
2.包装集——index(obj)
$("#a02").click(function(){

        var arrayList=$("div");

        var oneElement=$("#a01");

        alert ( arrayList.index( oneElement ) );

        //错误示范

         //alert(arrayList.index(1));//index(int)不返回对应的坐标对象

        //解释

        alert( arrayList[1] );

        alert( $(arrayList[1]) );

        //包装集包含里面的所有元素都只是DOM对象，而不是Jquery对象

        //alert( arrayList[1].text() )

        alert( $(arrayList[1]).text() )

        });
3.包装集——get(index)或者[index]_会由Jquery对象变成Dom对象
$("#a03").click(function(){

         var arrayList=$("div");

         //get[]获得的是Dom对象

         alert( arrayList[2].innerText);

         //$()Jquery对象

         alert( $(arrayList[2]).text() )

         alert( $(arrayList.get(2)).text() )

        })
4.包装集——add()
$("#a04").click(function(){

        var arrayList= $("div");

        arrayList

        .css("border","50px solid gray")

        .add("<a href='#'>123</a>").appendTo(document.body)

        .css("background","pink");

        });
5.包装集——clone().appendTo
//clone()克隆

     $("#a05").click(function(){

            $("a").clone().appendTo(document.body);

        });

6.包装集——not() [去掉]

//去掉 not

$("#a06").click(function(){

$("div").not("#a05,#a06").css("background","green");

});

7.包装集——filter [保留]

//保留

     $("#a07").click(function(){

                $("div").filter("#a05,#a06").css("background","green");

     });

8.包装集——slice(2,4) [取中间]

$("#a08").click(function(){

                $("div").slice(2,4).css("background","green");

     });

9.包装集——each

//each遍历

     $("#a09").click(function(){

                $("#a01,#a02,#a03").each(function(){

                alert($(this).text());

                });

     });

Jquery_基础(二) 包装集的更多相关文章

  1. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

  2. 从零开始学 Web 之 jQuery（八）each，多库共存，包装集，插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. jQuery包装集

    jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...

  4. Dom对象和jQuery包装集

    Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...

  5. 【Storm】Storm实战之频繁二项集挖掘

    一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...

  6. Hadoop基础-Hadoop的集群管理之服役和退役

    Hadoop基础-Hadoop的集群管理之服役和退役 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,如果是上千万规模的集群,难免一个一个月会有那么几台服务器出点故 ...

  7. 【Storm】Storm实战之频繁二项集挖掘（附源码）

    一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...

  8. Java面试题总结之Java基础(二)

    Java面试题总结之Java基础(二) 1.写clone()方法时,通常都有一行代码,是什么? 答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有G ...

  9. jQuery学习笔记(3)-操作jQuery包装集的函数

    一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...

随机推荐

  1. Django的Models

    Django的数据库配置: 1    django默认支持sqlite,mysql, oracle,postgresql数据库 2.   在django的项目中会默认使用sqlite数据库,如果要使用 ...

  2. 深入理解计算机系统_3e 第六章家庭作业 CS:APP3e chapter 6 homework

    6.22 假设磁道沿半径均匀分布,即总磁道数和(1-x)r成正比,设磁道数为(1-x)rk: 由题单个磁道的位数和周长成正比,即和半径xr成正比,设单个磁道的位数为xrz: 其中r.k.z均为常数. ...

  3. idea svn 设置忽略 文件

    这里的忽略一直灰色的,可以进入 这里的版本控制里进行忽略选择 或者 这里进行添加 这里有三个选择 按照顺序 1.忽略指定的文件 2.忽略文件夹下所有文件 3.忽略符合匹配规则的文件 到Commit C ...

  4. HTML5 高级系列：web Storage

    前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方式都是通过键值对保存数据,存取方便,不影响网站性能.他们的用法相同, ...

  5. iOS tableView 数据处理，数据分类相同数据整合、合并计算总数总价

    // 数据下载得到数组数据 modelArray = [MZPriceModel mj_objectArrayWithKeyValuesArray:data[@"info"]]; ...

  6. Docker（三）：Docker仓库配置

    1.仓库介绍 仓库(repository)用来集中管理Docker镜像,支持镜像分发和更新. 目前世界上最大最知名的公共仓库是Docker官方的Docker Hub,国内比较知名的有:Docker P ...

  7. BeanShell断言（一）

    在beanShell中直接可以调用的变量,无需加前缀. 1.log 打印日志 log.info(“在控制台打印日志”); 2.SampleResult 获取SampleResult对象,可以通过这个对 ...

  8. Solr 管理界面删除所有数据

    https://my.oschina.net/lcdmusic/blog/326698

  9. day 10 字符编码和文件处理 细节整理

    pycharm是文本编辑器. 大概理解为:  输出到屏幕上的时候,是解码过的字符串,用 decode 处理的时候要编码成相应的流, encode 成你要用的格式就可以了 1 .字符编码: 字符==== ...

  10. Vuejs之开发环境搭建

    Vue.js Vue.js是目前很火的一个前端框架,采用MVVM模式设计,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快 ...