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. iterm2 快捷键

    最近开始使用mac,用iterm2的终端,有些快捷键纪录下. 标签 新建标签:command + t 关闭标签:command + w 切换标签:command + 数字 或者 command + 左 ...

  2. 没想到你是这样的UDP

    UDP是国际标准化组织为互联网设定的标准中的传输层中的一个协议.TCP/IP协议簇是一个很庞大的家族,但是今天我们就来看一看这个面向无连接的传输层在Java中是怎样通过编程实现的. 原理性知识 在Ja ...

  3. Postgre: How to import UUID function into Postgre 9.3

    1. Open a command console and go to the directory where you installed Postgre server. e.g. D:\Progra ...

  4. Cocos2D iOS之旅:如何写一个敲地鼠游戏(二):Cocos2D中的高清支持

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  5. Eclipse中查看没有源码的Class文件的方法

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/18798473 本文作者:sushengmiyan 我们在使用Eclipse的时候,经常 ...

  6. 用SpriteBuilder简化"耕牛遍地走"的动画效果(二)

    首先使用SpriteBuilder新建一个项目,将之前下载的资源文件夹拖入SpriteBuilder的文件视图. 这里我们只需要一步操作就可以完成原文中在Texture Packer中的那么多操作:即 ...

  7. LCD正向扫描和反向扫描

    LCD正向扫描和反向扫描 LCD扫描一般分正向扫面和反向扫描,分别针对正装和倒装结构(如下): 有时候提到长边扫描和短边扫描应该是针对横屏和竖屏的设置,大部分显示屏是正向扫描,是否都支持,和玻璃有关, ...

  8. Linux多线程实践(7) --多线程排序对比

    屏障 int pthread_barrier_init(pthread_barrier_t *restrict barrier, const pthread_barrierattr_t *restri ...

  9. go-mysql，一个易用的mysql接口框架实现

    介绍 go-mysql是一个用go写的mysql driver,使用接口类似于go自身的database sql,但是稍微有一点不同,现阶段还不支持集成进go database/sql中,但实现难度并 ...

  10. Android移动后端服务(BAAS)快速搭建后台服务器之Bmob-android学习之旅(75)

    个人移动开发者的最头疼的问题,就是App的网络后台,包含数据库等,国外目前有比较成熟的解决方案,但是限制于墙的问题,推荐国内的解决方案,比较出名的是Bmob和AVOS cloud和Atom等,这一次我 ...