原来jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧
一、$符号
1、选择器
可以选择html标签,也可选择id,class等
如下:
复制代码 代码如下:
2、得到标记中的属性
复制代码 代码如下:
var stitle = $(p>span).attr(title); //得到标记中的属性值
$(p>a).text(stitle);//设置值,若是用text()得到值,则是得到的文本,不包含html
3、设置属性
复制代码 代码如下:
$(button:gt(0)).attr(disabled, disabled); //得到第一个button后的button,然后设置它们的disable属性为不可用,没有这个属性就返回undefined
$(img).attr({ src: test.jpg, alt: test image });
3.1、删出属性
$(img).removeattr(src);
4、修改class,如果存在(不存在)就删除(添加)一个类。
复制代码 代码如下:
$(
function() {
$(div>p).mouseover(
function() {
$(this).toggleclass(hightlight);//修改样式class
}
);
}
4.1、移出class
$(p).removeclass(selected);
4.2、添加class
$(p).addclass(selected);
5、图片的复制
$(img:eq(0)).clone().appendto($(p)); //得到第一张图片
6、事件绑定,可以绑定多个相同的事件
复制代码 代码如下:
$(function() {
$(img).bind(click, function() { //绑定事件
alert(你点啊!1);
});
$(img).bind(click, function() { //绑定事件
alert(你点啊!2);
});
})
7、移出事件
复制代码 代码如下:
$(function() {
$(input[type=button]).click(function() {
$(img).unbind(click, eventimg);//unbind来移出方法
alert(移出事件!);
});
})
8、元素的显示和隐藏
复制代码 代码如下:
渐入渐出的效果:在show(),与hide()方法上传一个时间参数,从而得到淡入淡出的效果
复制代码 代码如下:
复制代码 代码如下:
二、淡入淡出的实现方法
1、fadein()与fadeout():使用方法与show()、hide()一样,效果更好
如下:
复制代码 代码如下:
$(#button3).click(function() {
$(#imgs).fadein(10000);
});
$(#button4).click(function() {
$(#imgs).fadeout(5000);
});
2、幻灯片效果-由slideup()与slidedown()方法实现
复制代码 代码如下:
$(#button1).click(function() {
$(#imgs).slideup(10000);
});
$(#button2).click(function() {
$(#imgs).slidedown(5000);
});
三、jquery功能函数
1、浏览器的检测$.browser, 如下:
复制代码 代码如下:
if ($.browser.msie) return alert(ie);
if ($.browser.safari) return alert(safari);
if ($.browser.mozilla) return alert(mozilla);
if ($.browser.opera) return alert(opera);
2、盒子模型 $.boxmodel 如下:
alert($.boxmodel ? standard : ie);
3、处理javascript对象 $.each(arr,function) //对数组的每个对象用function函数处理
如下:
复制代码 代码如下:
var aarr = [one, two, three];
$.each(aarr, function(inum, value) {
alert(inum + , + value);
});
$.grep(arr,funtion(value)):过滤
示例:
复制代码 代码如下:
var aarray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var demoarr = $.grep(aarray, function(value) {
return value > 4;
});
document.write(demoarr.join());
$.map(array,function(value,index))
本文全部来源于那些年的学习笔记。
总结
jquery库中有很多函数,还有一些,特别是jquery里的ajax,是非常重要的,此文以回忆那些年学习jquery的日子。