邂逅jQuery
jQuery是一个流行的JavaScript库,提供了HTML操作,CSS操作,事件,动画,Ajax和常用插件,极大地简化了JavaScript的开发.
可以从jquery.com下载jQuery库, 包含压缩版本和开发者版本.
在HTML文件中添加script标签来使用jQuery:<script src="jquery-1.10.2.min.js"></script>
如果不想下载并保存jQuery可以使用内容分发网络(CDN)来获得jQuery:
baidu:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">sina:
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">google:
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">ms:
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
使用CDN获得jQuery可以利用其缓存加快速度.
HTML
选择器
jQuery选择器用于选择HTML元素,所有选择器均以$开头.
元素选择器用于根据元素名(TagName)来选择元素:
$('p'); //选择所有<p>元素
id选择器用于根据id选择元素:
$('#p1'); //选择id='p1'的元素
class选择器根据class选择元素:
$('.p'); //选择class='p'的元素
特殊选择器:
$(document)选择文档节点$('*')选择所有节点
上述基本选择器与DOM接口的三个常用的getElement方法类似.
选择器还有更强大的表达能力:
选择class='intro'的<p>元素:
$("p.intro");
选择带有href属性的元素:
$('[href]')
选择href='url'的<a>元素:
$('a[href='url']')
选择href!='url'的<a>元素:
$('a[href!='url']')
选择第一个<p>元素:
$('p:first')
选择<ul>元素中第一个<li>元素:
$('ul li:first')
元素访问与操作
html()
html用于访问和修改节点的HTML内容,拥有3种调用方式:
html()以String返回节点的HTML内容html(htmlString)设置节点的HTML内容html(function(index,html){})使用回调函数替换HTML内容
当选择器选择了多个元素时,html()只会处理其中第一个元素.
<!DOCTYPE html>
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<p id="p1">Hello World!</p>
<script type="text/javascript">
p = $('#p1');
alert(p.html());
p.html('Hello World from jQuery!');
</script>
</body>
</html>
alert:
Hello World!
HTML:
<p id="p1">Hello World from jQuery!</p>
回调函数接受两个参数index和html,index代表当前节点在父节点子树中的索引从0开始, html代表当前节点的html内容, 参数返回值作为当前节点新的HTML内容进行更新.
<!DOCTYPE html>
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<div>
<p id="p1">Hello World!</p>
</div>
<script type="text/javascript">
p = $('#p1');
f = function(index, html) {
return 'paragraph ' + (index+1) + ': '+ html + '<br>By jQuery';
};
p.html(f);
</script>
</body>
</html>
HTML:
<p id="p1">paragraph 1: Hello World!<br>by jQuery</p>
text()
text()的三种调用与html()相同, 不同之处在于text()去除了子树中的HTML元素只返回文本内容.
当选择了多个元素时text()会将它们的文本内容合并为一个字符串.
使用text()更新文本内容时,此方法会将HTML标签进行转义, <被替换为<,>被替换为>.
我们将上述示例改用text()实现:
<!DOCTYPE html>
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<div>
<p id="p1">Hello World!</p>
<p id="p2">Hello jQuery</p>
</div>
<script type="text/javascript">
p = $('p');
alert(p.text())
f = function(index, html) {
return 'paragraph ' + (index+1) + ': '+ html + '<br>by jQuery';
};
p.text(f);
</script>
</body>
</html>
alert:
Hello World!Hello jQuery!
HTML:
<p id="p1">paragraph 1: Hello World!<br>by jQuery</p>
<p id="p2">paragraph 2: Hello jQuery<br>by jQuery</p>
val()
val()用于访问或操作表单的输入,拥有与html()类似的三种调用.
对于text,password, hidden, select型的输入框, val()可以访问或操作其输入的值:
<!DOCTYPE html>
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<form>
<label>username: <input id="username" type="text"/></label>
<br><br>
<label>password:<input id="password" type="password"/></label>
<button id="btn">Click Me!</button>
</form>
<script type="text/javascript">
input = $('#username').val('finley')
$('#btn').click(function() {
alert($('#username').val())
});
</script>
</body>
</html>
attr()
attr()同样拥有3种调用调用,与html()不同的是它的第一个参数为指定属性名的字符串:
<!DOCTYPE html>
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<a id="a1" href="http://www.baidu.com">www.baidu.com</a>
<br>
<a id="a2" href="http://www.cnblogs.com">www.cnblogs.com</a>
<script type="text/javascript">
alert($('#a1').attr("href"));
$('#a1').attr("href", "https://www.google.com.hk")
$('#a2').attr("href", function(index, html) {
return html + "/Finley/";
});
</script>
</body>
</html>
添加/删除元素
jQuery提供了4个常用的添加HTML节点的方法:
append(): 在被选元素的结尾插入内容prepend()在被选元素的开头插入内容after()在被选元素之后插入内容before()在被选元素之前插入内容
插入的内容可以是HTML源码,jQuery或DOM创建的元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<p>Hello World!</p>
<button id="append">Append</button>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#append").click(function(){
// using HTML
var txt1="<p>something</p>";
// using jQuery
var txt2=$("<p></p>").text("very");
// using DOM
var txt3=document.createElement("p");
txt3.innerHTML="exciting";
$("body").append(txt1,txt2,txt3);
}); // using jQuery
var txt2=$("<p></p>").text("very");
// using DOM
var txt3=document.createElement("p");
txt3.innerHTML="exciting";
$("body").append(txt1,txt2,txt3);
});
});
</script>
</body>
</html>
});
</script>
</body>
</html>
remove和empty方法是jQuery提供的删除元素的方法.
删除节点及其子树:
$(selector).remove()
清空节点的子树:
$(selector).empty();
事件
jQuery提供了基于回调机制的事件,上文的这个示例展示了如何为按钮点击事件编写响应:
<html>
<body>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<form>
<label>username: <input id="username" type="text"/></label>
<br><br>
<label>password:<input id="password" type="password"/></label>
<button id="btn">Click Me!</button>
</form>
<script type="text/javascript">
$('#btn').click(function() {
alert($('#username').val())
});
</script>
</body>
</html>
jQuery提供了常用的DOM事件:
鼠标事件
单击
click()双击
dbclick()移入
mouseenter移出
mouseleave
键盘事件: 按键过程中依次触发
按下
keydown()已按下
keypress()松开
keyup()
表单事件
提交
submit()改变
change()获得焦点
focus()
文档窗口事件
文档就绪
$(document).ready()大小改变
resize()文本被选中
select()
为了避免在文档加载完成前调用jQuery造成错误(比如试图获得未加载图片的大小), 通常将所有脚本写入$(document).ready()的回调函数.
Animation
封装效果
jQuery封装了常用动画效果:
隐藏
hide()显示
show()隐藏/显示切换
toggle()淡入
fadeIn()淡出
fadeOut()淡入/淡出切换
fadeToggle()渐变
fadeTo(percent)上滑
slideUp()下滑
slideDown()上滑/下滑切换
slideToggle()
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<p>Hello World!</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
<br><hr>
<button id="fadein">Fade In</button>
<button id="fadeout">Fade Out</button>
<button id="fadetoggle">Fade Toggle</button>
<br><hr>
<button id="slideup">Slide Up</button>
<button id="slidedown">Slide Down</button>
<button id="slidetoggle">Slide Toggle</button>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#toggle").click(function(){
$("p").toggle();
});
$("#fadein").click(function(){
$("p").fadeIn();
});
$("#fadeout").click(function(){
$("p").fadeOut();
});
$("#fadetoggle").click(function(){
$("p").fadeToggle();
});
$("#slideup").click(function(){
$("p").slideUp();
});
$("#slidedown").click(function(){
$("p").slideDown();
});
$("#slidetoggle").click(function(){
$("p").slideToggle();
});
});
</script>
</body>
</html>
animate
jquery提供的animate方法可以定义更复杂的动画效果:
$(selector).animate({params},speed,callback);
speed参数指定动画速度,取值包括预定义值"slow","fast"或以毫秒为单位的持续时间, 为可选参数.
callback是动画结束时回调的函数,为可选参数.
params参数是包含动画参数的Object:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<p id="p1">Hello World!</p>
<button id="animate">animate</button>
</div>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#animate").click(function(){
$("#p1").animate({
left:'250px',
opacity:'0.5',
height:'+=10px',
fontSize: '+=1em'
});
});
});
</script>
</body>
</html>
params参数可以对除了颜色参数之外几乎所有CSS参数进行操作.
left:'250px'设定left属性动画结束时最终值为250px
height:'+=10px'设定height属性动画结束时比当前增加10px
Js的命名规则不支持CSS中font-size这样的标识符,需要将其改为驼峰命名fontSize.
若连续调用多次animate()方法,上一个动画完成后才会开始下一个动画,形成动画队列.
stop()方法可以停止动画的执行,包括animate和封装动画.
$(selector).stop(stopAll,goToEnd);
stopAll参数为true时停止动画队列中所有动画执行,为false时仅停止当前动画, 默认为false.
goToEnd参数为true时立即完成当前动画,为false时维持动画中断时的状态, 默认为false.
Utilities
JSON是js定义的一种轻量数据交换格式, jQuery.parseJSON(jsonStr);可以将json字符串转换为js对象.
jQuery没有集成json编码工具,可以使用jQuery json插件完成编码功能$.toJSON(obj).
使用该插件请在html中导入<script src="dist/jquery.json.min.js"></script>
jQuery插件包括校验器,自动补全,控件和动画效果等, 更多插件请参见plugins.jquery.com
邂逅jQuery的更多相关文章
- thinkjs与Fine Uploader的邂逅
最近在做一个内部系统,需要一个无刷新的上传功能,找了许久,发现了一个好用的上传工具-Fine Uploader,网上也有不少关于它的介绍,对我有不少的启发,结合我的使用场景简单的介绍一下它与t ...
- 与TypeScript的一场美丽邂逅
TypeScript(一)前言:当你点开这篇文章时,我相信你已经在很多地方都已经听说过或者见过TypeScript了.但是可能对TypeScript依然有很多问号:TypeScript到底是什么?为什 ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- 用delegate实现.NET应用程序的同步函数的异步调用－.NET多线程编程实践之一
在C++中有2种类型的线程:UI Thread和Worker Thread,前者是基于用户界面的有消息循环的线程.后者是没有用户界面的侧重于大时空运算的线程.直接调用Windows相关线程及同步对象的 ...
- 在Delphi中处理word文档与数据库的互联
在Delphi中处理word文档与数据库的互联 ---- 目前,Delphi被越来越多的人选中作为MIS系统开发中的前台工具.在以Delphi为前台,一些大型数据库为后台的MIS系统中,图形的处理不可 ...
- jQuery---ajax---error函数及其参数详解
使用jquery的ajax方法向服务器发送请求的时候,常常需要使用到error函数进行错误信息的处理,本文详细说明了ajax中error函数和函数中各个参数的用法. 一般error函数返回的参数有三个 ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
- pyqt5 Button.click 报错：argument 1 has unexpected type 'NoneType'
如上所示,在括号中,添加‘lambda:’,就可以成功运行,不知道为啥. 参考:https://blog.csdn.net/flhsxyz/article/details/79220936?utm_s ...
- spring cloud学习(五) 配置中心
Spring Cloud Config为服务端和客户端提供了分布式系统的外部化配置支持.配置服务中心采用Git的方式存储配置文件,因此我们很容易部署修改,有助于对环境配置进行版本管理. 一.配置中心 ...
- Spring中使用StandardServletMultipartResolver进行文件上传
从Spring3.1开始,Spring提供了两个MultipartResolver的实现用于处理multipart请求,分别是:CommonsMultipartResolver和StandardSer ...
- Swift 里 Set（四）Testing for Membership
即contains操作 /// - Parameter member: An element to look for in the set. /// - Returns: `true` if `mem ...
- Django自带的后台管理样式找不到的问题。
今天发现自己用uwsgi,nginx部署完服务器后,又想用自带的Django服务器进行后台管理调试,发现Django后代管理页面样式找不到.又查看了路径发现是正确的.网上看了很多方法.最后才发现自己把 ...
- Go指南练习 rot13Reader
题目: 练习:rot13Reader 有种常见的模式是一个 io.Reader 包装另一个 io.Reader,然后通过某种方式修改其数据流. 例如,gzip.NewReader 函数接受一个 io. ...