jQuery常用功能大全Word格式.docx
- 文档编号:13085861
- 上传时间:2022-10-04
- 格式:DOCX
- 页数:11
- 大小:16.22KB
jQuery常用功能大全Word格式.docx
《jQuery常用功能大全Word格式.docx》由会员分享,可在线阅读,更多相关《jQuery常用功能大全Word格式.docx(11页珍藏版)》请在冰豆网上搜索。
以下几种写法都是正确的:
).html();
)[0].innerHTML;
).eq(0)[0].innerHTML;
).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。
对于jquery对象只能使用jquery的方法,而dom对象只能使用dom的方法,如要获取第三个<
div>
元素的内容。
有如下两种方法:
).eq
(2).html();
//调用jquery对象的方法
).get
(2).innerHTML;
//调用dom的方法属性
4、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
//返回id为msg的元素节点的html内容。
).html("
<
b>
newcontent<
/b>
"
);
//将“<
newcontent<
”作为html串写入id为msg的元素节点内容中,页面显示粗体的newcontent
).text();
//返回id为msg的元素节点的文本内容。
).text("
”作为普通文本串写入id为msg的元素节点内容中,页面显示<
).height();
//返回id为msg的元素的高度
).height("
300"
//将id为msg的元素的高度设为300
).width();
//返回id为msg的元素的宽度
).width("
//将id为msg的元素的宽度设为300
input"
).val("
//返回表单输入框的value值
test"
//将表单输入框的value值设为test
).click();
//触发id为msg的元素的单击事件
).click(fn);
//为id为msg的元素单击事件添加函数同样blur,focus,Select,submit事件都可以有着两种调用方法
5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式:
p"
).each(function(i){this.style.color=['
#f00'
'
#0f0'
#00f'
][i]})//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
tr"
).each(function(i){this.style.backgroundColor=['
#ccc'
#fff'
][i%2]})//实现表格的隔行换色效果
).click(function(){alert($(this).html())})//为每个p元素增加了click事件,单击某个p元素则弹出其内容
6、扩展我们需要的功能
$.extend({
min:
function(a,b){returna<
b?
a:
b;
},
max:
function(a,b){returna>
}
});
//为jquery扩展了min,max两个方法使用扩展的方法(通过“$.方法名”调用):
alert("
a=10,b=20,max="
+$.max(10,20)+"
min="
+$.min(10,20));
7、支持方法的连写所谓连写,即可以对一个jquery对象连续调用各种不同的方法。
例如:
).click(function(){alert($(this).html())}).mouseover(function(){alert('
mouseoverevent'
)}).each(function(i){this.style.color=['
][i]});
8、操作元素的样式
主要包括以下几种方式:
).css("
background"
//返回元素的背景颜色
"
#ccc"
)//设定元素背景为灰色
).height(300);
$("
200"
//设定宽高
).css({color:
"
red"
background:
blue"
//以名值对的形式设定样式
).addClass("
Select"
//为元素增加名称为Select的class
).removeClass("
//删除元素名称为Select的class
).toggleClass("
//如果存在(不存在)就删除(添加)名称为Select的class
9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通过jquery获取的对象添加事件。
).click(function(){alert("
good"
)})//为元素添加了单击事件
).click(function(i){this.style.color=['
][i]})//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件:
(1)hover(fn1,fn2):
一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。
当鼠标移出这个元素时,会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over,离开时置为out。
).hover(function(){
$(this).addClass("
over"
},
function(){
out"
});
(2)ready(fn):
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert("
LoadSuccess"
)})//页面加载完毕提示“LoadSuccess”,相当于onload事件。
与$(fn)等价
(3)toggle(evenFn,oddFn):
每次点击时切换要调用的函数。
如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。
随后的每次点击都重复对这两个函数的轮番调用。
//每次点击时轮换添加和删除名为Selected的class。
).toggle(function(){
Selected"
},function(){
$(this).removeClass("
(4)trigger(eventtype):
在每一个匹配的元素上触发某类事件。
例如:
).trigger("
click"
//触发所有p元素的click事件
(5)bind(eventtype,fn),unbind(eventtype):
事件的绑定与反绑定
从每一个匹配的元素中(添加)删除绑定的事件。
).bind("
function(){alert($(this).text());
//为每个p元素添加单击事件
).unbind();
//删除所有p元素上的所有事件$("
).unbind("
)//删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型:
检测浏览器类型。
有效参数:
safari,opera,msie,mozilla。
如检测是否ie:
$.browser.isie,是ie浏览器则返回true。
$.each(obj,fn):
通用的迭代函数。
可用于近似地迭代对象和数组(代替循环)。
如
$.each([0,1,2],function(i,n){alert("
Item#"
+i+"
:
+n);
等价于:
vartempArr=[0,1,2];
for(vari=0;
i<
tempArr.length;
i++){
alert("
+i+"
+tempArr[i]);
}
也可以处理json数据,如
$.each({name:
John"
lang:
JS"
},function(i,n){
alert("
Name:
Value:
结果为:
name,Value:
JohnName:
lang,Value:
JS
$.extend(target,prop1,propN):
用一个或多个其他对象来扩展一个对象,返回这个被扩展的对象。
这是jquery实现的继承方式如:
$.extend(settings,options);
//合并settings和options,并将合并结果返回settings中,相当于o
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 常用 功能 大全