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 methods go here...
});
这个函数是为了防止文档在完全加载就绪之前允许jQuery代码。简洁写法如下：
$(function(){
// jQuery methods go here...
});
以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 中所有选择器都以美元符号开头：$()。
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落。</p> <p>这是另一个段落。</p> <button>点我</button> </body> </html>
上例中，用户点击按钮后，所有<p>元素都隐藏。
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); }); </script> </head> <body> <h2>这是一个标题</h2> <p>这是一个段落</p> <p id="test">这是另外一个段落</p> <button>点我</button> </body> </html>
上例中，用户点击按钮后，有id=‘test‘属性的元素被隐藏。
jQuery 类选择器可以通过指定的 class 查找元素。
语法：$(".test")
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); }); </script> </head> <body> <h2 class="test">这是一个标题</h2> <p class="test">这是一个段落。</p> <p>这是另外一个段落。</p> <button>点我</button> </body> </html>
上例中，用户点击按钮后所有带有 class="test" 属性的元素都隐藏。
属性选择
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("[href]").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <p><a href="http://www.w3cschool.cc/html/">HTML Tutorial</a></p> <p><a href="http://www.w3cschool.cc/css/">CSS Tutorial</a></p> <button>Click me</button> </body> </html>
上例中，选取带有 href 属性的元素隐藏。
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。然后在HTML文档中通过src引用其地址。例如：
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script src="my_jquery_functions.js"></script> </head>
jQuery事件：
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件（元素上移动鼠标、选取单选按钮，点击元素等）时所调用的方法。
常见DOM事件：
鼠标事件：clink,dbclick,mouseenter,mouseleave
键盘事件：keypress,keydown,keyup
表单事件：submit,change,focus,blur
文档和窗口事件：load,resize,scroll,unload
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。常用的jQuery事件方法如下：
1）$(document).ready() 方法允许我们在文档完全加载完后执行函数。
2）click() 方法是当按钮点击事件被触发时会调用一个函数。
$("p").click(function(){
$(this).hide();
});
3）dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数
$("p").dblclick(function(){
$(this).hide();
});
4）mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
5）mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
6）hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
7）focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数
<!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); $("input").blur(function(){ $(this).css("background-color","#ffffff"); }); }); </script> </head> <body> Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email"> </body> </html>
8）blur() 方法触发 blur 事件（元素失去焦点），或规定当发生 blur 事件时运行的函数
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
