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、通过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对象
  });

3、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方法来遍历

4、小结

   上面介绍了获取jquery对象最简单和基本的几种方式。下面的文章中会介绍更多的方法。

时间: 2024-10-11 03:40:42

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

jQuery学习笔记之一——jQuery入门与基础核心

因为工作的原因,所以自学了下jQuery,这里以李炎恢老师的教程为自觉教程,并记录学习中遇到的问题. 教程下载地址: http://www.verycd.com/topics/2956408/ 课件下载地址: http://download.csdn.net/download/ip_kv3000/8986013 jQuery类库下载地址: http://jquery.com/ jQuery入门  优势.历史.版本我就不多说了,网上有的是.至于为什么学,因为很有用,为什么非要学他,因为微软加入到了

锋利的JQuery学习笔记之JQuery

今天终于看到了最令我兴奋的一章:JQuery与Ajax的应用.AJAX即"Asynchronous JavaScript and XML"(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式应用的网页开发技术.在最初学习Ajax的日子里,我被ASP.NET AJAX框架提供的UpdatePanel迷惑了,以后Ajax就这么简单,所以在最初做的几个项目里,前台代码里必至少有一个UpdatePanel区域,把要

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

锋利的Jquery学习笔记之Jquery的选择器

Jquery的选择器分为:基本选择器,层次选择器,过滤选择器和表单选择器. 1.基本选择器 基本选择器是Jquery中最常用的选择器,也是最简单的选择器. 2.层次选择器 如果想通过DOM之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和同辈元素等,那么层次选择器是一个非常好的选择. 在层次选择器中,第一个和第二个选择比较常用,而后面两个在JQuery里可以用更加简单的方法代替,所以使用的几率相对较小. 3.过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤

jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  (显示和隐藏) show() 方法和hide() 方法是jQuery中基本的动画方法.在HTML文档里,为一个元素调用hide() 方法,会将该元素的display样式改为“none”. $("element").hide(); //通过hide()方法将element元素隐藏 $("element").css("display","none"); //通过css()方法将elem

jQuery学习笔记(9)--jquery中的事件--$(document).ready()

1.$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高web应用程序的相应速度. 2.执行时机:DOM就绪后就会执行,而javascript中window.onload方法是在网页中的所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行. 3.可多次使用. 4.有简写的形式:$(function){} window.onload与$(document).ready()的比较: 1 <script src="Scripts/jquery-1.4.1.

jQuery学习笔记DOM操作之包含节点方法

jQuery学习笔记DOM操作之替换节点方法

python学习笔记8--面向对象--属性和方法详解

属性: 公有属性  (属于类,每个类一份) 普通属性  (属于对象,每个对象一份) 私有属性    (属于对象,跟普通属性相似,只是不能通过对象直接访问) 方法:(按作用) 构造方法 析构函数 方法:(按类型) 普通方法 私有方法(方法前面加两个下划线) 静态方法 类方法 属性方法 静态方法 @staticmethod静态方法,通过类直接调用,不需要创建对象,不会隐式传递self 类方法 @classmethod类方法,方法中的self是类本身,调用方法时传的值也必须是类的公有属性,就是说类方法

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·