V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3396 天前的主题，其中的信息可能已经有所发展或是发生改变。

JSLite

[官方网站]
[官方文档-更详细]

让web开发更迅速，下载执行更快、量级更轻，针对现代高级浏览器的JavaScript库。推进前端开发标准对于攻城师来说，人人有责。

选择器$

选择器使用的是浏览器自带的方法封装的 querySelectorAll ，没有使用jQuery作者John Resig开发的DOM选择器引擎(Dom Selector Engine) Sizzle 。目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持 querySelectorAll 。

$(selector) //⇒ 选择节点 
$("<DOM nodes>") //⇒ 生成节点 
$("htmlString") //⇒ 生成 
JSLite(function($){ ... }) //⇒ 相当于ready

$("#box") //⇒ 返回节点数组  //⇒ [<div>…</div>]
$("<div></div>") //⇒ 生成div节点
//JSLite(func) 相当于ready
JSLite(function($){
    console.log("在节点加载完成之后执行")
})
//$(func) 相当于ready
$(function($){
    console.log("在节点加载完成之后执行")
})

插件编写

$.extend

通过源对象扩展目标对象的属性，扩展 JSLite 元素集来提供新的方法（通常用来制作插件）

$.extend({
    min: function(a, b) { return a < b ? a : b; },
    max: function(a, b) { return a > b ? a : b; }
});
$.min(2,3);    //⇒ 2
$.max(4,5);    //⇒ 5
// 在$上扩展了几个方法  
//调用方法  $.min(2,3);   //⇒ 2
//调用方法  $.max(4,5);   //⇒ 5

$.fn.extend

扩展 JSLite 元素集来提供新的方法（通常用来制作插件）。

$.fn.extend({   //增加两个插件方法。
    check: function() {
        return this.each(function() { this.checked = true; });
    },
    uncheck: function() {
        return this.each(function() { this.checked = false; });
    }
});
$("input[type=checkbox]").check();  //选中
$("input[type=radio]").uncheck();   //取消选中

$.error

当元素遇到错误（没有正确载入）时，发生 error 事件。

$.error("2222")
//⇒ 输出错误 Uncaught 2222

URL

$.getUrlParam

获取 url 参数的值。

//[URL] = http://blog.pc175.com/?param=2
$.getUrlParam("param") //⇒ 2

$.param

将表单元素数组或者对象序列化。如果shallow设置为true，嵌套对象不会被序列化，嵌套数组的值不会使用放括号在他们的key上。 
$.param(object, [shallow]) ⇒ string 
$.param(array) ⇒ string

$.param({
    foo: {one: 1,two: 2 }
})  //⇒ "foo[one]=1&foo[two]=2"

$.param({
    ids:["a1","b2","c3"],
    c:{g:23,e:[567]},
    a:3
},true) //⇒ ids=a1&&ids=b2&&ids=c3&&c=[object Object]&a=3

$.param({
    ids:["a1","b2","c3"],
    c:{g:23,e:[567]},
    a:3
}) //⇒ ids[]=a1&&ids[]=b2&&ids[]=c3&&c[g]=23&&c[e]=567&&a=3

$.param([1,2,3]) //⇒ 0=1&&1=2&&2=3

$.param({
    ids:[1,2,3] 
})  //=> "ids[]=1&ids[]=2&ids[]=3"

数组对象操作

$.intersect

数组交集

$.intersect([1,2,3,'asdkjf'],[2,3,6,'asdkjf'])
//⇒ [2, 3, "asdkjf"]

$.sibling

根据类型获取节点对象属性的集合 (node,type)。

$.sibling($("input"),"type")    //⇒ ["text", "button", "checkbox"]   
$.sibling($("input"),"tagName") //⇒ ["INPUT"]

$.inArray

搜索数组中指定值并返回它的索引（如果没有找到则返回-1)。

var arr = [ 4, "Pete", 8, "John" ];
$.inArray("John", arr);     //⇒ 3
$.inArray(4, arr);          //⇒ 0
$.inArray("David", arr);    //⇒ -1
$.inArray("Pete", arr, 2);  //⇒ -1

$.map

通过遍历集合中的节点对象，通过函数返回一个新的数组，null 或 undefined 将被过滤掉。

