美文网首页我爱编程
JQuery 的使用基础

JQuery 的使用基础

作者: 凤爪dc | 来源:发表于2017-01-22 15:54 被阅读0次

    参考资料

    在JQuery中,感觉选择器是一个神奇的东西,各种各样的选择器用溜了能够很好地实现代码的简洁性。

    使用jQuery

    1.先从官方网站下载JQuery库

    http://jquery.com/download/

    2.添加到HTML文件中

      <body>
        <script src="jquery-3.1.1.js"></script>
      </body>
    

    3.将自己编写的js文件导入

      <script src="main.js"></script>
    

    语法

      $("selector").action().action()  //action可以多个
    

    $:定义jQuery的符号,也可直接jQuery("selector")
    selector(选择器):选择出要动手的元素
    action : 要执行的操作

    选择器(selector)

    1.直接对所有元素进行选择

    | 选择器 | 选取 |
    | -
    | $("*") | 所有元素 |
    | $(".intro") | 所有class为intro的元素 |
    | $("#pp") | 所有id 为pp的元素 |
    | $("p") | 所有的p元素 |
    可互相搭配,p.intro,p#pp,.intro.intro2……等等

    2.对直接的元素细化

    | 选择器 | 选取 |
    | -
    | $("p:first") | 第一个P元素 |
    | $("p:last") | 最后一个p元素 |
    | $("tr:even") | 所有偶数的tr元素 |
    | $("tr:odd") | 所有奇数的tr元素 |

    3.选择带有某种属性的

    | 选择器 | 选取 |
    | -
    | $("[href]") | 选择带有href的元素 |
    | $("[href='#']") | 选择href属性为#的元素 |
    | $("[href!='#']") | 选择href属性不为#的元素 |
    这里,href可以改成其他已定义的属性,可以通过自己设定一个属性达到对HTML元素的灵活选取。
    此外还有与input有关的选择器
    jQuery参考手册

    action

    像基础的效果,对HTML文档的处理,对DOM树的遍历...可以直接通过查询参考API
    jQuery可以创建自定义动画

      $("selector").animate({params},speed,callback);
    

    params(必须的):定义形成动画的CSS属性
    speed(效果的时长):可选"slow","fast",毫秒

    animate 可同时操作多个属性

      $("div").animate({ 
       opacity:'0.5',
       width :"150px",
       height:"40px"     
      })
    

    注意:animate几乎可以操作CSS的所有属性,但必须使用camel标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right。
    同时,色彩动画并不包含在核心 jQuery 库中,如果需要生成颜色动画,您需要从 jquery.com 下载 颜色动画 插件。

    animate队列功能

      $("button").click(function(){
           var div=$("div");
          div.animate({height:'300px',opacity:'0.4'},"slow");
          div.animate({width:'300px',opacity:'0.8'},"slow");
          div.animate({height:'100px',opacity:'0.4'},"slow");
      });
    

    可以按顺序逐一实现动画的功能

    相应的,就有stop方法
    语法:

      $("selector").stop(stopAll,goToEnd);
    

    可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。
    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    小结:要使用jQuery,要灵活使用各种选择器,还需要知道有什么行为(action)可以做。从自己使用jQuery做了一个简易demo之后感触颇深,想学好一种代码真的需要自己动手搞一搞。

    相关文章

      网友评论

        本文标题:JQuery 的使用基础

        本文链接:https://www.haomeiwen.com/subject/ilribttx.html