初学JQuery相关知识点

【简单的JQuery】

注册事件的函数。

$(document).ready(function(){})

【JQuery提供的函数】

$.map(array,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的数组。

var arr = [3,5,9];

var arr2 = $.map(arr,function(item){return item*2});

$.map不能处理Dictionary风格的数组。

$.each(array,fn) 对数组array每个元素调用fn函数进行处理，没有返回值。

var arr = {"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};

$.each(arr,function(key,value){alert(key+"="+value);});

如果是普通风格的数组，则key的值是序号。

还可以省略function的参数，这时候用this可以得到遍历的当前元素：

var arr = [3,6,9];

$.each(arr,function(){alert(this);});

【JQurey选择器】

JQurey选择器用于查找满足条件的元素，比如可以用$("#控件ID")来根据控件id获得控件的JQuery对象。

$("#div1")

$("TagName")来获取所有指定标签名的JQuery对象。

$(".test") CSS选择器，同时选择拥有样式的多个元素。

$("div li") 多条件选择器，获取div下的所有li元素。

【JQurey的迭代】

if($("#btn1").length<=0){alert("id为btn1的元素不存在！");}

【节点遍历】

next()方法用于获取节点之后的第一个同辈元素。

$(".menuitem").next("div")

nextAll()方法用于获取节点之后的所有同辈元素。

$(".menuitem").nextAll("div")

siblings()方法用于获取所有同辈元素。

$(".menuitem").siblings("li")

【链式编程】

【基本过滤选择器】

:first 选取第一个元素。

$("div:first")选取第一个<div>

:last 选取最后一个元素。

$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素。

$("input:not(.myClass)")选取不是myClass的<input>

:even 选取索引奇数的元素。

$("input:even")

:odd 选取索引偶数的元素。

$("input:odd")

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 等于、大于、小于索引序列号的元素。

$("input:li(3):gt(1)")

【过滤器】

属性过滤选择器：

$("div[id]")选择有id属性的<div>

$("div[title=test]")选取title属性为"test"的<div>

$("div[title!=test]")选取title属性不为"text"的<div>

表单对象选择器：

$("#form1:enabled")选取id为form1的表单内有所启用的元素。

$("#form1:disabled")选取id为form1的表单内有所禁用的元素。

$("input:checked")选取所有选中的元素（Radio、CheckBox）。

$("select:selected")选取所有选中的选项元素（下拉列表）。

【表单选择器】

$(":input")选取所有<input>、<textarea>、<select>和<button>元素。

$(":text")选取所有单行文本框

$(":password")选取所有密码框。

同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

【JQuery的Dom操作】

1、使用html()方法读取或者设置元素的innerHTML

alert($("a:first").html());

$("a:first").html("hello");

2、使用text()方法读取或设置元素的innerText

alert($("a:first").text());

$("a:first").text("hello");

3、使用attr()方法读取或设置元素的属性

alert($("a:first").attr("href"));

$("a:first").attr("href","http://cnblogs.com");

4、使用removeAttr删除属性。

【动态创建Dom节点】

使用$(html字符串)来创建Dom节点，并且返回一个JQuery对象，

然后调用append等方法将新创建的节点添加到Dom中。

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

$()创建的就是一个JQuery对象，可以完全进行操作。

var link = $("<a href='http://www.baidu.com'>百度</a>");

link.text("百度官方");

$("div:first").append(link);

append() 方法用来在元素的末尾追加元素。

prepend() 方法用来在元素的开始添加元素。

after() 方法用来在元素之后添加元素。（添加兄弟）

before() 方法用来在元素之前添加元素。（添加兄弟）

【删除节点】

remove() 删除选择的节点。

$("nl li.testitem").remove(); 删除ul下li中有testitem样式的元素。

remove()方法的返回值是被删除的节点对象。

var lis = $("#ulSite li").remove();

$("#ulSite2").append(lis);

empty() 是将节点清空。

【节点操作】

替换节点：

$("br").replaceWith("<hr/>"); 将<br/>替换为<hr/>

包裹节点：（wrap方法用来将所有元素逐个用指定标签包裹。）

$("b").wrap("<font color='red'></font>")将所有粗体字红色显示

【样式操作】

获取样式 attr("class")

设置样式 attr("class","myclass")

追加样式 addClass("myclass")

移除样式 removeClass("myclass")

切换样式 toggleClass("myclass")

判断样式 hasClass("myclass")

【RadioButton操作】

获取RadioButton的选中值。

$("input[name=gender]:checked").val();

设置RadioButton的选中值。

$("input[name=gender]").val(["女"]);

注意val中参数的[]不能省略。

【事件】

JQuery中的事件绑定：

$("#btn").bind("click",function(){});

$("#btn").click(function(){}); 简写版

合成事件hover,hover(enterfn,leavefn)

事件冒泡：与javaScript一样。

调用事件对象的stopPropagation()方法终止冒泡。

$("tr").click(function(e){alert("tr被点击");e.stopPropagation();});

阻止默认行为：有的元素有默认行为比如超链接。

$("a").click(function(e){alert("禁止超链接点击",e.preventDefault();)});

属性：pageX、pageY、target获得触发事件的元素、which如果是鼠标事件获得按键（1左键，2中键，3右键）。

altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。

keyCode、charCode属性发生时间时的keyCode、charCode。

移除事件绑定：bind()方法即可移除元素上所有绑定的事件。

bind("click")则只移除click事件的绑定。

一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定。

【动画】

show()、hide()方法会显示、隐藏元素。用toggle()方法在显示和隐藏之间切换。

$(":button[value=show]").click(function(){$("div").show();});

$(":button[value=hide]").click(function(){$("div").hide();});

如果show、hide方法不带参数则是立即显示、立即隐藏，如果带参数则会用指定时间进行动态显示、隐藏。

参数单位：毫秒，也可以使用三个内置的速度：(fast)、(normal)、(slow) (200毫秒)(400毫秒)(600毫秒)。

【JQery插件】

jquery.cookie使用方法：

1、添加jquery.cookie.js 引用它。

2、设置值，$.cookie('名字','值')。cookie中保存的值都是文本。

3、读取值，var v=$.cookie('名字')

$.cookie('名字','值',{expirds:7,domain:'baidu.com',secure:true});

*JQuery官方的UI控件 JQueryUI

qún：118041544