邂逅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'); //选择所有
元素
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()只会处理其中第一个元素.
Hello World!
alert:
Hello World!
HTML:
Hello World from jQuery!
回调函数接受两个参数index和html,index代表当前节点在父节点子树中的索引从0开始, html代表当前节点的html内容, 参数返回值作为当前节点新的HTML内容进行更新.
Hello World!
HTML:
paragraph 1: Hello World!
by jQuery
text()
text()的三种调用与html()相同, 不同之处在于text()去除了子树中的HTML元素只返回文本内容.
当选择了多个元素时text()会将它们的文本内容合并为一个字符串.
使用text()更新文本内容时,此方法会将HTML标签进行转义, <被替换为<,>被替换为>.
我们将上述示例改用text()实现:
Hello World!
Hello jQuery
alert:
Hello World!Hello jQuery!
HTML:
paragraph 1: Hello World!<br>by jQuery
paragraph 2: Hello jQuery<br>by jQuery
val()
val()用于访问或操作表单的输入,拥有与html()类似的三种调用.
对于text,password, hidden, select型的输入框, val()可以访问或操作其输入的值:
attr()
attr()同样拥有3种调用调用,与html()不同的是它的第一个参数为指定属性名的字符串:
添加/删除元素
jQuery提供了4个常用的添加HTML节点的方法:
-
append(): 在被选元素的结尾插入内容 -
prepend()在被选元素的开头插入内容 -
after()在被选元素之后插入内容 -
before()在被选元素之前插入内容
插入的内容可以是HTML源码,jQuery或DOM创建的元素:
Hello World!
});
remove和empty方法是jQuery提供的删除元素的方法.
删除节点及其子树:
$(selector).remove()
清空节点的子树:
$(selector).empty();
事件
jQuery提供了基于回调机制的事件,上文的这个示例展示了如何为按钮点击事件编写响应:
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()
示例:
Hello World!
animate
jquery提供的animate方法可以定义更复杂的动画效果:
$(selector).animate({params},speed,callback);
speed参数指定动画速度,取值包括预定义值"slow","fast"或以毫秒为单位的持续时间, 为可选参数.
callback是动画结束时回调的函数,为可选参数.
params参数是包含动画参数的Object:
Hello World!
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
浙公网安备 33010602011771号