|
从百度加载cdn jQuery库： http://apps./libs/jquery/2.1.1/jquery.min.js 从Microsoft 加载 CDN jQuery 核心文件。 <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script> <script src="http://ajax./ajax/jQuery/jquery-1.8.0.js"> $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $(".test").hide() - 隐藏所有 class="test" 的所有元素 $("#test").hide() - 隐藏所有 id="test" 的元素 提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。 实例： <script> $(document).ready(function(){ //文档就绪函数(这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。) $("button").click(function(){ $(".t").hide(); //隐藏所有 class="t" 的所有元素 }); }); </script> jQuery 选择器:选择器允许您对元素组或单个元素进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取 <p> 元素。 $("p.intro") 选取所有 class="intro" 的 <p> 元素。 $("p#demo") 选取所有 id="demo" 的 <p> 元素。 jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 $("ul li:first") 每个 <ul> 的第一个 <li> 元素 jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。 <script> //$.noConflict(); //或者：var jq = jQuery.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍在运行！"); }); }); </script> jQuery 事件 下面是 jQuery 中事件方法的一些例子： Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 jQuery 效果 - 隐藏和显示 $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。 jQuery toggle() 通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。 显示被隐藏的元素，并隐藏已显示的元素： 实例 $("button").click(function(){ $("p").toggle(); }); jQuery 效果 - 淡入淡出 jQuery 拥有下面四种 fade 方法： fadeIn() 用于淡入已隐藏的元素 语法： $(selector).fadeIn(speed,callback); fadeOut() 用于淡出可见元素。 语法： $(selector).fadeOut(speed,callback); fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。 语法：$(selector).fadeToggle(speed,callback); 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。 fadeTo() 允许渐变为给定的不透明度（值介于 0 与 1 之间）。 语法： $(selector).fadeTo(speed,opacity,callback); jQuery 效果 - 滑动 slideDown() 向下滑动元素 语法：$(selector).slideDown(speed,callback); slideUp() 用于向上滑动元素。 语法：$(selector).slideUp(speed,callback); slideToggle() 可以在 slideDown() 与 slideUp() 方法之间进行切换。 如果元素向下滑动，则 slideToggle() 可向上滑动它们。 如果元素向上滑动，则 slideToggle() 可向下滑动它们。 $(selector).slideToggle(speed,callback); 实例： <!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html> jQuery 动画 - animate() 方法：用于创建自定义动画。 $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止： 实例 $("button").click(function(){ $("div").animate({left:'250px'}); }); 提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！ jQuery animate() - 操作多个属性 请注意，生成动画的过程中可同时使用多个属性： 实例 $("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); }); 提示：可以用 animate() 方法来操作所有 CSS 属性吗？ 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。 同时，色彩动画并不包含在核心 jQuery 库中。 如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。 jQuery animate() - 使用相对值 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 实例 $("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); }); jQuery animate() - 使用预定义的值 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"： 实例 $("button").click(function(){ $("div").animate({ height:'toggle' }); }); Query animate() - 使用队列功能 默认地，jQuery 提供针对动画的队列功能。 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。 实例 1 隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能： $("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"); }); jQuery stop() 方法 用于停止动画或效果，在它们完成之前。 stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。 语法 $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。 Callback 函数在当前动画 100% 完成之后执行。(由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。 为了避免这个情况，您可以以参数的形式添加 Callback 函数。) $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000, function(){ alert("The paragraph is now hidden"); }); }); }); 链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。 提示：这样的话，浏览器就不必多次查找相同的元素。 如需链接一个动作，您只需简单地把该动作追加到之前的动作上。 例子 1 下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动： $("#p1").css("color","red").slideUp(2000).slideDown(2000); jQuery - 获得内容和属性 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容： 实例 $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); jQuery attr() 方法用于获取属性值。 下面的例子演示如何获得链接中 href 属性的值： 实例 $("button").click(function(){ alert($("#w3s").attr("href")); }); 设置内容: 我们将使用前一章中的三个相同的方法来设置内容： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容： 实例 $("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("Dolly Duck"); }); text()、html() 以及 val() 的回调函数 上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 下面的例子演示带有回调函数的 text() 和 html()： 实例 $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; }); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")"; }); }); 设置属性 - attr() jQuery attr() 方法也用于设置/改变属性值。 下面的例子演示如何改变（设置）链接中 href 属性的值： 实例 $("button").click(function(){ $("#w3s").attr("href","http://www.w3school.com.cn/jquery"); }); attr() 方法也允许您同时设置多个属性。 下面的例子演示如何同时设置 href 和 title 属性： 实例 $("button").click(function(){ $("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery", "title" : "W3School jQuery Tutorial" }); }); attr() 的回调函数 jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 下面的例子演示带有回调函数的 attr() 方法： 实例 $("button").click(function(){ $("#w3s").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); 用于添加新内容的四个 jQuery 方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 实例 $("p").append("Some appended text."); 创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中 实例 function appendText() { var txt1="<p>Text.</p>"; // 以 HTML 创建新元素 var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素 var txt3=document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML="Text."; $("p").append(txt1,txt2,txt3); // 追加新元素 } jQuery - 删除元素 remove() - 删除被选元素（及其子元素） 实例 : $("#div1").remove(); empty() - 从被选元素中删除子元素 实例 : $("#div1").empty(); 过滤被删除的元素 jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。 该参数可以是任何 jQuery 选择器的语法。 下面的例子删除 class="italic" 的所有 <p> 元素： 实例 $("p").remove(".italic"); jQuery 操作 CSS jQuery 拥有若干进行 CSS 操作的方法。 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 jQuery addClass() 方法 下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素： 实例 $("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); 您也可以在 addClass() 方法中规定多个类： 实例 $("button").click(function(){ $("#div1").addClass("important blue"); }); jQuery removeClass() 方法 下面的例子演示如何不同的元素中删除指定的 class 属性： 实例 $("button").click(function(){ $("h1,h2,p").removeClass("blue"); }); jQuery toggleClass() 方法 下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作： 实例 $("button").click(function(){ $("h1,h2,p").toggleClass("blue"); }); 返回 CSS 属性 如需返回指定的 CSS 属性的值，请使用如下语法： css("propertyname"); 下面的例子将返回首个匹配元素的 background-color 值： 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性，请使用如下语法： css("propertyname","value"); 下面的例子将为所有匹配元素设置 background-color 值： 实例 $("p").css("background-color","yellow"); 设置多个 CSS 属性 如需设置多个 CSS 属性，请使用如下语法： css({"propertyname":"value","propertyname":"value",...}); 下面的例子将为所有匹配元素设置 background-color 和 font-size： 实例 $("p").css({"background-color":"yellow","font-size":"200%"}); 处理元素和浏览器窗口的尺寸: jQuery 提供多个处理尺寸的重要方法: width() 设置或返回元素的宽度（不包括内边距、边框或外边距） height() 设置或返回元素的高度（不包括内边距、边框或外边距） innerWidth() 返回元素的宽度（包括内边距） innerHeight() 返回元素的高度（包括内边距） outerWidth() 返回元素的宽度（包括内边距和边框） outerHeight() 返回元素的高度（包括内边距和边框） outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。 outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。 设置指定的 <div> 元素的宽度和高度： 实例 $("button").click(function(){ $("#div1").width(500).height(500); }); jQuery 遍历 - 祖先 parent() 返回被选元素的直接父元素。 下面的例子返回每个 <span> 元素的的直接父元素： 实例 $(document).ready(function(){ $("span").parent(); }); parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。 parents()也可以使用可选参数来过滤对祖先元素的搜索。 下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素： 实例 $(document).ready(function(){ $("span").parents("ul"); }); parentsUntil() 返回介于两个给定元素之间的所有祖先元素。 jQuery 遍历 - 后代 children() 返回被选元素的所有直接子元素。(该方法只会向下一级对 DOM 树进行遍历。) 也可以使用可选参数来过滤对子元素的搜索。 下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素： 实例 $(document).ready(function(){ $("div").children("p.1"); }); find() 返回被选元素的后代元素，一路向下直到最后一个后代。 下面的例子返回属于 <div> 后代的所有 <span> 元素： 实例 $(document).ready(function(){ $("div").find("span"); }); 下面的例子返回 <div> 的所有后代： 实例 $(document).ready(function(){ $("div").find("*"); }); jQuery 遍历 - 同胞 在 DOM 树中水平遍历 siblings() 返回被选元素的所有同胞元素。 也可以使用可选参数来过滤对同胞元素的搜索。 下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素： 实例 $(document).ready(function(){ $("h2").siblings("p"); }); next() 返回被选元素的下一个同胞元素。该方法只返回一个元素。 nextAll() 返回被选元素的所有跟随的同胞元素。 nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素。 prev() 上一个 prevAll() prevUntil() jQuery 遍历 - 过滤 jQuery first() 方法 first() 方法返回被选元素的首个元素。 下面的例子选取首个 <div> 元素内部的第一个 <p> 元素： 实例 $(document).ready(function(){ $("div p").first(); }); <body> <h1>欢迎来到我的主页</h1> <div> <p>这是 div 中的一个段落。</p> //This </div> <div> <p>这是 div 中的另一个段落。</p> </div> <p>这也是段落。</p> </body> last() 方法 返回被选元素的最后一个元素。 eq() 方法 返回被选元素中带有指定索引号的元素。 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）： 实例 $(document).ready(function(){ $("p").eq(1); }); 实例： <script> $(document).ready(function(){ $("p").eq(1).css("background-color","yellow"); }); </script> </head> <body> <h1>欢迎来到我的主页</h1> <p>我是唐老鸭 (index 0)。</p> <p>唐老鸭 (index 1)。</p> <p>我住在 Duckburg (index 2)。</p> <p>我最好的朋友是米老鼠 (index 3)。</p> </body> filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 下面的例子返回带有类名 "intro" 的所有 <p> 元素： 实例 $(document).ready(function(){ $("p").filter(".intro"); }); not() 方法 返回不匹配标准的所有元素。 提示：not() 方法与 filter() 相反。 下面的例子返回不带有类名 "intro" 的所有 <p> 元素： 实例 $(document).ready(function(){ $("p").not(".intro"); }); |
|
|
来自： 学习的仓库 > 《JavaScript》
