jQuery基础--样式篇(3)

1.jQuiery对象与DOM对象  

  对于刚刚接触jQuery的初学者,我们要清楚认识一点:jQuery对象与DOM对象是不一样的。可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换。

  下面举一个简单的例子:

<p id="cnblogs"></p>

 

  使用原生的javascript处理:通过原生DOM模型提供的document.getElementById(“snblogs”) 方法获取的DOM元素就是DOM对象,通过DOM方法将自己的innerHTML与style属性处理文本与颜色。

var p = document.getElementById('snblogs');
p.innerHTML = '您好!通过博客园学习前端才是最佳的途径';
p.style.color = 'red';

  使用jQuery处理:通过$('#snblogs')方法会得到一个$p的jQuery对象,$p是一个类数组的对象这个对象里面其实是包含了DOM对象的信息的然后封装了很多操作方法,调用自己的方法html与css处理,得到的效果与标准的JavaScript处理结果是一致的。

 

var $p = $('#cnblogs');
$p.html('您好!通过博客园学习前端才是最佳的途径').css('color','red');

 

通过标准的JavaScript操作DOM与jQuyer操作DOM的对比,我们不难发现:

  1. 通过jQuery方法包装后的对象,是jQuery对象,它是一个新的对象.
  2. jQuery与DOM对象完全不是同一个东西,但是又似曾相似,因为他们都能处理DOM.
  3. 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容问题,我们可以通过jQuery更友好的API进行开发,同时代码也会更加精短.

 2.jQuery对象转化为DOM对象

  jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中 经常使用的功能。我们可以用jQuery的同时也能混合JavaScript原生代码一起使用。通过jQuery生成的对象是一个做了包装处理的对象,如 果要用jQuery对象自己的方法,就需要满足这个对象是通过jQuery生成的。 在很多场景中,我们需要jQuery与DOM能够相互的转换,它们都 是操作的DOM元素,jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素。

  如何把jQuery对象转成DOM对象?

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

JavaScript代码

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
  用jQuery找到所有的div元素(3个),因为jQuery 对象也是一个数组结构,可以通过数组下标索引找到第一个div元素,通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需
要注意的一点是,数组的索引是从0开始的,也就是第一个元素下标是0
  

通过jQuery自带的get()方法

 

jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点,get方法中提供一个元素的索引:

 
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
 

其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get让开发者更直接方便的使用。

3.DOM对象转化为jQuery对象

 相比较jQuery转化成DOM,开发中更多的情况是把一个dom对象加工成jQuery对象。$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。
 如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象
  

  通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了

 

HTML代码

 
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
 

JavaScript代码

 
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象,通过调用jQuery对象中的
first与css方法查找第一个元素并且改变其颜色。


 

转载于:https://www.cnblogs.com/wgl1995/p/5608382.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/374457.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hls fifo_HLS优化方法DATAFLOW你用了吗

上期内容&#xff1a;异步跨时钟域电路该怎么约束DATAFLOW作为HLS的一种优化方法&#xff0c;对于改善吞吐率(Throughput)、降低延迟(Latency)非常有效。DATAFLOW的作用对象DATAFLOW可以作用于函数&#xff0c;也可以作用于for循环。如下图所示(图片来源Figure62, Figure 63, u…

Java 8虚拟扩展方法

我一直关注Java 8 Lambda表达式项目的发展已经有一段时间了&#xff0c;我对其当前的进展状态感到非常兴奋。 我发现的最新“易于理解”的演示文稿是这样的&#xff1a; http://blogs.oracle.com/briangoetz/resource/devoxx-lang-lib-vm-co-evol.pdf 现在&#xff0c;作为一名…

python爬虫 库_七款必备的Python爬虫库,你知道几个?

很多你需要的信息数据都是在网站内&#xff0c;虽然有些网站的数据会以整洁、结构化的形式呈现&#xff0c;但大部分网站却无法做到这样。因此&#xff0c;当你想要获得一些数据的时候&#xff0c;你需要一些爬虫工具帮助抓取&#xff0c;然后再对其进行分析。今天&#xff0c;…

62个Android Studio小技巧合集

转载&#xff1a; 原文链接&#xff1a;http://laobie.github.io/android/2016/02/14/android-studio-tips.html转载于:https://www.cnblogs.com/kesteler/p/5618490.html

在Hibernate,EhCache,Quartz,DBCP和Spring中启用JMX

继续使用JMX的过程&#xff08;请参阅&#xff1a; 人类JMX &#xff09;&#xff0c;我们将学习如何在一些流行的框架中启用JMX支持&#xff08;通常是统计和监视功能&#xff09;。 这些信息大部分都可以在项目的主页上找到&#xff0c;但是我决定在收集这些信息的同时&#…

二叉树遍历(前中后)

二叉树前序遍历&#xff1a; /*** Definition for binary tree* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode(int x) : val(x), left(NULL), right(NULL) {}* };*/ class Solution { public:vector<int> preorderTravers…

python语言程序设计实践教程答案实验六_Python程序设计实践教程

书名&#xff1a;Python程序设计实践教程 定价&#xff1a;29.8 ISBN&#xff1a;9787115532602 作者&#xff1a;储岳中 薛希玲 版次&#xff1a;*1版 出版时间&#xff1a;2020-04 内容提要&#xff1a; 本书是Python语言程序设计的配套实践教材&#xff0c;分为三部分&#…

