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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
JS 参数传递的实际应用代码分析
Sep 13 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
bootstrap组件之按钮式下拉菜单小结
Jan 19 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
Jun 17 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
MYSQL数据库初学者使用指南
2006/11/16 PHP
php 用sock技术发送邮件的函数
2007/07/21 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
解决vue热替换失效的根本原因
2018/09/19 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
Python数据类型学习笔记
2016/01/13 Python
对Python 3.2 迭代器的next函数实例讲解
2018/10/18 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python中def是做什么的
2020/06/10 Python
在keras中实现查看其训练loss值
2020/06/16 Python
python3.4中清屏的处理方法
2020/07/06 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
.NET笔试题(20个问题)
2016/02/02 面试题
电钳专业个人求职信
2014/01/04 职场文书
卖车协议书
2014/04/21 职场文书
三年级班级文化建设方案
2014/05/04 职场文书
银行进社区活动总结
2014/07/07 职场文书
《藏戏》教学反思
2016/02/23 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python