jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h3>例子</h3>
<p title="你最喜欢吃的水果">你最喜欢吃的水果?</p>
<ul>
<li class="attive">梨子</li>
<li>苹果</li>
<li>草莓</li>
<li>香蕉</li>
</ul>
</body>
</html>
运行结果和DOM结构如下:
在这棵DOM树中,h3,p,ul 以及ul下的4个li 子节点,都是DOM的元素节点,可以通过js中的getElementsByTagName或者getElementById来获取元素节点,像这样得到的DOm元素就是DOM对象;dom对象js获取实例:
var domObj = document.getElementById('Id'); // 获取DOM对象
var ObjHTML = domObj.innerHTML; // 使用JS中的属性----innerHTML;
2. jquery 对象
jquery 对象就是通过jQuery 包装DOM对象后产生的对象。
jquery对象是jQuery 独有。如果一个对象是jquery对象,就可以使用jquery里的方法;例如:
$("#name1").html(); // 获取ID为name 的元素里的 html代码;
等同于js里的:document.getElementById("name").innerHTML;
备注:jquery 对象不能使用DOM对象的任何方法;DOM对象也不能使用jquery里的方法。
3. jquery对象与DOM对象的转换:
3.1 jquery 对象转换为DOM对象:通过[index]和get(index);
3.1.1 jquery 代码:
var $cr = $("#cr"); // 获取jquery对象 $cr
var cr = $cr[0] ; // 转化为DOM对象 cr
alert( cr.checked ); // 弹出cr对象的checked 属性值
3.1.2 jquery 代码:
var $cr = $("#cr"); // 获取jquery对象 $cr
var cr = $cr.get(0) ; // 转化为DOM对象 cr
alert( cr.checked ); // 弹出cr对象的checked 属性值
3.2 DOM对象转化为jquery对象:用 $() 把DOM对象包裹起来,就可以了
3.1.2 jquery 代码:
var cr = document.getElementById("id_name") ; // 获取Id名字为id_name的DOM对象;
var $cr = $( cr ) ; // 将DOM对象转化为jquery 对象
alert( $cr.attr("checked") ); // 弹出jquery对象$cr的checked 属性值
jquery接触初级----jquery 对象和Dom对象的更多相关文章
- jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
- jQuery对象与dom对象相互转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S('#id' ...
- jQuery对象与DOM对象之间的转换方法
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- [转] jQuery对象与DOM对象之间的转换
http://wozailongyou.iteye.com/blog/299311 http://blog.allenm.me/2009/07/jquery%E4%B8%ADid%E5%92%8Cdo ...
- jQuery对象与DOM对象之间的转换
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- jQuery对象与dom对象相互转换jQuery对象与dom对象相互转换
转至:http://www.chinaz.com/design/2010/0309/108144.shtml 刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于D ...
- jQuery对象和Dom对象的区分以及之间转换
刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 一,什么是jQuer ...
- 【转】jQuery对象与DOM对象之间的转换方法
刚开始学习jquery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象.至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换. 什么是jQuery对 ...
- 判断一个对象是jQuery对象还是DOM对象
今天调试一段代码的时候,看到其中一个变量,想知道它到底是jquery对象还是dom对象. 虽然直接console出这个对象,看它的内部可以判断出来.但是我想有没有什么更方便的方法呢. 后来我想到了一个 ...
随机推荐
- Scrapy实战篇(八)之Scrapy对接selenium爬取京东商城商品数据
本篇目标:我们以爬取京东商城商品数据为例,展示Scrapy框架对接selenium爬取京东商城商品数据. 背景: 京东商城页面为js动态加载页面,直接使用request请求,无法得到我们想要的商品数据 ...
- PHP中常用的数组函数总结
整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数,数组的分段和填充,数组与栈,数组与列队,回调函数,排序,计算,其他的数组函数等. 一,数组操作的基本函数 数组的键名和值 array_va ...
- maven工程强制更新 ,下载源码操作
看图,在window->preferences->maven , 勾选图中的选项就可以下载源码包了,
- [UE4]碰撞的随机性
物理引擎(包括碰撞)的计算具有随机性 原因: 一.每一帧的时间并不是严格相等 二.浮点数计算不是完全准确(两个浮点数运算,结果不可重复) 影响 在左边窗口(服务器端)打几发子弹把其中3个立方体的位置打 ...
- CRM 2016 升级CRM365之注意事项
https://docs.microsoft.com/zh-cn/previous-versions/dynamicscrm-2016/deployment-administrators-guide/ ...
- String,StringBuilder和StringBuffer区别
String字符串常量 StringBuilder 字符串变量(非线程安全) StringBuffer 字符串变量(线程安全) 1.String String是字符串常量,为不可改变对象 Strin ...
- hook mono实现Assembly.Load从指定路径读取文件
mono-unity github: https://github.com/Unity-Technologies/mono/blob/unity-staging/mono/metadata/assem ...
- 命令提示符没办法登录MySQL
前几天在CMD命令下输入 MYSQL -UROOT -P 一直显示命令无效. 后来想知道原来是要在MYSQL的BIN(安装)目录下才能访问该命令,如果要在其他路径下使用sql命令,那么要配置MYSQ ...
- Redis Server installation FAQs
OS: CentOS 7 Minimal (0) open files Q: Increased maximum number of open files to 10032 (it was origi ...
- Solr查询参数sort(排序)
摘要: Solr查询每一次返回的数据都有一定的顺序,特定顺序的结果对于业务来说可能非常重要. 不指定排序 一般我们不指定排序规则,这样的结果能满足大部分需求,默认是用文档的得分作为排序标准.相当于加上 ...