首页 > 代码库 > js与jQuery方法对比
js与jQuery方法对比
CreateTime--2017年1月19日10:00:10
Author:Marydon
javascript与jQuery方法对比
jquery对象转dom对象
//方式一$("#confirm")[0]//方式二$("#confirm").get(0)//方式三$("#confirm").eq(0)[0]
var getObjectByJs = document.getElementById("test");var getObjectByJq = $("#test");
1.高度
操作 | javascript | jQuery |
取值 | getObjectByJs.style.height; | getObjectByJq.height(); |
赋值 | getObjectByJs.style.height = "50px"; | getObjectByJq.height("50"); |
2.宽度 同上 width width()
3.显示与隐藏
操作 | javascript | jQuery |
显示 | getObjectByJs.style.display = "block"; | getObjectByJq.show(); |
隐藏 | getObjectByJs.style.display = "none"; | getObjectByJq.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‘,‘成功‘); |
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.当使用javascript移除"onclick"属性时,IE浏览器存在bug,
window.onload = function () { getObjectByJs.removeAttribute(‘onclick‘);}
虽然"onclick"属性已被删除,但是对应的onclick调用的js代码还是会执行!
解决方案:
//页面加载完毕使用jQuery的$(function(){});$(function() { getObjectByJq.removeAttr(‘onclick‘);}
d.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="http://www.mamicode.com/#";
//下面内容与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 = "http://www.mamicode.com/赋值"; | 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() {}); |
js与jQuery方法对比