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 | |
|  获取下一个兄弟节点 |  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存在兼容性问题,
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 | 没有 | 
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!









