美文网首页前端开发
jQuery设计思想笔记

jQuery设计思想笔记

作者: kiterumer | 来源:发表于2019-04-10 11:14 被阅读6次

原文来自jQuery设计思想--阮一峰,虽然距今已有八年之久,但依然有许多可借鉴之处。

1. 选择网页元素

jQuery的基本设计思想和主要用法,就是“选择某个网页元素,然后对其进行某种操作”。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

2. 改变结果集

jQuery设计思想之二,就是提供各种强大的过滤器,对结果集进行筛选,缩小选择结果。

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

3. 链式操作

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。

$('div').find('h3').eq(2).html('Hello');

分解开来,就是:

$('div') //找到div元素

 .find('h3') //选择其中的h3元素

 .eq(2) //选择第3个h3元素

 .html('Hello'); //将它的内容改为Hello

4. 元素的操作:取值和赋值

jQuery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。
常见的取值和赋值函数如下:

.html()  取出或设置html内容
.text()  取出或设置text内容
.attr()  取出或设置某个属性的值
.val()  取出某个表单元素的值

需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值(.text()例外,它取出所有元素的text内容)。

5.工具方法

不必选中元素,就可以直接使用这些方法。

它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用。而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用。如果不理解这种区别,问题也不大,只要把工具方法理解成,是像javascript原生函数那样,可以直接使用的方法就行了。

常用的工具方法有以下几种:

$.trim()  去除字符串两端的空格
$.each()  遍历一个数组或对象
$.grep()  返回数组中符合某种标准的元素

6. 事件操作

事件直接绑定在网页元素之上。

$('p').click(function(){

    alert('Hello');

  });

7.特殊效果

淡入淡出,显示隐藏等效果。
更复杂的特效,可以用.animate()自定义。

相关文章

  • 2.jQuery学习笔记第二节/Jq的设计思想之选择元素

    jQuery学习笔记第二节/Jq的设计思想之选择元素 1.jQuery的设计思想 选择网页元素模拟 CSS 选择符...

  • jQuery设计思想笔记

    原文来自jQuery设计思想--阮一峰,虽然距今已有八年之久,但依然有许多可借鉴之处。 1. 选择网页元素 jQu...

  • jQuery

    参考 阮一峰的《jQuery设计思想》 jQuery 中文文档 jQuery 如何获取元素jQuery的基本设计思...

  • jQuery设计思想笔记整理

    1.前言 前端有多牛叉,现在是前端使用寿命最长的库,而且百分之80的网站在使用.本文介绍jQuery的增删改查和链...

  • jQuery

    jQuery设计思想 jQuery最佳实践 如何做到jQuery-free jQuery-deferred对象 同...

  • jQuery设计思想

    1 jQuery 如何获取元素 jQuery获取选择器对应的元素对象,返回可操作对象. 利用操作对象的原型对象上...

  • jQuery设计思想

    jQuery[http://jquery.com/] 是目前使用最广泛的 javaScript 函数库。 现在在 ...

  • jQuery设计思想

    JQuery简单说就是,这是一个封装了 DOM 操作的库,使用它比直接使用原生 DOM API 更方便,更好读 链...

  • 简单-jQuery设计思想

    阮一峰老师原文【目录】一、选择网页元素二、改变结果集三、链式操作四、元素的操作:取值和赋值五、元素的操作:移动六、...

  • jQuery博客

    jQuery 如何获取元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。...

网友评论

    本文标题:jQuery设计思想笔记

    本文链接:https://www.haomeiwen.com/subject/smzgiqtx.html