区别一
1.定位元素
-JS (下面类似)
document.getElementById("abc")
-jQuery
$("#abc") 通过id定位
$(".abc") 通过class定位
$("div") 通过标签定位 需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。
2.改变元素的内容
abc.innerHTML = "test";
abc.html("test"); 3.显示隐藏元素
abc.style.display = "none";
abc.style.display = "block";
abc.hide();
abc.show();
abc.toggle(); //在显示和隐藏之间切换、4.获得焦点
JS和jQuery是一样的，都是abc.focus();
5.为表单赋值
abc.value = "test";
abc.val("test"); 6.获得表单的值
alert(abc.value);
alert(abc.val()); 7.设置元素不可用
abc.disabled = true;
abc.attr("disabled", true);8.修改元素样式
abc.style.fontSize=size;
abc.css('font-size', 20);abc.className="test";
abc.removeClass();
abc.addClass("test");9.判断复选框是否选中
jQuery
if(abc.attr("checked") == "checked")
注意：网上说的.attr("checked") == true实际上不能用区别二
①.根据ID取元素
JS:取到的是一个DOM对象。
例：var div = document.getElementByID("one");
jQuery:取到的是一个jQuery对象。
例：var div = $("#one");
②.根据class取元素，在数组里面如果要取DOM对象使用索引的方式，如果要取jQuery对象使用eq()
JS:取到的是一个数组
例：var div = document.ElementsByClassName("test");
jQuery:
例：var div = $(".test");
③.根据name取元素
JS：返回的是一个数组
例：var bd = document.getElementsByName(uid);
jQuery：的方式是用方括号，属性=一个值，不限制非要根据name来取值，jQuery是根据属性来取元素
例：$("[name='uid']");
④.根据标签名取元素
JS：返回的也是一个数组
例：var div = document.getElementsByTagName("div");
jQuery：和样式表里面给所有div加样式的方法一样，在双引号内直接写标签名
例：$("div");
组合选取：var div = $("div span");
操作内容
①.非表单元素（如果是文本就用text方法，如果是html代码就用html方法）
jQuery：
- div.text();——无参数的情况下是取值
- div.text("aaaa");——有参数的情况下是赋值
- div.html();——无参数的情况下是取值
- div.html("aaaa");——有参数的情况下是赋值
②.表单元素
JS：
- div.value;——取值；
- div.value = xxx;——赋值
jQuery：
- div.val();——无参数是取值，有参数是赋值。
操作属性
JS：
div.setAttribute("","");——设置属性、修改属性
- div.removeAttribute("");——移除属性，引号里面写一个属性名
- div.getAttribute();——获取属性
jQuery：
- 添加属性：div.attr("test","aa");——给这个attr方法加入参数，属性名叫做test，属性的值是aa
- 移除属性：div.removeAttr("test");——移除test这条属性
- 获取属性：div.attr("test");——在attr方法里面直接写入一个属性的名就可以了
操作样式
JS里面操作样式的关键字是style
例：div.style.backgroundColor = "red";——把这个div的背景色设置成为了红色
jQuery里面操作样式的关键字是css
例：div.css("background-color","yellow");——把这个div的背景色变为黄色，在这里CSS里面所有的样式和css样式表里面的样式是一模一样的没有任何变化
JS操作样式的方法只能获取内联样式，不能取内嵌的和外部的，而jQuery操作样式的方法可以是内联的也可以是内嵌的。
给一个节点绑定事件
JQuery：
①.事件绑定的快捷方式
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
$("button:eq(0)").click(function () {
alert(123);
});
</script>②：使用on进行事件绑定
<body>
<button>按钮</button>
</body>
<script src="js/jquery-1.10.2.js"></script>
<script>
//①使用on进行单事件的绑定
$("button:eq(0)").on("click",function () {
alert(456);
});
//②使用on同时给同一对象绑定多个事件
$("button:eq(0)").on("click dblclick mouseover",function () {
console.log(123);
});
//③使用on，给一个对象绑定多个事件
$("button:eq(0)").on({
"click":function () {
console.log("click");
},
"mouseover":function () {
console.log("mouseover");
},
"mouseover":function () {
console.log("mouseover2");
}
});
//④使用on给回调函数传参，要求是对象格式，传递的参数可以在e.data中取到；jquery中的e只能通过参数传进去，不能用window.event
$("button:eq(0)").on("click",{"name":"zhangsan","age":15},function (e) {
console.log(e);
console.log(e.data);
console.log(e.data.name);
console.log(e.data.age);
console.log(window.event);//js中的事件因子
});
</script>jquery 的ready() 与JS的onload()的区别
| window.onload() | $(document).ready() | |
|---|---|---|
| 加载时机 | 必须等待网页全部加载完毕（包括图片等），然后再执行JS代码 | 只需要等待网页中的DOM结构加载完毕，就能执行JS代码 |
| 执行次数 | 只能执行一次，如果有第二次，那么第一次的执行会被覆盖 | 可以执行多次，第N次都不会被上一次覆盖 |
| 举例 | 以下代码无法正确执行： window.onload = function() { alert(“text1”);}; window.onload = function() {alert(“text2”);}; 结果只输出第二个 | 以下代码正确执行： $(document).ready(function(){alert(“Hello”)}); $(document).ready(function(){alert(“Hello”)});结果两次都输出 |
| 简写方案 | 无 | $(function () {}) |
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包括页面上的图片，以及大的表格数据。
而Jeuery中的ready()则是在页面的DOM(节点)加载完后就可以做相应的操作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片，而不一定要等它显示出来就可以为它绑定点击方法。
JavaScript对象和JQuery对象的方法不能混用。
1.JavaScript对象和JQuery对象
使用$("")取到的节点为JQuery对象，只能调用JQuery方法，不能调用JavaScript方法；
* $("#div").click(function(){})√
* $("#div").onclick = function(){}× 使用JQuery对象调用JavaScript方法
* 同理，使用、document.getElement系列函数取到的对象为JavaScript对象，也不能调用JQery函数2.JavaScript对象和JQuery对象互转
JQuery ---> JavaScript :
使用get(index)或者[index]选中的就是JavaScript对象
- $("div").get(0).onclick = function(){}
- $("div").[0].onclick = function(){}
JavaScript ---> JQuery :
使用$()包裹JavaScript对象(我们发现JQuery不管获得几个对象都是一个数组，可以直接给整个数组都添加某一事件)
- var div = document.getElementById("div");
- $(div).click(function(){});
JS查找标签
document.getElementById //根据ID获取一个标签
document.getElementsByClassName //根据class属性获取
document.getElementsByTagName //根据标签名获取标签合集
//上面得到一个对象或者多个对象的集合
//根据js对象可以调用下面方法进行间接查找
对象.parentElement // 父节点标签元素
对象.children //所有子标签
对象.firstElementChild //第一个子标签元素
对象.lastElementChild //最后一个子标签元素
对象.nextElementSibling //下一个兄弟标签元素
对象.previousElementSibling //上一个兄弟标签元素jQuery查找标签（获得jQuery对象）
$("#id") //根据id查找
$("tagName") //根据标签查找
$(".className") //根据类名查找
$("div.c1") // 找到有c1 class类的div标签
$("#id, .className, tagName") //组合查找
$("x y"); // x的所有后代y（子子孙孙）
$("x > y"); // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
//基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
//例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
//属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
//表单筛选器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
//例子：
$(":checkbox") // 找到所有的checkbox
例子：
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的optionjQuery筛选器
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
等价于$("div p")
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素标签操作
jQuery
//样式类
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
//示例：开关灯和模态框
//CSS
css("color","red")//DOM操作：tag.style.color="red"
//示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色JS
class的操作
className 获取所有样式类名(字符串)
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
指定CSS操作
obj.style.backgroundColor="red"
JS操作CSS属性的规律：
1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：
obj.style.margin
obj.style.width
obj.style.left
obj.style.position
2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：
obj.style.marginTop
obj.style.borderLeftWidth
obj.style.zIndex
obj.style.fontFamily参考文章：
https://blog.csdn.net/xueshuai0922/article/details/81108834