好了,我们言归正传,下面教大家一些Jquery的一些基础用法。
-
始终记住首先必需引入Jquery的主文件
在写这篇文章的时候,Jquery的版本已经到了1.4.4了,相信Jquery肯定会越来越强大的。我们就期待着她的功能越发地健全吧。
告诉大家一个东西,Jquery的主文件,不需要放在你的服务器上的,我们可以调用谷歌的在线Jquery文件,因为从google直接加载(调用)是一个很方便的办法,
而且据传有缩短延迟,提高并行加载速度等好处。
想要学习Jquery,API文档那是必须的:
jQuery
API 1.4.4中文版chm下载
-
关于页面元素的引用
“jQuery”之所以叫做“jQuery”,是因为她是“javascript query”的缩写,也就是因为她的强大的选择器。
“$()”可引用的元素包括id、class、元素名、元素的层级关系、xpath条件或者dom对象,返回的对象为jquery对象(注意:这里的jQuery对象是集合对象,不能直接调用dom定义的方法。)
-
Jquery对象和DOM对象之间的转换
还记得有好长一段时间,我在想有没有把DOM对象转变成Jquery对象的方法(一直都是看jquery的API手册,在手册中未看到过关于DOM转jQuery对象的方法),如果有那简直太方便了。后来终于在某篇文章里发现了实现的方法。
原来DOM转Jquery对象是如此之简单呀:
$(DOM对象)这样就可以将DOM对象转变成Jquery对象了。举个例子:
1
|
$(document.getElementById( 'test' ))
|
上面的代码相当于$(‘#test’);
既然DOM对象转成Jquery对象如此之简单,那么jquery对象想转变成DOM对象的话,也应该困难不到哪里去吧~呵呵~~您猜对了。一样很简单。
由于jquery对象本身是一个集合,所以jquery对象要转成DOM对象的话,那就必须取出其中的某一项。那么如何取出jquery对象中的某一项呢。下面来看代码:
HTML代码:
3
|
< span >我是DIV中的第一个span</ span >
|
4
|
< span >我是DIV中的第二个span</ span >
|
5
|
< span class = "demo" >我是class为‘demo’的span</ span >
|
6
|
< span class = "demo" >我同样也是class为‘demo’的span</ span >
|
-
Jquery中的一些同时可以实现set和get的函数
估计大家最熟悉的应该是“css”这个函数吧。jquery中有好多这样的函数
01
|
$( "#test" ).css( "color" );
|
02
|
$( "#test" ).css( "color" , "#ff0000" );
|
04
|
$( "#test" ).html( "<b>new
content</b>" );
|
06
|
$( "#test" ).text( "<b>new
content</b>" );
|
08
|
$( "#test" ).height( "300" );
|
10
|
$( "#test" ).width( "300" );
|
12
|
$( "input" ).val( "test" );
|
-
获取Jquery对象集合中的某一项
Jquery提供了eq和get函数来获取集合中的某一项。需要注意的是,这两个方法都是通过索引号来取得的(索引是从0开始的)。这两个函数有个区别是eq返回的是jquery对象,而get返回的是DOM对象
不同的对象调用不同的方法,jquery对象只能调用jquery的方法,DOM对象只能调用DOM的方法:
2
|
$( "div" ).get(2).innerHTML;
|
-
关于jquery中的each的用法
$().each(callback)
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。 返回 ‘false’ 将停止循环 (就像在普通的循环中使用 ‘break’)。返回 ‘true’ 跳至下一个循环(就像在普通的循环中使用’continue’)。
上面是API文档的解释。
没理解的话给例子,呵呵:
HTML代码:
Jquery代码:
2
|
$( "div" ).each( function (i){
|
3
|
alert( "第" +i+ "个DIV的内容是==>" + this .innerHTML);
|
4
|
$( this ).css( "color" , "#ff0000" );
|
$.each(obj, fn)
通用例遍方法,可用于例遍对象和数组。
不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象。回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略。
遍历一个数组:
2
|
$.each(
[1,2,3], function (i,
n){
|
3
|
alert( "Item
#" +
i + ":
" +
n );
|
遍历一个对象,同时使用成员名称和变量内容。
2
|
$.each(
{ ch_name: "Jquery学习" ,
en_name: "Jquery
Study" }, function (k,
v){
|
3
|
alert( "Name:
" +
k + ",
Value: " +
v );
|
-
扩展我们需要的功能
2
|
min: function (a,
b){ return a
< b?a:b; },
|
3
|
max: function (a,
b){ return a
> b?a:b; }
|
-
Jquery支持链式写法
这就是为什么Jquery的代码是如此的优雅的原因了。
所谓链式写法,也就是可以一个Jquery对象连续使用不同的方法
HTML代码:
Jquery代码:
2
|
$( "div" ).click( function (){alert($( this ).html())})
|
3
|
.mouseover( function (){alert( 'mouse
over event' )})
|
4
|
.each( function (i){ this .style.color=[ '#f00' , '#0f0' , '#00f' ][i]});
|
上面这段代码实现这样的功能,首先给每个div绑定了一个click事件,然后又绑定了一个鼠标移开的时候触发的事件,最后给每个div设定了不同的颜色
-
关于插件内的this所指的对象
2
|
$.fn.colortip
= function (option){
|
-
解决自定义方法或其他类库与jQuery的冲突
有时候,我们在使用了其他的js类库如prototype等,其中也定义了$方法,
如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,
如原来引用对象方法$(“#test”)改为jQuery(“#test”)。
如:
3
|
jQuery( "div
span" ).hide();
|
5
|
$( "content" ).style.display
= 'none' ;
|
分享到:
相关推荐
由于目前高校基本尚未开JavaScript的相关课程,目前jQuery的学习,使用,研究都仅限于在职Web程序员之间。 用jq的前提,首先要引用一个有jq的文件 [removed][removed] 这个是jquery官方最新的地址。可用在自己网站...
jquery jQuery是一个广泛使用的JavaScript库,它可以极大地简化JavaScript编程,让开发者jQuery是一个广泛...其次,掌握jQuery的基本语法和常用方法;最后,通过实践来加深理解,例如完成一些基于jQuery的实例练习。
11. 小结1 12. 选择器练习 13. 创建和插入节点 14. 重写 JS 实验之分类添加内容 15. 删除及清空节点 16. 重写 JS 实验之员工管理 17. 克隆和替换节点 18. 包裹节点 19. html() 方法 & val() 方法 20. 小结2 21. CSS ...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
jquery的学习总结,精华所在,一点就通。了解jquery的基本用法。
本文实例讲述了jQuery选择器之基本选择器用法。分享给大家供大家参考,具体如下: 初学jQuery,为了能系统地学习好jQuery,今天特意把自己的学习心得归纳一下,贴上来与初学者共享,今天我主要总结的是jquery的基本...
30个jquery实例,覆盖了jquery的各个...如果你不懂jquery基础知识,请参看我的jquery知识点汇总,那里用思维导图的形式总结了jquery的基本知识点,配合每个知识点的代码实现,一定会对你使用和学习jquery起到很大帮助。
jQuery技巧总结,描述基本用法和一些技巧
个人总结的jQuery页面操作记录,包括jQuery的基本使用方法和对页面表单控件的各种操作。
1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 2.3.1 基本选择器 2.3.2 层次选择器 2.3.3 过滤选择器 2.3.4 表单选择器 2.4 应用jQuery改写示例 2.5 选择器中的一些...
jquery开发入门/1 1.1 jquery概述/2 1.1.1 认识jquery /2 1.1.2 jquery基本功能/2 1.1.3 搭建jquery开发环境/3 1.1.4 编写第一个简单的jquery应用/3 1.1.5 jquery程序的代码风格/5 1.2 jquery的简单...
用户在登录时,向服务器发送登录数据请求后,服务器端的程序将接收所请求的数据,检测16.3 本章小结在本章中,首先通过演示图片切割的全过程,使读者在掌握 jQuery 基本知识的基础上,学会如何在 HTML 页面中,通过...
1.4 小结 第2章 选择符——取得你想要的一切 2.1 DOM 2.2 工厂函数$() 2.3 CSS选择符 2.4 XPath选择符 2.5 自定义选择符 2.6 DOM遍历方法 2.7 访问DOM元素 2.8 小...
这里总结了jquery_validate控件的基本用法、自定义验证方法及验证成功后的逻辑,自认为已经够用了,希望和大家分享一下
自己总结的juquery文档,从基本的选择器,到jquery整合ajax的总和使用,同时详细的解析了里面的方法
总结出了一些用法,供大家参考: 最基本的选择器语法包括:id、class、标签、属性,这和css选择器是一致的。 ID选择器要在ID前加#,比如要选择一个ID为myDivID的div元素(”myDivID”>)可以这样写: 代码如下: $(“#...
总结一下基本的用法。 一、cookie 定义: 存储在本地,容量最大4k,在同源的http请求时携带传递,损耗带宽; 可设置访问路径,只有此路径及此路径的子路径才能访问此cookie,存在有效的时间。 注意点: cookie的访问...
主要为大家详细介绍了jQuery树形控件zTree使用方法,zTree树插件的基本使用方法,感兴趣的小伙伴们可以参考一下