优秀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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
JQuery的一些小应用收集
Mar 27 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
JavaScript数组前面插入元素的方法
Apr 06 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
Nov 24 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
一个颜色轮换的简单例子
2006/10/09 PHP
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
python进阶教程之异常处理
2014/08/30 Python
python中的错误处理
2016/04/10 Python
spyder常用快捷键(分享)
2017/07/19 Python
django中模板的html自动转意方法
2018/05/27 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
Python操作qml对象过程详解
2019/09/26 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
在django中使用post方法时,需要增加csrftoken的例子
2020/03/13 Python
keras实现多种分类网络的方式
2020/06/11 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
大型主题婚礼活动策划方案
2014/09/15 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
毕业生个人自荐书
2015/03/05 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
springboot新建项目pom.xml文件第一行报错的解决
2022/01/18 Java/Android