jQuery基础操作

一.什么是jQuery

jQuery是一个快速、简洁的JavaScript框架；jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

二.使用jQuery的好处

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

三.jQuery的安装

下载

在网上下载下载 jQuery 库，有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 http://www.jquery.com 中下载。

引入

Query 库是一个 JavaScript 文件，我们可以使用 HTML 的

1

四.jQuery基础操作

1.jQuery选择器

id

class

标签

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

今天我们学习jquery

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

其实用法和css选择器类似，对css比较熟悉的同学应该会很容易上手，这里只举三个例子介绍一下。

2.jQuery中的dom操作

html(): 获取/设置元素的标签体内容

text(): 获取/设置元素的标签体纯文本内容

val() : 获取/设置元素的value属性值

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

多隆永远的"神"！

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

输出效果：

3.jQuery中的基本事件

click事件

blur事件

change事件

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%--动态上下文路径--%>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

4.jQuery实现AJAX

jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

响应服务请求的类：

import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/ajax") public class AjaxServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setContentType("text/html;charset=UTF-8"); String name = req.getParameter("user"); if(name.equals("多隆")){ resp.getWriter().write("用户名冲突！"); }else { resp.getWriter().write("用户名正常！"); } } }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

HTML jQuery

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。