zoukankan      html  css  js  c++  java
  • 浅谈Jquery的使用上篇

    一、

    1、Jquery是什么?有什么特性?

    jQuery 是一个 JavaScript 函数库。

    jQuery 库包含以下特性:

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

    二、

    2、Jquery有关的语法:

    (1)、通过 jQuery,您实现的是隐藏和显示效果:

    jQuery hide() 和 show()

    通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:

    语法:

    $(selector).hide(speed,callback);
    
    $(selector).show(speed,callback);
    

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

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

    jQuery toggle()

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    显示被隐藏的元素,并隐藏已显示的元素:

    语法:

    $(selector).toggle(speed,callback);

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

    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

    (2)、通过 jQuery,您可以实现元素的淡入淡出效果。

    jQuery fadeIn() 演示 用于淡入已隐藏的元素。

    语法:

    $(selector).fadeIn(speed,callback);

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

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

    jQuery fadeOut() 演示 方法用于淡出可见元素。

    语法:

    $(selector).fadeOut(speed,callback);

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

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

    jQuery fadeToggle() 演示 jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。

    语法:

    $(selector).fadeToggle(speed,callback);

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

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

    jQuery fadeTo() 演示jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

    语法:

    $(selector).fadeTo(speed,opacity,callback);

    必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

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

    (3)、jQuery 滑动方法可使元素上下滑动。

    jQuery slideDown() 方法用于向下滑动元素。

    语法:

    $(selector).slideDown(speed,callback);

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

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

    jQuery slideUp() 方法用于向上滑动元素。

    语法:

    $(selector).slideUp(speed,callback);

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

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

    jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

    如果元素向下滑动,则 slideToggle() 可向上滑动它们。

    如果元素向上滑动,则 slideToggle() 可向下滑动它们。

    $(selector).slideToggle(speed,callback);

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

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

    (4)、jQuery animate() 方法允许您创建自定义的动画。

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

    语法:

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

    必需的 params 参数定义形成动画的 CSS 属性。

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

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

    (5)、jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

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

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

    语法

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

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

    可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

    因此,默认地,stop() 会清除在被选元素上指定的当前动画。

     3、Jquery有关的选择器:

    上一篇当中着重讲解了Jquery选择器的使用,因此我就不再一一的列举了

    4、Jquery有关的事件:

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

    三、

    jQuery DOM 操作

    jQuery 中非常重要的部分,就是操作 DOM 的能力。

    jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

    1、获得内容 - text()、html() 以及 val()

    三个简单实用的用于 DOM 操作的 jQuery 方法:

    text() - 设置或返回所选元素的文本内容

    html() - 设置或返回所选元素的内容(包括 HTML 标记)

    val() - 设置或返回表单字段的值

    2、获取属性 - attr()

    jQuery attr() 方法用于获取属性值。

    设置属性 - attr()

    jQuery attr() 方法也用于设置/改变属性值。

    下面的例子演示如何改变(设置)链接中 href 属性的值:

    实例

    $("button").click(function(){
      $("#w3s").attr("href","http://www.w3school.com.cn/jquery");
    });
    

    attr() 方法也允许您同时设置多个属性。

    下面的例子演示如何同时设置 href 和 title 属性:

    实例

    $("button").click(function(){
      $("#w3s").attr({
        "href" : "http://www.w3school.com.cn/jquery",
        "title" : "W3School jQuery Tutorial"
      });
    });
    

    attr() 的回调函数

    jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    下面的例子演示带有回调函数的 attr() 方法:

    实例

    $("button").click(function(){
      $("#w3s").attr("href", function(i,origValue){
        return origValue + "/jquery";
      });
    });
    

    3、通过 jQuery,可以很容易地添加新元素/内容。

    jQuery append() 方法在被选元素的结尾插入内容。

    jQuery prepend() 方法在被选元素的开头插入内容。

    jQuery after() 方法在被选元素之后插入内容。

    jQuery before() 方法在被选元素之前插入内容。

    4、通过 jQuery,可以很容易地删除已有的 HTML 元素。

    jQuery remove() 方法删除被选元素及其子元素。

    jQuery empty() 方法删除被选元素的子元素。

    5、通过 jQuery,可以很容易地对 CSS 元素进行操作。

    如需设置指定的 CSS 属性,请使用如下语法:

    css("propertyname","value");

    下面的例子将为所有匹配元素设置 background-color 值:

    实例

    $("p").css("background-color","yellow");

    jQuery addClass() 方法

    下面的例子展示如何向不同的元素添加 class 属性。

    实例

    $("button").click(function(){
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });
    

    jQuery removeClass() 方法

    下面的例子展示如何向不同的元素删除 class 属性。

    实例

    $("button").click(function(){
      $("h1,h2,p").removeClass("blue");
    });
    

    jQuery toggleClass() 方法

    下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作:

    实例

    $("button").click(function(){
      $("h1,h2,p").toggleClass("blue");
    });

    6、尺寸:

    jQuery innerWidth() 和 innerHeight() 方法

    innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight() 方法返回元素的高度(包括内边距)。

    jQuery outerWidth() 和 outerHeight() 方法

    outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight() 方法返回元素的高度(包括内边距和边框)。

  • 相关阅读:
    Flash中先获取flv的尺寸然后再显示的方法
    雕虫小艺:Slider控件的制作(Flash)
    用几十行代码写一个可以在PC Web,PC桌面,安卓,iOS上运行的程序
    仰望星空,结果南辕北辙
    Flash播放mp4的两个问题:编码问题和需要下载完后才能播放的问题
    只学一点点:我的技术学习策略
    2012年计划
    提高ipad浏览器下大尺寸xml文件解析的性能
    html5/haXe开发偶感
    支点:技术选择的精髓
  • 原文地址:https://www.cnblogs.com/snake-hand/p/3144898.html
Copyright © 2011-2022 走看看