正文

js与jQuery方法对比

IP云
IP云V管理员/4 阅读
08/16
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示
 

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.高度

操作javascriptjQuery
取值getObjectByJs.style.height;或offsetHeightgetObjectByJq.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)"/>

操作 javascriptjQuery
点击事件  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没有

写在最后

哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！

相关推荐：

  • 个人主页
  • js与jQuery实现方式对比汇总