学习jquery

  一、$符号

　　1、选择器

　　　可以选择html标签，也可选择ID,Class等

　　　如下：

　<script type="text/javascript">

        $(

      function() {

          $("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇数，even：偶数，nth-child:匹配其父元素下的第N个子或奇偶元素，从1开始

          var obj = $("h2 a"); //得到h２下面的a,返回的是一个数组

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

              obj[i].innerHTML = i.toString();

          }

          var obj1 = $("#demo");

          obj1.append("Demo_Id");

          var obj2 = $(".Class"); //得到的是一个数组

          alert(obj2);

          $("div ul li:has(a)").addClass("Two"); //得到里中有a的标符添加一个Class="Two"

          $("li:lt(2)").addClass("one"); //得到前三个li，添加一个Class＝"one"，下标是从０开始的

          $("p>span").addClass("Two"); //得到p下的span,parent>child

      }

    )

    </script>

　2、得到标记中的属性　　

  var sTitle = $("p>span").attr("Title"); //得到标记中的属性值

          $("p>a").text(sTitle);//设置值，若是用text()得到值，则是得到的文本，不包含html

　3、设置属性

 $("button:gt(0)").attr("disabled", "disabled"); //得到第一个button后的button,然后设置它们的disable属性为不可用，没有这个属性就返回undefined

           $("img").attr({ src: "test.jpg", alt: "Test Image" });

  3.1、删出属性

  $("img").removeAttr("src");

　4、修改Class，如果存在（不存在）就删除（添加）一个类。

 $(

         function() {

             $("div>p").mouseover(

             function() {

                 $(this).toggleClass("HightLight");//修改样式class

             }

             );

         }

   4.1、移出Class

     $("p").removeClass("selected");

   4.2、添加Class

     $("p").addClass("selected");    

  5、图片的复制

　　　$("img:eq(0)").clone().appendTo($("p")); //得到第一张图片

　6、事件绑定，可以绑定多个相同的事件

 $(function() {

            $("img").bind("click", function() {　//绑定事件

                alert("你点啊！１");

            });

　　　　　 $("img").bind("click", function() {　//绑定事件

                alert("你点啊！２");

            });

 

        })

　　7、移出事件

  $(function() {

            $("input[type=button]").click(function() {

                $("img").unbind("click", eventImg);//unbind来移出方法

                alert("移出事件！");

            });

        })

　　8、元素的显示和隐藏

 <script type="text/javascript">

            $(function() {

                $("#demobtnF").click(function() {

                    $("#p_btn").show(); //显示

                });

                $("#demobtn").click(function() {

                    $("span:first").hide();//隐藏

                });

            })

        </script>

　　渐入渐出的效果：在show(),与hide()方法上传一个时间参数，从而得到淡入淡出的效果　　　　

<script type="text/javascript">

        $(function() {

            $("#Button1").click(function() {

                $("#imgs").show(10000);

            });

            $("#Button2").click(function() {

                $("#imgs").hide(5000);

            });

        })

        </script>

<input id="Button1" type="button" value="Show" />

        <input id="Button2" type="button" value="hide" />

        <hr />

        <img id="imgs" src="images/27m03.jpg" alt="log" />

        <hr />

二、淡入淡出的实现方法

　1、fadeIn()与fadeOut()：使用方法与show()、hide()一样，效果更好

如下：

  $("#Button3").click(function() {

                    $("#imgs").fadeIn(10000);

 

                });

                $("#Button4").click(function() {

                    $("#imgs").fadeOut(5000);

 

                });

　2、幻灯片效果-由slideUp()与slideDown()方法实现

 $("#Button1").click(function() {

                    $("#imgs").slideUp(10000);

 

                });

                $("#Button2").click(function() {

                    $("#imgs").slideDown(5000);

 

                });

三、Jquery功能函数

　1、浏览器的检测$.browser, 如下：

   if ($.browser.msie) return alert("IE");

                if ($.browser.safari) return alert("safari");

                if ($.browser.mozilla) return alert("mozilla");

                if ($.browser.opera) return alert("opera");

　2、盒子模型　$.boxModel　如下：

　　　　           alert($.boxModel ? "standard" : "IE");　　

　3、处理javascript对象　$.each(arr,function) //对数组的每个对象用function函数处理

　　如下：

  var aArr = ["one", "two", "three"];

                $.each(aArr, function(iNum, value) {

                    alert(iNum + "," + value);

                });

　　$.grep(Arr,funtion(value)):过滤

　　　示例：

 var aArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];

                var DemoArr = $.grep(aArray, function(value) {

                    return value > 4;

                });

                document.write(DemoArr.join());

　$.map(Array,function(value,index))