您的位置:首页> 日志> 前端技术 正文
DTOP

关于jQuery学习记录(一)

NoyaHua | 2015年03月31日 |

>>收藏本文 已有 2条评论

  最近开始学习jQuery,由于我之前对jQuery了解的不多,所以也只能是从最基础的开始学起。现在我将最近学习的内容简单总结如下:

jQuery简介

  jQuery是继prototype之后又一个优秀的Javascript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
  jQuery凭借简洁的语法和跨平台的兼容性,极大的简化了javaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。其核心理念是write less,do more(写得更少,做得更多)。

JavaScript 与JQuery 常用方法比较

1、加载DOM区别

JavaScript:

  1. window.onload
  1. function first(){
  2. alert('first');
  3. }
  4. function second(){
  5. alert('second');
  6. }
  7. window.onload = first;
  8. window.onload = second;
  9. //只会执行第二个window.onload;不过可以通过以下方法来进行改进:
  10. window.onload = function(){
  11. first();
  12. second();
  13. }

JQuery:

  1. $(document).ready()
  1. $(document).ready(){
  2. function first(){
  3. alert('first');
  4. }
  5. function second(){
  6. alert('second');
  7. }
  8. $(document).ready(function(){
  9. first();
  10. }
  11. $(document).ready(function(){
  12. second();
  13. }
  14. //两条均会执行
  15. }

2、获取ID

JavaScript:

  1. document.getElementById('idName')

JQuery:

  1. $('#idName')

3、获取Class

JavaScript:

JavaScript没有默认的获取class的方法

JQuery:

  1. $('.className')

4、获取TagName

JavaScript:

  1. document.getElementsByTagName('tagName')

JQuery:

  1. $('tagName')

5、创建对象并加入文档中

JavaScript:

  1. var para = document.createElement('p');
  2. //创建一个p元素
  3. document.body.appendElement(para);
  4. //将p元素追加为body的lastchild子节点,如果想将新创建的p元素插入到已存在的某个元素之前,可以使用insertBefore()方法

JQuery:

JQuery提供了4种将新元素插入到已有元素(内部)之前或者之后的方法:append()、appendTo()、prepend()、prependTo()。

  1.  
  2. $('p').append('<b>Hello!</b>');
  3. //输出:<p>World!<b>Hello!</b></p>
  4.   
  5. $('<b>Hello!</b>').appendTo('p'); //输出:同上
  6.   
  7. $('p').prepend('<b>Hello!</b>');
  8. //输出:<p><b>Hello!</b>World! </p>
  9.   
  10. $('<b>Hello!</b>').prependTo('p');
  11. //输出:同上

6、插入新元素

JavaScript:

insertBefore() 语法格式:parentElement.insertBefore(newElement,targetElement)

eg, 将一个img元素插入一个段落之前。html代码:

  1. <img id="imgs" src="image.jpg" />
  2. 这是一段文字

JavaScript代码:

  1. var imgs = document.getElementById('imgs');
  2. var para = document.getElementsByTag('p');
  3. para.parenetNode.insertBefore(imgs,para);

JQuery:

JQuery提供了4种将新元素插入到已有元素(外部)之前或者之后的方法:after()、insertAfter()、before()、insertBefore()。格式:$( html );

  1. $('p').after('<p>World!</p>');
  2. //输出:

    World!

    Hello!
  3. $('Hello!'). insertAfter ('p');
  4. //输出:同上
  5. $('p').before('Hello!');
  6. //输出:Hello!

    World!

  7. $('Hello!').insertBefore('p');
  8. //输出:同上

7、复制节点

JavaScript代码:

  1. reference = node.cloneNode(deep)
  2. 这个方法只有一个布尔型的参数,它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。

 

JQuery:代码:

  1. .clone() //复制节点后,被复制的新元素并不具有任何行为
  2. .clone(true) //复制节点内容及其绑定的事件

8、删除节点

JavaScript:

  1. reference = element.removeChild(node)
  2. removeChild()方法将一个给定元素里删除一个子节点

JQuery: remove(); remove()方法作用就是从DOM中删除所有匹配的元素,remove()方法还可以与其他的过滤选择器结合使用,非常方便。 eg,将ul li下的title不是"Hello"的li移除: $('ul li').remove(li[title!='Hello']); empty(); empty()方法作用是清空节点。