优秀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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
javascript匿名函数实例分析
Nov 18 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
vue-cli项目修改文件热重载失效的解决方法
Sep 19 Javascript
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
用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
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
用JavaScript事件串连执行多个处理过程的方法
2007/03/09 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
jquery动态添加option示例
2013/12/30 Javascript
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
Python的lambda匿名函数的简单介绍
2013/04/25 Python
python中while循环语句用法简单实例
2015/05/07 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python的常见矩阵运算(小结)
2019/08/07 Python
如何利用Python开发一个简单的猜数字游戏
2019/09/22 Python
Python日志处理模块logging用法解析
2020/05/19 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python如何停止递归
2020/09/09 Python
python中四舍五入的正确打开方式
2021/01/18 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
delegate与普通函数的区别
2014/01/22 面试题