JQUERY知识点Word下载.docx
《JQUERY知识点Word下载.docx》由会员分享，可在线阅读，更多相关《JQUERY知识点Word下载.docx（17页珍藏版）》请在冰豆网上搜索。
14.
15.
16.
17.
ocus（function（）{
18.
19.
Thisinputhasanamewhichendswith'
email'
."
20.
21.
22.
23.}）;
Widget组件选择器
除了插件的选择器之前，还有一些基于元素某些属性或位置的选择器。
下面让我们看看这些更为重要的选择器：
1.$（document）.ready（function（）{
2.
3.
how（）;
5.ss（"
color"
"
orange"
Thisisapassword!
13.ss（"
green"
15.over（function（）{
Thischeckboxisworking."
对树进行选择和转换
选择
就想树一样，网站结构中叶存在子与父。
在jQuery中，我们可以利用这一结构。
假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。
我们有三种可能的方案，如下：
1.$（"
#wrapper"
）.children（'
#main'
p'
）.css（"
2.$（"
）.children（）.children（'
3.$（"
#main"
利用children方法可以选择树中位于其他元素下的某个元素。
如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。
让我们看看第一个和第二个选择器直接的区别。
唯一的不同之处在于：
第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。
此处的关键在于：
在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。
添加元素
现在我们在树中添加元素。
这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：
4.<
ul>
<
li>
Dog<
/li>
Cat<
Frog<
12.<
/ul>
只是一些字符串，所以我们可以在JavaScript代码中这样写：
13.var
list=
\n"
+
;
现在我们要在html中某个地方添加字符串。
比如，在之前我们选择的p元素之后。
最后我们可以输入完整的代码，如下所示：
22.$（document）.ready（function（）{
23.
24.
var
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.$（"
）.append（list）;
35.
36.}）;
字面上我们将字符串附加到HTML中的<
/p>
，结果是这个列表显示在p元素之后。
移除元素
移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。
下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。
）.remove（）;
在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。
如果div下有一个列表，当我们移除该div时，div和列表都会被移除。
表面之下
jQuery类似只露出一角的冰山，在水面之下还有更多内容。
这一小结中，我们将向你展示某些表面之下的内容。
绑定（Bind）
绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。
这有点类似：
当用户单击此处时，调用该方法。
听起来很熟悉，对吗没错，我们经常这样做。
看看以下示例：
$（"
#id"
）.click（function（）{
Thatclickwasamazing!
11.}）;
上文中click（）方法在以下代码相对于wrapper：
12.$（document）.ready（function（）{
$（'
#id'
）.bind（'
click'
function
（）{
20.}）;
此外，使用unbind（）方法可以解除事件与元素的连接。
定义你自己的jQuery方法
目前我们看到了一些方法，如click、bind、hover等等，但是我们如何定义自己的方法如何使用$（’selector’）.mymethod（）这样的语句调用这些方法以下代码提供了这些问题的解决方案。
定义一个方法，显示一个元素的值。
1.lertVal（）;
回调（callback）是常用的解决方案
使用回调，我们可以在其他方法完成时执行某个方法。
你可以将回调方法看做对别人说：
但你做完时，给我电话，因为我要做我的那份工作。
不过现在的问题是：
如何使用回调
2.$（document）.ready（function（）{
myCallBack=
function（）{
I'
macallbackalert."
}
10.et（'
'
myCallBack）;
12.}）;
注意：
如果该函数包含参数，我们必须使用以下方式：
13.$（document）.ready（function（）{
$.get（'
function（）{
myCallBack（param1,param2）;
21.}）;
jQuery中为我们提供了很多有用的方法和属性，文章总结了一些常用的函数和方法。
个人认为在开发中会比较常用的，在实际的开发中我们可能会用到其他的方法和属性，文中只是个人认为新手初学jQuery时，必须掌握的一些方法。
51CTO推荐专题：
入门到精通jQuery开发手册
jQuery事件处理
ready（fn）
代码：
$（document）.ready（function（）{
.
}）；
作用：
它可以极大地提高web应用程序的响应速度。
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而%的JavaScript函数都需要在那一刻执行。
bind（type,[data],fn）
p"
）.bind（"
click"
function（）{
alert（$（this）.text（））;
为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
起到事件监听的作用。
toggle（fn,fn）
td"
）.toggle（
function（）{
$（this）.addClass（"
selected"
},
$（this）.removeClass（"
}
每次点击时切换要调用的函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。
挺有趣的一个函数，在动态实现某些功能的时候可能会用到。
（像click（）,focus（）,keydown（）这样的事件这里就不提了，那些都是开发中比较常用到的。
）
jQuery外观效果
addClass（class）和removeClass（class）
.stripetr"
）.mouseover（function（）{
over"
}）.mouseout（function（）{
}）
也可以写成：
）.mouseover（function（）{$（this）.addClass（"
）}）;
）.mouseout（function（）{$（this）.removeClass（"
为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码
css（name,value）
red"
很简单，就是在匹配的元素中，设置一个样式属性的值。
这个个人感觉和上面的addClass（class）有点类似。
slide（）,hide（）,fadeIn（）,fadeout（）,slideUp（）,slideDown（）
#btnShow"
function（event）{$（"
#divMsg"
）.show（）}）;
#btnHide"
function（evnet）{$（"
）.hide（）}）;
jQuery中提供的比较常用的几个动态效果的函数。
还可以添加参数：
show（speed,[callback]）以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
animate（params[,duration[,easing[,callback]]]）
制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。
查找筛选
map（callback）
HTML代码:
Values:
INPUTvalue=Johnname=name>
<
INPUTvalue=passwordname=password>
INPUTvalue="
Ahref="
name=url%22>
%22/<
/A>
FORM>
jQuery代码:
/FORM>
）.append（$（"
input"
）.map（function（）{
return$（this）.val（）;
}）.get（）.join（"
"
））;
结果:
[John,password,<
%3C/p"
>
%3C/p<
]
将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。
这都可以用'
$.map（）'
来方便的建立。
find（expr）
SPAN>
Hello<
/SPAN>
howareyou
jQuery代码:
）.find（"
span"
）
结果:
[<
搜索所有与指定表达式匹配的元素。
这个函数是找出正在处理的元素的后代元素的好方法。
文档处理
attr（key,value）
IMG>
img"
）.attr（"
src"
取得或设置匹配元素的属性值。
通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。
如果元素没有相应属性，则返回undefined。
在控制HTML标记上是必备的工具。
html（）/html（val）
DIV>
Hello
/DIV>
$（"
div"
）.html（）;
Hello
取得或设置匹配元素的html内容，同类型的方法还有text（）和val（）。
前者是取得所有匹配元素的内容。
，后者是获得匹配元素的当前值。
三者有相似的地方常用在内容的操作上。
wrap（html）
HTML代码:
TestParagraph.
）.wrap（"
DIVclass=wrap>
把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。
可以灵活的修改我们的DOM。
empty（）
Hello,Person<
andperson<
）.empty（）;
删除匹配的元素集合中所有的子节点。
Ajax处理
load（url,[data],[callback]）
url（String）:
待装入HTML网页网址。
data（Map）:
（可选）发送至服务器的key/value数据。
callback（Callback）:
（可选）载入成功时回调函数。
#feeds"
）.load（"
{limit:
25},function（）{
alert（"
Thelast25entriesinthefeedhavebeenloaded"
载入远程HTML文件代码并插入至DOM中。
这也是Jquery操作Ajax最常用最有效的方法。
serialize（）
Results:
SELECTname=single>
OPTIONselected>
Single<
/OPTION>
OPTION>
Single2<
/SELECT>
SELECTmultiplename=multiple>
Multiple<
Multiple2<
Multiple3<
INPUTvalue=check1type=checkboxname=check>
check1
INPUTvalue=check2type=checkboxname=check
checked="
checked"
check2
INPUTvalue=radio1type=radioname=radio
radio1
INPUTvalue=radio2type=radioname=radio>
radio2
#results"
）.append（"
TT>
+$（"
form"
）.serialize（）+"
/TT>
）;
序列化表格内容为字符串。
用于Ajax请求。
工具
（obj,callback）
$.each（[0,1,2],function（i,n）{
alert（"
Item#"
+i+"
:
"
+n）;
ach（{name:
John"
lang:
JS"
},function（i,n）{
Name:
Value:
et（）、$.post（）、$.ajax（）和表单插件（FormPlugin）5种方法分别重写“表单验证”的实例，并且进一步说明中文乱码的问题。
前面我们曾介绍过使用jQuery技巧来提高代码质量，因为jQuery非常容易上手并使用简单。
重写表单验证是程序员们经常做的事情，使用jQuery我们有五种方法可以选择，同时也能够解决乱码的问题。
首先，对编码知识进行简要的说明，请务必理解后再看下面的代码。
发送中文字符请求时，如果使用get方式，运行正常；
而使用post方法则会出现乱码。
这是由于异步对象XMLHttpRequest在处理返回的responseText的时候，是按UTF-8编码进行解码的。
如果你原来的网页编码是gb2312的话，当然会发生编码的冲突了；
如果你原来的网页编码是utf-8，那么就不会出现中文乱码的问题了。
出现了中文乱码该怎么办呢通常的解决办法是用escape（）对发送的数据进行编码，然后在返回的responseText上再用unescape（）进行解码。
然而在JavaScript编程中通常不推荐使用escape（）和unescape（），而推荐使用encodeURI（）和decodeURI（）。
请看下面的“表单验证实例”，或许对你学习编码知识有一定的帮助。
第一、jQuery的load（url,[data],[callback]）方法
语法说明：
url为异步请求的地址，data用来向服务器传送请求数据，为可选参数。
一旦data参数启用，整个请求过程将以post的方式进行，否则默认为get方式。
如果希望在get方式下也传递数据，可以在url地址后面用类似“dataname1=data1&
dataName2=data2”的方法。
callback为Ajax加载成功后运行的回调函数。
另外使用load（）方法返回的数据，不再需要考虑是文本还是XML，jQuery都会自动进行处理。
好了，下面马上使用load（）方法实现“自动表单验证”实例。
首先是，html框架，5个例子都是一样的，如下：
form>
2.用户昵称:
onblur="
startCheck（this）"
User"
id="
span
UserResult"
/span>
br
3.输入密码:
password"
passwd1"
4.确认密码:
/td>
td>
passwd2"
5.<
submit"
注册"
class="
button"
6.<
reset"
重置"
7.<
/form>
必要说明：
1、onb
升级会员 