JQuery基础核心学习.docx
- 文档编号:25067331
- 上传时间:2023-06-04
- 格式:DOCX
- 页数:22
- 大小:24.32KB
JQuery基础核心学习.docx
《JQuery基础核心学习.docx》由会员分享,可在线阅读,更多相关《JQuery基础核心学习.docx(22页珍藏版)》请在冰豆网上搜索。
JQuery基础核心学习
1概述
根据提供的原始HTML标记字符串,动态创建由jQuery对象包装的DOM元素。
同时设置一系列的属性、事件等。
你可以传递一个手写的HTML字符串,或者由某些模板引擎或插件创建的字符串,也可以是通过AJAX加载过来的字符串。
但是在你创建input元素的时会有限制,可以参考第二个示例。
当然这个字符串可以包含斜杠(比如一个图像地址),还有反斜杠。
当你创建单个元素时,请使用闭合标签或XHTML格式。
例如,创建一个span,可以用$("")或$(""),但不推荐$("")。
在jQuery中,这个语法等同于$(document.createElement("span"))。
在jQuery1.8中,通过$(html,props),您可以使用任何jQuery对象的方法或插件。
在此之前,你只能使用一个方法名的短名单,并有没有成文的方式添加到列表中。
现在并不需要是一个列表,在所有!
然而,请注意,这可能会导致你的代码的行为改变,如果插件添加后,有相同的名称作为HTML属性。
参数
html,[ownerDocument]String,DocumentV1.0
html:
用于动态创建DOM元素的HTML标记字符串
ownerDocument:
创建DOM元素所在的文档
html,propsString,MapV1.4
html:
用于动态创建DOM元素的HTML标记字符串
props:
用于附加到新创建元素上的属性、事件和方法
示例
描述:
动态创建一个div元素(以及其中的所有内容),并将它追加到body元素中。
在这个函数的内部,是通过临时创建一个元素,并将这个元素的innerHTML属性设置为给定的标记字符串,来实现标记到DOM元素转换的。
所以,这个函数既有灵活性,也有局限性。
jQuery代码:
$("
Hello
描述:
创建一个元素必须同时设定type属性。
因为微软规定元素的type只能写一次。
jQuery代码:
//在IE中无效:
$("").attr("type","checkbox");
//在IE中有效:
$("
描述:
动态创建一个div元素(以及其中的所有内容),并将它追加到body元素中。
在这个函数的内部,是通过临时创建一个元素,并将这个元素的innerHTML属性设置为给定的标记字符串,来实现标记到DOM元素转换的。
所以,这个函数既有灵活性,也有局限性。
jQuery代码:
$("
"class":
"test",
text:
"Clickme!
",
click:
function(){
$(this).toggleClass("test");
}
}).appendTo("body");
描述:
创建一个元素,同时设定type属性、属性值,以及一些事件。
jQuery代码:
$("",{
type:
"text",
val:
"Test",
focusin:
function(){
$(this).addClass("active");
},
focusout:
function(){
$(this).removeClass("active");
}
}).appendTo("form");
2$(document).ready()的简写。
允许你绑定一个在DOM文档载入完成后执行的函数。
这个函数的作用如同$(document).ready()一样,只不过用这个函数时,需要把页面中所有需要在DOM加载完成时执行的$()操作符都包装到其中来。
从技术上来说,这个函数是可链接的--但真正以这种方式链接的情况并不多。
你可以在一个页面中使用任意多个$(document).ready事件。
参考ready(Function)获取更多ready事件的信息。
参数
callbackFunctionV1.0
当DOM加载完成后要执行的函数
示例
描述:
当DOM加载完成后,执行其中的函数。
jQuery代码:
$(function(){
//文档就绪
});
描述:
使用$(document).ready()的简写,同时内部的jQuery代码依然使用$作为别名,而不管全局的$为何。
jQuery代码:
jQuery(function($){
//你可以在这里继续使用$作为别名...
});
3暂停或恢复.ready()事件的执行。
在$.holdReady()方法允许调用者延迟jQuery的ready事件。
这种先进的功能,通常是使用动态脚本加载器,要加载的JavaScript比如jQuery插件,如额外的ready事件才让事件发生,即使在DOM可能准备。
此方法必须早在文件调用,在这样
jQuery脚本后,立即标记。ready事件之后调用此方法即使已经发射也将没有任何效果。
要延迟ready事件,第一次调用的$.holdReady(true)。
当ready事件应该执行时,调用$.holdReady(false) 。
请注意,多个holds可以放在ready事件上,每个$.holdReady(true)逐一调用。
ready事件将不会执行,直到所有已发布了相应的一个$.holdReady(false) 和正常的文件准备好条件得到满足。
(见ready的更多信息。
))
参数
holdV1.6
指示是否暂停或恢复被请求的ready事件
示例
描述:
延迟就绪事件,直到已加载的插件。
jQuery代码:
$.holdReady(true);
$.getScript("myplugin.js",function(){
$.holdReady(false);
});
4each(callback)
概述
以每一个匹配的元素作为上下文来执行一个函数。
意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。
而且,在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整型)。
返回'false'将停止循环(就像在普通的循环中使用'break')。
返回'true'跳至下一个循环(就像在普通的循环中使用'continue')。
参数
callbackFunctionV1.0
对于每个匹配的元素所要执行的函数
示例
描述:
迭代两个图像,并设置它们的src属性。
注意:
此处this指代的是DOM对象而非jQuery对象。
HTML代码:
jQuery代码:
$("img").each(function(i){
this.src="test"+i+".jpg";
});
结果:
[
描述:
如果你想得到jQuery对象,可以使用$(this)函数。
HTML代码:
5size()
V1.0概述
jQuery对象中元素的个数。
当前匹配的元素个数。
示例
描述:
计算文档中所有图片数量
HTML代码:
jQuery代码:
$("img").size();
结果:
2
6length
V1.0概述
jQuery对象中元素的个数。
这个函数的返回值与jQuery对象的'
示例
描述:
计算文档中所有图片数量
HTML代码:
jQuery代码:
$("img").length;
结果:
2
7selector
V1.3概述
返回传给jQuery()的原始选择器。
换句话说,就是返回你用什么选择器来找到这个元素的。
可以与context一起使用,用于精确检测选择器查询情况。
这两个属性对插件开发人员很有用。
示例
描述:
确定查询的选择器
jQuery代码:
$("ul")
.append("
.append("
.append("
not([class])").selector+"
结果:
ul
ulli
div#fooul:
not([class])
8context
V1.3概述
返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。
如果没有指定,那么context指向当前的文档(document)。
可以与selector一起使用,用于精确检测选择器查询情况。
这两个属性对插件开发人员很有用。
示例
描述:
检测使用的文档内容
jQuery代码:
$("ul")
.append("
.append("
结果:
[objectHTMLDocument]//如果是IE浏览器,则返回[object]
BODY
9get([index])
概述
取得其中一个匹配的元素。
num表示取得第几个匹配的元素。
这能够让你选择一个实际的DOM元素并且对他直接操作,而不是通过jQuery函数。
$(this).get(0)与$(this)[0]等价。
参数
[index]Number
取得第index个位置上的元素
get()
取得所有匹配的DOM元素集合。
示例
描述:
HTML代码:
jQuery代码:
$("img").get(0);
结果:
[
描述:
选择文档中所有图像作为元素数组,并用数组内建的reverse方法将数组反向。
HTML代码:
jQuery代码:
$("img").get().reverse();
结果:
[
10index([selector|element])
概述
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
如果不给.index()方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。
如果找不到匹配的元素,则返回-1。
具体请参考示例。
参数
index()V1.4
selectorSelectorV14
一个选择器,代表一个jQuery对象,将会从这个对象中查找元素。
elementElementV1.0
获得index位置的元素。
可以是DOM元素或jQuery选择器。
示例
描述:
查找元素的索引值
HTML代码:
jQuery代码:
$('li').index(document.getElementById('bar'));//1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
$('li').index($('#bar'));//1,传递一个jQuery对象
$('li').index($('li:
gt(0)'));//1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
$('#bar').index('li');//1,传递一个选择器,返回#bar在所有li中的做引位置
$('#bar').index();//1,不传递参数,返回这个元素在同辈中的索引位置。
10data([key],[value])
概述
在元素上存放数据,返回jQuery对象。
如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。
这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
V1.4.3新增用法NEWdata(obj)可传入key-value形式的数据。
参数
keyStringV1.23
存储的数据名.
key,valueString,AnyV1.2.3
key:
存储的数据名
value:
将要存储的任意数据
objobjectV1.4.3
一个用于设置数据的键/值对
data()V1.4.3
示例
描述:
在一个div上存取数据
HTML代码:
jQuery代码:
$("div").data("blah");//undefined
$("div").data("blah","hello");//blah设置为hello
$("div").data("blah");//hello
$("div").data("blah",86);//设置为86
$("div").data("blah");//86
$("div").removeData("blah");//移除blah
$("div").data("blah");//undefined
描述:
在一个div上存取名/值对数据
HTML代码:
jQuery代码:
$("div").data("test",{first:
16,last:
"pizza!
"});
$("div").data("test").first//16;
$("div").data("test").last//pizza!
;
11removeData([name|list])
概述
在元素上移除存放的数据
与$(...).data(name,value)函数作用相反
参数
[name]StringV1.2.3
存储的数据名
[list]Array,StringV1.7
移除数组或以空格分开的字符串
示例
描述:
从元素中删除之前添加的数据:
jQuery代码:
$("#btn2").click(function(){
$("div").removeData("greeting");
alert("Greetingis:
"+$("div").data("greeting"));
});
12jQuery.data(element,[key],[value])
概述
在元素上存放数据,返回jQuery对象。
注意:
这是一个底层方法。
你应当使用.data()来代替。
此方法在jQuery1.8中删除,但你仍然可以通过$._data(element,"events")调试事件数据。
请注意,这是不支持的公共接口;实际的数据结构可能会改变从版本之间不兼容。
参数
element,key,valueString,String,AnyV1.2.3
element:
要关联数据的DOM对象
key:
存储的数据名
value:
将要存储的任意数据
element,keyString,StringV1.2.3
element:
要查询数据的DOM对象
key:
存储的数据名
elementStringV1.4
要查询数据的DOM对象
示例
jQuery代码:
jQuery.data(document.body,'foo',52);
jQuery.data(document.body,'bar','test');
13queue(element,[queueName])
概述
显示或操作在匹配元素上执行的函数队列
参数
element,[queueName]Element,StringV1.3
element:
检查附加列队的DOM元素
queueName:
字符串值,包含序列的名称。
默认是fx,标准的效果序列。
element,queueName,newQueueElement,String,ArrayV1.3
element:
检查附加列队的DOM元素
queueName:
字符串值,包含序列的名称。
默认是fx,标准的效果序列。
newQueue:
替换当前函数列队内容的数组
element,queueName,callback()Element,StringV1.3
element:
检查附加列队的DOM元素
queueName:
字符串值,包含序列的名称。
默认是fx,标准的效果序列。
callback():
要添加进队列的函数
示例
描述:
显示队列长度
HTML代码:
div{margin:
3px;width:
40px;height:
40px;
position:
absolute;left:
0px;top:
30px;
background:
green;display:
none;}
div.newcolor{background:
blue;}
span{color:
red;}
jQuery代码:
$("#show").click(function(){
varn=$("div").queue("fx");
$("span").text("Queuelengthis:
"+n.length);
});
functionrunIt(){
$("div").show("slow");
$("div").animate({left:
'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:
'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal",runIt);
}
runIt();
描述:
通过设定队列数组来删除动画队列
HTML代码:
div{margin:
3px;width:
40px;height:
40px;
position:
absolute;left:
0px;top:
30px;
background:
green;display:
none;}
div.newcolor{background:
blue;}
jQuery代码:
$("#start").click(function(){
$("div").show("slow");
$("div").animate({left:
'+=200'},5000);
$("div").queue(function(){
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:
'-=200'},1500);
$("div").queue(function(){
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function(){
$("div").queue("fx",[]);
$("div").stop();
});
描述:
插入一个自定义函数如果函数执行后要继续队列,则执行jQuery(this).dequeue();
HTML代码:
div{margin:
3px;width:
40px;height:
40px;
position:
absolute;left:
0px;top:
30px;
background:
green;display:
none;}
div.newcolor{background:
blue;}
Clickhere...
jQuery代码:
$(document.body).click(function(){
$("div").show("slow");
$("div").animate({left:
'+=200'},2000);
$("div").queue(function(){
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:
'-=200'},500);
$("div").queue(function(){
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
14dequeue([queueName])
概述
从队列最前端移除一个队列函数,并执行他。
参数
[queueName]Str
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- JQuery 基础 核心 学习
![提示](https://static.bdocx.com/images/bang_tan.gif)