jQuery使用手册之一


Posted in Javascript onMarch 24, 2007

翻译整理:Young.J
官方网站:
http://jquery.com

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

   下载完成后先加载到文档中,然后我们来看个简单的例子!

<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前:

jQuery使用手册之一<p>one</p>
jQuery使用手册之一
<div>
jQuery使用手册之一     
<p>two</p>
jQuery使用手册之一
</div>
    <
p>three</p> 
    <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>
<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前:
jQuery使用手册之一<form id="form1">
jQuery使用手册之一     
<input type="text" name="textfield">
jQuery使用手册之一     
<input type="submit" name="Submit" value="提交">
jQuery使用手册之一
</form>
jQuery使用手册之一
<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>
<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"/>
<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前:

jQuery使用手册之一<p>This is just a test.</p>
jQuery使用手册之一
<p>So is this</p>
jQuery使用手册之一
<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>
<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>
<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"/>
<href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
    alert($(
"img").length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象

Javascript 相关文章推荐
原生javascript兼容性测试实例
Jul 01 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery动画与特效详解
Feb 01 Javascript
理解JavaScript原型链
Oct 25 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
Bootstrap实现的标签页内容切换显示效果示例
May 25 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
Sep 04 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Vue.js实现tab切换效果
Jul 24 Javascript
5 cool javascript apps
Mar 24 #Javascript
用JQuery 实现的自定义对话框
Mar 24 #Javascript
JQuery 简便实现页面元素数据验证功能
Mar 24 #Javascript
AutoSave/自动存储功能实现
Mar 24 #Javascript
用 javascript 实现的点击复制代码
Mar 24 #Javascript
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 #Javascript
用js实现的仿sohu博客更换页面风格(简单版)
Mar 22 #Javascript
You might like
php类的定义与继承用法实例
2015/07/07 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JavaScript对象数组的排序处理方法
2015/10/21 Javascript
javascript字符串函数汇总
2015/12/06 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
详解http访问解析流程原理
2017/10/18 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python 列表理解及使用方法
2017/10/27 Python
python 日期操作类代码
2018/05/05 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
浅谈Django的缓存机制
2018/08/23 Python
python匿名函数的使用方法解析
2019/10/10 Python
python语言中有算法吗
2020/06/16 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
澳大利亚便宜的家庭购物网站:CrazySales
2018/02/06 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
借款协议书范本
2014/04/22 职场文书
专题组织生活会方案
2014/06/15 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书
投资申请报告
2015/05/19 职场文书