JQ快速入门

引入库

<script src="//code.jquery.com/jquery-1.11.1.js" type="text/javascript"></·script>

变量名

JQ定义了一个别名变量$,等同于($====JQuery)

准备就绪是加载代码ready()

ready()函数作用相当于window.onload,它用于当前文档加载准备就绪后执行对应的函数

$(document).ready(function() {
    //执行代码
});

//简写
$(function() {
    //执行代码
});

选择器选取元素

$("#uid") //选取id为uid的元素
$("p") //选取所有P元素
$(".test") //选取所有带css类名的test元素
$("[name=books]") //选取所有带name属性为books的元素

jq选择器也支持多个选择器任意组合使用

// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素
$("#uid span"); // 选择id为"uid"的元素的所有后代span元素
$("p > span"); // 选择p元素的所有子代span元素
$("div + p"); // 选择div元素后面紧邻的同辈p元素
$("div p span"); // 选择div元素的所有后代p元素的后代span元素


// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素
$("p#uid"); // 选择id属性为"uid"的p元素
$("div.foo"); // 选择所有带有CSS类名"foo"的div元素
$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素
$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素

jq特有的选择器

// jQuery特有的选择器，当然也可以和其他选择器任意组合使用
$(":checkbox"); // 选取所有的checkbox元素
$(":text"); // 选取所有type为text的input元素
$(":password"); // 选取所有type为password的input元素
$(":checked"); // 选取所有选中的radio、checkbox、option元素
$(":selected"); // 选取所有选中的option元素
$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)

JQ对象

var uid = document.getElementById("uid");
var ps = document.getElementsByTagName("p");
var unames = document.getElementsByName("uname");
var domsArray = [ document.getElementById("uid1"), document.getElementById("uid2") ];
// 将以上DOM元素直接转换为jQuery对象
$( uid ); 
$( ps ); 
$( unames );
$( domsArray );
$( ); // 不传入任何参数，返回空的jQuery对象(不匹配任何元素)