$.map({"w":1,"c":2,"j":3},function(item,index){
     return index
}); 
//⇒ ["w", "c", "j"]

$.each

通用例遍方法，可用于例遍对象和数组

$.each(['a', 'b', 'c'], function(index, item){
    console.log('item %d is: %s', index, item)
})

测试操作

$.isDocument

判断对象是否为 [document] 。

$.isDocument(document) //⇒ true

$.isFunction

判断对象是否为函数 [function] 。

$.isFunction(function(){}) //⇒ true

$.isObject

判断是否为 Object 。

$.isObject({})  //⇒ true

$.isPlainObject

$.isPlainObject(object) ⇒ boolean 
如果通过 "{}" 或者 "new Object" 创建的则返回true。判断对象是否是纯粹的对象。

$.isPlainObject({})         // => true
$.isPlainObject(new Object) // => true
$.isPlainObject(new Date)   // => false
$.isPlainObject(window)     // => false

$.isArray

判断是否为 [数组] 。

$.isArray([1,2,3])  //⇒ true

$.isJson

判断是否为 [数组] 。

$.isJson({})  //⇒ true

$.isContainsNode

parent是否包含node节点对象。

$.isContainsNode($("#box")[0],$(".boxss")[0]) //⇒ parent是否包含node节点对象

$.likeArray

判断对象是否为数组或者是字符。

$.likeArray([1,2,3])     //⇒ true
$.likeArray("222")  //⇒ true

$.type

获取JavaScript 对象的类型。可能的类型有： null undefined boolean number string function array date regexp object error 。

$.type(true)  //⇒ Boolean
$.type("div") //⇒ String

$.matches

如果当前节点能被指定的css选择器查找到，则返回true，否则返回false。$.matches(element, selector)。

$.matches($("#box")[0], "#box")
//⇒ true

对象访问

each

遍历一个 JSLite 集合对象，为每一个匹配元素执行一个函数。this关键字指向当前item(作为函数的第二个参数传递)。如果函数返回 false，遍历结束。

$("img").each(function(i){
    this.src = "test" + i + ".jpg";
});
//⇒ 找到所有的img对象给设置src  
//⇒ 返回 [ <img src="test0.jpg" />, <img src="test1.jpg" /> ]

map

遍历节点对象集合中的所有节点对象返回一个新的集合对象

$(".box").map(function(index,item){
    return $(this).text()
})
//⇒ 返回 ["12boxOne", "6", "11", "22123456", "7123123"]

forEach

类似 each，forEach遍历不会停止。

//遍历数组
[1,5,2,3].forEach(function(item,index,array){
    console.log(d)
})
//遍历节点
$("img").forEach(function(item,index,array){
    console.log(d)
})

get

当前对象集合中获取所有节点对象或单个节点对象。

$("div").get(0)
//⇒ 返回节点 <div id="box" class="boxOne box2 box3" ></div>

indexOf

在当前获取的节点数组中获取一个元素在这个数组的位置。

$("div").indexOf($("#box")[0])
//⇒ 2

length

对象中元素的个数。

$("img").length;
//⇒ 2

HTML代码/文本/值

text

取得所有匹配节点对象的文本内容。

$("#box").text()
//⇒ string 返回文本

html

获取或设置节点对象内容。

$("#box").html()
//⇒ string 返回包括HTML的文本

val

获取设置input的 value 。

$('input').val() //⇒ string 
$('input').val('test') //⇒ self 

$('#input').val(function(index,oldvalue){
    console.log(index,oldvalue)
    return '111' + oldvalue
}) //⇒ self

节点属性

pluck

获取对象集合中每一个元素的属性值。

$("#box").pluck("nodeName") //⇒ ["DIV"]
$("#box").pluck("nextElementSibling") //⇒ <div class="boxs">1234567890</div>
$("#box").pluck('children') //⇒ [HTMLCollection[4]]

attr

读取或设置dom的属性。

$(".button").attr({"class":"","style":"background:red"}) //⇒ self 设置红色清空class
$(".button").attr("class","name")  //⇒ self 设置class替换之前的
$(".button").attr("class")  //⇒ string 获取class属性值

removeAttr

