初学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