那些年，我还在学习jquery 学习笔记_jquery

程序员文章站 2024-01-09 21:20:28

...

原来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("你点啊！１"); 
}); 
　　　　　 $("img").bind("click", function() {　//绑定事件 
alert("你点啊！２"); 
}); 
}) 

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的日子。

那些年，我还在学习jquery 学习笔记_jquery