1.jQuery hide() 和 show()

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

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

2.jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn(500)

fadeOut(500)

fadeToggle(500)

fadeTo(500,0.5)

 

3.jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown(500)

slideUp(500)

slideToggle(500)

4.jQuery 动画 - animate() 方法

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

语法：

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

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

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

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

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

5.jQuery animate() - 使用队列功能(链式运动)

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 1

隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("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");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

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

 

7.Callback 函数在当前动画 100% 完成之后执行。

8.通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

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

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

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

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

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

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

实例

$("#btn1").click(function(){

alert("Text: " + $("#test").text());

});

$("#btn2").click(function(){

alert("HTML: " + $("#test").html());

});

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

实例

$("#btn1").click(function(){

$("#test1").text("Hello world!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Hello world!</b>");

});

$("#btn3").click(function(){

$("#test3").val("Dolly Duck");

});

10.获取属性 - attr()

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

下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){

$("#w3s").attr("href");

});

设置属性 - attr()

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

下面的例子演示如何改变（设置）链接中 href 属性的值：

实例

$("button").click(function(){

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

11.通过 jQuery，可以很容易地添加新元素/内容。

添加新的 HTML 内容

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

12.通过 jQuery，可以很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

13.通过 jQuery，可以很容易地对 CSS 元素进行操作。

切换类

jQuery 操作 CSS

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass(“zgz”) - 向被选元素添加一个或多个类

removeClass(“zgz”) - 从被选元素删除一个或多个类

toggleClass(“zgz”) - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

14.通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

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

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

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

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

下面的例子设置指定的 <div> 元素的宽度和高度：

实例

$("button").click(function(){

$("#div1").width(500).height(500);

});

15.向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

children()

find()

jQuery学习小结的更多相关文章

  1. JavaScript及jQuery学习小结

    最近几天学习了很多关于JavaScript和jQuery的文章,稍作梳理后,总结如下. 1.jQuery入门系列 环境搭建 只需引用一个jQuery库文件,即可完成jQuery的环境搭建. 选择器 j ...

  2. jQuery学习小结3——AJAX

    一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...

  3. jQuery学习小结2——动画

    一.基础动画 方法名 说明 show([speed,[easing],[fn]])hide([speed,[easing],[fn]]) speed:三种预定速度之一的字符串("slow&q ...

  4. jQuery学习小结1-CSS操作+事件

    一.DOM对象和jQuery 对象互换 1.jQuery对象 就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,其可以使用jQuery里的方法.比如: $(&quo ...

  5. jQuery 学习小结

    1,jQuery是一个简单的JavaScript库,提供了一系列辅助函数:以下简称jq; 使用jq时,通常将jq代码放到head部分的事件处理方法中,也可以将其单独写出 .js 文件,引入:但无论哪种 ...

  6. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  7. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

随机推荐

  1. CUDA5.5 的环境变量设置

    为了方便,我写了这个文件用于设置cuda5.5的环境变量. 其中有些环境变量可能用不到,大家根据需要修改就是了. export CUDA_HOME=/usr/local/cuda-5.5 export ...

  2. 5.QT中关于HTTPClient相关的操作，Json数据传输

     新建项目T12HttpClient T12HttpClient.pro SOURCES += \ main.cpp QT += network CONFIG += C++11 main.cpp ...

  3. Android开发学习之路--网络编程之xml、json

    一般网络数据通过http来get,post,那么其中的数据不可能杂乱无章,比如我要post一段数据,肯定是要有一定的格式,协议的.常用的就是xml和json了.在此先要搭建个简单的服务器吧,首先呢下载 ...

  4. Android开发学习之路--异步消息Handler，Message，Looper和AsyncTask之初体验

    在简易音乐播放器中,用了Handler,也没有过多地去研究学习,这里再学习下android下的异步消息处理机制.这里用了Handler主要是在线程中不能更新UI,而需要通过Handler才可以.关于异 ...

  5. UE4使用widget创建UI界面播放视频

    我的目的非常简单,点击按钮,播放或暂停场景中的视频 1.准备了一个mp4视频资源,为视频资源创建了一个Media Texture,在Media Player中选择导入进来的视频资源,再为Media T ...

  6. Access数据类型和.NET数据类型映射

    下表列出了 Microsoft Access 和这些数据类型与 Microsoft.NET Framework 数据类型与 OleDbType 枚举的方式中使用的最常见的数据类型. 访问类型名称 数据 ...

  7. linux后台运行程序（secureCRT断掉或关闭后继续运行程序）

    secureCRT断掉后想继续运行程序.也就是程序会在后台一直执行到结束. secureCRT通过ssh联接到client端运行程序,如果关掉窗口或者断开连接时,任务会被kill. 为了程序能够后台执 ...

  8. Android官方命令深入分析之绘制9-patch

    9-patch是一个所见即所得的编辑器,允许你创建可以自动更改大小适应屏幕的bitmap图像.被选中的部分可以水平或垂直的进行缩放. 下面是使用9-patch工具创建一个9-patch图像的实例,首先 ...

  9. Libgdx 1.6.1发布，跨平台游戏开发框架

    Libgdx 1.6.1发布 [1.6.1] 英文原文:http://www.badlogicgames.com/wordpress/?p=3694 译文翻译:宋志辉 - Net.newServerS ...

  10. TCP的定时器系列 — 超时重传定时器

    主要内容:TCP定时器概述,超时重传定时器.ER延迟定时器.PTO定时器的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd Q:一条TCP连接会使用 ...