一、

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() 方法返回元素的高度(包括内边距和边框)。

浅谈Jquery的使用上篇的更多相关文章

  1. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  2. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  3. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  4. 浅谈 jQuery 核心架构设计

    jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...

  5. 浅谈 jQuery 事件源码定位问题

    该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...

  6. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  7. [转]浅谈jQuery EasyUI的属性设置

    原文地址:http://www.easyui.info/archives/1664.html 对jQuery EasyUI有一定了解的话,应该知道基本上每一个组件都有一个"options&q ...

  8. 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...

  9. 浅谈jquery选择器

    首先来说说jquery选择器的优势: 1.简洁的写法  2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择 ...

随机推荐

  1. [HTML5游戏开发]简单的《找不同汉字版》,来考考你的眼力吧

    本次 游戏 开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0).    引擎下载的位置: http://lufylegend.googlecode ...

  2. PCB设计资料:看到最后才知道是福利

    參考资料 通过以下的关键词直接从网络上Google或Baidu就能非常easy的找到以下的资料,这里仅仅是以參考文献的方式做一个整理以及简单的说明. 刘雅芳,张俊辉. 抗干扰角度分析六层板的布线技巧. ...

  3. 谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~

    谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~_百度知道     谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~    2009-1 ...

  4. 遍历关联数组 index by varchar2

    --字符串序列要这样 declare     type t   is table of number(3) index by varchar2(3);    hash_t t;      l_row ...

  5. ASC(22)H(大数+推公式)

    High Speed Trains Time Limit: 4000/2000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Su ...

  6. ASP.NET - Web.config文件详解

    周金桥:asp.net夜话之十一:web.config详解 链接:http://zhoufoxcn.blog.51cto.com/792419/166441/

  7. FZOJ2110: Star

    Problem Description Overpower often go to the playground with classmates. They play and chat on the ...

  8. python 在 eclipse 上的编码配置问题

    Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...

  9. Windows server 2008 R2实现多用户远程连接

    原文 Windows server 2008 R2实现多用户远程连接 经常使用远程桌面的朋友可能会注意到,Windows server 2008 R2中,远程桌面最多只允许两个人远程连接,第三个人就无 ...

  10. Flexigrid去掉列选择

    Flexigrid中会出现列选择的小黑箭头,有时挺讨厌,想去掉.发现没有控制的地方,于是自己加. 在flexigrid.js中增加 在定义中增加 p = $.extend({ //apply defa ...