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对象最简单和基本的几种方式。下面的文章中会介绍更多的方法。

转载于:https://www.cnblogs.com/51kata/p/5101819.html

Jquery学习笔记:获取jquery对象的基本方法相关推荐

  1. jQuery 学习笔记 迭代jQuery对象和非jQuery对象

    jQuery提供了一个通用对象迭代器$.each()和一个jQuery集合迭代器.each(),它们是不相同的. 事实上,jQuery还提供了一组更有用的$.map() 和 .map()方法 $.ea ...

  2. Jquery学习笔记:利用find和children方法获取后代元素

    在很多场景下,需要根据一个已知的jquery对象,去查找其满足条件的后代节点. 这时可以利用 find函数和children来处理. find和children函数都可有一个参数,常见的是一个字符串, ...

  3. Jquery学习笔记-获取select标签已经选中的值

    书上介绍有Jquery的form插件,这个插件有个函数: fieldValue(excludeUnsuccessful) 收集包装集里所有成功表单的值,并且返回这些值所构成的字符串数组.如果未找到任何 ...

  4. jQuery学习笔记之jQuery的DOM操作

    前期:http://blog.csdn.net/goodshot/article/details/20202019 一.节点的操作 1.查找节点: var $var_1=$("htmltyp ...

  5. jQuery学习笔记--目录

    jQuery学习笔记--Helloworld jQuery学习笔记--DOM对象和jQuery对象 jQuery学习笔记--jQuery选择器 jQuery学习笔记--jQuery的DOM操作 jQu ...

  6. jmh学习笔记-State共享对象

    系列文章目录 jmh学习笔记-源代码编译与bench mode jmh学习笔记-State共享对象 jmh学习笔记-State共享对象前后置方法 jmh学习笔记-代码清除 jmh学习笔记-常量折叠 j ...

  7. JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作,和其他js库冲突处理

    今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...

  8. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  9. jQuery学习笔记(二)

    jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素 使用HTML DOM 创建元素 var select=document.createElement("select& ...

  10. javaweb(03) jQuery学习笔记

    javaweb(03) jQuery学习笔记 jQuery介绍 什么是jQuery jQuery,顾名思义,也就是 JavaScript 和查询(Query),它就是辅助 JavaScript 开发的 ...

最新文章

  1. 64位操作系统的原理
  2. 跟正刊学习SCI英文写作——摘要部分的拆解
  3. jquery动画 -- 1.加载指示器
  4. php 滑块 爬虫_PHP实现简易爬虫与简易采集程序
  5. python 安装pip和Django
  6. 我在51cto博客安家了!
  7. 【内推】AI独角兽-数美科技-NLP/CV/ASR等开放百余岗位,薪资诱人
  8. 基于vue+node的校园交流平台
  9. 浅谈JavaScript函数重载
  10. JSTL流程控制操作--c:if,c:choose,c:when,c:other
  11. Linux中tar命令用法
  12. Linux命令——timeout
  13. android edittext过滤空格,关于android:在EditText中拦截空格键的问题
  14. pandas将csv文件保存文feather格式,大大加快读取速度
  15. 概率论-小记录(矩估计)
  16. 解决mysql sum求和返回null问题或IFNULL应用
  17. 认识一下阿里的AI殿堂-达摩院
  18. C# 2.0 Graphics 画雪人
  19. Report Painter学习记录
  20. 21天Python学习——lxml库与Xpath提取网页数据

热门文章

  1. c语言sum出错,ACM:Sum Problem 求和问题C语言源码
  2. 《动森》里那些看不见的声音设计
  3. 图形渲染技术分享:《GTA V 》图形分析摘要
  4. Linux 中 ss 命令的使用实例介绍
  5. 【Auto.js】[zip压缩] 将文件夹压缩成zip包
  6. Invalid VCS root mapping
  7. 卸载VMware Workstation出现错误: vmware-vmx.exe错误
  8. django 登陆增加除了用户名之外的手机和邮箱登陆
  9. WPF 使用MahApps.Metro UI库
  10. java mongoTemplate的group统计