1、jQuery介绍(www.jquery.org)
jQuery是一个js框架(.js文件),它使用选择器查找要操作的节点,并且将查找到的节点封装成一个jQuery对象,然后调用jQuery对象的属性或者方法来实现对底层节点的操作。这样做的目的是:解决浏览器的兼容性问题,另外,代码会得到简化。
2、一个简单的例子
jQuery编程的步骤:
第一步,使用选择器找到要操作的dom对象,该dom对象会被封装成jQuery对象。
第二步,通过调用jQuery对象的方法或者属性来操作底层被封装的dom对象。
=============================================
//prototype的使用
<scripttype="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<scripttype="text/javascript">
functionf1(){
varobj = $('d1');
obj.innerHTML='hello java';
}
<div id="d1"οnclick="f1();">Click me1</div>
//jQuery的$函数会覆盖prototype的$函数
<scripttype="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<scripttype="text/javascript" src="js/jquery-1.4.3.js"></script>
function f1(){
var$obj = $('#d1');
$obj.html('hellojava');
}
<div id="d1"οnclick="f1();">Click me1</div>
========================================================
3、dom对象与jQuery对象之间的转换
(1)dom对象 --- > jQuery对象
$(dom对象)
(2)jQuery对象 ---> dom对象
$obj.get(0)或者$obj.get()[0]
4、同时使用prototype和jQuery
使用jQuery.noConflict()将 $函数改名。
5、jQuery选择器
(1)什么是jQuery选择器
借鉴了css选择器的语法,作用是查找要操作的节点(dom对象)。
(2)选择器的使用
1)基本选择器 selector/s1.html
#id
.class
element
selector1,select2..selectn
*
2)层次选择器 selector/s2.html
select1select2
select1>select2
select1+select2
select1~select2
3)过滤选择器
<1>基本过滤选择器 selector /s3.html
:first
:last
:not(selector)
:even
:odd
:eq(index)
:gt(index)
:lt(index)
<2>内容过滤选择器 selector/ s4.html
:contains(text)匹配包含给定文本的元素
:empty匹配所有不包含子元素或者文本的空元素
:has(selector)匹配含有选择器所匹配的元素的元素
:parent匹配含有子元素或者文本的元素
<3>可见性过滤选择器 selector/s5.html
:hidden匹配所有不可见元素,或者type为hidden的元素
:visible匹配所有的可见元素
<4>属性过滤选择器 selector / s6.html
[attribute]
[attribute=value]
[attribute!=value]
<5>子元素过滤选择器 selector / s7.html
:nth-child(index/even/odd) //index下标从1开始
<6>表单对象属性过滤选择器
:enabled
:disabled
:checked
:selected
4)、表单选择器
:input
:text
:pasword
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
6、dom操作
1)查询 dom / d1.html
通过选择器,找到某个节点之后,可以查询节点的html内容、文本内容、值以及属性。
html():html内容 相当于innerHTML属性
text():文本内容 相当于innerText属性
val():值 相当于value属性
attr(属性名):读取某个属性的值
除此之外,这四个方法还可以设置对应的值。
2)创建 dom / d2.html
$(html内容);
3)插入节点
append():向每个匹配的元素内部追加内容
prepend():向每个匹配的元素内部前置内容
after():在每个匹配的元素之后插入内容
before():在每个匹配的元素之前插入内容
4)删除节点 dom / d3.html
remove():删除
remove(selector)
empty():清空节点
5)如何将js代码与html分开 dom/d4.html,d5.html
6)复制节点 dom / d6.html
clone()
clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
7)属性操作
读取:attr('');
设置: attr('','') 或者一次
设置多个 attr({"":"","":""});
比如 $obj.attr({'id':'d1','class':'s1'});
删除:removeAttr('')
8)样式操作 dom / d7.html
获取和设置: attr("class","")或者attr('style':'');
追加:addClass('')
移除:removeClass('')
或者removeClass('s1s2')
或者removeClass()//会删除所有样式
切换样式:toggleClass,有该样式,就删除,没有,就添加。
是否有某个样式 hasClass('')
读取css('')
设置css('','')或者css({'':'','':''})//设置多个样式
9)遍历节点(可添加选择器)
children()/chidren(selector):只考虑子元素,不考虑其它后代元素。
next()/next(selector):下一个兄弟
prev()/prev(selector):上一个兄弟
siblings()/siblings(selector):其他兄弟
find(selector):从当前节点开始查找所有的后代(满足selector)
parent():父节点
一、事件处理
1、事件绑订 event / e1.html
bind(type,fn)
2、绑订方式的简写形式
click(function(){
});
3、合成事件 event/ e2.html e3.html
hover(enter,leave): 模拟光标悬停事件
toggle(fn1,fn2...):模拟鼠标连续单击事件
4、事件冒泡 even / e4.html, e5.html
(1)什么是事件冒泡:
子节点产生的事件会依次向上抛给父节点
(2)获得事件对象 event / e6.html
只需要给事件处理函数添加一个任意变量即可,比如e。
e不是真正的事件对象,而是对底层的事件对象的一个封装。
click(function(e){
});
(3)停止冒泡 event / e7.html
event.stopPropagation()
(4)停止默认行为 event / e8.html
event.preventDefault()
5、事件对象的属性 event / e9.html
event.type:事件类型
event.target:返回事件源(是dom对象!!!)
event.pageX/pageY: 点击坐标
6、模拟操作 event / e10.html
二、动画
1、show() /hide(): animate / a1.html
作用:通过同时改变元素的宽度和高度来实现显示和隐藏
用法:
show(速度,[回调函数]);
速度可以使用"normal","fast","slow",也可以使用毫秒数。回调函数会在整个动画执行完毕之后执行。
2、slideUp() slideDown() animate / a1.html
作用:通过改变元素的高度来实现显示和隐藏
用法同上。
3、fadeIn()fadeOut() animate / a2.html
作用:通过改变元素的不透明度来实现显示和隐藏
用法同上。
4、自定义动画
animate(params,speed,[callback]) animate /a3.html
params:是一个javascript对象,描述的是动画执行结束时的样式。
speed:速度,单位是毫秒。
callback:回调函数,会在动画执行完毕之后执行。
三、类数组的操作
类数组:指的是jQuery选择器会将查找到的所有的dom对象封装成一个jQuery对象,将这些dom对象称为类数组。
1)length属性:获得jQuery对象包含的dom对象的个数。
2)each(fn(i)): array / a1.html
循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jquery对象。
3)eq(index):返回index+1位置处的jquery对象
4)index(obj):返回下标,其中obj可以是dom对象或者jquery对象。
5)get():返回dom对象组成的数组
6)get(index):返回index+1个dom对象。
jquery对ajax的支持
1、三个方法
(1)load方法
作用:将服务器返回的数据直接添加到符合要求的
dom对象上,相当于 obj.innerHTML = 服务器返回的数据。
用法:
$obj.load(url,[请求参数]);
url:请求地址
请求参数:
第一种形式:请求字符串,比如: 'username=zs&age=22'
第二种形式:对象,比如 {'username':'zs','age':22}
注意:
a,load方法如果没有参数,会使用get方式发请求。如果有参数,会使用post方式发请求。
b,如果有中文参数值,load方法已经帮我们做了编码处理。
(2)$.get方法
作用:向服务器发送get请求
用法:
$.get(url,[data],[callback],[type]):
url:请求地址
data:请求参数,形式同上。
callback:回调函数,可以通过该函数来处理服务器返回的数据。
callback格式:function(data,statusText),其中,data可以获得服务器返回的数据,statusText是一个简单的字符串,描述服务器处理的状态。
type:服务器返回的数据类型,类型可以是:
html: 返回的是html内容。
text:返回的是text。
json:返回的是json字符串
xml:返回的是dom兼容的xml对象
script:返回的javascript
$.post()格式同上。
练习:使用$.get或者$.post方法完成“商品热卖”。
(3)$.ajax(options):options是一个形如
{key1:value1,key2,value2...}的js对象,用于指定发送请求的选项。
选项参数如下:
url(string):请求地址
type(string):GET/POST
data(object/string):发送到服务器的数据
dataType(string):预期服务器返回的数据类型
success(function):请求成功后调用的回调函数,有两个参数:
function(data,textStatus),其中,data是服务器返回的数据,textStatus 描述状态的字符串。
error(function):请求失败时调用的函数,有三个参数
function(xhr,textStatus,errorThrown),其中xhr是底层的ajax对象(XMLHttpRequest),textStatus,errorThrown这两个参数其中的一个可以获得底层的异常描述。
async:true(缺省)/false:当值为false时,发送同步请求。
2、两个辅助性的方法
1)serialize():
将jquery对象包含的表单或者表单控件转换成查询字符串。
2)serializeArray():转换为一个数组,每个数组元素形如{name:fieldName,value:fieldVal}的对象。序列化元素的作用,主要是用于ajax请求中,给data赋值。