原来Jquery就是一个javascript写的一个库，它给我们提供了很多常用的方法，使用这些方法可以兼容多种浏览器，使用它可以达到很好的动画效果，下面就来看看那些年的学习笔记吧一、$符号 　　1、选择器 　　　可以选择html标签，也可选择ID,Class等 　　　如下： 复制代码 代码如下: 　<script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").addClass("one");//odd:匹配奇数，even：偶数，nth-child:匹配其父元素下的第N个子或奇偶元素，从1开始 var obj = $("h2 a"); //得到h２下面的a,返回的是一个数组 for (var i = 0; i < obj.length; i++) { obj[i].innerHTML = i.toString(); } var obj1 = $("#demo"); obj1.append("Demo_Id"); var obj2 = $(".Class"); //得到的是一个数组 alert(obj2); $("div ul li: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、得到标记中的属性　　 复制代码 代码如下: 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、元素的显示和隐藏 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#demobtnF").click(function() { $("#p_btn").show(); //显示 }); $("#demobtn").click(function() { $("span:first").hide();//隐藏 }); }) </script> 渐入渐出的效果：在show(),与hide()方法上传一个时间参数，从而得到淡入淡出的效果　　　 复制代码 代码如下: <script type="text/javascript"> $(function() { $("#Button1").click(function() { $("#imgs").show(10000); }); $("#Button2").click(function() { $("#imgs").hide(5000); }); }) </script> 复制代码 代码如下: <input id="Button1" type="button" value="Show" /> <input id="Button2" type="button" value="hide" /> <hr /> <img id="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) 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的日子。

　　推荐阅读

　　JavaScript中函数声明优先于变量声明的实例分析

复制代码 代码如下: var a; // 声明一个变量，标识符为a function a() { // 声明一个函数，标示符也为a } alert(typeof a); 显示的是“function”，即function的优先级高于var。 有人觉得这是代码顺序执行的原因，>>>详细阅读

本文标题：那些年，我还在学习jquery 学习笔记

地址：http://www.17bianji.com/kaifa2/JS/23595.html

 1/2    1