JQuery入门总结（一）【DOM、选择器、方法事件】

 
 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事件会在鼠标点击对象释放时