jquery教程详解免费_jquery前端开发实战教程

 jquery核心： write less do more 1.jQuery 语法 基础语法： $(selector).action(); 2.文档就绪事件 ：文档完全加载完后执行函数 第一种方式： $(document).ready(function(){}); 第二种方式： $(function(){}); 3.jQuery 选择器 元素选择器 $("p").hide(); // 所有的p元素隐藏 #id选择器 $("#test").hide();//id为test的元素隐藏 .class选择器 $('.test').hide(); // class为test的所有元素隐藏 $("*") //选取所有元素 $(this) // 选取当前HTML元素 $("p .intro") // 选取class 为intro的p元素 $("ul li:first") //选取第一个ul元素下的第一个li元素 $('ul li:first-child') //选取每个ul下的第一个li元素 $('[href]') //选取所有带href属性的元素 $('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank) $('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank) $(":button") // 选取所有type=“button”的input和button元素 $("tr：even") // 选取所有的偶数行 $("tr:odd") //选取所有的奇数行 4.jQuery 事件 事件：页面对不同访问者的响应 鼠标事件： click dbclick mouseenter mouseleave hover(悬停事件) 键盘事件： keypress keydown keyup blur 表单事件： submit change focus unload 文档窗口事件：load resize scroll 4.1 jQuery 事件方法语法 $("p").click(function(){//点击p元素后执行的代码}); $("p").dblclick(function(){ //双击事件 $(this).hide(); }); $("#p1").mouseenter(function(){ // 鼠标指针穿过元素事件 alert("You entered p1!"); }); $("#p1").mouseleave(function(){// 鼠标指针离开元素事件 alert("Bye! You now leave p1!"); }); $("input").focus(function(){// 元素获得焦点事件 $(this).css("background-color","#cccccc"); }); $("input").blur(function(){// 元素失去焦点事件 $(this).css("background-color","#ffffff"); }); 5.jQuery 效果 5.1 隐藏和现实HTML元素 ： $(selector).hide(speed,callback); $(selector).show(speed,callback); 例： $("button").click(function(){ $("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏 }); 5.2 来回切换隐藏和显示 用 toggle(); <button>隐藏/显示</button> $("button").click(function(){ $("p").toggle(); }); 6. 淡入淡出 $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); $("button").click(function(){ //三个div逐次出现 $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); $("button").click(function(){ //三个div逐次淡出，依次看不见 $("#div1").fadeOut(); }); <button>点击淡入/淡出</button> $("button").click(function(){ $("#div3").fadeToggle(3000); }); $("button").click(function(){ $("#div1").fadeTo("slow",0);//0完全透明，div1看不见了 }); 7. 滑动方法 $(selector).slideDown(speed,callback); //向下收起来 $(selector).slideUp(speed,callback); //向上收起来 $(selector).slideToggle(speed,callback); 8.动画： 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ 8.1 创建自定义动画 $(selector).animate({params},speed,callback); $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); 使用相对值： $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); 使用预定义的值 $("div").animate({ height:'toggle' }); 使用队列功能 $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); 9.停止动画： $(selector).stop(stopAll,goToEnd); stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 goToEnd 参数规定是否立即完成当前动画。默认是 false。 $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); 10.动画的问题 Callback 方法（类似同步，先把动画执行完了再弹框） // 隐藏效果完全实现后回调函数: $("button").click(function(){ $("p").hide("slow",function(){ alert("The paragraph is now hidden"); }); }); //没有callback回调，类似异步，警告框会在隐藏效果完成前弹出： $("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); 11. jQuery 方法链接 Chaining $("#p1").css("color","red").slideUp(2000).slideDown(2000); 12. jQuery - 获取内容和属性 DOM操作 获得内容 - text()、html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 <p id="test" value="菜鸟教程">这是段落中的 <b>粗体</b> 文本。</p> text()：这是段落中的粗体文本。 html(): 这是段落中的 <b>粗体</b> 文本。 val(): 菜鸟教程 <p><a href="http://www.runoob.com" value= "helloworld"id="runoob">菜鸟教程</a></p> $('#runoob').attr("href"); //http://www.runoob.com $('#runoob').attr('value');//helloworld 13. jQuery - 设置内容和属性 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); }); $("#runoob").attr("href","http://www.runoob.com/jquery"); 13. JQUERY - 添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 $("p").append("追加文本"); function afterText(){ var txt1="<b>I </b>"; // 使用 HTML 创建元素 加粗的I var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 斜体的love var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 } </script> 14. 删除元素 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 $("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素： 15. jQuery - 获取并设置 CSS 类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); $("h1,h2,p").removeClass("blue"); $("h1,h2,p").toggleClass("blue"); $("p").css({"background-color":"yellow","font-size":"200%"}); 15.jQuery 尺寸 width(): 元素的宽度 innerWidth() = width() + padding的宽度 outerWidth() = innerWidth() + Border的宽度 outerWidth(true) = outerWidth() + margin的宽度 16. jQuery 遍历 祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。 向上遍历DOM树： parent() //返回被选元素的直接父元素 div包含ul包含li包含span； $('span').parent()就是li parents() // 返回被选元素的所有父元素，$('span').parents()就是li ul 和div，body，html parentsUntil(); //$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素,不包括div及以上 向下遍历DOM树： children() //返回被选元素的所有直接子元素 find() //被选元素的后代元素，一路向下直到最后一个后代。 $("div").children(); //div的直接子元素 $("div").children("p.1");//class=1 的p的直接子元素 $("div").find("*"); //返回 <div> 的所有后代 $("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素： 同胞(siblings) siblings() next() nextAll() nextUntil() prev() prevAll() prevUntil() $("h2").siblings();返回H2的所有同胞元素,平级元素 $("h2").siblings("p").css({"color":"red","border":"2px solid red"});//返回h同胞元素中的p元素 $("h2").next().css({"color":"red","border":"2px solid red"}); //h2后面的第一个同胞元素 $("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素 $("h2").nextUntil("h6"); 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素 过滤： $("div p").first(); 选取第一个 <div> 元素内部的第一个 <p> 元素 $("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素 $("p").eq(1); 返回被选元素中带有指定索引号的元素，索引从0开始 $("p").filter(".url"); //filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除反之被返回。 $("p").not(".url"); //与filter()相反 17.JSONP 教程 跨域读取数据