包装集

<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. 【JavaScript】 JS面向对象的模式与实践 （重点整治原型这个熊孩子 (/= _ =)/~┴┴ ）

    参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript>  —— KYLE SIMPSON   在JS的面向 ...

  2. java 对象的初始化过程

    PersonDemo p=new PersonDemo("lisi",20);这句话都做了什么事情? 因为new用到了PersonDemo.class,所以会先找到PersonDe ...

  3. MongodDB学习笔记（二）（复制）

    mongoDB的复制非常容易配置,其实现有两种方式,一种是主从复制,一种是复制集,前者的好处是容易配置,但是如果主服务器宕掉了,整个系统就崩溃了,后者的好处是如果主服务器宕掉了,其他服务器会通过投票选 ...

  4. 肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版

    肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版 下载链接: https://u253469.ctfile.com/fs/253469-229815828

  5. 【HTML】HTML基础知识

    <!DOCTYPE html>表示HTML5文档申明,不区别大小写,通常这么写. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 ...

  6. Swift3.0 UITextField

    import UIKit private var textfieldd = UITextField() class TextFieldViewController: UIViewController, ...

  7. 通过自动回复机器人学Mybatis 笔记：接口式编程

    [接口式编程]尚未遇见Spring --> 代码量反而增加 1.增加约定,减少犯错的可能(不用直接去写字符串 修改点1:命名空间 修改点2:增加接口,方法名与配置文件中的id对应 package ...

  8. bzoj 3142: [Hnoi2013]数列

    Description 小T最近在学着买股票,他得到内部消息:F公司的股票将会疯涨.股票每天的价格已知是正整数,并且由于客观上的原因,最多只能为N.在疯涨的K天中小T观察到:除第一天外每天的股价都比前 ...

  9. nova创建虚拟机源码分析系列之八 compute创建虚机

    /conductor/api.py _build_instance()  /conductor/rpcapi.py  _build_instance() 1 构造一些数据类型2 修改一些api版本信息 ...

  10. 对于group by 和 order by 并用 的分析

    今天朋友问我一个sql查询. 需求是 找到idapi最近那条数据,说明idapi 是重复的,于是就简单的写了 SELECT * FROM `ag_alarm_history`   group by ` ...