首页 > 代码库 > 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.高度

操作javascriptjQuery
取值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)"/>
操作 javascriptjQuery
点击事件  onclick click()
触发点击事件  document.getElementById("bb").onclick(); document.getElementById("bb").click();
绑定触发点击事件 document.getElementById("bb").onclick = function() {}; document.getElementById("bb").click(function() {});

 

 

 

 


js与jQuery方法对比