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弹出层代码
Sep 24 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
Dec 26 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
JS模拟实现Select效果代码
Sep 24 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
使用 vue-i18n 切换中英文效果
May 23 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
onpropertypchange
2006/07/01 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
javascript创建createXmlHttpRequest对象示例代码
2014/02/10 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
手机端转换rem适应
2017/04/01 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
vuejs实现下拉框菜单选择
2020/10/23 Javascript
[22:59]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python 合并文件的具体实例
2013/08/08 Python
利用python代码写的12306订票代码
2015/12/20 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
法国低价在线宠物商店:bitiba.fr
2020/07/03 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
可靠的数据流传输TCP
2016/03/15 面试题
服务标语大全
2014/06/18 职场文书
员工工作表现自我评价
2015/03/06 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
关于MySQL中explain工具的使用
2023/05/08 MySQL