前面我们了解到了如何获取使用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" );
} );
} );
时间： 2024-10-01 23:35:54