jQuery数据类型小结(14个)


Posted in Javascript onJanuary 08, 2016

jQuery除了包含原生JS中的内置数据类型(built-in datatype),还包括一些扩展的数据类型(virtual types),如Selectors、Events等。

1. String

String最常见,几乎任何一门高级编程语言和脚本语言中都支持,比如"Hello world!"即字符串。字符串的类型为string。比如

var typeOfStr = typeof "hello world";//typeOfStr为“string"

1.1 String内置方法

"hello".charAt(0) // "h"
"hello".toUpperCase() // "HELLO"
"Hello".toLowerCase() // "hello"
"hello".replace(/e|o/g, "x") // "hxllx"
"1,2,3".split(",") // ["1", "2", "3"]

1.2 length属性:返回字符长度,比如"hello".length返回5

1.3 字符串转换为Boolean:

一个空字符串("")默认为false,而一个非空字符串为true(比如"hello")。

2. Number

数字类型,比如3.1415926或者1、2、3...

typeof 3.1415926 返回的是"number"

2.1 Number转换为Boolean:

如果一个Number值为0,则默认为false,否则为true。

2.2 由于Number是采用双精度浮点数实现的,所以下面这种情况是合理的:

0.1 + 0.2 // 0.30000000000000004

3. Math

下面的方法与Java中的Math类的静态方法类似。

Math.PI // 3.141592653589793
Math.cos(Math.PI) // -1

3.1 将字符串化为数字:parseInt和parseFloat方法:

parseInt("123") = 123 (采用十进制转换)
parseInt("010") = 8 (采用八进制转换)
parseInt("0xCAFE") = 51966 (采用十六进制转换)
parseInt("010", 10) = 10 (指定用10进制转换)
parseInt("11", 2) = 3 (指定用二进制转换)
parseFloat("10.10") = 10.1

3.2 数字到字符串

当将Number粘到(append)字符串后的时候,将得到字符串。
"" + 1 + 2; // "12"
"" + (1 + 2); // "3"
"" + 0.0000001; // "1e-7"
或者用强制类型转换:
String(1) + String(2); //"12"
String(1 + 2); //"3"

4. NaN 和 Infinity

如果对一个非数字字符串调用parseInt方法,将返回NaN(Not a Number),NaN常用来检测一个变量是否数字类型,如下:

isNaN(parseInt("hello", 10)) // true
Infinity表示数值无穷大或无穷小,比如1 / 0 // Infinity。

对NaN和Infinity调用typeof运算符都返回"numuber"。

另外 NaN==NaN 返回false,但是 Infinity==Infinity 返回true。

5. Integer 和 Float

分为表示整型和浮点型。

6. BOOLEAN

布尔类型,true或者false。

7. OBJECT

JavaScript中的一切皆对象。对一个对象进行typeof运算返回 "object"。

var x = {}; 
var y = { name: "Pete", age: 15 };

对于上面的y对象,可以采用圆点获取属性值,比如y.name返回"Pete",y.age返回15

7.1 Array Notation(数组访问方式访问对象)

var operations = { increase: "++", decrease: "--" } 
var operation = "increase"; 
operations[operation] // "++"; 
operations["multiply"] = "*"; // "*"

上面operations["multiply"]="*"; 往operations对象中添加了一个key-value对。

7.2 对象循环访问:for-in

var obj = { name: "Pete", age: 15}; 
for(key in obj) { 
alert("key is "+[key]+", value is "+obj[key]); 
}

7.3 任何对象不管有无属性和值,都默认为true

7.4 对象的Prototype属性

jQuery中用fn(Prototype的别名)动态为jQuery Instances添加对象(函数)

var form = $("#myform"); 
form.clearForm; // undefined 
form.fn.clearForm = function() {
return this.find(":input").each(function() { this.value = ""; }).end();
}; 
form.clearForm() // works for all instances of jQuery objects, because the new method was added

8. OPTIONS

几乎所有的jQuery插件都提供了一个基于OPTIONS的API,OPTIONS是JS对象,意味着该对象以及它的属性都是optional(可选的)。允许customization。
比如采用Ajax方式提交表单,

