优秀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学习笔记之获取当前目录的实现代码
Dec 14 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
利用a标签自动解析URL分析网址实例
Oct 20 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
解决Mac安装thrift因bison报错的问题
May 17 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
深入解析ES6中的promise
Nov 08 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
实用函数7
2007/11/08 PHP
PHP 网页过期时间的控制代码
2009/06/29 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
初识php MVC
2014/09/10 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
datagrid框架的删除添加与修改
2013/04/08 Javascript
js中生成map对象的方法
2014/01/09 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python中无限循环需要什么条件
2020/05/27 Python
python基于win32api实现键盘输入
2020/12/09 Python
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
丽笙酒店官方网站:Radisson Hotels
2019/05/07 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
群众路线剖析材料(四风问题)
2014/10/08 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
初中化学教学反思
2016/02/22 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js