Jquery学习

jQuery概述：

jQuery是一个快速、简洁的 JavaScript 框架，是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess，DoMore”，即倡导写更少的代码，做 更多的事情。jQuery封装了 JavaScript 常用的功能代码，提供一种简便的 JavaScript 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容目前各种主流浏览器，其语言特点包括以下几个方面：

(1)快速获取文档元素。

js中如何获取文档元素呢？ docment.getElmentbyid

jQuery的选择机制构建于CSS的选择器，提供了快速查询DOM文档中元素的能力，而且大大强化了 JavaScript 中获取页面元素的方式。

(2)提供漂亮的页面动态效果。

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页,许多网站都使用jQuery的内置效果,例如淡入淡出、元素移除等动态特效。

(3)创建Ajax无刷新网页。

使用Ajax可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，需要客户端与服务器进行通信。如果不使用Ajax，每次数据更新后必须重新刷新整个网页，而使用Ajax特效后，可以对页面进行局部刷新，提供动态的效果。

(4)jQuery对基本 JavaScript 结构进行了增强，例如元素迭代和数组处理等操作。

(5)增强的事件处理。

jQuery提供了各种页面事件，可以避免程序员在HTML中添加太多的事件处理代码，最重要的是，其事件处理器消除了各种浏览器的兼容性问题。

(6)更改网页内容。

jQuery可以修改网页中的内容，例如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用 JavaScript 代码处理的方式。

JavaScript 与jQuery有本质的区别。 JavaScript 是一种语言，而jQuery是建立在 JavaScript 脚本语言上的一个基本库，把 JavaScript 进行了封装，利用jQuery可以更简单地使用 JavaScript 。jQuery是当前最流行的 JavaScript 库，封装了很多预定义的对象和实用函数，jQuery是一个轻量级的 JavaScript 库，压缩之后很小，与CSS、浏览器兼容。

JQuery的引入方式：

<!--jquery依赖--> <dependency> <groupId>org.webjars</groupId> <artifactId>jquery</artifactId> <version>3.5.1</version> </dependency>

 

JQuery对象的基本使用

语法格式：${} $()

JQuery选择器

基本选择器

标签选择器 $（"name"）

id选择器 $（"#name"）

类选择器 $（".name"）

层次选择器

重点：

后代选择器 $（"A B"）

子类选择器$（"A > B"）

了解：

兄弟选择器（同级选择器）$（"A"）.siblings("B")

相邻选择器$(获取下一个兄弟元素) $（"A + B"）

(非重点以后需要用到再讲)

属性选择器

过滤选择器

JQuery中的dom操作

操作内容：

html()获取或修改元素的标签体

text()获取或修改元素的文本内容

注意：

html()获取第一个，设置所有

text()获取所有，设置所有

操作属性

val()获取或者修改表单的value值

attr()获取或者修改自定义属性值

attr(“属性名”，“属性值”)添加属性

removeattr("name");

prop()获取或者修改原生属性值

操作样式

1.css()

2.addClass()

3.removeClass()

4.toggleClass()