浅讲jQuery与JavaScript之间的DOM转换

前言

jQuery和DOM，两者不仅都能操作HTML文档，它们之间还能进行转化

用DOM获取下面的p节点是很简单的

<p id=”Mrsssswan”></p>

var p = document.getElementById("Mrsssswan");
p.innerHTML = "晚饭带你学Java";
p.style.color = “red”;

两个对象如何转换呢？？？

jQuery选择器

在讲解两个对象转换之前，先了解下jQuery的三种基本选择器

jQuery通过id获取元素时，是通过表达式$("#id")来操作的，仔细探究下，发现它跟css的样式选择器是一样的

css的id 选择器是以 “#” 来定义

所以在jQuery中，id也是唯一的，每个id值在一个页面中只能使用一次，但是如果有多个id的话，就变成了一个数组了，只会匹配第一个DOM元素可以用get(0)或获取对象数组的下标[0]

css的类选择器是以一个点号 . 定义

css中类选择器可以表示多个，同样在jQuery上，$(".class")表示多个DOM元素，

css的属性选择器

这里的属性，可以理解为HTML文档的节点，通过节点标签直接改变属性，而jQuery只需 $(“element”)就能选取相应元素了

下面简单用jQuery选择p元素并改变其样式

 $(p).style.color = "red"; //jQuery元素选择

jQuery对象转换成DOM对象

jQuery是一个JavaScript的框架，框架不仅包含了DOM对象的信息，还封装了很多DOM的方法，所以，用jQuery操作会方便开发

var $p = $("#Mrsssswan");
$p.html( "晚饭带你学Java").css(“color“,”red“);

那如何将jQuery对象转成DOM对象？

其实，通过$("#Mrsssswan")获取的对象是一个类数组对象，也可以理解为，它是一个DOM对象的数组，所以直接使用数组的下标就可以进行转换了

 var  $p = $("#Mrsssswan"); //jQuery对象
 var p = $p[0];        //转换成DOM对象
 p.style.color = "red"; //DOM对象操作

当然，也可以用jQuery封装好了的get()方法获取

$  var p = $p.get(0); /通过get方法，转化成DOM对象

DOM对象转换成jQuery对象

日常使用的最多的是将DOM转换成jQuery对象，而只需要用$()将DOM对象封装起来，就能获得jQuery对象了

var p = document.getElementById("#Mrsssswan"); //得到DOM对象
var $p = $(p) //转换成jQuery对象

总结

这是jQuery的基础入门文章，后面会详细讲解jQuery的各种选择器

希望你看的愉悦，有疑问可以发晚饭邮箱~~~

公众号

欢迎关注，微信公众号，获取最新文章