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进行引用,这样比较便于维护。

效果如下:

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

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

这里只涉及按钮事件。

猜你喜欢

转载自blog.csdn.net/ITxiaoangzai/article/details/83756348