jQuery的详细应用Word文档格式.docx
- 文档编号:16420835
- 上传时间:2022-11-23
- 格式:DOCX
- 页数:26
- 大小:37.01KB
jQuery的详细应用Word文档格式.docx
《jQuery的详细应用Word文档格式.docx》由会员分享,可在线阅读,更多相关《jQuery的详细应用Word文档格式.docx(26页珍藏版)》请在冰豆网上搜索。
p"
).text("
Somenewtext."
//改变对象文本
img"
).attr({src:
"
test.jpg"
alt:
TestImage"
).add("
span"
//给对象增加标签
).find("
//查找对象内部的对应元素
).parent();
//对象的父级元素
).append("
<
b>
Hello<
/b>
//给对象添加内容
4.支持aJax,支持文件格式:
xml/html/script/json/jsonp
#feeds"
).load("
feeds.html"
//相应区域导入静态页内容
feeds.php"
{limit:
25},function(){alert("
Thelast25entriesinthefeedhavebeenloaded"
});
//导入动态内容
4.对事件的支持:
).hover(function(){
$(this).addClass("
hilite"
//鼠标放上去时
},function(){
$(this).removeClass("
//移开鼠标
//鼠标放上去和移开的不同效果(自动循环所有p对象)
5.动画:
).show("
slow"
//隐藏对象(慢速渐变)
#go"
).click(function(){
#block"
).animate({
width:
90%"
height:
100%"
fontSize:
10em"
},1000);
//鼠标点击后宽、高、字体的动态变化
6.扩展:
$.fn.background=function(bg){
returnthis.css('
background'
bg);
};
$(#element).background("
red"
如果要为每一个jQuery对象添加一个函数,必须把该函数指派给$.fn,同时这个函数必须要返回一个this(jQuery对象)
jQuery事件和方法总结
Attribute:
属性
).addClass(css中定义的样式类型);
给某个元素添加样式
).attr({src:
title:
testImage"
给某个元素添加属性/值,参数是map
).attr("
title"
function(){returnthis.src});
给某个元素添加属性/值
元素名称"
).html();
获得该元素内的内容(元素,文本等)
).html("
newstuff<
给某元素设置内容
).removeAttr("
属性名称"
)给某元素删除指定的属性以及该属性的值
).removeClass("
class"
)给某元素删除指定的样式
).text();
获得该元素的文本
).text(value);
设置该元素的文本值为value
).toggleClass(class)当元素存在参数中的样式的时候取消,如果不存在就设置此样式
input元素名称"
).val();
获取input元素的值
).val(value);
设置input元素的值为value
Manipulation:
).after(content);
在匹配元素后面添加内容
).append(content);
将content作为元素的内容插入到该元素的后面
).appendTo(content);
在content后接元素
).before(content);
与after方法相反
).clone(布尔表达式)当布尔表达式为真时,克隆元素(无参时,当作true处理)
).empty()将该元素的内容设置为空
).insertAfter(content);
将该元素插入到content之后
).insertBefore(content);
将该元素插入到content之前
元素"
).prepend(content);
将content作为该元素的一部分,放到该元素的最前面
).prependTo(content);
将该元素作为content的一部分,放content的最前面
).remove();
删除所有的指定元素
).remove("
exp"
删除所有含有exp的元素
).wrap("
html"
用html来包围该元素
).wrap(element);
用element来包围该元素
Traversing:
add(expr)当前匹配元素集合增加新的匹配元素集合‘expr’,形成新的匹配元素集合;
例子:
$(document).ready(function(){
$("
div"
border"
1pxsolidred"
)
.add("
)//文档中的P元素会应用背景色为yellow的CSS样式;
.css("
background"
children(expr)从当前匹配元素集合中得到各个元素第一层子集集合,形成新的元素集合
contains(str)匹配集合中包含str这个变量文本的元素集合,返回匹配元素集合
end()用于返回到调用find()或parents()函数(或者其它遍历函数)之前的jQuery对象
例子
#div1"
).hide().end().hide()
第一个hide()是对于p标签的然后用end()结束对p标签的引用而返回到#div1标签
所以第二个hide()是对于#div1起作用的
如果不加end()则两个hide()都是对p标签起作用
filter(expression)
find(expr)
filter和find的区别:
filter将在一组已经选取的元素里面选择;
find将在一组已经选取的元素的子节点里面选择;
html代码>
divclass="
css"
>
<
pclass="
rain"
测试1<
/p>
/div>
p>
测试2<
/html>
如果我们使用find()方法:
var$find=
.rain"
alert($find.html());
将会输出:
测试1
如果使用filter()方法:
var$filter=$("
).filter("
alert($filter.html());
测试2
区别在于:
find()会在div元素内寻找class为rain的元素。
而filter()则是筛选div的class为rain的元素。
一个是对它的子集操作,一个是对自身集合元素筛选。
is(expr)//判断现有集合是否属于‘expr’集合中的一部分或是相等。
如果是则返回true,否则返回false
next(expr)//取得一个包含匹配的元素集合中每一个元素紧邻的后面兄弟元素集合。
not(el)//匹配集合中没有满足过滤要求的元素集合
).not("
.green,#blueone"
)
input:
not(:
checked)+span"
not([th]):
odd'
parent(expr)取得一个包含着所有匹配元素的唯一父元素的元素集合
parents(expr)//得到匹配元素集合中各个元素的所有祖先元素集合
prev(expr)得到匹配元素集合中各个元素紧邻的前一个兄弟元素集合
siblings(expr)得到所有匹配元素集合中各个元素的所有兄弟元素集合
Core:
$(html).appendTo("
body"
)相当于在body中写了一段html代码
$(elems)获得DOM上的某个元素
$(function(){……..});
执行一个函数
div>
p"
1pxsolidgray"
查找所有div的子节点p,添加样式
radio"
document.forms[0])在当前页面的第一个表单中查找所有的单选按钮
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object)为扩展jQuery类本身.为类添加新的方法。
举例
jQuery.extend({
min:
function(a,b){returna<
b?
a:
b;
},
max:
function(a,b){returna>
}
引用jQuery:
$.min(3,4);
//return3
jQuery.fn.extend(object)给jQuery对象添加方法,是对jQuery.prototype进得扩展
jQuery.fn=jQuery.prototype={
init:
function(selector,context){//....
//......
$.fn.extend({
alertWhileClick:
function(){
$(this).click(function(){
alert($(this).val());
}
#input1"
).alertWhileClick();
jQuery(expression,[context])---$(expression,[context]);
在默认情况下,$()查询的是当前HTML文档中的DOM元素。
each(callback)以每一个匹配的元素作为上下文来执行一个函数
举例:
1
).click(function){
li"
).each(function(){
$(this).toggleClass("
example"
2
button"
).click(function(){
).each(function(index,domEle){
//domEle==this
$(domEle).css("
backgroundColor"
if($(this).is("
#stop"
)){
Stoppedatdivindex#"
+index);
returnfalse;
}
jQueryEvent:
事件
ready(fn);
$(document).ready()注意在body中没有onload事件,否则该函数不能执行。
在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行。
$(document).ready(function(){alert("
aa"
bind(type,[data],fn)为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。
可能的事件type属性有:
blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error
例子1:
#myBtn'
).bind("
click"
function(){
alert('
click'
例子2:
functionhandler(event){
alert(event.data.foo);
{foo:
bar"
},handler)
one(type,[data],fn)为每一个匹配元素的特定事件(像click)绑定一个或多个事件处理器函数。
在每个对象上,这个事件处理函数只会被执行一次。
其他规则与bind()函数相同。
type(String):
事件类型。
data(Object):
(可选)作为event.data属性值传递给事件对象的额外数据对象。
fn(Function):
绑定到每个匹配元素的事件上面的处理函数。
trigger(type,[data])在每一个匹配的元素上触发某类事件。
).click(function(event,a,b){
//一个普通的点击事件时,a和b是undefined类型
//如果用下面的语句触发,那么a指向"
foo"
而b指向"
}).trigger("
["
]);
toggle(fn,fn)如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
).toggle(function(){
$(this).addClass("
},
function(){
$(this).removeClass("
myEvent"
function(event,message1,message2){
alert(message1+'
'
+message2);
).trigger("
Hello"
"
World!
triggerHandler(type,[data])这一特定方法会触发一个元素上特定的事件(指定一个事件类型),同时取消浏览器对此事件的默认行动
unbind([type],[data])反绑定,从每一个匹配的元素中删除绑定的事件。
).unbind()移除所有段落上的所有绑定的事件
).unbind("
)移除所有段落上的click事件
varfoo=function(){
//处理某个事件的代码
foo);
//...当点击段落的时候会触发函数foo
).unbind("
//...再也不会被触发foo
hover(over,out)over,out都是方法,当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。
当鼠标移出这个元素时,会触发指定的第二个函数。
).hover(function(){
over"
out"
元素事件列表说明
注:
不带参数的函数,其参数为可选的fn。
jQuery不支持form元素的reset事件。
事件描述,支持元素或对象
focus()元素获得焦点a,input,textarea,button,select,label,map,area
blur()元素失去焦点a,input,textarea,button,select,label,map,area
#in"
).focus(function(){
if($("
).val()=='
关键字'
){
).val("
)};
}).blur(function(){
'
关键字"
color"
#ccc"
change()用户改变域的内容input,textarea,select
change事件会在元素失去焦点的时候触发,也会当其值在获得焦点后改变时触发。
input[type='
text'
).change(function(){
//这里可以写些验证代码
click()鼠标点击某个对象几乎所有元素
dblclick()鼠标双击某个对象几乎所有元素
error()当加载文档或图像时发生某个错误window,img
keydown()某个键盘的键被按下几乎所有元素
keypress()某个键盘的键被按下或按住几乎所有元素
keyup()某个键盘的键被松开几乎所有元素
load(fn)某个页面或图像被完成加载window,img
mousedown(fn)某个鼠标按键被按下几乎所有元素
mousemove(fn)鼠标被移动几乎所有元素
mouseout(fn)鼠标从某元素移开几乎所有元素
mouseover(fn)鼠标被移到某元素之上几乎所有元素
mouseup(fn)某个鼠标按键被松开几乎所有元素
resize(fn)窗口或框架被调整尺寸window,iframe,frame
scroll(fn)滚动文档的可视部分时window
select()文本被选定document,input,textarea
submit()提交按钮被点击form
unload(fn)用户退出页面window
JQueryAjax方法说明:
load(url,[data],[callback])装入一个远程HTML内容到一个DOM结点。
将feeds.html文件载入到id为feeds的div中
25},function(){
alert("
jQuery.get(url,[data],[callback])使用GET请求一个页面。
$.get("
test.cgi"
{name:
John"
time:
2pm"
},function(data){
DataLoaded:
+data);
jQuery.getJSON(url,[data],[callback])使用GET请求JSON数据。
$.getJSON("
test.js"
},function(json){
JSONData:
+json.users[3].name);
jQuery.getScript(url,[callback])使用GET请求JavaScript文件并执行。
$.getScript("
function(){
Scriptloadedandexecuted."
jQuery.post(url,[data],[callback],[type])使用POST请求一个页面。
ajaxComplete(callback)当一个AJAX请求结束后,执行一个函数。
这是一个Ajax事件
#msg"
).ajaxComplete(function(request,settings){
$(this).append("
li>
RequestComplete.<
/li>
ajaxError(callback)当一个AJAX请求失败后,执行一个函数。
).ajaxError(function(request,settings){
Errorrequestingpage"
+settings.url+"
ajaxSend(callback)在一个AJAX请求发送时,执行一个函数。
).ajaxSend(function(evt,request,settings){
li<
Startingrequestat"
+settings.url
+"
/li<
ajaxStart(callback)在一个AJAX请求开始但还没有激活时,执行一个函数。
当AJAX请求开始(并还没有激活时)显示loading信息
#loading"
).ajax
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 详细 应用
![提示](https://static.bdocx.com/images/bang_tan.gif)