$("#myform").ajaxForm();//默认采用Form的Action属性值作为Ajax-URL,Method值作为提交类型(GET/POST)
$("#myform").ajaxForm({ url: "mypage.php", type: "POST" });//则覆盖了提交到的URL和提交类型

9. ARRAY

var arr = [1, 2, 3];

ARRAY是可变的lists。ARRAY也是对象。

读取或设置ARRAY中元素的值,采用这种方式:

var val = arr[0];//val为1
arr[2] = 4;//现在arr第三个元素为4

9.1 数组循环(遍历)

for (var i = 0; i < a.length; i++) { // Do something with a[i] }
但是当考虑性能时,则最好只读一次length属性,如下:
for (var i = 0, j = a.length; i < j; i++) { // Do something with a[i] }
jQuery提供了each方法遍历数组:
var x = [1, 2, 3]; 
$.each(x, 
function(index, value) { 
console.log("index", index, "value", value); 
});

9.2 对数组调用push方法意味着将一个元素添加到数组末尾,比如 x.push(5); 和 x.[x.length] = 5; 等价

9.3 数组其他内置方法:

var x = [0, 3, 1, 2]; 
x.reverse() // [2, 1, 3, 0] 
x.join(" ? ") // "2 - 1 - 3 - 0" 
x.pop() // [2, 1, 3] 
x.unshift(-1) // [-1, 2, 1, 3] 
x.shift() // [2, 1, 3] 
x.sort() // [1, 2, 3] 
x.splice(1, 2) // 用于插入、删除或替换数组元素,这里为删除从index=1开始的2个元素

9.4 数组为对象,所以始终为true

10. MAP

The map type is used by the AJAX function to hold the data of a request. This type could be a string, an array<form elements>, a jQuery object with form elements or an object with key/value pairs. In the last case, it is possible to assign multiple values to one key by assigning an array. As below:
{'key[]':['valuea','valueb']}

11. FUNCTION:匿名和有名两种

11.1 Context、Call和Apply

In JavaScript, the variable "this" always refers to the current context. 
$(document).ready(function() { 
// this refers to window.document}); 
$("a").click(function() { // this refers to an anchor DOM element
});

12. SELECTOR

There are lot of plugins that leverage jQuery's selectors in other ways. The validation plugin accepts a selector to specify a dependency, whether an input is required or not:
emailrules: { required: "#email:filled" }
This would make a checkbox with name "emailrules" required only if the user entered an email address in the email field, selected via its id, filtered via a custom selector ":filled" that the validation plugin provides.

13. EVENT

DOM标准事件包括:blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, andkeyup

14. JQUERY

JQUERY对象包含DOM元素的集合。比如$('p')即返回所有<p>...</p>
JQUERY对象行为类似数组,也有length属性,也可以通过index访问DOM元素集合中的某个。但是不是数组,不具备数组的某些方法,比如join()。

许多jQuery方法返回jQuery对象本身,所以可以采用链式调用:
$("p").css("color", "red").find(".special").css("color", "green");
但是如果你调用的方法会破坏jQuery对象,比如find()和filter(),则返回的不是原对象。要返回到原对象只需要再调用end()方法即可。

Javascript 相关文章推荐
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jquery星级插件、支持页面中多次使用
Mar 25 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
js控制li的隐藏和显示实例代码
Oct 15 Javascript
vue.js表格分页示例
Oct 18 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
详解如何使用nvm管理Node.js多版本
May 06 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 #Javascript
基于jquery实现图片上传本地预览功能
Jan 08 #Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 #Javascript
jQuery实现本地预览上传图片功能
Jan 08 #Javascript
jQuery自定义滚动条完整实例
Jan 08 #Javascript
javascript正则表达式定义(语法)总结
Jan 08 #Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 #Javascript
You might like
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
自己的js工具 Event封装
2009/08/21 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
shiro授权的实现原理
2017/09/21 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
Pycharm安装python库的方法
2020/11/24 Python
如何开发一款堪比APP的微信小程序(腾讯内部团队分享)
2016/12/22 HTML / CSS
若干个Java基础面试题
2015/05/19 面试题
和平主题的演讲稿
2014/01/12 职场文书
报告会主持词
2014/04/02 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
思想品德评语大全
2014/12/31 职场文书
工程资料员岗位职责
2015/04/13 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
银行柜员工作心得体会
2016/01/23 职场文书