Jquery学习--来自jerry的博客
2009-06-02 23:07
387 查看
别人都使用jquery开发过n个项目了我才开始学习jquery,没办法,谁让我们的项目一直是vs2003和sql2000做的。NND,早该升级了。路过jerry的blog看到一篇介绍jquery不错的文章,所以顺便转过来自己以后可能能用到,多谢jerry了。他的blog地址:http://blog.csdn.net/xychen2008/archive/2007/04/10/1559763.aspx。
这个是他给出的第一个例子,不明白为什么大家都喜欢用hello world来开始第一端代码,我觉得用Hello human就挺不错的。哇哈哈。
不知道为啥提出jquery的大哥为啥用$来作为jquery的对象构造字符,是不是他做php开发的呵呵。上面的javascript是当我们点击文档中所有含有a标签的字符串时就会弹出hello world的对话框。$("a")是一个选择器,$本身表示一个jQuery类,所有$()事构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。注意jquery中的$("p")和$("#p")的区别,¥("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"
(<span id="p"></span>)的元素。
他的博客中分几部分来介绍了jQuery,首先是jquery核心部分m也就是几个最基本的函数。
第一个是$(expr)该函数是通过css选择器,xpath或html代码来匹配目标元素,所有的jQuery操作都是以此
此为基础.
例子:
html代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
使用jquery的javascript部分代码:
function jq(){
alert($("div > p").html());
}
运行效果是当点击jquery的时候会弹出一个显示two的对话框。
如果jquery得代码如下:
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
那么点击那个jquery时会在html的body中添加"<div><p>Hello</p></div>"的html。
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前: <p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($(document).find("div > p").html());
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容 function jq(){
$(document.body).background("black");
}运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前: <form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
$(form1.elements ).hide();
}运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子: $( function(){
$(document.body).background("black");
})运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前: <p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
var f = $("div");
alert($(f).find("p").html())
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前: <img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前: <p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("p").eq(1).html())
}运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前: <p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("p").get(1).innerHTML);
}运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前: <div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前: <img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("img").length);
}运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $("a").click(function() { alert("Hello world!"); }); }); <script>
这个是他给出的第一个例子,不明白为什么大家都喜欢用hello world来开始第一端代码,我觉得用Hello human就挺不错的。哇哈哈。
不知道为啥提出jquery的大哥为啥用$来作为jquery的对象构造字符,是不是他做php开发的呵呵。上面的javascript是当我们点击文档中所有含有a标签的字符串时就会弹出hello world的对话框。$("a")是一个选择器,$本身表示一个jQuery类,所有$()事构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。注意jquery中的$("p")和$("#p")的区别,¥("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"
(<span id="p"></span>)的元素。
他的博客中分几部分来介绍了jQuery,首先是jquery核心部分m也就是几个最基本的函数。
第一个是$(expr)该函数是通过css选择器,xpath或html代码来匹配目标元素,所有的jQuery操作都是以此
此为基础.
例子:
html代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
使用jquery的javascript部分代码:
function jq(){
alert($("div > p").html());
}
运行效果是当点击jquery的时候会弹出一个显示two的对话框。
如果jquery得代码如下:
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
那么点击那个jquery时会在html的body中添加"<div><p>Hello</p></div>"的html。
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前: <p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($(document).find("div > p").html());
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容 function jq(){
$(document.body).background("black");
}运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前: <form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
$(form1.elements ).hide();
}运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子: $( function(){
$(document.body).background("black");
})运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前: <p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
var f = $("div");
alert($(f).find("p").html())
}运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前: <img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前: <p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("p").eq(1).html())
}运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前: <p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("p").get(1).innerHTML);
}运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
index(obj)
说明:返回对象索引
参数:obj (Object): 要查找的对象
例子:
未执行jQuery前: <div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前: <img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>jQuery代码及功能: function jq(){
alert($("img").length);
}运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
相关文章推荐
- Jquery学习DOM--来自jerry的博客
- 学习jQuery的免费资源:电子书、视频、教程和博客
- 学习jquery的博客
- 学习jQuery的免费资源:电子书、视频、教程和博客
- Doubango与编译学习相关资料----来自好友王阳(他的博客http://blog.163.com/dream_burgeon/blog/static/235007155201469104240)
- jQuery学习——张子秋的博客
- springMVC、spring3学习资料目录——来自开涛额博客
- 学习jQuery的免费资源:电子书、视频、教程和博客
- ubuntu第二、三天(时光穿梭机)--学习资源来自廖雪峰博客
- 学习jQuery的免费资源:电子书、视频、教程和博客
- 我的第一篇博客,记录学习jQuery的笔记
- 推荐一个不错的jquery学习博客
- 学习jQuery的免费资源:电子书、视频、教程和博客
- 为什么优秀的程序员既懒又笨(来自IT技术博客大学习)
- 前端开发学习之道:jQuery 1.7.1API手册
- 几个非常有用的iOS学习博客链接
- 从零开始学习jQuery (五) 事件与事件对象
- JQuery学习笔记-Hello world
- JQuery学习笔记-表单选择器