【JS、JQuery】JS和JQuery常用方法的区别对比

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_33237207/article/details/88655263

下面总结一下原生JS和JQuery一些常用方法的区别对比：

	js方法	jquery方法
1、页面加载	window.onload=function(){  };	$(document).ready(function() { }); 等价于下面： $(function() { });
2、获取DOM对象	var pid=document.getElementById("pid"); var div = document.ElementsByClassName("test");//取到的是个数组	var pid=$("#pid"); var div = $(".test");
3、改变元素内容	举例：给id为pid的元素赋值 document.getElementById("pid").innerHTML="hello";	$("#pid").text("hello");//有参数是赋值，无参数是取值 或者： $("#pid").html("hello");//可以解析标签
4、改变元素属性	举例A：改变图片src属性： document.getElementById("imgid").src="7.jpg";	$("#imgId").attr("src","img/2.jpg"); 或者： $("#imgId").attr({"src": "img/2.jpg"});//可以修改多个属性 .removeAttr('src');//移除属性 .attr('src');//获取属性
	举例B：改变输入框value属性： document.getElementById("inputId").value="hello"; 或者： document.getElementById("inputId")['value']="hello"; 或者：document.getElementById("inputId").setAttribute('value','hello'); .removeAttribute("value");//移除属性 .getAttribute(‘value’);//获取属性	$("#inputId").val('hello');//有参数是赋值，无参数是取值
5、改变元素样式	举例A：改变元素背景颜色： document.getElementById("divid").style.background="blue";	$("#divId").css("background-color","blue"); 或者： $("#divId").css({"background-color": "blue"});
	举例B：让元素隐藏（仍保留原来的空间）： document.getElementById('pId').style.visibility='hidden';//visible显示 让元素消失： document.getElementById('pId').style.display= 'none';//block显示	$("#pId").hide();//元素消失 $("#pId").show();//元素显示 $("#pId").toggle();//元素在显示和隐藏之间切换
	注意：JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的！！！！！
6、点击事件	var btn = document.getElementById('btn'); btn.onclick = function (ev) {     alert("btn.onclick"); };	$("#btn").click(function(){     alert("btn.onclick"); });
7、给元素添加样式		$(".divId").addClass("style1");// style1是样式的名称 removeClass删除class中的某个值； toggleClass存在就删除class，不存在就添加class； removeAttr删除class这个属性；