jquery如何使用类选择器(java插件安装方法)

1.1jQuery简介及环境搭建1.1.1jQuery简介

jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象及函数的封装。jQuery凭借其简洁的语法和跨平台的兼容性,极大的简化了JavaScript开发人员遍历HTML、操作DOM、控制页面样式、处理事件、执行动画、扩展新的jQuery插件和开发Ajax等操作。

jQuery的设计思想是writeless do more(写的少,做的多)。一般情况下,jQuery能做的JavaScript也都能做,但使用jQuery既能减少代码量,又能大幅提高开发效率。

1.1.2jQuery环境搭建(1)获取jQuery库

jquery如何使用类选择器(java插件安装方法)

下载开发版或发布版的jQuery库,如下

开发版和发布版的区别如下:

一般建议:在开发时使用开发版;开发完毕后,进行项目发布时,再将开发版替换成发布版。

本书使用的jQuery库是jquery-1.12.3.js。

(2)引入jQuery库

引入jQuery库实际就是引入外部js文件,具体步骤如下(将jQuery库引入到index.jsp中):

①在Web项目的WebContent目录中新建js目录,将jquery-1.12.3.js放入js目录,如图,

②在index.jsp中引入js库,如下,

index.jsp

1.1.3开发第一个jQuery程序

index.jsp

运行结果:

其中

作用类似于传统JavaScript中的window.onload事件,但仍然与window.onload有一些区别,如下

在编写jQuery程序时,美元符号“$”和关键字“jQuery”是等价的,例如以上代码也可以写成以下形式:

1.1.4DOM对象和jQuery对象(1)DOM模型

在学习DOM对象之前,我们有必要先学习一下DOM模型。

DOM是DocumentObject Model(文档对象模型)的简称,只有(X)HTML、XML等文档结构的语言才具有DOM。

以HTML页面为例:每一个HTML页面,都具有一个DOM,每一个DOM都可以表示成一棵树。如下,是一个基本的HTML程序:

domDemo.html

运行结果:

可以把上面的HTML结构描述成一颗DOM树,如下图,

DOM中的节点通常分为三种类型:元素节点、属性节点和文本节点。

①元素节点

像domDemo.html中的<html>、<body>、<p>、<li>等标签形式的节点,就称之为元素节点。正是这些元素节点的堆积,才形成了一个HTML文档的结构。元素节点之中还可以嵌套一些子元素节点,例如本例中的<li>就是<ul>元素的子元素节点,而<ul>又是<body>元素的子元素节点,<html>元素是根元素节点等。

②属性节点

属性节点的作用是对元素节点进行更具体的描述。例如,<img>元素中的src和alt就是属性节点,可以用来对图片做进一步的描述。

不难发现,属性节点总是被放在元素节点的标签内,因此属性节点也算作是元素节点的子节点。但并不是所有元素节点都包含属性节点,例如,本例中<ul>元素就没有包含任何属性节点。

③文本节点

HTML文档的内容都是由文本节点提供的,文本节点就是指HTML中的文字内容。本例中的“你最喜欢的颜色是?”、“紫色”等都是文本节点。

文本节点总包含在元素节点的内部,例如<li>紫色</li>。但并不是所有元素节点都一定包含文本节点,例如<img>元素节点就没有包含文本节点。

(2)DOM对象

在JavaScript中,可以使用getElementById()或getElementsByName()等方法获取DOM元素节点。通过该方式得到的DOM元素就称之为DOM对象,DOM对象可以使用JavaScript定义的方法或属性,如下:

var dom = document.getElementById(“myId”) ;//获取DOM对象

varhtml = dom.innerHTML ;//DOM对象使用JavaScript中的属性

(3)jQuery对象

通过jQuery选择器选中的HTML元素,就是jQuery对象,例如:

//使用jQuery对象的html()方法,等价于document.getElementById(“#myId”).innerHTML;

