JQuery入门总结（一）

1.学习网站推荐
博客园：http://kb.cnblogs.com/page/67967/
入门指南-翻译+实例：http://www.k99k.com/jQuery_getting_started.html
http://www.phpfans.net/manu/jQuery/


英文部分：http://jquery.com/
http://api.jquery.com/
http://visualjquery.com/


2.JQuery:
一个基于js的轻量级框架。

3.UI:
即UserInterface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。


4.用Jquery优势：
用jQuery不需要在每个标签上写onclick事件,拥有一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像使用CSS追求的一样.
轻量级的JS库，兼容CSS3；
链式编程；
隐式迭代；
屏蔽浏览器差异，跨浏览器兼容性好；
插件丰富、开源、免费。

5.用法
$(document).ready(function() {
$("a").click(function() {
alert("Hello world!");
});
});加载所有a标签的点击事件。

选择器写法：
基本选择器：通过元素id,class和tagName来查找dom元素
1.$("#id") : id选择器,document.getElementById("id");
2.$("div") :元素选择器 document.getElementByTagName("div");
3.$(".myClass") : 类选择器,返回所有class="myClass"的元素
4.$("*") : 返回所有元素,多用于结合上下文搜索
5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素
层次选择器：
如果想通过DOM元素之间的层次关系来获取特定的元素，如后代元素,子元素,相邻元素，兄弟元素等，则需要使用层次选择器
1.ancestor descendant
$("form input") : 获得后代所有子元素；
2.parent > child
$("form > input") : 只获得直属子元素；
3.prev + next
$("lable + input ") : 匹配所有紧接在prev后的next元素
4.prev ~ siblins
$("form ~ input") : 匹配prev元素之后的所有siblings元素 注意:在匹配之后的元素,不包含该元素在内，并且siblings匹配的是和prev同辈的元 素，其后辈元素不被匹配。


ready方法，是当dom树 完全生成后才执行。

var $divs=$("div");获得所有div对象，并存储于divs中；
var div2=$divs.get(1);获得div标签中索引数为1的div对象；


filter()以过滤表达式来减少不符合的被选择项；
not()则用来取消所有符合过滤表达式的被选择项;
如果获取的是JQuery对象，要在变量前加上$:
eg：var $va=$(#div3);
…………
将一个dom元素对象，转成JQuery对象
eg: var div1=document.getElementById("div1");
var $div1=$(div1);
将JQuery对象，转换成dom元素对象
eg: var div2=$div1.get(0);

val()方法 获取对象的值；
eg: var $txtName=$("#txtName");
alert($txtName.val());

attr() 设置属性 或者读取属性
eg：$divs.attr("title","22222");
$divs.attr("title");
removeAttr()去除属性
next()方法用于获取节点之后的挨着的第一个兄弟元素，$(".menuitem").next("div")、nextAll()方法用于获取节点之后的所有兄弟元素，$(".menuitem").nextAll("div")
prev()、prevAll()兄弟中之前的元素。 siblings()方法用于获取所有同辈元素(前后都拿到)，$(".menuitem").siblings("li")。siblings、next等所有能传递选择器的地方能 够使用的语法都和$()语法一样。
案例：选中的p变色 $(this).css();$(this).siblings().css()
案例：评分控件。prevAll,this,nextAll
重申问题，不要$().click=function；好多时候能.出来；不要在引用js的代码里再写代码。

$.map(array,fn):
用来将一个数组，转成另一个数组。
对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。
例子:得到一个元素值是原数组值二倍的新数组
回调函数：自己定义，系统调用。(你赚的钱，由你老婆负责花—注：你自己不能花)
var arr = [3, 5, 9];
var arr2 = $.map(arr, function(item) { return item * 2; });//联想C#委托的例子。函数式编程。
$.map不能处理Dictionary风格的数组(jason)。


$.each(array,fn):
对数组arry每个元素调用fn函数进行处理，没有返回值。
var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };//json格式的对象(dict)
$.each(arr, function(key, value) { alert(key+"="+value); });
如果是普通风格的数组，则key的值是序号。
还可以省略function的参数，这时候用this可以得到遍历的当前元素：
var arr = [3, 6, 9];
$.each(arr, function() { alert(this); });
普通数组推荐用无参，用dict风格的就用key、value。


hover(over,out) 一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测
eg： $("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
mouseover(fn) mouseover事件会在鼠标移入对象时触发。
mouseout(fn) mouseout事件在鼠标从元素上离开后会触发。
mouseup(fn) mouseup事件会在鼠标点击对象释放时