jQuery使用手册(1)
jQuery使用手册(1)
jQuery使用手册
翻译整理: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/)
下载完成后先加载到文档中,然后我们来看个简单的例子!
$(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前:
< div >
< p > two </ p >
</ div >
< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
alert($( " div > p " ).html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
$( " <div><p>Hello</p></div> " ).appendTo( " body " );
}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
< div >
< p > two </ p >
</ div >< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
alert($(document).find( " div > p " ).html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
$(document.body).background( " black " );
}
运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
< input type ="text" name ="textfield" >
< input type ="submit" name ="Submit" value ="提交" >
</ form >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
$(form1.elements ).hide();
}
运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
$(fn)
说明:$(document).ready()的一个速记方式,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
参数:fn (Function):当文档载入时执行的函数!
例子:
$(document.body).background( " black " );
})
运行:当文档载入时背景变成黑色,相当于onLoad。
$(obj)
说明:复制一个jQuery对象,
参数:obj (jQuery): 要复制的jQuery对象
例子:
未执行jQuery前:
< div >
< p > two </ p >
</ div >
< p > three </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
var f = $( " div " );
alert($(f).find( " p " ).html())
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
each(fn)
说明:将函数作用于所有匹配的对象上
参数:fn (Function): 需要执行的函数
例子:
未执行jQuery前:
< img src ="1.jpg" />
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
$( " img " ).each( function (){
this .src = " 2.jpg " ; });
}
运行:当点击id为test的元素时,img标签的src都变成了2.jpg。
eq(pos)
说明:减少匹配对象到一个单独得dom元素
参数:pos (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
alert($( " p " ).eq( 1 ).html())
}
运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容
get() get(num)
说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
参数:get (Number): 期望限制的索引,从0 开始
例子:
未执行jQuery前:
< p > So is this </ p >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
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 ="test2" ></ div >
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
alert($( " div " ).index(document.getElementById('test1')));
alert($( " div " ).index(document.getElementById('test2')));
}
运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
size() Length
说明:当前匹配对象的数量,两者等价
例子:
未执行jQuery前:
< img src ="test2.jpg" />
< a href ="#" id ="test" onClick ="jq()" > jQuery </ a >
jQuery代码及功能:
alert($( " img " ).length);
}
运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
jQuery使用手册(1)相关推荐
- jQuery在线手册
jQuery在线手册:http://t.mb5u.com/jquery/ 转载于:https://www.cnblogs.com/hanxuming/p/5942705.html
- Jquery使用手册3--css操作 作者:choy
jQuery使用手册 三:CSS操作 传统javascript对css的操作相当繁琐,比如<div id="a" style="background:b ...
- JavaScript和jQuery实战手册(原书第2版)
<JavaScript和jQuery实战手册(原书第2版)> 基本信息 原书名:avaScript & jQuery: The Missing Manual,Second Edit ...
- JQuery入门手册(学习笔记整理)
JQuery入门手册 基础 学习重点 技术介绍 jQuery使用 jQuery对象与DOM对象的区别 jQuery对象与DOM对象转换 选择器 选择器语法 基本选择器 层级选择器 input标签选择器 ...
- jquery操作手册
Jquery操作手册Jquery简介? 什么是jquery? 1. 是一个javaScript函数库.其实就是javascript库,由javascript写的函数封装成一个库. jQuery是一个J ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
- jQuery使用手册(4)
jQuery使用手册(4) jQuery使用手册 六:事件处理 hover(Function, Function) 当鼠标mov ...
- jQuery使用手册(3)
jQuery使用手册(3) jQuery使用手册 三:CSS操作 传统javascript对css的操作相当繁琐,比如<div id="a" style=&quo ...
- jQuery中文手册, jQuery API, jQuery UI, 分页插件 下载
jQuery 库最新版下载 : jquery-1.3.2 最新版.rar 中文手册下载地址(超酷版): jQuery1.2API.rar API 文档下载(最新1.32CHM版): jQueryAPI ...
最新文章
- 《深度学习革命》作者:GAN令我惊艳,现在的人们对AI操之过急了
- 嵌入式技术在智能电网的应用
- 从零开始搭建Android框架系列
- 防止网络请求(或其他回调)引用,从而造成内存泄漏
- python 打开网页 并填表单_Windows下使用python3 + selenium.webdriver功能实现自动填写网页表单功能...
- const 常量_var,let,const 的区别?
- requirejs页面刷新失效js报错问题解决方案
- 金属零件图像数据集_如何使用包装零件来开发易于维护的数据仓库解决方案
- bzoj3545: [ONTAK2010]Peaks 主席树合并
- Django 结构及处理流程分析
- 防止第二代身份证泄露隐私
- c语言课设作业 计算器,C语言课程设计-计算器设计
- 俄罗斯方块代码 java_JAVA语言俄罗斯方块代码实现
- Java 菜鸟入门 | Java中的静态变量、实例变量、局部变量和成员变量
- 树莓派Raspberrypi安装Kali Linux保姆教程(通过树莓派安装ARM Kali教程)
- 苹果4s怎么越狱教程_ios9.2怎么越狱 iOS9.2.1完美越狱教程【详解】
- 5.larval 验证规则
- vs2019选定内容没有属性页_【灌篮高手】新版本倒计时——球服属性自由更改?!...
- SDL库及SDL_draw库的安装、SDL库的使用
- 2w 字长文爆肝 JVM 经典面试题!太顶了!
热门文章
- TcaplusDB君 · 行业新闻汇编(8月9日)
- 引入css的方式的四种方式,引入css的四种方式
- jsoup之下载图片和小说
- HTML引入外部css失效解决
- 【新2023Q2模拟题JAVA】华为OD机试 - 基站维修工程师
- 小程序之列表点赞功能的实现
- 12306铁路售票系统核心开源中间件Geode介绍
- DHTMLX Gantt:拥有高级资源计算逻辑,助力高效甘特图解决方案
- 蚂蚁分类信息系统Nginx伪静态规则支持二级域名设置方法
- 荣耀平板6鸿蒙os,华为发布多款4G手机及平板,荣耀多款老机型将适配鸿蒙系统...