zoukankan      html  css  js  c++  java
  • jQuery笔记

    <1>隐式迭代:偷偷的遍历,在jQuery中,不需要手动写 for 循环了,会自动进行遍历

          $("li")可以获取所有的 li 元素

    <2>大版本分类

          1.x版本:能够兼容IE678浏览器

          2.x版本:不兼容IE678浏览器

          1.x和2.x版本jquery都不再更新版本了,现在只更新3.x版本。

          3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)

    <3>压缩版和为压缩版

            jquery-1.12.4.min.js:压缩版本,适用于生产环境,因为文件比较小,去除了注释、换行、空格等                                           东西,但是基本没有颗阅读性。
            jquery-1.12.4.js:未压缩版本,适用于学习与开发环境,源码清晰,易阅读。

    <4>jQuery的入口函数

          第一种写法

          $(document).ready(function() {
          });
          第二种写法
          $(function() {
          });
    <5>Jquery入口函数与js入口函数的对比

           1. JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。

           2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。

    <6>jQuery 对象和 DOM对象的区别(重点)

         1. DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。

         2. jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
         3. jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
         4. DOM对象与jQuery对象的方法不能混用。

    <7>DOM 对象转换成 jquery 对象  [联想记忆:花钱]

           $("li") . text( );

           jQuery对象转换成DOM对象

           $("li")[0]

    <8> $符号的实质

           $其实就是一个函数,以后用$的时候,记得跟小括号 $();

           参数不同,功能就不同

           3种用法 

                 1. 参数是一个function, 入口函数

                   $(function () {

             });

    2. $(domobj) 把dom对象转换成jquery对象
    $(document).ready(function () {

    });

    3. 参数是一个字符串,用来找对象
    $("div") $("div ul") $(".current")

    <9> jQuery选择器
    1,基本选择器
    ID选择器 $(“#id”);  类选择器 $(“.class”); 标签选择器 $(“div”); 并集选择器 $(“div,p,li”);  交集选择器 $(“div.redClass”);
    2,层级选择器

                       子代选择器    $(“ul>li”)       使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素 
                       后代选择器 | $(“ul li”);      使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 

                 3, 过滤选择器

                     这类选择器都带冒号:

                     :eq(index)     $(“li:eq(2)”).css(“color”, ”red”);    获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 

                    :odd   $(“li:odd”).css(“color”, ”red”);   获取到的li元素中,选择索引号为奇数的元素 
                   :even   $(“li:even”).css(“color”, ”red”);   获取到的li元素中,选择索引号为偶数的元素

            4,筛选选择器(方法)
              筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。
               children(selector)  $(“ul”).children(“li”)             |

             find(selector)      $(“ul”).find(“li”);     相当于$(“ul li”),后代选择器 |
             siblings(selector)      $(“#first”).siblings(“li”);    查找兄弟节点,不包括自己本身。 
             parent()       $(“#first”).parent();    查找父亲 
             eq(index)    $(“li”).eq(2);      相当于$(“li:eq(2)”),index从0开始 
             next()        $(“li”).next()      找下一个兄弟 
             prev()      $(“li”).prev()       找上一次兄弟

    <10>jQuery  css操作

           ①修改单个样式:css(name, value)  

              $("li").css("backgroundColor","pink");

           ②修改多个样式:

                 css(obj)   $("li").css({ 

                      backgroundColor : "pink";

                      color : "red" ;

                      fontSize : "32px" ;

                  })

             ③获取样式 : css(name)

                 $("li") .eq(0). css("fontSize") ; 

                 隐式迭代:设置操作的时候,会给 jq 内部的所有对象都设置上相同的值

                                   获取的时候,只会返回第一个元素对应的值

    <11>jQuery  classs操作
    ①添加一个类:$("li").addClass("basic");
    ②移除一个类:$("li").removeClass("basic");
    ③判断类:$("li").hasClass("basic");
    ④切换类:$("li").toggleClass("basic") , 如果有 basic 类就移除 basic类,没有这个类就添加这个类

    <12>jQuery属性操作
    样式:是在style里面写的,用css来操作
    属性:在js 里面写的,用attr方法操作
    ①设置单个属性:attr(name, value)
    $("img").attr("alt", "哈哈哈") ;
    ②设置多个属性:
    $("img").attr({
    alt : "hahaha",
    title: "lalalal"
    })
    ③获取属性:
    $("img").attr("alt");

    <13>对于布尔类型的属性,不用 attr 方法,应该用 prop 方法
    <input type="button" value="选中">
    <input type="button" value="不选中">
    <input type="checkbox" id="ck">
    
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        $("input").eq(0).click(function () {
          $("#ck").prop("checked", true);
        });
      
        $("input").eq(1).click(function () {
          $("#ck").prop("checked", false);
        });
      });
    </script>
    
    

     <14>jQuery三组基本动画

            ①显示 / 隐藏  

               $("div").show()   //    $("div").hide()

               show(speed ,  callblack)  :  speed动画的持续事件,可以是毫秒值,还可以是固定字符串 

                                         fast : 200ms   normal : 400ms   slow : 600ms 

                                         callback ()还可以传回调函数

             ②滑入滑出:slideIn  /  slideDown

                    slideIn (speed ,  callback)

                    切换: $("div"). slideToggle() ,如果是滑入状态,就执行滑出动画,如果是滑出状态,就执行滑入动画

             ③淡入淡出: fadeIn / fadeOut

                                   fadeIn(speed, callback)

                                   切换:fadeToggle()

      <15>自定义动画

        $("div").animate({left : 800} , 8000 )

                   $("div").animate({left : 800} ,8000, "swing");

                   $("div").animate({left : 800} , 8000 , "linear " , funciton(){} )

                   第一个参数:对象,里面可以传需要动画的样式

                   第二个参数:speed  动画的执行时间

                   第三个参数:动画的执行效果  :  swing :摇摆; linear : 线形,匀速

                   第四个参数:回调函数

     <16>动画队列

            把未执行的动画放在一个队列里面,当前执行的动画结束之后,再挨个执行队列里面的动画

            $("div").animate({left : 800})

                       .animate({width : 300 ,  height : 300})

                       .animate ({ top : 0})

    <17>停止动画

            $("div").slideDown().stop().slideUp();

            $("div").stop(true,true);

           .stop().animate()

            stop:停止当前正在执行的动画

            clearQueue:是否清除动画队列,true  /  false

            jumpToEnd:是否跳转到当前动画的最终效果   true / false

     <18>jQuery节点操作:

        1,创建节点:

        2,添加节点:

              添加到子元素的最后面:

              $("div").append($("p"));

              $("p").appendTo($("div"));

              添加到子元素的前面:

              $("div").prepend($("p"));

              $("p").prependTo($("div"));

              添加到兄弟元素的前面或后面:

              $("div").after($("p"));

              $("div").before($("p”));

              $("#box").append(' <a href="http://www.baidu.com" target="_blank">哈哈哈哈</a>')

      3,清空节点:

              $("div").empty()

              不用 $("div").html(" ") ,因为这个会泄露内存,可以清空一个元素的内容,但是无法清空它里面的事件,就会占用内存,即内存泄漏,而empty()方法可以清空元素内容和事件

      4,删除节点:

              $("div").remove();

      5,克隆节点:

             $("div").clone(true) .appendTo("#box");

            clone()里面不传参数或是参数是 false , 都是深度复制,但不会复制事件

            参数是 true ,也是深度复制,但是可以复制事件

       <19>val()方法

               val方法用于设置和获取表单元素的值,例如input、textarea的值

               获取值  :   $(“#btn”). val () ;  

              设置值:$("txt "). val ("123");

              案例:[京东搜索] :  表单获得焦点,默认值清空,表单失去焦点,设置默认值

    <body>
    <input type="button" value="呵呵" id="btn">
    <input type="text" value="洋酒" id="txt">
    <script src="jquery-1.12.4.js"></script>
    <script>
      $(function () {
        $("#txt").focus(function () {
         
          if($(this).val() === "洋酒"){    //如果是默认值,清空内容
             $(this).val("");
    }
    });
    $(
    "#txt").blur(function () {
    if($(this).val() === ""){
    $(
    this).val("洋酒");
    }
    });
    });

    </script>
    </body>

      <20>html 方法 与 text 方法:

               html (): 相当于 innerHTML 

          text () :        相当于 innerText

               获取值:  $("div").html() 

               设置值 :  $("div").html("<p>我是文本<p>")    // 我是文本,

                              $("div").text("<p>我是文本</p>")    // <p>我是文本</p>

          区别: html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。

    <21>width 方法与 height 方法

            获取宽度:    $("div").width()  , 直接获取到数字

            设置宽度:    $("div").width (400) 

            $("div").innerWidth() ;   // padding + width

            $("div").outerWidth()  ;   // padding + width +border

            $("div").outerWidth(true) ;  //padding+ width + border+margin

           获取页面可视区的宽度和高度:

           $(window).width()

           $(window).height()

    <21>scrollTop 与 scrollLeft

         设置或者获取垂直滚动条的位置
    scrollTop() : 被卷去的高度
    scrollLeft () : 被卷去的宽度
    $(window).scrollTop() ; 获取页面被卷去的高度
    $(window).scrollLeft(); 获取页面被卷去的宽度
    案例 : 固定导航条案例 + 小火箭返回顶部案例

    <22>offset方法与position方法:
    offset方法:获取元素距离document的位置 $("div"). offset();
    position方法:获取的是元素距离有定位的父元素的位置 $("div"). position();
    <23>jQuery事件发展历程:
    简单事件绑定 >> bind事件绑定 >>delegate事件绑定 >>on事件绑定
    简单事件注册:
    click() mouseenter() ....
    缺点:不能同时注册多个事件
    bind方式注册事件:
    $("p") . bind ("click mouseenter " , function(){} )
    第一个参数:事件类型
    第二个参数:事件处理程序
    缺点:不支持动态事件绑定(如新添加的元素没有绑定事件)
    delegate注册委托事件:
    $(".father").delegate("p" , "click" , function(){ } ) // 为.father下面的所有的p 标签绑定事件
    第一个参数:selector , 要绑定事件的元素
    第二个参数:事件类型:
    第三个参数:事件处理函数
    缺点:只能注册委托事件,一次注册事件需要记得方法太多了
    on 注册事件
    最现代的方式,兼容zepto(移动端类似jQuery的一个库),强烈建议使用
    语法:
    第一个参数:events , 绑定事件的名称可以是由空格分隔的多个事件(标准事件或自定义事件)
    第二个参数:selector,执行事件的后代元素(可选),如果没有后代元素,那么事件将由自己执行
    第三个参数:data , 传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)
    第四个参数:hander:事件处理函数
    on注册简单事件:
    $("div") . on("click" , funciton(){ } ) //表示给div绑定代理事件,并且有自己触发,不支持动态绑定
    on注册委托事件:
    $("div").on("click" , "span" , function(){ } ) //表示给div绑定代理事件,但必须是它的内部元素span才能触发这个事件,支持动态绑定

    <24>事件解绑
    $("div").off() ; //解除匹配元素的所有事件
    $("div").off( "click") ; //解除匹配元素的所有 click事件
    <25>触发事件:
    $("div").click() ; //触发 click事件
    $("div").trigger("click");
    <26>delay的用法:
    $("div").fadeIn(1000).delay(2000).fadeOut(1000);
    <27>链式编程
    通常情况下,只有设置操作才能把链式编程延续下去,因为获取操作的时候,会返回获取到的相应的值,无法返回jQuery对象
    end( ) ; // 筛选选择器会改变jQuery 对象的DOM对象,想要恢复到上一次的状态,并且返回匹配元素之前的状态
    $(this).text("wjx-s").prevAll( ) .text("wjx-s").end( ).nextAll( ).text("wjx-k");
    <28>each方法
    jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了
    each方法 : 遍历jQuery对象集合 , 为每个匹配的元素执行一个函数
    $("div").each(function( index ,element){ })
    第一个参数 : 表示当前元素在所有匹配元素中的索引号
    第二个参数 : 表示当前元素 (DOM对象)
    案例 : 给每个 li 设置不同的透明度
    each方法
    $("li").each(function(index, element){
       $(element).css("opacity" , (index+1)/10) ;
    })
         for循环的方法
    for(var i=0; i < $("li").length; i++)
    {
        $("li").eq(i).css("opacity" , (i+1)/10);
    }

    <29>$冲突

         jQuery使用$作为标识符, 但是如果与其他框架中的 $ 冲突时, jQuery可以释放 $ 的控制权
    $.noConflict ( ) ; // jQuery释放控制权
    var $$=$.noConflict( ) ; //释放 $ 的控制权, 并且把 $ 的能力给了 $$
    入口函数 : $$(function(){ })

    <30>jQuery插件
    jquery不可能包含所有的功能,我们可以通过插件扩展jquery的功能。
    1,jQuery.color.js
      animate不支持颜色的渐变,但是使用了jquery.color.js后,就可以支持颜色的渐变了。
    
    
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div {
    400px;
    height: 400px;
    background-color: red;
    }
    </style>
    </head>
    <body>

    <div></div>

    <!--1. 引入jquery的js文件-->
    <script src="jquery-1.12.4.js"></script>
    <!--2. 引入插件的js文件-->
    <script src="jquery.color.js"></script>
    <script>
    $(function () {

    //3. 直接使用即可。
    //说明jquery不支持颜色的渐变,颜色最好用16进制
    $('div').animate({backgroundColor:"#ffc0cb"}, 3000, function () {
    alert("呵呵");
    });

    });
    </script>
    </body>
    </html>
    </script>
    使用插件的步骤:
    1,引入jQuery文件
    2,引入插件(如果有用到 css 的话,需要引入 css)
    3,使用插件

    2,jQuery.lazylode.js 懒加载插件
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
          height: 4000px;
        }
      </style>
    </head>
    <body>
    <div></div>
    <img class="lazy" data-original="02.gif" alt="">
    
    <script src="jquery-1.12.4.js" type="text/javascript"></script>
    <script src="jquery.lazyload.js" type="text/javascript"></script>
    <script>
    
      $(function () {
    
        $("img.lazy").lazyload();
    
      });
    
    </script>
    </body>
    </html>

    制作jQuery插件

    原理:jQuery插件其实就是给jQuery对象增加一个新的方法,让jQuery对象拥有某一个功能

    通过给 $.fn添加方法就能够扩展jQuery对象

    <31> 原型的概念

             1,给数组原型增加一个 sayHi 的方法:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script>
        Array.prototype.sayHi=function () {
            console.log("hello");
        };
        var arr = new Array();
        arr.sayHi();
    </script>
    </body>
    </html>

             2, jQuery 原型

            给 jQuery原型增加一个 sayHi () 方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            // 1, jQuery.prototype.sayHi=function () {
            //     console.log("hi");
            //    }
            //   jQuery(document).sayHi();  // jQuery对象调用这个方法
    
            // 2, $.prototype.sayHi=function () {
            //     console.log("hi");
            //     }
            //    $(document).sayHi();
    
            $.fn.sayHi =function () {
                console.log("hi");
            }
            $(document).sayHi();
        })
    
    </script>
    </body>
    </html>

    <32>制作一个简易的 jQuery 插件 (改变背景颜色)

            jQuery.bgColor.js 文件:

    $.fn.bgColor = function (color) {
         this.css("backgroundColor" , color);  // 原型对象的 this 指的就是 jQuery
         return this; // jQuery就可以链式编程
    }

           在HTML文件中使用这个插件:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
        div {
           200px;
          height: 200px;
          background-color: pink;
        }
      </style>
    </head>
    <body>
    <div></div> <p>1234</p> <script src="jquery-1.12.4.js"></script> <script src="jquery.bgColor.js"></script> <script> $(function () { $("p").bgColor("green"); $("div").bgColor("red").width(400); }); </script> </body> </html>



  • 相关阅读:
    套用JQuery EasyUI列表显示数据、分页、查询
    Linux 进程间通信 信号
    Linux socket编程
    Linux字符设备驱动注册流程
    Linux杂项设备与字符设备
    Linux并发控制解决竞态的一种操作>原子操作
    Linux 进程间通信 管道通信
    Linux串口编程
    博客开通啦!
    实现Windows Phone 8多媒体:视频
  • 原文地址:https://www.cnblogs.com/shanlu0000/p/11516877.html
Copyright © 2011-2022 走看看