var myHtml = $(“#myId”).html();

以上代码,通过选择器$(“#myId”)选择了id=”myId”的HTML元素,返回的myHtml就是jQuery对象。jQuery选择器会在后文详细介绍。

值得注意的是,DOM对象的方法/属性和jQuery对象的方法/属性是彼此独立的,即DOM对象只能使用DOM对象的方法/属性,而jQuery对象只能使用jQuery对象的方法/属性。例如DOM对象可以使用DOM对象拥有的innerHTML属性,但不能使用jQuery对象拥有的html()方法。

(4)DOM和jQuery对象之间的相互转换

刚才提到,DOM对象的方法/属性和jQuery对象的方法/属性是彼此独立的,但是在某些情况下,如果一定需要用DOM对象来调用jQuery对象的属性/方法;或者要用jQuery对象来调用DOM对象的属性/方法,就必须进行DOM对象与jQuery对象之间的类型转换。

①将DOM对象转为jQuery对象

将一个DOM对象用$()包裹起来,就可以转换成一个jQuery对象,即$(DOM对象)就是一个jQuery对象,如下:

var domObject = document.getElementById(“myId”);//获取一个DOM对象

var $jQueryObject = $(domObject); //通过$()将DOM对象转为jQuery对象

其中$()称为jQuery工厂。

②将jQuery对象转为DOM对象

jQuery对象的本质是一个类似数组或集合的对象,而DOM对象的本质是一个普通的对象。因此jQuery对象转DOM对象的本质,就是将一个数组或集合转为一个普通对象。

a.方式一

将jQuery对象看作一个数组,通过使用数组下标的方式转为DOM对象,例如:

var $jqueryObject = $(“#myId”) ; //获取jQuery对象

var jsObject = jqueryObject[0] ; //通过数组下标的方式,将jQuery对象转为DOM对象

b.方式二

将jQuery对象看作一个集合,通过使用get(index)的方式转为DOM对象,例如:

var $jqueryObject = $(“#myId”) ; //获取jQuery对象

var jsObject = jqueryObject.get(0) ; //通过get(index)的方式,将jQuery对象转为DOM对象

说明:

在Dom对象和jQuery对象的变量命名上,一般习惯给jQuery对象的变量名前加上$,表示区分。例如,var $variable = jQuery对象; var variable=DOM对象。

1.2jQuery选择器

选择器是jQuery的根基,jQuery的大部分功能都依赖于选择器。jQuery选择器的语法规则类似于CSS选择器,可以用来选取网页中的元素,并且有着良好的浏览器兼容性。jQuery选择器的种类有很多,大体上可以分为类CSS选择器和过滤选择器。

1.2.1类CSS选择器

顾名思义,类CSS选择器的构成规则与CSS选择器完全相同,常用的类CSS选择器有jQuery基本选择器、层次选择器、属性选择器。

(1) 基本选择器

常见的基本选择器及简介如下表:

其中,在使用交集选择器时,除了“选择器1”以外的其他选择器不能是标签选择器(为了防止歧义),例如:无法用$(“.titlediv”)表示class=”title”并且是div的元素,因为.title和div连在一起会造成歧义,会被程序理解成是class= “titlediv”的元素。

示例:

index.jsp

运行结果:

(2) 层次选择器

层次选择器通过DOM 元素之间的层次关系来获取元素,如获取相邻关系、同辈关系、后代关系、父子关系的元素等,如下。

示例:

index.jsp

运行结果:

(3) 属性选择器

属性选择器是通过HTML元素的属性来选择元素。

示例:

index.jsp

运行结果:

1.2.2过滤选择器

过滤选择器是通过一些过滤规则来筛选元素,语法特点是使用“:”作为过滤选择器的标识符,如使用$(“li:first”)来过滤出第一个li元素。常见的过滤选择器有基本过滤选择器、可见性过滤选择器、表单对象过滤选择器、内容过滤选择器等。

(1)基本过滤选择器

基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素、或根据索引选取元素,如下:

示例:

index.jsp

运行结果:

(2)可见性过滤选择器

可见性过滤选择器可以根据元素显示状态来选取元素,如下:

例如$(“p:hidden”).show()表示将所有隐藏的<p>元素的状态变为显示;$(“p:visible”).hide()表示将所有显示的<p>元素的状态变为隐藏。show()的功能是显示,hide()的功能是隐藏,会在后续章节详解。

发表评论

登录后才能评论