JQuery

JQuery函数：

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

例子，得到一个元素值是原数组值二倍的新数组

var arr = [3, 5, 9];

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

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

 

2. $.each(array,fn)对数组array中的每个元素调用fn函数逐个进行处理，没有返回值。可以处理dictionary风格数组。

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

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

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

 

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

var arr = [3, 6, 9];

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

普通数组推荐用无参，用dict风格的就用key、value。

------------------

//map函数的原理

             function mymap(arr, fn) {

                  var arr1 = new Array();

                  for (var i = 0; i < arr.length; i++) {

                      arr1[i] = fn(arr[i]);

                  }

                  return arr1;

              }

              var t = [4, 5, 6];

              var arr = mymap(t, function(n) { return n * 2; })

              alert(arr);

------------------------------

JQuery选择器：

1. Id选择器

    $("#div1")

2. 标签选择器

   $("input")

3. 类选择器

   $(".class1")

4. 复合选择器　　

   $("p,div,span.menuitem")  同时选择p标签、div标签和拥有menuitem样式的span标签元素

5. 层次选择器 

 •（1）$("div p")获取div下的所有p元素

 •（2）$("div > p")获取div下的直接p子元素

 •（3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）

 •（4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）

6.简单选择器

 :first 选取第一个元素   $("div:first")
 :last 选取最后一个元素
 :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
 :even、:odd，选取索引是奇数、偶数的元素 //$("input:even")选取索引是奇数的<input>
 :eq(索引序号)、:gt(索引序号)、:lt(索引序号) //选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input> 

 $(":header")选取所有的h1……h6元素

 $("div:animated")选取正在执行动画的<div>元素。

7.属性过滤选择器

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

•$("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

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

•$(“div[id*=div]”)选取给定的属性是以包含某些值的元素

8.表单对象选择器

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

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

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

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

•$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>

•$(":text")选取所有单行文本框，等价于$("input[type=text]")

•$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

 

节点遍历：

next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div")

nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div") 

prev、prevAll兄弟中之前的元素。

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

end()将匹配的元素列表变为前一次的状态。

andSelf()加入先前所选的加入当前元素中

 

常用的方法

样式操作：

•获取样式 attr("class")，

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

•追加样式addClass("myclass")(不影响其他样式)，

•移除样式removeClass("myclass")，

•切换样式（如果存在样式则去掉样式，如果没有样式则添加样式）toggleClass("myclass")，

•判断是否存在样式：hasClass("myclass")

 

html()  text()  val()  css() removeAttr()
  

-------------------------

动态创建Dom

 var $link = $("<a href='http://www.baidu.com'>百度</a>");动态创建的jquery对象，只是在内存中。

 $("div:first").append($link);  把动态创建的jquery对象，加到第一个div中    

动态创建dom注意：   

 var some = $("<div id='d1'>a<p></p>c</div>")  

 当把动态创建的节点添加到窗体前，不能通过$("#d1")访问到它   必须先把some追加到窗体   $("div:first").append(some);   才可以通过$("#d1") 中找到它

 append   把link元素追加到哪$("div:first").append(link);   

 appendTo  link.appendTo("div:first")    在结束标签之前添加元素  

 prepend  

 prependTo   在开始标签之后添加元素  

 after     在结束标签外添加元素  

 before     在开始标签前添加元素

 remove()  删除当前节点  

 empty() 清空当前节点之间的内容，节点保留

remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下

var items = $("#select1 option:selected").remove();

$("#select2").append(items);

//$("#select1 option:selected").appendTo($("#select2"))

empty()是将节点清空，清除节点的innerHTML，节点还在.

 

------------------------------

绑定事件
 绑定事件 $("#id").bind("click",function(){})
 解除绑定 $("#id").unbind("click")
 让事件只执行一次 $("#id").one("click",function(){})
 合成事件hover  toggle
  hover(enterfn,leavefn)  当鼠标放上时执行enterfn，当鼠标离开时执行leavefn
  toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行

 

事件冒泡：

 阻止事件冒泡  $("#d1").click(function(e){ e.stopPropagation();})

 阻止默认行为 ：比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。

$("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });

 

事件参数

 pageX、pageY
 target 获得触发事件的元素
 altKey、shiftKey、ctrlKey
 keyCode 键盘码

 

动画
 show()、hide() 显示、隐藏元素
 toggle()  切换显示隐藏
 slideDown、slideUp、 fadeOut、fadeIn
 animate 复杂动画

举例：

<script type="text/javascript">

        //qqTab

       $(function () {

            //当窗体加载，隐藏所有tab

            $("#qqTab h3").next().hide();

            //$("#qqTab h3:eq(0)").next().show();

            //默认让我的好友展开

            $("#qqTab h3").eq(0).next().show();

 

            $("#qqTab h3").toggle(function () {

                $(this).next().slideToggle();

            }, function () {

                $(this).next().slideToggle();

            });

        })

 </script>

 

<script type="text/javascript">

//TabControl

        $(function () {

            $("#qqTab>ul>li").mouseover(function () {

                //让选项卡高亮显示

                $(this).addClass("activeTab").siblings().removeClass("activeTab");

                //显示对应的详细内容

                var index = $(this).index();

                $("#tabs div").eq(index).fadeIn("slow").siblings().hide();

            })

        })

    </script>

 

-------------------------

分清属性和样式

$(“#btn1”).attr(“style”, “background-color:Red”)；

$("#btn1").css("background-color","Red")