js与jQuery方法对比

Posted 2020-09-07 Marydon

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="#";    

　　//下面内容与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() {});