分享免费的编程资源和教程

网站首页 > 技术教程 正文

JQuery对象与DOM对象的关系与转换

goqiw 2024-10-13 05:04:47 技术教程 61 ℃ 0 评论

很多初学者对于JavaScript和JQuery的区别总是一头雾水,就感觉它们都是用来做一些特效,却道不出他们之间的关系.今天小编就以口述和实验的方式解决大家的疑惑,以及Javascript和DOM对象之间的相互转换问题.

首先要明白jQuery是什么?

它其实是封装了常用JavaScript操作函数的一个库文件,就有点像TP框架与PHP的关系一样,都是简化操作,带来便利。

那么还有没有其他开源库?

Prototype.js 历史比较早,是Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax ，国内外有

多个基于此类库开发的子项目.

Dojo.js Dojo是一个用javascript语言实现的开源DH TML工具包。它是在几个项目捐助基础上建立起来的(nWidgets,Burstlib,f(m)),这也是为什么叫它

a"unified"toolkit的原因。

Ex t.js Ex tJ S是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax 框架。功能丰富，无人能出其右。

强势在U I 操作上,可以很方便帮我们创建一个表格/表单,漂浮的窗口,ajax 等等.

通过实验分析JQuery对象与DOM对象的关系与转换

为了让大家更加明了的区分，小编就以代码的形式，尽我所能，通过注释给大家呈现。

建议一边跟着写代码一边理解有，有助于消化。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<body>

<h1>jquery对象与DOM对象的关系与转换</h1>

<ul>

<li>导航1</li>

<li>导航2</li>

<li>导航3</li>

<li>导航4</li>

</ul>

<p id="test">test</p>

</body>

<script src="jquery.js"></script>

<script>

// 下面一行,充分证明$(选择器)返回值不是DOM对象

// $('#test').style.background = 'blue';

// 下面二行, 充分证明, DOM对象 ,也不是 $()的返回值.

var test = document.getElementById('test');

//test.css('background' , 'blue');

// $()返回的到底是什么? 是对象,但不是DOM对象,而是jQuery对象

/*

jquery对象与DOM对象有什么关系?

答: jQuery按选择器,选中1个或多个DOM对象,

把这些DOM对象,放在jQuery对象上,

索引分别是 0 1 2 3 ...N

*/

console.log($('li'));

// jquery对象转化为DOM对象, 直接[索引] 取值即可

$('li')[2].style.background = 'blue';

// 也可以用get(索引)方法

$('li').get(3).style.background = 'green';

// DOM对象,转化为 jquery对象, 直接把DOM对象,传给$()

$(test).css('background','orange');

var lis = document.getElementsByTagName('li');

console.log($(lis));

</script>

</html>

好了，今天就分享到这里了，有什么问题也可以及时提出。谢谢

JQuery

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表