Jquery学习笔记:获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能。
在web页面中,所有的js操作都是围绕操作dom对象来的。而jquery对象就是对dom对象的封装。整个jquery代码的主要工作就是获取相应的jquery对象,然后调用对象的各种方法进行操作。也就是获取jquery对象是编写代码的核心和基础。
通过jquery提供的方式,可以有很多种获取jquery对象的方法,下面会介绍一些常用的方式。
在jquery中,是通过各式各样的选择器来获取jquery对象的。
选择器是一个字符串,传给$函数,返回jquery对象。
需要特别注意的, 一个jquery对象不是说就对应一个dom对象(html元素),而是包含1个或多个dom对象(即html元素)。
1、通过html元素的id值 获取对象
var obj = $("#userid");
alert(obj.length); //正常是1,因为id在html元素中必须是唯一的。即使不唯一,也只会返回包含一个元素的数组,是第一个满足id条件的元素.
alert(obj.selector); //显示的内容为 #userid
alert(obj.html()); //html()方法返回对应元素包含的html内容
2、通过html元素的标签 获取对象
如 $("body") 获取到body元素。独立采用这种方式的场景很少,因为一个html页面中标签是大量重复的。
比如$("div") 会获取到页面上所有标签为div的元素。
还有一种特殊的方式 $("*") 获取页面所有的元素。这个可能对一些工具有用,比如统计页面的一些数据。
3、通过css样式值获取jquery对象
在html页面中,每个元素的id是唯一的,而且一个元素只有1个id值。
但对于元素的样式则不一样,一个元素可以有多个样式值(如class="btn btn-default",这里有两个样式),不同的元素可以设置相同的样式值。
而且往往大部分场景是这样的,因为样式的设置就是可以用来共享,让不同的元素有同样风格的展示。
var obj = $(".btn");
alert(obj.length); //显示的数目是配置了样式为btn的元素个数
alert(obj.selector); //显示 .btn
alert(obj.html()); //因为obj中有多个元素,这里调用html()方法返回的是第一个元素包含的html内容
obj.each(function(index,data){ //each方法用于遍历obj中的元素
alert(index+"="+data.innerHTML); //index是序号,从0开始;data是对应的元素,这里需要注意的是,这里的data不是jquery对象,而是dom对象
});
4、组合选择
设置多个选择器,将每个选择器匹配到的元素合并在一起返回。注意,是合并的关系。不要和层次选择器混淆了。
如:
<div>
<p id="pid"></p>
<span class="cspan"></span>
<div></div>
</div>
js代码
var obj = $("#pid,.cspan"); //将id为pid 和 样式为 cspan的的元素都返回
alert(obj.length); //2
这种场景应用不多,完全可以分多次获取元素,合并在一起主要有时简化代码编写,比如对这些返回额元素执行一些共性的操作。
5、jquery对象和dom对象的互相转换
将dom对象传给$方法返回的就是jquery对象
var obj = document.getElementById("userid"); //通过原生的dom方法获取 dom对象
alert(obj.innerHTML); //显示dom对象包含的html内容
var jobj = $(obj); //将dom对象转换为jquery对象
alert(jobj.length); //显示1,因为只包含了1个dom对象
alert(jobj.html()); //调用jquery的方法,显示其包含的dom对象包含的html内容
直接通过下标引用就可以获取到jquery对象中包含的dom对象,如:
var obj = $("#userid");
var domObj = obj[0]; //因为这里的obj是通过id获取的,只包含一个dom元素,所以下标取0
alert(domObj.innerHTML); //获取dom元素的内容
如果对于包含多个dom对象的jquery对象,要想获取其中所有元素,可以通过下标获取,也可以通过前面介绍的each方法来遍历。
6、获取jquery对象中的某个jquery对象
通过选择器获取到的jquery对象可能包含多个dom对象。
这时我们可以通过 jqueryObj[序号] 或 jqueryObj.get(序号) 这两种方式获取到的是 dom对象。
要直接获取到jquery对象,需要用 jqueryObj.eq(序号) 这种方式。 或者通过 $(dom对象)将dom对象转成jquery对象。
7、小结
上面介绍了获取jquery对象最简单和基本的几种方式。下面的文章中会介绍更多的方法。
Jquery学习笔记:获取jquery对象的基本方法的更多相关文章
- jQuery 学习笔记:jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- Jquery学习笔记:利用find和children方法获取后代元素
在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...
- Jquery学习笔记:利用parent和parents方法获取父节点
通过选择器一般只能获取指定标识的节点,或者获取子节点. 有些场景下,往往需要根据当前节点找到满足条件的父节点.这个可以通过相应的方法来实现. 1.parent方法 该方法可以获取元素的直接父节点. 我 ...
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- jQuery学习笔记(jquery.simplemodal插件)
官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...
- jQuery学习笔记之jQuery.fn.init()的参数分析
这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下 从return new jQuery.fn.init( selector, context, rootjQuer ...
- jQuery学习笔记(jquery.form插件)
官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...
- 锋利的jQuery学习笔记之jQuery选择器
在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...
随机推荐
- jvm的内存区域简介
1.内存区域划分 jvm在执行java程序过程中会将管理的内存划分成若干不同的数据区域,他们分别是程序计数器,堆,方法区,虚拟机栈,本地方法栈. 1.1指令计数器 指令计数器是线程私有的,每个线程都有 ...
- 解决Windows 7下IE11无法卸载、无法重新安装,提示安装了更新的IE版本
2013年12月14日 iefans 有用户反馈在Windows 7系统上安装IE11时发现安装程序似乎出了问题,等待了很长时间都没有响应之后就断开了电脑的电源.之后IE11浏览器虽然能使用,却无法安 ...
- 使用Groovy进行依赖注入
为什么选择Groovy? 传统的依赖注入是XML,对我而言,可读性太差,太不美观,强烈地想换一个方式进行依赖注入,Groovy作为XML的替代方案,在Spring4之后被引入,是基于JVM的一门方言, ...
- asp.net使用unescape读取js escape编码过的字符串
escape() 是JavaScript的编码函数 例子:var esstring=escape("helloworld"); 为了防止数据传输读取中出现乱码现象,字符串往往要用J ...
- 「OC」内存管理
一.基本原理 (一)为什么要进行内存管理. 由于移动设备的内存极其有限,所以每个APP所占的内存也是有限制的,当app所占用的内存较多时,系统就会发出内存警告,这时需要回收一些不需要再继续使用的内存空 ...
- JAVA语言的素数判断,随机数,函数调用
近来刚学JAVA,就从JAVA写起吧,JAVA判别素数,其实方法和C/C++没什么区别,主要就是想谈一下,其中包括的3个点. (1)JAVA语言产生随机数,random函数,定义参数max的作用是给出 ...
- Resource is out of sync with the file system: 解决办法
在eclipse中,启动server时报此错,是因为文件系统不同步造成的,解决方法有两个: (1)选中工程,右键,选择F5(手动刷新): (2)Window->Preferences->G ...
- C# Setup package Uninstaller
安裝的部分就不介紹了,網上一搜一大堆,這裡只介紹下卸載的部分. 1.在C:\Windows\System32 目录下找到 msiexec.exe 拷贝到相应的地方,可修改名称为 Uninstall.e ...
- hdu4597 Play Game
Play Game Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Total Sub ...
- C# lazy<T>的用法
.NET 4.0中加入了lazy<T>(懒对象),其实叫懒对象感觉不对,更应该叫延迟对象加载. 正如我们所知,对象的加载是需要消耗时间的,特别是对于大对象来说消耗的时间更多.lazy可以实 ...