400多万微信用户如何“变现”?凯叔说了五大秘诀与教训

凯叔&#xff0c;原名王凯&#xff0c;自媒体“凯叔讲故事”创始人&#xff0c;近日在狮享家班委会上做了分享&#xff0c;全是实实在在的实验性方法论。以下是王凯的分享内容&#xff0c;整理 / 垅青 我讲的主题叫“基于内容的MVP探索”&#xff0c;MVP是什么东西&#xff1f;…

使用dbUnit,JSON,HSQLDB和JUnit规则进行数据库单元测试

在本周TDD课程的运行中&#xff0c;我认为编写一些夹具以简化dbUnit的使用将很有趣。 我最初的想法只是教dbUnit有关JSON的知识&#xff0c;但事实证明Lieven Doclo已经做到了。 因此&#xff0c;我决定更进一步&#xff0c;还将dbUnit与JUnit Rules结合起来&#xff0c;并提供…

Codeforces Round #321 (Div. 2) E. Kefa and Watch 线段树hash

E. Kefa and Watch Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/580/problem/EDescription One day Kefa the parrot was walking down the street as he was on the way home from the restaurant when he saw something glittering by…

python文字游戏源代码求年纪_Python实现猜年龄游戏代码实例

1. 在猜年龄的基础上编写登录、注册方法&#xff0c;并且把猜年龄游戏分函数处理&#xff0c;如 2. 登录函数 3. 注册函数 4. 猜年龄函数 5. 选择奖品函数 代码如下 import json real_age 18 prize_list [好迪洗发水, 绿箭侠, 小猪佩奇, 布娃娃, 再来一次!] import random us…

KVC 与 KVO

一、Key-Value Coding (KVC)键值编码 KVC&#xff0c;即是指 NSKeyValueCoding&#xff0c;一个非正式的 Protocol&#xff0c;提供一种机制来间接访问对象的属性。KVO 就是基于 KVC 实现的关键技术之一。 一个对象拥有某些属性。比如说&#xff0c;一个 Person 对象有一个 nam…

使用模拟的单元测试–测试技术5

我的最后一个博客是有关测试代码方法的一系列博客中的第四篇&#xff0c;演示了如何创建使用存根对象隔离测试对象的单元测试。 今天的博客探讨了有时被视为对立的技术&#xff1a;使用模拟对象进行单元测试。 同样&#xff0c;我使用了从数据库检索地址的简单方案&#xff1a;…

多线程中的volatile和伪共享

伪共享 false sharing&#xff0c;顾名思义&#xff0c;“伪共享”就是“其实不是共享”。那什么是“共享”&#xff1f;多CPU同时访问同一块内存区域就是“共享”&#xff0c;就会产生冲突&#xff0c;需要控制协议来协调访问。会引起“共享”的最小内存区域大小就是一个cache…

C语言代码规范(一)缩进与换行

一、缩进的空格数为4个。最好配置代码编辑器将TAB键设置为空格替换&#xff0c;避免出现另一个编辑器打开时格式变乱的情况。 例如Notepad设置 KEIL设置 二、“{” 和 “}”各自独占一行。 不规范例子&#xff1a; for(i 0; i < student_num; i) { if((score[i] > 0…

armv7 cortex a系列编程手册_AWTK能为现代GUI编程带来何种改变?

AWTK是一个伸缩性极强的嵌入式图形框架&#xff0c;它的诞生会给GUI编程研发工程师带来哪些改变&#xff1f;AWTK是一个伸缩性极强的嵌入式图形框架&#xff0c;可在Cortex-M3这样低端的单片机上运行&#xff0c;也可以在Cortex-A7/A8/A9等处理器&#xff0c;甚至DSP以及X86处理…

【转】各种概念POJO、JAVABEAN、DAO、DTO、PO、VO、BO、SSH、EJB

POJO&#xff08;pure old java object&#xff09; 是普通java类&#xff0c;有一些private的参数作为对象的属性&#xff0c;然后针对每一个参数定义get和set方法访问的接口。我看到这个定义&#xff0c;心里就有个疑问了&#xff0c;这个POJO跟JavaBean的定义怎么就这么像&a…

为什么要编写单元测试–测试技巧8

我对最近在“您应该测试什么”上的博客有很多反应&#xff0c;有些人出于各种原因同意我的想法&#xff0c;另一些人则认为建议某些类可能不需要单元测试是非常危险的。 已经处理了什么测试&#xff0c;今天的博客涉及为什么要编写单元测试&#xff0c;而今天的示例代码是基于一…

Git迁移 从SVN到Git

Migrating from SVN to Git 首先我们需要在Stach或者GitHub上新建一个Repository, 拿到它的URL。 接下来参照如下步骤 : At first we should create a new git repository at Stash and get the repository URL, and then follow below steps: 1. 切换到本地git工作目录 chang…

C语言代码规范(二)空格

一、逗号, 之后加空格 printf("error! score[%d] %d\n", i, score[i]); 二、分号; 之后加空格 for(i 0; i < student_num; i) 三、关系运算符<、<、>、>、、! 前后加空格 if( (score[i] > 0) && (score[i] < 100) ) 四、赋值运算符…