JQuery_1

jQuery 是一个 JavaScript 函数库

jQuery 库包含以下特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

一、引入jQuery:

   可以到jQuery官网http://jquery.com/download 下载js文件;然后在html中引入;

     jQuery语法:

    $(selector).action( )

 

     $美元符号定义 jQuery选择符

    (selector)“查询”和“查找” HTML 元素

     jQuery 的 action( ) 执行对元素的操作

   示例:

      $(this).hide( ) - 隐藏当前元素

 

      $("p").hide( ) - 隐藏所有段落

 

      $(".test").hide( ) - 隐藏所有 class="test" 的所有元素

 

      $("#test").hide( ) - 隐藏所有 id="test" 的元素

 

  jQuery 元素选择器:

    jQuery 使用 CSS 选择器来选取 HTML 元素。

    $("p") 选取 <p> 元素。

    $("p.intro") 选取所有 class="intro" 的 <p> 元素。

    $("p#demo") 选取所有 id="demo" 的 <p> 元素。

  jQuery 属性选择器:

    jQuery 使用 XPath 表达式来选择带有给定属性的元素。

    $("[href]") 选取所有带有 href 属性的元素。

    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

  jQuery 事件:

$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

二、jQuery 效果:

  1.隐藏/显示

  语法:$(selector).hide(speed,callback);  
     $(selector).show(speed,callback);

        可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。

        可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

   语法:$(selector).toggle(speed,callback);   

        使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素,并隐藏已显示的元素。

  2.淡入淡出

    fadeIn( )  淡入    语法:$(selector).fadeIn(speed,callback);

    fadeOut( )  淡出    语法:$(selector).fadeOut(speed,callback);

    fadeToggle( )  切换淡入淡出    语法:$(selector).fadeToggle(speed,callback);

    fadeTo( )  给定的不透明度(值介于 0 与 1 之间)    语法:$(selector).fadeTo(speed,callback);

  3.滑动

    slideDown( )  向下滑动元素    语法:$(selector).slideDown(speed,callback);

    slideUp( )  向上滑动元素    语法:$(selector).slideUp(speed,callback);

    slideToggle( )  切换向上向下滑动    语法:$(selector).slideToggle(speed,callback);

  4.动画

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

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

     提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。

        如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

  5.stop( )
    语法:$(selector).stop(stopAll,goToEnd);

     stop( ) 方法用于停止动画或效果,在它们完成之前。

     stop( ) 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

posted @ 2020-10-20 11:40  Gazikel  阅读(51)  评论(0编辑  收藏  举报