从零开始学习jquery (二)
前面我们了解到了如何获取使用jquery,下面我们主要看看jquery的一些语法。基本的语法
$(selector).action()。
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有p标签
$("p .test").hide() - 隐藏所有 class="test" 的p标签
$("#test").hide() - 隐藏所有 id="test" 的元素。
我们在使用jquery的时候,通常的会加上这么一句,为什么要加上这么一句呢,这句的意思时,当当前的dom加载完毕后,才会执行函数里面的句子。这样做是为了防止我们一些html dom没有完成加载后,执行JavaScript而产生的一些错误。比如我们要将一个p元素隐藏,但是如果不加上这句的话,在p元素没有加载完成,我们去隐藏它,这样就会产生错误,达不到我们预期的代码效果
$(document).ready(function(){
// jQuery methods go here...
});
例如,下面的这个例子,运行后p元素是不会隐藏的。但是如果加上前面一句话后,出现的就是一个空白的页面,即p元素被隐藏了。
<head> <title></title> <script type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></script> <script type="text/javascript"> $( "p" ).hide(); </script> </head> <body> <p>我将要被隐藏了</p> </body>
$(document).ready(function(){})可以简写为$(function(){})
jquery选择器
元素选择器
在页面中选取所有 <p> 元素: $("p")
#id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。 通过 id 选取元素语法如下: $("#test")
.class 选择器 jQuery 类选择器可以通过指定的 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> 元素
jquery 事件:
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
常见 DOM 事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dblclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
例子:当我们点击p元素时,其会消失
$( document ).ready( function () { $( "p" ).click( function () { $( "p" ).hide(); } ); } );
例子:当我们把鼠标移到p元素上时,其背景变为红色,当鼠标离开时背景变为蓝色。
$( document ).ready( function () { $( "p" ).mouseover( function () { $( "p" ).css( "background-color","Red"); } ); $( "p" ).mouseleave( function () { $( "p" ).css( "background-color","Blue" ); } ); } );