jQuery基础学习2——DOM和jQuery对象

1 <body>
2         <h3>例子</h3>
3         <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
4         <ul>
5             <li id="apple">苹果</li>
6             <li>橘子</li>
7             <li>菠萝</li>
8         </ul>
9     </body>

可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点,这样得到的DOM元素就是DOM对象,DOM对象可以使用JavaScript中的方法,如下:

1 var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象
2
3 var objHTML = domObj.innerHTML;  //  使用JavaScript中的属性——innerHTML

jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么可以使用jQuery里的方法。

alert($(‘#apple‘).html());

这段代码等同于:

alert(document.getElementById(‘apple‘).innerHTML);


1.在jQuery对象中无法使用DOM对象的任何方法,例如$(‘#id‘).innerHTML和$(‘#id‘).checked之类的写法都是错误的,可以用$(‘#id‘).html()和$(‘#id‘).attr("checked")之类的jQuery方法来代替。

2.DOM对象也不能使用jQuery里的方法,例如document.getElementById(‘apple‘).html()也会报错,只能用document.getElementById(‘apple‘).innerHTML语句。

3.用#id作为选择符取得的是jQuery对象而并非document.getElementById(‘id‘)所得到的DOM对象,两者并不等价。



jQuery不能使用DOM中的方法,但如果jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有以下两种处理方法。

jQuery提供了两种方法将jQuery对象转换为DOM对象,即[index]和get(index)。

  1. jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象,jQuery代码如下:
var $cr = $("#cr");    //jQuery对象
var cr =$cr[0];    //DOM对象
alert(cr.checked)    //检测这个checkbox是否被选中
  1. 另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象,jQuery代码如下:
1 var $cr = $("#cr");    //jQuery对象
2 var cr =$cr.get(0);    //DOM对象
3 alert(cr.checked)    //检测这个checkbox是否被选中


对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了,方法为$(DOM对象),jQuery代码如下:

1 var cr = document.getElementById("cr");    //DOM对象
2 var $cr = $(cr);    //jQuery对象
3 alert($cr.is(":checked"));    //jQuery方式判断

is(":checked")是jQuery中的方法,判断jQuery对象是否被选中,返回boolean值。

时间: 2024-12-18 20:55:09

jQuery基础学习2——DOM和jQuery对象的相关文章

javascript 基础学习整理 二 之 html对象总结,参考W3C

Anchor 对象 更改一个链接的文本.URL 以及 target 使用 focus() 和 blur() 向超链接添加快捷键 Document 对象 使用 document.write() 向输出流写文本 使用 document.write() 向输出流写 HTML 返回当前文档的标题 返回当前文档的 URL 返回当前文档的 referrer 返回下载当前文档的服务器域名 使用 getElementById() 使用 getElementsByName() 打开一个新的文档,添加一些文本,然后

jQuery 基础学习笔记总结(一)

Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&

【总结整理】JQuery基础学习---动画

jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数

jQuery基础学习7——层次选择器find()方法

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

jQuery基础学习(一)&mdash;jQuery初识

一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer

jQuery基础修炼圣典—DOM篇(二)jQuery遍历

1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 理解节点查找关系: <div class="div"> <ul class="son"> <li class="grandson">1

【总结整理】JQuery基础学习---事件篇

jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用法是类似的,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 <div id="test">点击触发<div> $("el

【jQuery基础学习】09 jQuery与前端(这章很水)

这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局

jQuery基础学习3——jQuery库冲突

默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d