jQuery的常用方法

jquery对象转换

在javascript中，DOM对象不能使用jquery的方法，需要转换才行。

DOM 对象转成 jQuery 对象

需要使用 $() 将 DOM 对象包装起来

	var div1 = document.getElementsByID("div1");

	$("#div1")

jQuery 对象转 DOM 对象

只需要调用[index]和get(index)方法即可将jq对象转换为DOM对象。DOM对象只需调用jq的$()方法即可包装为jq对象：

	var span = $('#div1')[0];

	var span = $('span').get(0);

加载方式

原生加载方式

	window.onload = function() {
    // Load加载完成(DOM + 图片)执行
}

$().ready( )

	$().ready(function() {
   		// DOMContentLoaded加载完成执行
	})

	$(document).ready(function(){
    	// 等同于 $().ready()
	})

	$(function(){
    	// 等同于 $().ready()
	});

闭包（推荐）

	(function($){
	    // 避免全局变量污染
	})(jQuery)

常用方法

1.获取对象内容

文本内容

	$("#id").text();      // 取值
	$(".class").text(""); // 赋值

HTML内容(含标签元素)

	$("elem").html();   // 取值
	$("elem").html(""); // 赋值

属性 value 值

	$("elem").val();   // 取值
	$("elem").val(""); // 赋值

2.属性设置

	// 获取 img 标签 src 属性值
	$('img').attr('src') 
	
	// 设置 img 标签 alt 属性值
	$('img').attr('alt', 'this is image') 

3.显示隐藏

显示

	$("elem").show();
	$("elem").slideDown(); // 滑入
	$("elem").fadeIn();    // 淡入

隐藏

	$("elem").hide();
	$("elem").slideUp(); // 滑出
	$("elem").fadeOut(); // 淡出

切换

	$("elem").toggle();
	$("elem").slideToggle();
	$("elem").fadeToggle();

4. 事件绑定/解除

on( ) 可以做事件委托，委托给父元素完成

	$("elem").on('click', function() {
	    // 绑定事件
	});
	
	$("ul").on('click', 'li', function() {
	    // 利用事件委托给动态元素绑定事件
	});

bind( ) 绑定多个不同事件类型，但不能为动态元素绑定事件

		$("elem").bind('mouseover mouseout', function() {
	    // 绑定多个事件
	})
	
	$("elem").bind({
	    click: function() {
	        // 单击事件
	    },
	    mouseover: function() {
	        // 鼠标移入事件
	    },
	    mouseout: function() {
	        // 鼠标移出事件
	    }   
	})

one( ) 绑定一个一次性的事件处理函数

	$("elem").one(type,[data],fn)

off( ) 移除一个或多个事件

	$("elem").off(events,[selector],[fn])

5.样式操作

添加样式 addClass()

	$("elem").addClass(class | function(index, class));
	
	$("elem").addClass("red blue")
	$("elem").addClass("red", function() {
	    return 'col-md-' + $(this).index();
	})

移除样式 removeClass()

	$("elem").removeClass(class | function(index, class))

切换样式 toggleClass()

	$("elem").toggleClass(class | function(index, class, switch)[, switch])

检测是否含有样式 hasClass()

	$("elem").hasClass(class)

设置 css 属性 css()

	$("elem").css(name,value);
	
	// 获取属性值
	$("elem").css("color");
	
	// 设置属性
	$("elem").css("color", "blue");
	
	// 设置多个属性
	$("elem").css({
	    "color": "blue",
	    "backgroound": "white"
	});

6.查找和遍历

将一组元素转换成其他数组（不论是否是元素数组）

	$("elem").map(callback);

匹配查找元素 find() 、 filter()

	// 在子元素中匹配，返回的是子元素
	$("elem").find(expr)
	$("p").find("span") === $("p span")
	
	// 操作当前元素集，删除不匹配的元素，得到一个新的集合
	$("elem").filter()
	// 返回破坏性修改之前的选择 end()

获取第N个元素

	//  index：从 0 开始计算
	// -index：从最后一个元素开始倒数，从 1 开始计算
	$("elem").eq(index) 

获取子元素

	$("elem").children();

获取祖先元素

	$("elem").parent()

获取父元素

	$("elem").parents()

从匹配元素集合中删除元素

	$("elem").not()

将元素添加到匹配元素的集合中

	$("elem").add()

将匹配元素集合缩减为指定范围的子集

	$("elem").slice()

获得匹配元素集合中所有元素的同辈元素

	$("elem").siblings()

获取当前元素之前的一个 prev() / 所有 prevAll() 元素

		$("elem").prev()
	$("elem").prevAll()

获取当前元素之后的一个 next() / 所有 nextAll() 元素

		$("elem").next()
	$("elem").nextAll()

7. 节点操作

把所有匹配的元素用其它元素包裹起来

		// 将 span 标签包含到 a 标签中
	$("span").wrap("<a class='wrap'></a>");

	<a class='wrap'><span></span></a>

移除元素

表达式	自身是否被移除	绑定的事件及数据是否被移除
$(“elem”).empty()	√	×
$(“elem”).remove()	√	√ (无参数时)，有参数时要根据参数所涉及的范围
$(“elem”).detach()	×	√ (无参数时)，有参数时要根据参数所涉及的范围

Joker：Who can stop me is me ！（只有我才能使自己停下来！）