移动当前对象集合中所有元素的指定属性。

$("#box").removeAttr("class") //⇒ self 移除class

CSS 类

css

获取或设置节点对象的style样式内容。

$("#box").css('color','yellow')     //⇒ self 返回Array 节点内容
$("#box").css({'color':'yellow'})   //⇒ self 返回Array 节点内容

hasClass

集合中是否有节点对象含有指定的class。

$("#box").hasClass('box2') //⇒ true

addClass

为每个匹配的节点对象添加指定的class类名。

$("#box").addClass('box23') //⇒ self 原有对象class上添加 box23

removeClass

清除节点对象中所有节点对象的指定class类名，不填写清空。

$("#box").removeClass('box23') //⇒ self 删除原有对象class中box23
$("div").removeClass() //⇒ self  所有匹配的对象class属性被删除

toggleClass

在匹配的节点对象集合中的每个节点对象上添加或删除一个或多个样式类。

$("#box").toggleClass('box1 box2') //⇒ self 原有对象class上添加 "box1 box2"或者删除"box1 box2"

效果

toggle

显示或隐藏匹配节点对象。

$("#box").toggle() //⇒ self 原有对象如果隐藏就显示，如果显示就隐藏。

show

显示匹配节点对象。

$("#box").show() //⇒ self 显示匹配节点对象

hide

隐藏匹配节点对象。

$("#box").hide() //⇒ self 隐藏匹配的对象

尺寸位置

offset

获得当前元素相对于document的位置。返回一个对象含有：left|top|width|height

$("#box").offset()  //⇒Object {left: 8, top: 8, width: 1260, height: 0}
$("#box").offset().left  //⇒  8

width

width() ⇒ number
width(value) ⇒ self
width(function(index, oldWidth){ ... }) ⇒ self
获取对象象集合中第一个元素的宽，或设置对象集合所有元素的宽。

$('#box').width()   // => 342
$(window).width()   // => 456 (可视区域宽度)
$(document).width() // => dsf

height

height() ⇒ number
height(value) ⇒ self
height(function(index, oldWidth){ ... }) ⇒ self
获取对象象集合中第一个元素的高，或设置对象集合所有元素的高。

$('#box').height()   // => 342
$(window).height()   // => 456 (可视区域高度)
$(document).height() // => dsf

过滤

filter

筛选出与指定表达式匹配的元素集合。filter(selector)。

$("div").filter("#box") //⇒ self 在所有的div对象中选择器为 #box 的过滤出来。

not

not(selector) ⇒ collection 
not(collection) ⇒ collection 
not(function(index){ ... }) ⇒ collection 
筛选出与 非 指定表达式匹配的元素集合。它的作用刚好与 filter 相反，返回。

$("#select option").not(function(idx){
    console.log(this.selected)
    return this.selected
})
//⇒ [<option value="3">哈哈3</option>]
$('input').not('#input') //⇒ 返回除去 匹配到的#input

$('input').not(function(){
    console.log(this.type)
    return this.type=='text'
})

删除节点

empty

所有匹配节点对象集合中移除所有的dom子节点，不包括自己，清空内容。

$("#box").empty()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>

remove

删除所有匹配节点对象 [自己] 及所有 [自己] 里面的内容。

$("#box").remove()
//⇒ self <div id="box" class="boxOne box2 box3" ></div>

查找节点

find

后代节点的集合(可以带上滤选择器)。

$("#box").find()        //⇒后代节点的集合
$("#box").find(".box")  //⇒后代节点的集合，返回匹配'.box' 的集合

children

获得每个匹配元素集合元素的直接子元素(可以带上滤选择器)。

$("#box").children()

parent

对象集合中每个元素的直接父元素。

$("#box").parent()

parents

获取对象集合每个元素所有的祖先元素（不包含根元素）。

$("#box").parents()

获取对象集合每个元素的所有上一个对象(可以带上滤选择器)。

$("#box").prev("div")

获取对象集合每个元素的所有下一个对象(可以带上滤选择器)。

$("#box").next("div")

prevAll

获取对此对象 [上] 所有兄弟对象(可以带上滤选择器)。

$("#box").prevAll("div")

nextAll

获取对此对象 [下] 所有兄弟对象(可以带上滤选择器)。

