javascript基础拾遗(十三)
1.jQuery的特点
jQuery是目前非常流行的javascript库,理念是“Write Less,Do More”
1)消除浏览器差异
2)简洁的操作DOM方法
3)轻松实现动画,修改CSS等各种操作
2.$符号
$是著名的jQuery符号,jQuery把所有功能都封装在一个全局函数jQuery中,$是全局函数jQuery的别名。
window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'
$本质上是一个函数,但是函数本身也是对象,于是$除了可以直接调用外,还有很多其他属性
3.编写jQuery插件
$.fn.highlight1 = function () {
// this已绑定为当前jQuery对象:
this.css('backgroundColor', '#fffceb').css('color', '#d85030');
return this;
}
$("#test-id").highlight1()
通过$.fn对象扩展jQuery方法
this在调用时,被绑定为调用的jQuery对象
return this的作用:因为jQuery对象支持链式操作,如$("#test-id").highlight1().slideDown(),因此jQuery对象返回的仍是jQuery对象
4.$.extend
如果jQuery插件,需要传入参数,该怎么办呢?
$.fn.highlight2 = function (options) {
// 要考虑到各种情况:
// options为undefined
// options只有部分key
var bgcolor = options && options.backgroundColor || '#fffceb';
var color = options && options.color || '#d85030';
this.css('backgroundColor', bgcolor).css('color', color);
return this;
}
可以看到传入参数和默认参数需要做合并处理,$.extend函数封装了这个操作,如下所示:
var options = {
color: '#000000'
}
var opts = $.extend({},{
backgroundColor:'#00a8e6',
color:'#ffffff'
},options)
// {backgroundColor:'#00a8e6',color:'#000000'}
console.log(opts)
jQuery插件传入参数示例如下:
$.fn.highlight = function (options) {
// 合并默认值和用户设定值:
var opts = $.extend({}, $.fn.highlight.defaults, options);
this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
return this;
}
// 设定默认值:
$.fn.highlight.defaults = {
color: '#d85030',
backgroundColor: '#fff8de'
}
javascript基础拾遗(十三)的更多相关文章
- javascript基础拾遗(十二)
1.javascript的单线程特性 在javascript中,所有的代码都是单线程的 因此所有的网络操作,浏览器事件,都必须是异步执行的,异步执行的逻辑是回调. function callback( ...
- javascript基础拾遗(十一)
1.DOM操作 1)查找 //根据id查找 document.getElementById() //根据html标签查找 documnet.getElementByTagName() //根据样式cl ...
- javascript基础拾遗(十)
1.支持ES6标准的浏览器 IE10+ Chrome Safari Firefox 移动端浏览器统一都支持 需要注意的是,不同浏览器对各个特性的支持也不一样 2.window对象 当前浏览器窗口对象 ...
- javascript基础拾遗(七)
1.对象的继承__proto__ var Language = { name: 'program', score: 8.0, popular: function () { return this.sc ...
- javascript基础拾遗(六)
1.Date内置对象 获取系统时间 var now = new Date() console.log(now) console.log(now.getDate()) console.log(now.g ...
- javascript基础拾遗(五)
1.什么是箭头函数 ES6引入的一种新的函数,类似匿名函数,x=>xx 箭头左端为函数参数,右端为函数体 相当于 function (x){ retutn xx } 2.箭头函数的特点 更简洁 ...
- javascript基础拾遗(二)
1.对象定义 定义属性 var language = { name:'javascript', score:9.0 }; console.log(language.name) console.log( ...
- javascript基础拾遗(一)
1.判断变量类型 var num = '123'; if(typeof num == 'number'){ alert('this is a number'); } else{ throw 'this ...
- javascript基础拾遗(九)
1.class关键字 ES6引入了新的class关键字编写对象 function Language(name){ this.name = name this.score = 8.0 } Languag ...
随机推荐
- 无限极分类php实现—查子孙树、家谱树
1.本文更新日期:2018/05/20 , 亲测可用,在原有基础上进行增强和 详细化 . 2.面包屑导航 和 子孙树 效果图如下: 3.代码: <?php // 无限级分类中,查家谱树(面包屑导 ...
- HDUOJ-----1074 Integer Inquiry
Integer Inquiry Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)T ...
- easymock快速入门
easymock是众多mock之中的很容易用的mock,今天刚开始学习,来个简单的教程.以购物车结算为例子,比如首先是每一个商品项的pojo. public class Item { private ...
- IT编年史 技术生命周期起步,成长,成熟和衰退四个阶段 IT历史总结
IT编年史 最近查看了大量的正史或者野史,体会了整个IT夜发展的风气云涌,颇为激动,撰写如下. 感谢google黑板报的浪潮之巅http://googlechinablog.com/2007/07/a ...
- C语言学习笔记 (006) - 二维数组传参的三种表现形式
# include <stdio.h> # include <stdlib.h> # define M # define N int getdate(int (*sp)[M]) ...
- JVM调优总结(一)-- 堆和栈的基本概念
数据类型 Java虚拟机中,数据类型可以分为两类:基本类型和引用类型.基本类型的变量保存原始值,即:他代表的值就是数值本身:而引用类型的变量保存引用值.“引用值”代表了某个对象的引用,而不是对象本身, ...
- 【Oracle】浅析Oracle中的事务
1. 什么是事务 在数据库中事务是工作的逻辑单元,一个事务是由一个或多个完成一组的相关行为的SQL语句组成,通过事务机制确保这一组SQL语句所作的操作要么都成功执行,完成整个工作单元操作,要么一个也不 ...
- block(七)__block和__weak的区别-b
在MRC下,我们通常使用__block , 而在ARC下我们通常使用__weak , 或者__unsafe_unretaine __block(不安全,不建议使用) 来修饰对象防止循环引用而造成的内存 ...
- Java NIO.2 —— 文件或目录拷贝操作
拷贝整个文件树是可以递归每个目录和文件调用 Files.copy()方法.在使用的时候有一下注意事项. 在往目录拷贝文件之前,首先要保证目录已经存在.拷贝源目录(不论是否为空)都会生成目标目录.整个任 ...
- Android资源文件 - 使用资源存储字符串 颜色 尺寸 整型 布尔值 数组
一. Android资源文件简介 1. Android应用资源的作用 (1) Android项目中文件分类 在Android工程中, 文件主要分为下面几类 : 界面布局文件, Java src源文件, ...