dom和jquery区别

首先jquery使用需要现在script中引用：

3.1.1版本:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

3.0.0版本:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

2.1.4版本:

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

获取元素

 $("h1")     	//通过标签查询 var elems = document.getElementsByTagName("");
 $("#d1")    	//通过id查询  var elems = document.getElementsByClassName("");
 $(".c1")	 	//通过类查询  var elem = document.getElementById("");
                //通过name属性查询var elems = document.getElementsByName("");

修改元素内容

dom中重新赋值就可以修改原内容

document.getElementById("div1").innerHTML  //读取或设置元素文本内容,可识别标签语法 
document.getElementById("div1").innerText  //设置元素文本内容,不能识别标签语法
document.getElementById("div1").value  //读取或设置表单控件的值

jquery中修改在（）内输入新内容

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
text() //设置或读取标签内容,等价于innerText,不能识别标签
val()  //设置或读取表单元素的值,等价于原生value属性

操作标签属性

<div id="div1"></div>
document.getElementById("div1").id //查看查询到的标签的id元素
document.getElementById("div1").id="div2"//修改标签的id属性
document.getElementById("div1").id=null//删除id属性
//这段代码也可以改成下面这种：
$("#div1").attr('id') //查看查询到的标签的id元素
$("#div1").attr('id','div2')//修改标签的id属性
$("#div1").removeAttr('id')//删除id属性

操作标签样式

document.getElementById('div1').style="background-color:red;width:200px;height:200px"//通过style可以给标签加元素，但是更多的是给元素加class属性添加样式，这样更灵活
$('#div1').addClass("red")//通过加class属性来更改样式
$('#div1').toggleClass("red")//如果当前元素存在指定类名,则移除;不存在则添加
$('#div1').removeClass("red")//删除class

来源：CSDN

作者：小陈8282613

链接：https://blog.csdn.net/weixin_45665357/article/details/103481733