$("#box").nextAll("div")

siblings

获取对此对象 [其它] 所有兄弟对象(可以带上滤选择器)。

$("#box").siblings()

插入节点方法

before

插入到标签开始前（兄弟节点的上面）。

$("#box").before("dd") //⇒ self

prepend

插入到标签开始标记之后（里面的第一个）。

$("#box").prepend("dd") //⇒ self

prependTo

prependTo(selector) ⇒ self 
将生成的内容插入到匹配的节点标签开始标记之后。这有点像prepend，但是是相反的方式。

$('<div>test</div>').prependTo('#box')

append

插入到标签结束标记前（里面的结尾）。

$("#box").append("dd") //⇒ self

appendTo

appendTo(selector) ⇒ self 
将生成的内容插入到匹配的元素标签结束标记前（里面的最后）。这个有点像append，但是插入的目标与其相反。

$('<div>test</div>').appendTo('#box')

after

插入到标签结束标记后。（兄弟节点的下面）

$("#box").after("dd") //⇒ self

insertAfter

insertAfter(selector) ⇒ self 
插入的对象集合中的元素到指定的每个元素后面的dom中。这个有点像 after，但是使用方式相反。

$('<p>test</p>').insertAfter('#box') //⇒ self
$('#input').insertAfter('#box')        //⇒ self  $('#input')

before

插入到标签开始前。

$("#box").before($('input')) //⇒ self

insertBefore

insertBefore(selector) ⇒ self 
将生成的内容插入 selector 匹配的节点标签开始前。这个有点像 before，但是使用方式相反。

$('<p>test</p>').insertBefore('#box')

事件处理

blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error 对象上直接添加事件。

$("#box").click(function(){
    console.log("绑定点击事件")
});

ready

ready(function($){ ... }) ⇒ self 
添加一个事件侦听器，当页面 dom 加载完毕 DOMContentLoaded 事件触发时触发。加载完毕执行，建议使用 $(func) 来代替这种用法。

$(document).ready(function(){
    alert("当页面dom加载完毕执行");
    console.log($$("#box"));
})

$(func)

加载完毕执行。与 ready 方法相同

//或者使用下面方法代替ready
$(function(){
    console.log("当页面dom加载完毕执行");
})

bind

为每个匹配元素的特定事件绑定事件处理函数。可以绑定这些事件 blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error。

$("#box").bind("click", function(){
    console.log("绑定点击事件")
});

unbind

解除绑定事件，从每一个匹配的节点对象中删除绑定的事件。

var f1=function(){alert('41');}
$("#box").bind("click",f1)   //⇒ 绑定事件
$("#box").unbind("click",f1) //⇒ 解除绑定事件

$("#box").bind("click",function(){alert('41');})   //⇒ 绑定事件
$("#box").unbind("click",function(){alert('41');}) //⇒ 解除绑定事件

on

$("#box").on("click", function(){
    console.log("绑定点击事件")
});

$("#box").on('click mouseup',function(evn,a){
    console.log('2'+a)
}) //⇒ self  绑定两个事件

off

解除绑定事件，从每一个匹配的节点对象中删除绑定的事件。

var f1=function(){alert('41');}
$("#box").on("click",f1)   //⇒ 绑定事件
$("#box").off("click",f1) //⇒ 解除绑定事件

$("#box").on("click",function(){alert('41');})   //⇒ 绑定事件
$("#box").off("click",function(){alert('41');}) //⇒ 解除绑定事件

trigger

trigger(event, [args]) ⇒ self 
匹配到的节点集合的元素上触发指定的事件。如果给定args参数，它会作为参数传递给事件函数。

$("#box").on('abc:click',function(evn,a,c){
    console.log('2'+a+c)
}) //⇒ self  绑定一个事件
$("#box").trigger('abc:click',['wwww']) //⇒ self 触发并传一个参数进去

Ajax

执行Ajax请求。

