您的位置：首页 > Web前端 > JQuery

JQuery学习之旅（3）

2016-07-27 17:59 441 查看

JQuery学习之旅（3）–jQuery对象转化成DOM对象

JQuery库的本质还是javascript，只是对javascript的封装，方便dom处理，我们可以实用jQuery代码同时使用javascript原生代码，

注意：如果使用JQuery对象自己的方法，必须是通过JQuery生成的

很多时候，我们JQuery和Dom相互转换它们都是操作的DOM元素。

JQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
<script type="text/javascript">
var $div = $('div');   //JQuery对象
var div = $div[0];     //转化为DOM对象
div.style.color='red';  //操作DOM对象属性
</script>
</body>
</html>

效果如下：可以看到只有第一个元素的属性改变了。

通过$div[0] 是因为JQuery对象是一个类数组对象

通过索引获取第一个元素，转化为DOM对象，并对DOM对象的属性进行操作。

注意: JQuery对象前有一个$ : $div;

引入JQuery库：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">
var $div = $('div');   //JQuery对象
var div = $div[0];     //转化为DOM对象
div.style.color='red';  //操作DOM对象属性
</script>

通过JQuery自身的方法获取DOM对象

通过$div.get(0)获div对象：

<script type="text/javascript">
var $div = $('div');   //JQuery对象
var div = $div.get(0);     //通过get(), 转化为DOM对象
div.style.color='blue'; //操作DOM对象属性
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JQuery学习之旅

相关文章推荐

新的分享

章节导航