浅谈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() 方法返回元素的高度(包括内边距和边框)。
浅谈Jquery的使用上篇的更多相关文章
- 浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...
- 浅谈jQuery中的Ajax
浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...
- 车大棒浅谈jQuery源码(二)
前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...
- 浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
- 浅谈 jQuery 事件源码定位问题
该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
- [转]浅谈jQuery EasyUI的属性设置
原文地址:http://www.easyui.info/archives/1664.html 对jQuery EasyUI有一定了解的话,应该知道基本上每一个组件都有一个"options&q ...
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
Web页面常常比显示该页面的浏览器窗口还要大,因为Web文档具有很多内容,往往会导致页面比浏览器还要高,有时候甚至还要宽,这迫使访问者通过滚动来查看整个页面(如图10-8所示).当访问者滚动页面的时候 ...
- 浅谈jquery选择器
首先来说说jquery选择器的优势: 1.简洁的写法 2.支持css1.0到3.0选择器 3.完善的处理机制. 再来说说分类: jquery选择器分为基本选择器.层次选择器.属性选择器.基本过滤选择 ...
随机推荐
- [HTML5游戏开发]简单的《找不同汉字版》,来考考你的眼力吧
本次 游戏 开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0). 引擎下载的位置: http://lufylegend.googlecode ...
- PCB设计资料:看到最后才知道是福利
參考资料 通过以下的关键词直接从网络上Google或Baidu就能非常easy的找到以下的资料,这里仅仅是以參考文献的方式做一个整理以及简单的说明. 刘雅芳,张俊辉. 抗干扰角度分析六层板的布线技巧. ...
- 谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~
谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~_百度知道 谁知道哪有比较好的Beijing Milonga?想去参加这样的阿根廷探戈舞会~ 2009-1 ...
- 遍历关联数组 index by varchar2
--字符串序列要这样 declare type t is table of number(3) index by varchar2(3); hash_t t; l_row ...
- ASC(22)H(大数+推公式)
High Speed Trains Time Limit: 4000/2000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Su ...
- ASP.NET - Web.config文件详解
周金桥:asp.net夜话之十一:web.config详解 链接:http://zhoufoxcn.blog.51cto.com/792419/166441/
- FZOJ2110: Star
Problem Description Overpower often go to the playground with classmates. They play and chat on the ...
- python 在 eclipse 上的编码配置问题
Eclipse的设置 window->preferences->general->editors->text editors->spelling->encoding ...
- Windows server 2008 R2实现多用户远程连接
原文 Windows server 2008 R2实现多用户远程连接 经常使用远程桌面的朋友可能会注意到,Windows server 2008 R2中,远程桌面最多只允许两个人远程连接,第三个人就无 ...
- Flexigrid去掉列选择
Flexigrid中会出现列选择的小黑箭头,有时挺讨厌,想去掉.发现没有控制的地方,于是自己加. 在flexigrid.js中增加 在定义中增加 p = $.extend({ //apply defa ...