jQuery

jQuery(js的类库，对js的常用方法和对象进行封装，方便大家使用)

      js获取对象： document.getElementById("id");

                          function   $(id){ return document.getElementById("ID");}

     

     jQuery获取对象：$("选择器")  等价于 获取元素

                            $("选择器")   或者  jQuery("选择器")     傻子才选第二种吧

 

首先 导入jQuery 文件

   <src type="text/javascript"  src="../js/jQuery-1.11.0.min.js"></script>

     

   获得对象例子:

         <input type="text"  id="username"  value="leroy"/>

         js获得： document.getElementById("username").value;

         jQuery获得：$("#username").val();

   

  将document对象转换为jQuery对象

        1、获取document对象

        var  username   =    document.getElementById("username");

        2、转换

        $(username);     -----变成了jQuery对象

  

jQuery对象转成document对象

        1、首先获取jQuery对象

         var  $username  =  $("#username");

        2、转换

             第一种方式： var username =  $username. get(0);----此时变成了普通对象

             第二种方式： var username =  $username[0];        ----此时也变成了普通对象

    

小结：

         dom对象与jQuery对象进行转换

              dom---------->jQuery;    $(dom对象)；

              jQuery------->dom;    第一种：jQuery对象.get(index);

                                                   第二种：jQuery对象[index];

 ----------------------------------------------------------------------------------------------------页面加载事件

        js中： window.onload =function(){}    页面加载只能加载一次

        jQuery中：

                 第一种：

                 $(function(){})

                 第二种：

                 $(document).ready(function(){})       页面可以加载多次

               

     例子：  $(function(){             $(function() {alert(456); });

                alert(123);

                });

委派事件：

               $("选择器").click(function(){});

               $("选择器").blur(function(){});

               ........API上有

等价于    

               dom对象.onclick = function(){}

需要掌握的事件

               focus

               blur

               submit

               change

               click

例子：

           <input  type="button"  id="bId"  value="点击查看"/>

           $(function(){

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

                          alert(123);

                })

           })

-----------------------------------------------------------------------------------------------------jQuery简单特效：

        隐藏和显示：

                          show(毫秒值)   hide(毫秒值)

        滑入和滑出：

                          slideDown(毫秒值)   向下滑入

                          slideUp(毫秒值)        向上滑出

        淡入淡出：

                          fadeIn(int)      淡入 

                          fadeOut(int)   淡出

例子：

      <div  id="">

      <img  src="url"/>

      </div>

       $(function(){

           //开启定时器

           setTimeout(showAdd,2000);

 

            setTimeout(slideDown,2000);

      })

      function showAdd(){

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

            //开启隐藏定时器

           setTimeout(hideAdd,2000); 

     }

   function  hideAdd(){

    $("#ad").hide(10000);

   }

-----------------------------------------------------------------------------------------------------广告：

       1、当页面加载成功调用计时器  setTimeout()

       2、编写方法

                          获取div元素  调用效果

                          设置另一个定时器让其隐藏

       3、编写隐藏的方法

                          获取div元素  调用效果
                       

 

//slideToggle(1000)   切换~~    隐藏显示    滑出滑入      淡入淡出

 

-----------------------------------------------------------------------------------------------------选择器
          A.基本选择器

             $("#id值")       $ (".classs值")       $ ("标签名")

           了解

             $("*")

           知道

             $("#id值，.class值")          ----选择多个

 

      B.层级选择器

       a  b:a的所有b的后代

       a>b:a的所有b的孩子

       a+b:a的下一个兄弟

       a~b:a的所有兄弟

      C、基本过滤选择器

            基本：

            : first第一个     

           ：last最后一个

           ：even索引偶数 0

            : odd  索引奇数

           ：eq（index）指定索引

           ：gt(index) >    大于

            :  lt(index)  <    小于

       D、内容过滤选择器

           ：has("选择器")包含指定选择器的元素

       E、可见性过滤器

            : visible

           ：hidden  在页面不显示元素<input type="hidden"/>

       F、属性过滤选择器***

            [属性名]

            [属性名=值]

       G、表单过滤选择器

           :input          所有表单子标签      input  select  textarea  button