js与jQuery方法对比

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

js获取高度的两种方式区别，见文章-js获取高度和宽度

2.宽度 同上 width width()
3.显示与隐藏

4.改变显示所有内容

5.改变显示所有的文本内容

6.标签属性
　　a.已知属性

　　b.自定义属性

　　c.增加、移除属性

　　注：
　　　　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框取值及赋值

8.class属性

　　注：
　　　　a.jQuery的toggleClass('className',paramBoolean)方法
　　　　　　元素中class属性的值，指定class类，如果存在则删除、如果不存在则添加；
　　　　　　第二个参数如果为true，则只进行删除操作；
　　　　　　如果设为false，只进行删除操作。
　　　　b.js-自定义方法文章中，已对增加和删除class类做了封装

9.选中文本内容

选中文本内容js和jquery都是调用select()方法

9.焦点事件

获取焦点js和jquery都是调用focus()方法，失去焦点都调用blur()方法。

UpdateTime--2017年2月16日11:45:41
11.点击事件

<input id="bb" type="text" onclick="alert(4)"/>

UpdateTime--2017年5月11日15:17:28

12.获取节点

1.用javascript获取第一个及最后一个子节点，建议使用children[元素下标]来实现，使用firstElementChild/firstChild存在兼容性问题，

2.previousElementSibling及nextElementSibling同样在IE9以下不支持，建议使用jQuery来实现；

　　　　   3.jquery选择器空格与大于号、加号与波浪号的区别更加详细的介绍见对应的文章。

 UpdateTime--2017年5月28日12:41:20

13.添加、移除节点

　　UpdateTime--2017年6月30日17:35:57

appendTo()，clone()用法见文章：​​jquery选择器空格与大于号、加号与波浪号的区别​​ 

　　UpdateTime--2017年11月6日17:09:42

其他方法的用法，见文章：​​appendChild append insertBefore prepend​​

14.重置form表单

具体用法见文章-js重置form表单。 

UpdateTime--2017年7月13日08:38:18

15.获取数组长度

UpdateTime--2017年7月20日10:04:19

16.对字符串去除左右空格

17.判断父元素中是否包含指定元素

UpdateTime--2017年7月21日09:15:36

18.选取包含指定字符串的元素

UpdateTime--2017年8月1日09:45:26

19.将json字符串转换成JSON对象

 注意：必须是标准格式的json字符串，格式介绍见文章：​​javascript JSON​​ 

UpdateTime--2017年11月7日17:04:28

20.判断JSON对象是否为空

21.判断是否是数组

UpdateTime--2018年3月23日17:04:21

22.监听窗口大小改变

2018/12/21

23.获取指定元素内的内容+本元素

写在最后

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