jQuery设计思想


Posted in Javascript onMarch 07, 2017

前面的话

在深入了解jQuery的各个细节之前,需要对jQuery的设计思想有一个大致的了解。在遇到问题时, 知道应该使用jQuery的哪一个功能,然后迅速从手册中找到具体的用法。本文将详细介绍jQuery的设计思想

选择元素

jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他javascript库的根本特点

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素

【模拟CSS选择元素】

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素

【特有表达式选择】

$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素,除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

【多种筛选方法】

$('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元素

写法

【方法函数化】

在原生javascript中,赋值操作符用的比较多。而在jQuery中,多使用函数传参的方式,也就是方法函数化

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
div.onclick = function(){};
//jQuery
div.click(function(){});
//原生
div.innerHTML = '123';
//jQuery
div.html('123');

【链式操作】

选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来

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

分解开来,就是下面这样:

$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello

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

jQuery还提供了.end()方法,使得结果集可以后退一步

$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World

【取赋值合体】

操作网页元素,最常见的需求是取得它们的值,或者对它们进行赋值。jQuery使用同一个函数来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定

$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值

常见的取值和赋值函数如下

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

需要注意的是,如果结果集包含多个元素,那么赋值的时候,将对其中所有的元素赋值;取值的时候,则是只取出第一个元素的值

[注意].text()例外,它取出所有元素的text内容

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
解决jquery的.animate()函数在IE6下的问题
Dec 03 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
jquery validate添加自定义验证规则(验证邮箱 邮政编码)
Dec 04 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
js的对象与函数详解
Jan 21 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
Node.js读取文件内容示例
Mar 07 #Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 #Javascript
AngularJS的Filter的示例详解
Mar 07 #Javascript
js上下视差滚动简单实现代码
Mar 07 #Javascript
js实现下一页页码效果
Mar 07 #Javascript
原生JS中slice()方法和splice()区别
Mar 06 #Javascript
浅析vue component 组件使用
Mar 06 #Javascript
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
php adodb连接mssql解决乱码问题
2009/06/12 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
微信企业转账之入口类分装php代码
2018/10/01 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
Open and Print a Word Document
2007/06/15 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JavaScript 计算笛卡尔积实例详解
2016/12/02 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
js实现简单进度条效果
2020/03/25 Javascript
js实现自定义滚动条的示例
2020/10/27 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python交互界面的退出方法
2019/02/16 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Pycharm中如何关掉python console
2020/10/27 Python
美国市场上最实惠的送餐服务:Dinnerly
2018/03/18 全球购物
超市开学活动方案
2014/03/01 职场文书
司法助理专业自荐书
2014/06/13 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
会计出纳岗位职责
2015/03/31 职场文书
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
2021/04/13 HTML / CSS
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android