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 ...
随机推荐
- -webkit-line-clamp下多行文字溢出点点点...显示实例页面
overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box ...
- 【PHP采集】php采集、[\s\S]的使用、正则获取 换行字符串或html块
1.如图,我想要获取 红框框中的html内容,但是普通的正则一直获取不到: 2.原因剖析:因为html换行了,所以直接 /<h3 class=\"s_name\"(.+?)& ...
- Redis-Redi事务注意事项
当客户端处于非事务状态下时, 所有发送给服务器端的命令都会立即被服务器执行.但是, 当客户端进入事务状态之后, 服务器在收到来自客户端的命令时, 不会立即执行命令, 而是将这些命令全部放进一个事务队列 ...
- samba config
[global] netbios name = HARDY #设置服务器的netbios名字 server string = my server #对samba服务器的描述 workgroup ...
- iOS 持续集成
iOS 持续集成系列 - 开篇 前言 iOS 开发在经过这几年的野蛮生长之后,慢慢地趋于稳定.无论开发语言是 Objective-C 还是 Swift,工程类型是 Hybird 还是原生,开发思想是 ...
- VirtualBox虚拟机增加CentOS根目录容量 LVM扩容
对于目前的网络开发者来说,比较好的搭档就是Win7+VirtualBox+CentOS的组合,既可以发挥Linux强大的网络服务功能,也可以有效的隔离各项服务拖慢系统,影响系统的运行,对于新手来说可以 ...
- activiti实战--第一章--认识Activiti
学习资料:<Activiti实战> 第一章 认识Activiti 内容概览:讲解activiti的特点.接口概览.架构等基本信息. 1.3 Activiti的特点 1.使用mybatis ...
- 【struts2】Struts2的异常处理
在Action中execute方法声明为:public String execute() throws Exception,这样,Action可以抛出任何Exception. 1)自己实现异常处理 我 ...
- 使用 Cookie 而无需 ASP.NET 核心标识的身份验证
https://docs.microsoft.com/zh-cn/aspnet/core/security/authentication/cookie?tabs=aspnetcore2x#tabpan ...
- Spring Boot修改内置Tomcat端口号
spring Boot 内置Tomcat默认端口号为8080,在开发多个应用调试时很不方便,本文介绍了修改 Spring Boot内置Tomcat端口号的方法. 一.EmbeddedServletCo ...