type：请求方法 ("GET", "POST") 
data：(默认：none) 发送到服务器的数据；如果是get请求，它会自动被作为参数拼接到url上。非String对象 
dataType：(json, jsonp, xml, html, or text) 
contentType：一个额外的"{键:值}"对映射到请求一起发送 
headers：(默认：{})：一个额外的"{键:值}"对映射到请求一起发送 
url：发送请求的地址 
async：此参数不传默认为true(同步请求)，false异步请求 
success(cdata)：请求成功之后调用。传入返回后的数据，以及包含成功代码的字符串。 
error(status, statusText)：请求出错时调用。 (超时，解析错误，或者状态码不在HTTP 2xx)。

ajax get

$.get('http://127.0.0.1/api.php?wcj=123', 
function(cdata) {
    console.log('ok', cdata)
})

ajax GET请求

$.ajax('GET', 'http://127.0.0.1/api.php', {"wcj":"123","ok":'11'},
function(cdata) {
    console.log('ok', cdata)
})

$.ajax('GET', 'http://127.0.0.1/api.php?wcj=abc', 
function(cdata) {
    console.log('ok', cdata)
})

$.ajax({
    type:'GET',
    dataType:'json',
    data:{'nike':'a'},
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    }
})

ajax post

$.post('http://127.0.0.1/api.php', {'nike':0},
function(cdata) {
    console.log('ok', cdata)
})

ajax POST请求

var data = { 'key': 'key', 'from': 'from'}
$.ajax('POST', 'http://127.0.0.1/api.php', data,
function(data) {
    console.log('ok', data)
},'json')

$.ajax({
    type:'POST',
    dataType:'json',
    data:{"nike":"123","kacper":{"go":34,"to":100}},
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    }
})
$.ajax({
    type:'POST',
    dataType:'json',
    data:JSON.stringify('{"nike":"123","kacper":{"go":34,"to":100}}'),
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    }
})

$.ajax({
    type:'POST',
    dataType:'json',
    data:JSON.stringify({'nike':'a'}),
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    }
})

$.ajax({
    type:'POST',
    data:{'nike':'a'},
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    }
})

$.ajax({
    type:'POST',
    dataType:'json',
    data:{'nike':'a'},
    url:'http://127.0.0.1/api.php',
    success:function(data){
       console.log('success:',data)
    },
    error:function(d){
       console.log('error:',d)
    },
    headers: {
        "Access-Control-Allow-Origin":"http://pc175.com",
        "Access-Control-Allow-Headers":"X-Requested-With"
    },
    contentType: 'application/json'
})

Form

表单提交的一些方法

serializeArray

将用作提交的表单元素的值组合成拥有name和value的键值对组成的数组。不能使用的表单元素，buttons，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。

$('form').serializeArray();
//=> [{"name":"golang","value":"456"},{"name":"name","value":""},{"name":"password","value":""},{"name":"sel","value":[]},{"name":"kaikai","value":""},{"name":"w","value":""},{"name":"w","value":""}]

serialize

将表单元素数组或者对象序列化。

$('form').serialize();
//=> golang=456&name=&password=&sel=&kaikai=&w=asd&w2=asdf

节点

box

function

2 条回复

pertersonvv

2014-12-29 20:11:04 +08:00

我想问的是,楼主写文档的时候,头大么?里面这么多标签,赶脚如果用Sublime会很头大,楼主用的啥编辑器写文档的?

jaywcjlove

2014-12-29 20:39:50 +08:00

Sublime 安装了很多插件，方便快速定位标签，而且还有说明文档的哦。

JSLite 一起弄一个我们自己的前端库

JSLite

选择器$

插件编写

$.extend

$.fn.extend

$.error

URL

$.getUrlParam

$.param

数组对象操作

$.intersect

$.sibling

$.inArray

$.map

$.each

测试操作

$.isDocument

$.isFunction

$.isObject

$.isPlainObject

$.isArray

$.isJson

$.isContainsNode

$.likeArray

$.type

$.matches

对象访问

each

map

forEach

get

indexOf

length

HTML代码/文本/值

text

html

val

节点属性

pluck

attr

removeAttr

CSS 类

css

hasClass

addClass

removeClass

toggleClass

效果

toggle

show

hide

尺寸位置

offset

width

height

过滤

filter

not

删除节点

empty

remove

查找节点

find

children

parent

parents

prev

next

prevAll

nextAll

siblings

插入节点方法

before

prepend

prependTo

append

appendTo

after

insertAfter