/** * Created by wyl on 15-3-4. */ //Jquery是一个JavaScrioe库，它极大的简化了JavaScript编程 $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); /* Baidu CDN: <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> </head> 又拍云 CDN: <head> <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> </head> 新浪 CDN: <head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head> Google CDN: <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> */ /* jQuery 语法 jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。 基础语法： $(selector).action() 美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作 实例: $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p .test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素 */ //文档就绪事件写法一： $(document).ready(function(){ //Jquery method go here ...... }); //文档就绪事件写法一： $(function(){ //Jquery method go here ...... }); //jQuery 中所有选择器都以美元符号开头：$() //Query 元素选择器基于元素名选取元素。 $("p"); $("h1"); $("div"); //jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 //页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。 //通过 id 选取元素语法如下： $("#test"); $("#hello"); //Query 类选择器可以通过指定的 class 查找元素。 $(".test"); /* $("*")选取所有元素 $(this)选取当前 HTML 元素 $("p.intro")选取 class 为 intro 的 <p> 元素 $("p:first")选取第一个 <p> 元素 $("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素 $("[href]") 选取带有 href 属性的元素在线实例 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']"选取所有 target 属性值不等于 "_blank" 的 <a> $(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even")选取偶数位置的 <tr> 元素在线实例 $("tr:odd") 选取奇数位置的 <tr> 元素 */ //当单击时出现掩藏效果 $(document).ready(function(){ $("div").click(function(){ $(this).hide(); }); }); $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); //当双击时出现掩藏效果 $(document).ready(function(){ $("div").dblclick(function(){ $(this).hide(); }); }); //当鼠标指针穿过元素时，会发生 mouseenter 事件。 //mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数： $(document).ready(function(){ $("p").mouseenter(function(){ alert("Funk you !"); }); }); //当鼠标指针离开元素时，会发生 mouseleave 事件。 //mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： $(document).ready(function(){ $("#p1").mouseleave(function(){ alert("mouse leave"); }) ; }); //当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。 //mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数： $(document).ready(function(){ $(".test").mousedown(function(){ alert("Fuck me !"); }); }); //当在元素上松开鼠标按钮时，会发生 mouseup 事件。 //mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数： $(document).ready(function(){ $("p").mouseup(function(){ alert("HEllo beybey!"); }); }); //hover()方法用于模拟光标悬停事件。 //当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。 $(document).ready(function(){ $("ul").hover(function(){ alert("You enter p1"); }), function(){ alert("Bey! you now leave p1"); } }); //当元素获得焦点时，发生 focus 事件。 //当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 //focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数： $(document).ready(function(){ $("input").focus(function(){ $(this).css("backgrand_color","red"); }); $("input").blur(function(){ $(this).css("backgrand_color","green"); }) });