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 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
JavaScript 大数据相加的问题
Aug 03 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
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 array_filter除去数组中的空字符元素
2020/06/21 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
js 控制图片大小核心讲解
2013/10/09 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
vue开发中遇到的问题总结
2020/04/07 Javascript
跟老齐学Python之私有函数和专有方法
2014/10/24 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
python实现串口自动触发工作的示例
2019/07/02 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
介绍java中初始化块的使用
2012/09/11 面试题
应届医学毕业生求职信分享
2013/12/02 职场文书
劳动模范事迹材料
2014/01/19 职场文书
上课说话检讨书大全
2014/01/22 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
超市活动计划书
2014/04/24 职场文书
颂军魂爱军营演讲稿
2014/09/13 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
大学生敬老院活动总结
2015/05/07 职场文书
师范生见习总结范文
2015/06/23 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书