Java Web开发(四) JavaScript库jQuery学习(2)选择器和事件方法

 

一：选择器

1.简介：jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS选择器和一些自定义的选择器。

之前看到的jQuery基础语法的$()就是选择器。允许对HTML元素组或单个元素进行操作。

比如下面的语句：

$(document).ready(function(){
    $(button).click(function(){
        $(this).hide();
    });
})

就是先选择document整个HTML文件，然后选择按钮，之后选择当前元素进行隐藏。

2.下面进行一些常用的实例讲解：

(1)选择标签的id元素

在页面中选取唯一的id元素需要通过 #id 选择器

语法如下：

$("#id等于的值")

(2)选择标签的class元素

在页面中选取class元素需要通过.class选择器

语法如下：

$(".clss元素等于的值")

(3)其他实例

下面是一些实例和它们对应的含义：

含义	语法
选取所有元素	$("*")
选取当前 HTML 元素	$(this)
选取 class 为 intro 的 <p> 元素	$("p.intro")
选取第一个 <p> 元素	$("p:first")
选取第一个 <ul> 元素的第一个 <li> 元素	$("ul li:first")
选取每个 <ul> 元素的第一个 <li> 元素	$("ul li:first-child")
选取带有 href 属性的元素	$("[href]")
选取所有 target 属性值等于 "_blank" 的 <a> 元素	$("a[target='_blank']")
选取所有 target 属性值不等于 "_blank" 的 <a> 元素	$("a[target!='_blank']")
选取所有 type="button" 的 <input> 元素 和 <button> 元素	$(":button")
选取偶数位置的 <tr> 元素	$("tr:even")
选取奇数位置的 <tr> 元素	$("tr:odd")

3.(1)注：通过 $(":button") jQuery 中表单选择器，可以选取所有 type="button" 的 <input> 元素 和 <button> 元素，如果去掉冒号，$("button")只能获取 <button> 元素。

(2)关于:和[ ]这两个符号的理解

:   为 jQuery 的过滤选择器，语法类似于 css 中的伪类选择器，可以理解为可以选择种类的意思，比如h:first和p:second可以理解为h种类的第一个和p种类的第二个，分为基本过滤（p:first 之类）、内容过滤（:empty）、子元素过滤(:first-child)。

[ ] 为属性过滤 [href] 选择器，可以理解为属性的意思，选择[ ]里边的属性。

 

二：独立文件使用jquery

我们可以吧jquery函数代码抽出来放到独立的js文件中去，并用src进行引用，这样比较便于维护。

效果如下：

 

二：事件方法(事件处理程序)

本作者有一个项目需要短时间内完成，下面的内容先具体要讲解一下要用到的内容，后面会介绍一下我的项目。

这里只涉及按钮事件。