javascript与jQuery方法对比
jquery对象转dom对象
// 方式一（推荐使用） $("input")[0] // 方式二 $("input").get(0) // 方式三 $("input").eq(0)[0] // 方式四 $("input:eq(0)")[0]
var getObjectByJs = document.getElementById("test"); var getObjectByJq = $("#test");
1.高度
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.style.height;或offsetHeight | getObjectByJq.height(); |
| 赋值 | getObjectByJs.style.height = "50px"; | getObjectByJq.height("50"); |
注：js获取高度的两种方式区别，见文章-js获取高度和宽度
2.宽度 同上 width width()
3.显示与隐藏
| 操作 | javascript | jQuery |
| 显示 | getObjectByJs.style.display = "block"; | getObjectByJq.show(); |
| 隐藏 | getObjectByJs.style.display = "none"; | getObjectByJq.hide(); |
| 获取显示的页面元素 | NULL | :visible |
| 获取隐藏的页面元素 | NULL | :hidden |
4.改变显示所有内容
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.innerHTML; | getObjectByJq.html(); |
| 赋值 | getObjectByJs.innerHTML = "文本，标签或文本+标签"; | getObjectByJq.html("文本，标签或文本+标签"); |
5.改变显示所有的文本内容
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.innerText; | getObjectByJq.text(); |
| 赋值 | getObjectByJs.innerText = "文本"; | getObjectByJq.text("只能是文本，非文本内容以文本形式显示"); |
6.标签属性
a.已知属性
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.name; | getObjectByJq.prop('name'); |
| 赋值 | getObjectByJs.selected = true; | getObjectByJq.prop('selected',true); |
b.自定义属性
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.getAttribute('onsuccess'); | getObjectByJq.attr('onsuccess'); |
| 赋值 | getObjectByJs.setAttribute('onsuccess','成功'); | getObjectByJq.attr('onsuccess','成功'); |
| 判断某个属性是否存在 | hasAttribute(属性名) | attr() |
c.增加、移除属性
| 操作 | javascript | jQuery |
| 增加 | getObjectByJs.setAttribute("onError",'失败'); | getObjectByJq.attr('onError','失败'); |
| 移除 | getObjectByJs.removeAttribute('onsuccess'); | getObjectByJq.removeAttr('onsuccess'); |
注：
a.jquery的attr()方法对已知属性和自定义属性都有效，
但是当获取"readonly,checked,disabled,selected"等类似属性时，
使用attr()返回的是"readonly,checked,disabled,selected"或"undefined"；
使用prop()统一返回的是true或false
b.获取自定义属性
jQuery 只能使用attr()方法；
javascript必须用getAttribute()方法
c.判断是否存在某个属性
建议使用jQuery判断：如果存在则返回属性值，否则返回undefined
javascript的hasAttribute()方法在IE9以下不支持
d.当使用javascript移除"onclick"属性时，IE浏览器存在bug，
window.onload = function () { getObjectByJs.removeAttribute('onclick'); }
虽然"onclick"属性已被删除，但是对应的onclick调用的js代码还是会执行！
解决方案：
//页面加载完毕使用jQuery的$(function(){}); $(function() { getObjectByJq.removeAttr('onclick'); }
e.js获取标签属性详细介绍
案例：
CreateTime--2016年10月16日16:35:34
<iframe id='importJsp' width='700' height='500' frameborder='0' src='test.html'></iframe>
1.取值：获取iframe标签的src属性
//方法一 //自定义属性 var iframeSrcAttr = document.getElementById("importJsp").getAttribute("src");
获取得到的值是：test.html
//方法二 var iframeSrcAttr = document.getElementById("importJsp").src;
获取得到的值是：http://127.0.0.1:8020/demo/test.html
//方法三 var iframeSrcAttr = document.getElementById("importJsp").attributes["src"].value;
获取得到的值是：test.html
需要特别注意的地方：
当获取的标签属性具有路径性质的，一定要注意，需求：
通过"."操作符，获取的值前面带有绝对路径
2.改变已存在属性（src）的属性值
//方法一 document.getElementById("importJsp").setAttribute("src","#"); //iframe标签的src属性值已更改为"#" //方法二 document.getElementById("importJsp").attributes["src"].value="#";
//下面内容与js无关
但是，更改src没有用，只能将iframe标签全部替换掉才行
<iframe id='importJsp' width='700' height='500' frameborder='0' src='#'></iframe>
7.input,select,textarea框取值及赋值
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.value; | getObjectByJq.val(); |
| 赋值 | getObjectByJs.value = "赋值"; | getObjectByJq.val('赋值'); |
8.class属性
| 操作 | javascript | jQuery |
| 取值 | getObjectByJs.className; | getObjectByJq.attr('class'); |
| 赋值 | getObjectByJs.className = "color1"; | getObjectByJq.attr('class','color1'); |
| 新增class属性值 | getObjectByJs.className += ' ' +'color2';//注意空格 | getObjectByJq.addClass('color2'); |
| 移除class的某个属性值 | Null（没有对应的方法） | getObjectByJq.removeClass('color1'); |
| 移除class属性 | getObjectByJs.removeAttribute('class'); | getObjectByJq.removeAttr('class'); |
注：
a.jQuery的toggleClass('className',paramBoolean)方法
元素中class属性的值，指定class类，如果存在则删除、如果不存在则添加；
第二个参数如果为true，则只进行删除操作；
如果设为false，只进行删除操作。
b.js-自定义方法文章中，已对增加和删除class类做了封装
9.选中文本内容
| 操作 | javascript | jQuery |
| 选中文本内容 | getObjectByJs.select(); | getObjectByJq.select(); |
注：选中文本内容js和jquery都是调用select()方法
9.焦点事件
| 操作 | javascript | jQuery |
| 获取焦点 | getObjectByJs.focus(); | getObjectByJq.focus(); |
| 绑定聚焦事件 | getObjectByJs.onfocus = function() {}; | getObjectByJq.focus(function() {}); |
| 失去焦点 | getObjectByJs.blur(); | getObjectByJq.blur(); |
| 绑定失去焦点事件 | getObjectByJs.onfocus = function() {} | getObjectByJq.focus(function() {}); |
注：获取焦点js和jquery都是调用focus()方法，失去焦点都调用blur()方法。
UpdateTime--2017年2月16日11:45:41
11.点击事件
<input id="bb" type="text" onclick="alert(4)"/>
| 操作 | javascript | jQuery |
| 点击事件 | onclick | click() |
| 触发点击事件 | document.getElementById("bb").onclick(); | document.getElementById("bb").click(); |
| 绑定触发点击事件 | document.getElementById("bb").onclick = function() {}; | document.getElementById("bb").click(function() {}); |
UpdateTime--2017年5月11日15:17:28
12.获取节点
| 操作 | javascript | jQuery |
| 获取指定元素的第一个节点 | NULL | :first |
| 获取指定元素的最后一个节点 | NULL | :last |
| 获取第一个子节点 | firstChild/firstElementChild及children[0] | children[0]或children(':first')或children().eq(0)或children(':eq(0)') |
| 获取最后一个子节点 | lastChild/lastElementChild及children[最后一个子元素下标] | children(最后一个子元素下标) |
| 获取所有的子节点 | children | children() |
| 获取指定的子节点 | children[元素下标] | children(元素下标)或children().eq(元素下标)或使用">"，$('parent > child') |
| 获取所有的子孙（后代）节点 | NULL | 使用"空格"，$('parent child') |
| 获取父节点 | parentNode | parent() |
| 获取所有的父节点 | NULL | parents() |
| 获取上一个兄弟节点 | previousElementSibling | prev() |
| 获取之前所有的兄弟节点 | NULL | prevAll() |
| 获取下一个兄弟节点 | nextElementSibling | next()或使用"+"，$('pre + nextbrother') |
| 获取之后所有兄弟节点 | NULL | nextAll()或使用"~"，$('pre ~ brother') |
| 获取所有兄弟节点 | NULL | siblings() |
| 获取所有index>No的兄弟节点 | NULL | :gt(No) |
| 获取所有index<No的兄弟节点 | NULL | :lt(No) |
| 获取index=No的兄弟节点 | NULL | :eq(No) |
| 查找子节点 | NULL | find() |
注意：1.用javascript获取第一个及最后一个子节点，建议使用children[元素下标]来实现，使用firstElementChild/firstChild存在兼容性问题，
具体解释转至：http://www.cnblogs.com/jelly7723/p/4871849.html
2.previousElementSibling及nextElementSibling同样在IE9以下不支持，建议使用jQuery来实现；
3.jquery选择器空格与大于号、加号与波浪号的区别更加详细的介绍见对应的文章。
UpdateTime--2017年5月28日12:41:20
13.添加、移除节点
| 操作 | javascript | jQuery |
| 为指定元素最后面添加一个子节点 | appendChild() |
通过操作父节点来实现添加子节点使用append()； 通过操作子节点拼接到父节点使用appendTo()。 |
| 为指定元素最前面添加一个子节点 | insertBefore(目标对象，插入位置) |
通过操作父节点来实现添加子节点使用prepend()； 通过操作子节点拼接到父节点使用prependTo()。 |
| 为指定元素后面添加一个兄弟节点 | 无 |
通过操作已知节点来实现添加兄弟节点使用after()； 通过操作兄弟节点拼接到已知节点使用insertAfter()。 |
| 为指定元素前面添加一个兄弟节点 | insertBefore(目标对象，插入位置) |
通过操作已知节点来实现添加兄弟节点使用before()； 通过操作兄弟节点拼接到已知节点使用insertBefore()。 |
| 移除指定节点 | NULL | remove() |
| 清空所有的子节点 | NULL | empty() |
| 克隆节点 | NULL | clone() |
UpdateTime--2017年6月30日17:35:57
注意：appendTo()，clone()用法见文章：jquery选择器空格与大于号、加号与波浪号的区别
UpdateTime--2017年11月6日17:09:42
其他方法的用法，见文章：appendChild append insertBefore prepend
14.重置form表单
| 操作 | javascript | jQuery |
| 重置form表单 | reset() | NULL |
说明：具体用法见文章-js重置form表单。
UpdateTime--2017年7月13日08:38:18
15.获取数组长度
| 操作 | javascript | jQuery |
| 获取数组长度 | .length 属性 | .length 属性 |
UpdateTime--2017年7月20日10:04:19
16.对字符串去除左右空格
| 操作 | javascript | jQuery |
| 去除字符串左右空格 | NULL，自定义trim()方法 | $.trim(字符串) |
17.判断父元素中是否包含指定元素
| 操作 | javascript | jQuery |
| 判断父元素中是否包含指定元素 | NULL，自定义contains()方法 | $.contains(parentElement元素,childElement元素) |
UpdateTime--2017年7月21日09:15:36
18.选取包含指定字符串的元素
| 操作 | javascript | jQuery |
| 选取包含指定字符串的元素 | NULL | $(":contains(text)")，经常与其他元素/选择器一起使用，来选择指定的组中包含指定文本的元素 |
UpdateTime--2017年8月1日09:45:26
19.将json字符串转换成JSON对象
| 操作 | javascript | jQuery |
| 将json字符串转换成JSON对象 | eval('(' + jsonStr + ')') | $.parseJSON(jsonStr) |
注意：必须是标准格式的json字符串，格式介绍见文章：javascript JSON
UpdateTime--2017年11月7日17:04:28
20.判断JSON对象是否为空
| 操作 | javascript | jQuery |
| 判断JSON对象是否为空 | NULL | $.isEmptyObject(param) |
21.判断是否是数组
| 操作 | javascript | jQuery |
| 判断是否是数组 | NULL | $.isArray(param) |
UpdateTime--2018年3月23日17:04:21
22.监听窗口大小改变
| 操作 | javascript | jQuery |
| 监听窗口大小改变事件 | window.onresize=function(){} | $(window).resize(function(){}); |
2018/12/21
23.获取指定元素内的内容+本元素
| 操作 | javascript | jQuery |
| 获取本元素及标签内元素 | outerHTML | 没有 |