优秀js开源框架-jQuery使用手册(1)


Posted in Javascript onMarch 10, 2007

 jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!
   下载地址:http://jquery.com

   下载完成后先加载到文档中,然后我们来看个简单的例子!
<script language="javascript" type="text/javascript">   
    $(document).ready(function(){
        $("a").click(function() {
        alert("Hello world!");
   });
});
<script>
     上边的效果是点击文档中所有a标签时将弹出对话框,$("a") 是一个jQuery选择器,$本身表示一个jQuery类,所有$()是构造一个jQuery对象,click()是这个对象的方法,同理$(document)也是一个jQuery对象,ready(fn)是$(document)的方法,表示当document全部下载完毕时执行函数。
     在进行下面内容之前我还要说明一点$("p")和$("#p")的区别,$("p")表示取所有p标签(<p></p>)的元素,$("#p")表示取id为"p"(<span  id="p"></span>)的元素.

我将从以下几个内容来讲解jQuery的使用:
1:核心部分
2:DOM操作
3:css操作
4:javascript处理
5:动态效果
6:event事件 
7:ajax支持 
8:插件程序

一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:

<p>one</p>
<div>
      <p>two</p>
</div>
    <p>three</p> 
    <a href="#" id="test" onClick="jq()" >jQuery</a>

jQuery代码及功能: 
function jq(){  
    alert($("div > p").html());  
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容 
function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”

$(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,表示找到两个匹配对象

Javascript 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
JQuery动画animate的stop方法使用详解
May 09 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
利用iscroll4实现轮播图效果实例代码
Jan 11 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
详解jquery和vue对比
Apr 16 jQuery
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
用JavaScript实现仿Windows关机效果
Mar 10 #Javascript
Javascript中的Split使用方法与技巧
Mar 09 #Javascript
用JavaScript事件串连执行多个处理过程的方法
Mar 09 #Javascript
一个不错的用JavaScript实现的UBB编码函数
Mar 09 #Javascript
B/S开发中常用javaScript技术与代码
Mar 09 #Javascript
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 #Javascript
超级兔子让浮动层消失的前因后果
Mar 09 #Javascript
You might like
php disk_free_space 返回目录可用空间
2010/05/10 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
基于jQuery实现表单提交验证
2014/11/24 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
深入理解nodejs中Express的中间件
2017/05/19 NodeJs
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python2和Python3的共存和切换使用
2019/04/12 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
英国汽车和货车租赁网站:Hertz英国
2016/09/02 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
请用用Java代码写一个堆栈
2012/01/26 面试题
C#怎么让一个窗口居中显示?
2015/10/20 面试题
现代化办公人员工作的自我评价
2013/10/16 职场文书
日语系毕业生推荐信
2013/11/11 职场文书
公路绿化方案
2014/05/12 职场文书
婚礼嘉宾致辞
2015/07/28 职场文书
三十年同学聚会致辞
2015/07/28 职场文书