zoukankan      html  css  js  c++  java
  • jQuery学习

    什么是jQuery?

      jQuery是一个JavaScript函数库。

      jQuery有以下功能:

      1、html元素的选取

      2、html元素操作

      3、css操作

      4、html事件函数

      5、JavaScript特效和动画

      jQuery的简单使用:

        首先,我知道jQuery是一个JavaScript的函数库,那我们就先要在html中引入这个库。引入的时候我们可以直接把这个库下载的本地,也可以远程用链接引入。下面引入的方法是远程链接引入:

    <head>
      <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>

        基础语法:$(selector).action()

          美元符号定义jQuery;选择符(selector)查询或查找html; jQuery的action()执行元素的操作。

    $(document).ready(function(){
     
       // 开始写 jQuery 代码...
     
    });

       下面是一种简洁写法,与上面的写法相同:

    $(function(){
     
       // 开始写 jQuery 代码...
     
    });

    jQuery选择器

      jQuery选择器是基于元素id、类、类型、属性、属性值等查找或选择HTML元素,基于已经存在的cs选择器,之外还有一些自定义的选择器。jQuery中所有的选择器都以美元符号开头:¥()

      1、元素选择器

        基于元素名选取元素。

        例如:在页面选取所有<p>元素:

    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });

      2、#id选择器

        #id选择器通过HTML中id的属性选取指定的元素。注意:html中的id的属性是唯一的。

    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });

      3、.class选择器

        jQuery类选择器可以通过指定的class查找元素

    $(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });

    jQuery事件

      1、click()事件

        click()方法时当按钮点击事件被触发思考hi调用一个函数

    $("p").click(function(){
      $(this).hide();
    });

        下面不会再列出代码实例,因为代码实例大都相同,只需要把事件方法名换一下就好了。  

      2、dblclick()事件

        dblclick()方法是当双击元素时,触发事件

      3、mouseenter()事件

        当鼠标穿过元素时,会触发

      4、mouseleave()事件

        当鼠标指针离开元素时,会触发

      5、mousedown()事件

        当鼠标指针移动到元素上方,并按下鼠标按键时,会触发

      6、mouseup()事件

        当在元素上方松开鼠标按钮,会触发

      7、hover()事件

           当鼠标移动到元素上方时,会触发

    jQuery动画

      animate() 方法用于创建自定义的动画。

      语法:

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

      params参数顶一个形成动画的css属性,必须的;

      speed参数规定效果时长。它可以取以下值:“slow”,"fast"或者毫秒,可选的;

      callback参数是动画完成后所执行的函数名称,可选的。

    $("button").click(function(){
      $("div").animate({left:'250px'});//向右边移动250个像素
    });

      注:animate() 方法可以使用相对值。需要在值的前面加上+=或-=,也可以使用预定义的值。

      

  • 相关阅读:
    jq insertBefore 的返回值
    微信公众号-定位之地址逆解析&导航
    微信JS-SDK
    Vue
    ES6-函数的扩展
    ES6-数组的扩展
    JSP
    JS
    HTML+CSS
    jdbc操作数据库
  • 原文地址:https://www.cnblogs.com/leilei0327/p/8866317.html
Copyright © 2011-2022 走看看