Jquery_基础(二) 包装集
包装集
<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_基础(二) 包装集的更多相关文章
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 从零开始学 Web 之 jQuery(八)each,多库共存,包装集,插件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery包装集
jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...
- Dom对象和jQuery包装集
Dom对象 在传统的JavaScript开发中,我们经常都是首先获取Dom对象,比如: document.getElementById("dv1"); 我们经常使用getEleme ...
- 【Storm】Storm实战之频繁二项集挖掘
一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...
- Hadoop基础-Hadoop的集群管理之服役和退役
Hadoop基础-Hadoop的集群管理之服役和退役 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在实际生产环境中,如果是上千万规模的集群,难免一个一个月会有那么几台服务器出点故 ...
- 【Storm】Storm实战之频繁二项集挖掘(附源码)
一.前言 针对大叔据实时处理的入门,除了使用WordCount示例之外,还需要相对更深入点的示例来理解Storm,因此,本篇博文利用Storm实现了频繁项集挖掘的案例,以方便更好的入门Storm. 二 ...
- Java面试题总结之Java基础(二)
Java面试题总结之Java基础(二) 1.写clone()方法时,通常都有一行代码,是什么? 答:super.clone(),他负责产生正确大小的空间,并逐位复制. 2.GC 是什么? 为什么要有G ...
- jQuery学习笔记(3)-操作jQuery包装集的函数
一.前言 在使用jQuery选择器获取到jQuery包装集后,我们就要对这些包装集进行各种操作 二.创建新的元素 1.使用HTMLDOM创建元素 (1)什么是DOM 当网页被加载时,浏览器会创建页面的 ...
随机推荐
- WCF实现长连接
由于WCF的机制,连接池会在连接建立一定时间后超时,即使设置了超时时间非常长,也可能被服务端系统主动回收.之前做项目时碰到了这个问题,所以项目上考虑采用长连接,自动管理连接池,当连接超时后,自动重建, ...
- Django实战,小网站实现增删改查
直接上代码 视图: from django.shortcuts import render,render_to_response, redirect from submit import models ...
- 【JMeter】if语句中不能Failure=false解决办法
错误写法: if(roomId.matches("regEx")) Failure=false; else{ Failure=true; FailureMessage=" ...
- LAMP第一部分-环境搭建
1. 安装mysqlcd /usr/local/src/ wget http://syslab.comsenz.com/downloads/linux/mysql-5.1.40-linux-i686- ...
- sql server 2012 新知识-序列
今天聊一聊sql 2012 上的新功能-----序列 按我的理解,它就是为了实现全局性的唯一标识,按sql server 以前的版本,想对一张表标识很简单,比如identity,但如果要对某几张有业务 ...
- Kotlin——最详细的抽象类(abstract)、内部类(嵌套类)详解
如果您对Kotlin很有兴趣,或者很想学好这门语言,可以关注我的掘金,或者进入我的QQ群大家一起学习.进步. 欢迎各位大佬进群共同研究.探索QQ群号:497071402 进入正题 在前面几个章节中,详 ...
- qrc资源文件加载后,裸机环境下图片不显示
问题描述:在qt开发环境下,使用qss进行界面美化工作,里面包含许多图片资源.最后项目决定把这些图片资源和代码一起打包.然后就把图片资源和qss文件一起编入qrc文件中进行编译.在本机开发环境下是没有 ...
- 1.1 About Percona XtraDB Cluster
摘要: 出处:kelvin19840813 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎 ...
- Linux 下Beanstalk安装
1.安装 # wget https://github.com/kr/beanstalkd/archive/v1.10.tar.gz # tar xzvf v1.10 # cd beanstalkd-1 ...
- HyperV下安装Centos 7全屏显示方法
Hyper-v一般模式的分辨率很小,所以我们在电脑上显示的时候往往不能全屏,即使全屏了也只是轮廓全部工作区并没有全屏显示.导致这个问题的原因是:我们在装系统时,没有选择合适的屏幕分辨率,所以这里只要在 ...