那些年，我还在学习jquery学习笔记
2023-06-13 09:14:33 时间
原来Jquery就是一个javascript写的一个库，它给我们提供了很多常用的方法，使用这些方法可以兼容多种浏览器，使用它可以达到很好的动画效果，下面就来看看那些年的学习笔记吧
一、$符号
1、选择器
可以选择html标签，也可选择ID,Class等
如下：
复制代码代码如下:
一、$符号
1、选择器
可以选择html标签，也可选择ID,Class等
如下：
<scripttype="text/javascript">
$(
function(){
$("table.datalisttr:nth-child(odd)").addClass("one");//odd:匹配奇数，even：偶数，nth-child:匹配其父元素下的第N个子或奇偶元素，从1开始
varobj=$("h2a");//得到h２下面的a,返回的是一个数组
for(vari=0;i<obj.length;i++){
obj[i].innerHTML=i.toString();
}
varobj1=$("#demo");
obj1.append("Demo_Id");
varobj2=$(".Class");//得到的是一个数组
alert(obj2);
$("divulli:has(a)").addClass("Two");//得到里中有a的标符添加一个Class="Two"
$("li:lt(2)").addClass("one");//得到前三个li，添加一个Class＝"one"，下标是从０开始的
$("p>span").addClass("Two");//得到p下的span,parent>child
}
)
</script>
2、得到标记中的属性
varsTitle=$("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:"TestImage"});
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、元素的显示和隐藏
<scripttype="text/javascript">
$(function(){
$("#demobtnF").click(function(){
$("#p_btn").show();//显示
});
$("#demobtn").click(function(){
$("span:first").hide();//隐藏
});
})
</script>
渐入渐出的效果：在show(),与hide()方法上传一个时间参数，从而得到淡入淡出的效果
<scripttype="text/javascript">
$(function(){
$("#Button1").click(function(){
$("#imgs").show(10000);
});
$("#Button2").click(function(){
$("#imgs").hide(5000);
});
})
</script>
<inputid="Button1"type="button"value="Show"/>
<inputid="Button2"type="button"value="hide"/>
<hr/>
<imgid="imgs"src="images/27m03.jpg"alt="log"/>
<hr/>
二、淡入淡出的实现方法
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)returnalert("IE");
if($.browser.safari)returnalert("safari");
if($.browser.mozilla)returnalert("mozilla");
if($.browser.opera)returnalert("opera");
2、盒子模型 $.boxModel 如下：
alert($.boxModel?"standard":"IE");
3、处理javascript对象 $.each(arr,function)//对数组的每个对象用function函数处理
如下：
varaArr=["one","two","three"];
$.each(aArr,function(iNum,value){
alert(iNum+","+value);
});
$.grep(Arr,funtion(value)):过滤
示例：
varaArray=[1,2,3,4,5,6,7,8,9];
varDemoArr=$.grep(aArray,function(value){
returnvalue>4;
});
document.write(DemoArr.join());
$.map(Array,function(value,index))
本文全部来源于那些年的学习笔记。
总结
Jquery库中有很多函数，还有一些，特别是Jquery里的Ajax,是非常重要的，此文以回忆那些年学习Jquery的日子。