补缺补漏之jQuery篇第一天

JQuery基本语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:

$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有 < p>元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的< p> 元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

文档就绪事件

$(document).ready(function(){
开始写 jQuery 代码…
});

把所有jQuery函数放在一个document ready函数中是为了防止文档在完全加载之前运行jQuery代码，以免发生操作失败问题。
例如：
试图隐藏不存在的元素
获得未加载完成的图像的大小

jQuery与JavaScript入口函数差别

JavaScrip入口函数

window.οnlοad=function(){
//执行代码
}

jQuery入口函数代码（简洁版）

$(function(){
//执行代码
});

• JQuery会在html的DOM（标签）都加载之后就会去执行。
• JavaScript的window.onload事件是等到所有内容和外部文件等都加载完之后才会执行。

选择器

jQuery选择器允许你对HTML元素组或单个元素进行操作。
jQuery选择器是基于元素的id，类，类型，属性，属性值等选择HTML元素。（类似于CSS选择器）

元素选择器

jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 < p> 元素:

$(“p”)

实例
点击隐藏< p>元素

$(document).ready(function(){
$(“botton”).click(function(){
$(“p”).hide();
)};
});

自己试一试

id选择器

jQury #id选择器通过HTML元素的id选取指定的元素
页面中元素的id应该是唯一的，所以在页面中选取唯一元素需要用id选择器

$("#test")

实例
点击按钮id="test"属性的元素被隐藏：

$(document).ready(function(){
$(“button”).click(function(){
$("#test").hide();
});
});

自己试一试

.class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

实例
用户点击按钮后所有带有class="test"属性的元素都隐藏

$(document).ready(function(){
$(“button”).click(function(){
$(".test").hide();
});
});

自己试一试

选取所有元素

jQury所有元素选择器可以选取所有元素

$("*")

实例
点击按钮隐藏所有元素

$(document).ready(function(){
$(“button”).click(function(){
$("*").hide():
});
});

自己试一试

选取当前HTML元素

jQury当前元素选择器可以选取当前元素

$(this)

实例
点击按钮隐藏当前元素

$(document).ready(function(){
$(“button”).click(function(){
$(this).hide();
});
});
自己试一试

选择器拓展

选取class为intro的< p>元素

$(“p.intro”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“p.intro”).hide();
});
});

自己试一试

选取第一个 < p> 元素

$(“p:first”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“p:first”).hide();
});
});

自己试一试

选取第一个 < ul> 元素的第一个 < li> 元素

$(“ul li:first”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“ul li:first”).hide();
});
});

自己试一试

选取每个 < ul> 元素的第一个 < li> 元素

$(“ul li:first-child”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“ul li:first-child”).hide();
});
});

自己试一试

选取带有 href 属性的元素

$("[href]")

实例

$(document).ready(function(){
$(“button”).click(function(){
$("[href]").hide();
});
});

自己试一试

选取所有 target 属性值等于 “_blank” 的 < a> 元素

$(“a[target=’_blank’]”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“a[target=’_blank’]”).hide();
});
});

自己试一试

选取所有 target 属性值不等于 “_blank” 的 < a> 元素

$(“a[target!=’_blank’]”)

实例

$(document).ready(function(){
$(“button”).click(function(){
$(“a[target!=’_blank’]”).hide();
});
});

自己试一试

选取所有 type=“button” 的 元素 和 < button> 元素

$(":button")

实例

$(document).ready(function(){
$(“button”).click(function(){
$(":button").hide();
});
});

自己试一试

选取偶数位置的 < tr> 元素

$(“tr:even”)

实例

$(document).ready(function(){
$(“tr:even”).css(“background-color”,“yellow”);
});

自己试一试

选取奇数位置的 < tr> 元素

$(“tr:odd”)

实例

$(document).ready(function(){
$(“tr:odd”).css(“background-color”,“yellow”);
});

自己试一试

jQuery事件

什么是事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
例

• 在元素上移动鼠标
• 选取单选按钮
• 点击元素

事件中常用术语“触发”。

jQuery 事件方法语法

在jQuery中，大多数DOM事件都有一个等效的jQuery方法。
如何从页面中制定一个点击事件：

$("p").click();

接着定义触发事件的条件，可以通过事件函数实现它

$("p").click(function(){
     //动作触发代码
 });

常用jQuery 事件方法

$(document).ready()
该方法允许我们在文档完全加载后再执行函数
click
click（）方法是当按钮点击事件被触发时会调用一个函数。
dblclick
双击元素时，会发生dblclick事件。
dblclick（）方法会触发dblclick事件，或规定触发时运行的函数
mouseenter
当鼠标指针穿过元素时，会发生mouseenter事件。
mouseenter（）方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数。
点击试一试
mouseleave（）
当鼠标指针离开元素时，会发生mouseleave事件。
mouseleave（）
mouseleave方法触发mouseleave事件，或规定当发生mouseleave事件时运行的函数。
点击试一试
mouseup
当在元素上松开鼠标时会发生mouseup事件
mouseup（）方法触发mouseup事件，或规定当发生mouseup事件时运行的函数。
点击试一试
hover()
hover()方法用于模拟光标悬停事件。
相当于mouseenter和mouseleave的结合，鼠标移动到元素上是会触发mouseenter，鼠标移出元素时会触发第二个函数mouseleave。
点击试一试
focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
点击试一试
blur()
当元素失去焦点时，发生 blur 事件。
blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
点击试一试