// 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作，或者将它们插入到文档的指定位置。
$('<span></span>'); // 包含一个临时的span元素
$('<span/>'); // 包含一个临时的span元素，和上一行代码的作用相同
$('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // 包含一个临时的div元素，其内嵌一个子节点p元素

元素筛选方法

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
$("ul li").first(); // 选取ul li中匹配的第一个元素
$("ul li").last(); // 选取ul li中匹配的最后一个元素
$("ul li").slice(1, 4); // 选取第2 ~ 4个元素
$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素
$("div").find("p"); // 选取所有div元素的所有后代p元素
$("div").children(); // 选取所有div元素的所有子代元素
$("div").children("p"); // 选取所有div元素的所有子代p元素
$("span").parent(); // 选取所有span元素的父元素
$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素
$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素
$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素

JQ读写操作

// 返回一个匹配id为"username"的元素的jQuery对象
var  uid = $("#username");
// 没有传入value参数，返回第一个匹配元素的value属性值
var value = uid.val();
// 传入了value参数，设置所有匹配元素的value值为"CodePlayer"
uid.val("CodePlayer");

// 返回匹配所有包含CSS类名"foo"的div元素的jQuery对象
var div = $("div.foo");
// 没有传入value参数，返回第一个匹配元素的value元素
var fontSize = div.css("font-size");
// 传入了value参数，设置所有匹配元素的font-size样式为"14px"
div.css("font-size", "14px");

获取第一个和设置全部

var $lis = $("ul li"); // 匹配ul元素的所有后代li元素
var className = $lis.attr("class"); // 只获取第一个匹配的li元素的class属性
$lis.attr("class", "codeplayer"); // 将所有匹配的li元素的class属性设为"codeplayer"

链式编程

// jQuery的链式编程风格
$("div").find("ul").addClass("menu").children().css("margin", 0).hide();

// 以下是上述代码的分解描述
$("div") // 返回一个匹配所有div元素的jQuery对象
.find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象
.addClass("menu") // 为这些ul元素添加CSS类名"menu"，并返回当前对象本身
.children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象
.css("margin", 0) // 为这些子代元素设置css样式"margin: 0"，并返回当前对象本身
.hide(); // 隐藏这些子代元素，并返回当前对象本身

静默容错

// 没有标签为abc的DOM元素，$("abc")是一个空的jQuery对象，调用其find()方法将返回一个新的jQuery空对象
var a = $("abc").find("p");

// 如果不存在id为notFound的元素，$("#notFound")是一个空的jQuery对象，获取其id属性，将返回undefined。
var b = $("#notFound").attr("id");

// 如果不存在id为notFound的元素，$("#notFound")是一个空的jQuery对象，获取其高度值，将返回null。
var c = $("#notFound").height();

// 如果不存在id为uname的元素，$("#uname")是一个空的jQuery对象，设置其value值，将忽略该设置操作，并返回该空对象本身
var d = $("#uname").val("xxxxx");

DOM操作

属性操作

// selector 表示具体的选择器

$("selector").val(); // 获取第一个匹配元素的value值(一般用于表单控件)
$("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"

$("selector").html(); // 获取第一个匹配元素的innerHTML值
$("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"

$("selector").text(); // 获取第一个匹配元素的innerText值(jQuery已进行兼容处理)
$("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"

$("selector").attr("class"); // 获取第一个匹配元素class属性
$("selector").attr("class", "code"); // 设置所有匹配元素的class属性为"code"
$("selector").removeAttr("class"); // 移除所有匹配元素的class属性

$("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
$("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
$("selector").removeProp("className"); // 移除所有匹配元素的className属性

文档处理

// 以下$A均表示当前jQuery对象，$B可以是选择器字符串、html字符串、DOM元素、jQuery对象

$A.before( $B ); // 在$A之前插入$B
$A.after( $B ); // 在$A之后插入$B

$A.insertBefore( $B ); // 将$A插入到$B之前的位置
$A.insertAfter( $B ); // 将$A插入到$B之后的位置

$A.append( $B ); // 在$A内部的末尾位置追加$B
$A.appendTo( $B ); // 将$A追加到$B内部的末尾位置

$A.prepend( $B ); // 在$A内部的开头位置追加$B
$A.prependTo( $B ); // 将$A追加到$B内部的开头位置

$A.replaceAll( $B ); // 用$A替换$B
$A.replaceWith( $B ); // 用$B替换$A

$A.wrap( $B ); // 在$A的外侧包裹$B
$A.unwrap( ); // 只移除$A的父元素的标签
$A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来
$A.wrapInner( $B ); // 在$A的内侧包裹$B

$A.empty(); // 清空$A的所有内容
$A.remove(); // 删除$A及其绑定的事件、附加数据等
$A.detach(); // 删除$A，但保留其绑定的事件、附加数据等

$A.clone(); // 克隆一个$A

css操作

$("selector").css("margin-left"); // 获取第一个匹配元素的margin-left的属性值
$("selector").css("marginLeft"); // 与上一行代码作用相同，css()支持这两种写法

$("selector").css("marginLeft", 15); // 设置所有匹配元素的margin-left为15px(数字的默认单位均为px)
$("selector").css( { marginLeft: 15, color: "red", fontSize: "14px"} ); // 一次性设置所有匹配元素的多个样式属性

$("selector").css( "marginLeft", ""); // 设为空字符串，则表示删除该样式属性

动画操作

$("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果
$("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果
$("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果
$("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果

$("selector").hide(); // 隐藏显示的元素，其用法与show()相同
$("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似

/* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同，
 * 用法也类似，只是带有不同的动画效果
 */

$("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果
$("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果
$("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果

$("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果
$("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果
$("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果

// 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果
// 动画的执行时间为 1000 毫秒
$("selector").animate( { width: "200px", height: "100px" }, 1000 );

事件处理

function handler( event ){
	// 事件处理函数的执行代码
	// 参数event表示当前事件对象，该对象已经过jQuery封装标准化处理
	// 函数内的this表示触发事件的当前DOM元素(不是jQuery对象)


        // 如果函数的返回值为false，可以阻止事件冒泡和元素的默认事件行为。
        // 例如：a标签的click事件的默认跳转行为；form标签的submit事件的默认表单提交行为
}

// 以下方法均可为所有匹配元素的click事件绑定处理函数
$("selector").click( handler );
$("selector").bind( "click", handler );
$(document).delegate( "selector", "click", handler );
$("selector").on( "click", handler );
$("selector").one( "click", handler ); // 用于绑定一次性事件，第一次触发后就自动解除绑定

与click()方法类似，jQuery还提供绝大多数事件的绑定方法，例如:dblclick()、focus()、change()、hover()、submit()(仅限于

表单元素)、mousedown()、mouseover()、keydown()、keypress()等。 而bind()、delegate()、on()等方法，是通过传入指定事件名称的字符串来区分事件类型的，甚至你还可以为自定义的事件绑定处理函数。下面以bind()方法举例，其它方法也与此类似：

$("selector").bind( "dblclick", handler );
$("selector").bind( "keyup", handler );
$("selector").bind( "mouseout", handler );

// bind()等事件方法均支持为多个事件(以空格隔开)绑定同一个处理函数
$("selector").bind( "mouseenter mouseleve", function(event){
	if(event.type == "mouseenter"){
		// mouseenter事件的执行代码
	}else if(event.type == "mouseleve"){
		// mouseleve事件的执行代码		
	}
} );

// 事件名称可以带有命名空间
$("selector").bind( "mouseout.foo", handler );

手动触发事件

// 触发所有匹配元素上的click事件
$("selector").trigger("click");

// 触发所有匹配元素上的change事件
$("selector").trigger("change");

// 触发所有匹配元素上绑定在foo命名空间下的mouseout事件的处理函数
$("selector").trigger("mouseout.foo");

接触绑定

//主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one()等方法绑定的处理函数
$("selector").unbind("click");
//主要用于解除通过live()方法绑定的处理函数
$("selector").die("click");
//主要用于解除通过delegate()方法绑定的处理函数
$(document).undelegate("selector", "click");
//主要用于解除通过on()方法绑定的处理函数
$("selector").off("click");

/* 实际上，多数时候，它们是可以混用的 */

工具方法

// 去除字符串两端的空白字符
var str1 = $.trim( "  abc d  " ); // "abc d"
var str2 = $.trim( null ); // ""
// 判断是否是数组
var isArray1 = $.isArray( [] ); // true
var isArray2 = $.isArray( new Array() ); // true
// 判断是否是函数
var result1 = $.isFunction( function(){} ); // true
var result2 = $.isFunction( new Function() ); // true
// 检索数组中是否存在指定值，并返回其第一次出现的索引
var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)
// 将JSON字符串转为对应的JS对象
var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );

遍历方法

// $.each()用于遍历数组元素或对象属性
var array = [ 12, "jQuery", true ];
$.each( array, function(i, value){
	// i 表示当前迭代元素的索引或对象的属性名称
	// value 表示当前迭代的数组元素或对象的属性值
	// this 与  value 相同
	alert( i + " = " + value );

	// 如果函数return false，将终止遍历
});

// $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回
var obj = { name: "jQuery", age: 20, isAdmin: true };
var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同
	// value 表示当前迭代的数组元素或对象的属性值
	// i 表示当前迭代元素的索引或对象的属性名称
	// this 指向全局对象(window)

	if( typeof value === "number"){
		return null; // 如果函数返回null或undefined，则不会添加到结果数组中
	}else{
		return value;
	}
} );
// resultArray 为 [ "jQuery", true ]


//$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素
var array2 = [ "Hello", 12, "jQuery", true ];
var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同
	// value 表示当前迭代的数组元素
	// i 表示当前迭代元素的索引
	// this 指向全局对象(window)

	return i % 2 == 0; // 保留返回值不为false的元素
} );
// resultArray2 为 [ "Hello", "jQuery" ];

###each()和map()遍历

// 遍历所有的p元素，并执行对应的函数
$("p").each(function(i, element){
	// i 表示当前迭代元素的索引
	// element 表示当前迭代的DOM元素
	// this === element		
});


// 返回包含所有匹配元素value值的数组
$(":checkbox:checked").map(function(i, element){
	// i 表示当前迭代元素的索引
	// element 表示当前迭代的DOM元素
	// this === element
	return this.value;		
});