jQuery基础学习2——DOM和jQuery对象
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li id="apple">苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>
可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点，这样得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法，如下：
var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象
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）。
- jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象，jQuery代码如下：
var $cr = $("#cr"); //jQuery对象
var cr =$cr[0]; //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中
- 另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象，jQuery代码如下：
var $cr = $("#cr"); //jQuery对象
var cr =$cr.get(0); //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，方法为$(DOM对象)，jQuery代码如下：
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jQuery对象
alert($cr.is(":checked")); //jQuery方式判断
is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。
jQuery基础学习2——DOM和jQuery对象的更多相关文章
- jquery基础学习之DOM篇（二）
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHT ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
- 【总结整理】JQuery基础学习---DOM篇
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- jQuery 基础学习笔记总结（一）
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特 ...
- Android+Jquery Mobile学习系列(2)-HTML5/Jquery Mobile基础
本章介绍两个关键字[HTML5]和[Jquery Mobile],简单说这两者的关系是:HTML5作为主体,Jquery Mobile在HTML5的基础上对其进行了优化.装饰. HTML5 HTML5 ...
- 【jQuery基础学习】08 编写自定义jQuery插件
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- 【总结整理】JQuery基础学习---动画
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
随机推荐
- mac下git中文乱码
今天从window切mac,git使用时各种问题.典型的就是,git commit 可以使用中文注释,但是使用 git log 查看的时候发现都是乱码,乱码效果如下: <B1><E0 ...
- 进程间通信机制<转>
1 文件映射 文件映射(Memory-Mapped Files)能使进程把文件内容当作进程地址区间一块内存那样来对待.因此,进程不必使用文件I/O操作,只需简单的指针操作就可读取和修改文件的内容. ...
- Codeforces Round #259 (Div. 2) C - Little Pony and Expected Maximum
题目链接 题意:一个m个面的骰子,抛掷n次,求这n次里最大值的期望是多少.(看样例就知道) 分析: m个面抛n次的总的情况是m^n, 开始m==1时,只有一种 现在增加m = 2, 则这些情况是新增 ...
- liux之sed用法
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为: sed ...
- JAVA JDK1.5-1.9新特性
1.51.自动装箱与拆箱:2.枚举(常用来设计单例模式)3.静态导入4.可变参数5.内省 1.61.Web服务元数据2.脚本语言支持3.JTable的排序和过滤4.更简单,更强大的JAX-WS5.轻量 ...
- 将Temporary文件夹里的Logo文件转移到Logo文件夹
/// <summary> /// 将Temporary文件夹里的Logo文件转移到Logo文件夹 /// </summary> /// <param name=&quo ...
- andorid 文字颜色selector的使用
文字颜色selector的使用 创建名称为selector_1的Android项目,在res/color文件夹下创建名称为button_selector_text.xml的文字颜色配置文件,代码如下 ...
- logback.xml配置
一:根节点<configuration>包含的属性: scan: 当此属性设置为true时,配置文件如果发生改变,将会被重新加载,默认值为true. scanPeriod: 设置监测配置文 ...
- MyBatis 入门到精通(二) SQL语句映射XML文件
MyBatis 真正强大之处就在这些映射语句,也就是它的魔力所在.对于它的强大功能,SQL 映射文件的配置却非常简单. 如果您比较SQL 映射文件配置与JDBC 代码,您很快可以发现,使用SQL 映射 ...
- Matlab编程实例(4) 相位角与相关系数曲线
%相位角与相关系数曲线 close all; clear all; Samp1=200; %设置信号的采样精度 Samp2=200; %设置相位角p分割精度 A=10;%信号幅值 w=1;%信号角 ...