JQuery学习总结


这几天,学习了一下被称为前端最长寿的JS库,在学习了其原理之后,我更加佩服能写出JQ的人,其简单但又高效的特性让其成为了占有率最高的JS库,虽然其已经在时代的潮流中被逐渐替代,但是其优秀的理念还是值得我们学习的 ? 当然在看了其源码之后,我心中只剩下深深的敬佩,感叹程序员先辈们的智慧。它的代码是那种看似很简单但是实际让你去写,或许你这辈子可能都没法优化的那么简洁高效。 下面是我对jQuery的总结??。

1.jQuery 如何获取元素

jQuery的思想其实就是”选择网页中的某个元素,然后对其进行操作“。 使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(可以简写为$),然后得到被选中的元素。 $(document) //选择整个文档对象 $('#myId') //选择ID为myId的网页元素 $('div.myClass') // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素

2.jQuery 的链式操作是怎样的

所谓链式操作就是在网页中选中元素后可以连续多次对其进行操作,并且将所有的操作都连写在一起,就像一个链条一样,例如:   $('div').find('h3').eq(2).html('Nature'); 换个行他就是这个样子的??        $('div') .find('h3') .eq(2) .html('Nature'); 由于JQuery所返回的都是jQuery对象所以,不同的操作可以连接起来,这也是jQuery最方便的地方

3.jQuery 如何创建元素

创建元素其实很简单,只要把新元素直接传入jQuery的构造函数就行了 代码如下:   $('

Hello

');   $('
  • new list item
  • ');   $('ul').append('
  • list item
  • ');

    4.jQuery 如何移动元素

    移动元素在jQuery种提供了两种方法,一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。 假设我们选中了一个div元素,我们接下来需要把div元素放到p元素后面 第一种方法是insertAfter(),把div元素放到p元素后面:   $('div').insertAfter($('p')); 第二种方法是.after(),把p元素加到div元素前面   $('p').after($('div'));

    5.jQuery 如何修改元素的属性

    操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。 jQuery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。   $('h1').html(); //html()没有参数,表示取出h1的值   $('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值

     

    jQuery 用到了哪些设计模式

    不用new的构造函数,这个模式叫做重载 $(支持多种参数),这个模式叫做重载 用闭包隐藏细节,这个模式没有专门的名字 $div.text()即可读也可写,getter/setter $.fn是$.prototype的别名,这叫别名 jQuery针对不同浏览器使用不同代码,这叫做适配器