优秀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 相关文章推荐
用js+xml自动生成表格的东西
Dec 21 Javascript
asp 的 分词实现代码
May 24 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
浅析Vue 生命周期
Jun 21 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
vant中的toast层级改变操作
Nov 04 Javascript
token 机制和实现方式
Dec 15 Javascript
用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(8) php 数组
2010/03/05 PHP
PHP中::、-&amp;gt;、self、$this几种操作符的区别介绍
2013/04/24 PHP
php笔记之:php函数range() round()和list()的使用说明
2013/04/26 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
2015/02/23 Javascript
JQuery中clone方法复制节点
2015/05/18 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
微信小程序仿通讯录功能
2020/04/09 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[01:23:59]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 VP vs Secret
2018/04/03 DOTA
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
浅谈编码,解码,乱码的问题
2016/12/30 Python
Python3 处理JSON的实例详解
2017/10/29 Python
pandas string转dataframe的方法
2018/04/11 Python
Python IDLE清空窗口的实例
2018/06/25 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
浅析Python四种数据类型
2018/09/26 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python实现键盘输入的实操方法
2019/07/16 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
信息员培训方案
2014/06/12 职场文书
拉拉队口号
2014/06/16 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js