jQuery-1.2学习笔记：基础用法与Ajax交互

需积分: 33 150 浏览量更新于2024-08-02 收藏 194KB DOC 举报

"这篇资源是一份关于jQuery的学习笔记，主要涵盖了jQuery 1.2版本的基础用法和与Java的异步交互，以及Ajax的基础概念。" 在深入学习jQuery之前，首先要理解它是一个JavaScript库，旨在简化HTML文档遍历、事件处理、动画制作和Ajax交互。在jQuery 1.2这个版本中，我们可以通过以下步骤开始使用它： 1. 引入jQuery库：要使用jQuery，你需要在HTML文件中引入jQuery库的JS文件。例如，你可以通过在`<head>`标签或`<body>`标签底部添加`<script>`标签来引入，如下所示： ```html <script type="text/javascript" src="jslib/jquery-1.2.js"></script> ``` 这行代码告诉浏览器去加载指定路径下的jQuery 1.2库。 2. jQuery选择器：jQuery提供了强大的选择器来选取DOM元素。例如，`$("#userName")`会选择ID为"userName"的元素，`$("input[name='userName']")`则会选择name属性为"userName"的所有输入元素。 3. 获取和设置值：在jQuery中，可以使用`.val()`方法来获取或设置表单元素的值。例如，`var userName = $("#userName").val();`会获取ID为"userName"的元素的值，而`$("#userName").val("新值");`则会设置该元素的值。 4. AJAX交互：jQuery封装了AJAX操作，使得与服务器端的异步交互变得更加简单。`.get()`方法是jQuery中的一个Ajax函数，用于发送GET请求。它接受三个参数：服务器接口URL、传递的数据（在本例中是用户名）、以及当请求成功时调用的回调函数。例如： ```javascript $.get("AjaxServer", {name: userName}, huiLai); ``` 在回调函数`huiLai`中，可以处理服务器返回的数据并更新页面。 5. 优化AJAX调用：为了更简洁，可以将数据获取和回调函数整合在一起，如`verify2`函数所示： ```javascript function verify2() { $.get("AjaxServer", {name: $("#userName").val()}, function(huiLaide) { $("#yanzheng").html(huiLaide); }); } ``` 这样，整个验证过程就更加紧凑了。除了jQuery的核心功能外，笔记中还提到了Ajax基础，即XMLHttpRequest对象的使用。在原生JavaScript中，创建XMLHttpRequest对象用于发起Ajax请求，但jQuery已经对此进行了封装，使其更容易使用。这份学习笔记提供了关于jQuery 1.2版本的基本用法，包括如何引入库、选择和操作DOM元素、进行异步请求，以及对比了jQuery与原生JavaScript中实现相同功能的方式。对于初学者来说，这是掌握jQuery入门知识的好资料。

<servlet-mapping>

<servlet-name>AjaxJQuery</servlet-name>

<url-pattern>/AjaxJQuery</url-pattern>

</servlet-mapping>

三，jquery 读取 XML 的基本用法

ajax.js 代码

function AJAXXMLS(){

var userName = $("#userName").val();

/*jquery封装好的异步交互方法也可以用$.get()和$.post()方法*/

$.ajax({

type:"POST", //设置交互方式

url:"AJAXXMLServer",//设置交互url

data:"userName="+userName,//设置交互的数据

dataType:"xml",//告诉jquery返回数据的各式

success:huilai//设置回调方法

});

}

function huilai(data){

/*dom方式获得标签对象转换成jquery对象*/

var jqueryObj = $(data);

/*获得XML标签名字*/

var message =jqueryObj.children();

/*获得XML标签内的文本内容*/

var text = message.text();

/*将XML文本内容动态现实在页面的<span>标签文本中*/

$("#yanzheng").html(text);

}

HTML 页面代码

<body>

<h1>Jquery读取XML各式文件的简单应用：用户名验证</h1>

<hr />

<br>

</form>

</body>

服务器端代码

public void doPost(HttpServletRequest request,

剩余25页未读，继续阅读

jeyor

粉丝: 72
资源: 197

jQuery-1.2学习笔记：基础用法与Ajax交互

jQuery学习笔记

韩顺平jquery学习笔记及练习

jQuery学习笔记——事件

JQury 学习笔记

Ajax学习笔记pink老师

bootstrap 学习笔记 轮播（Carousel）插件

jquery轮播图黑马

servlet+jsp+jquery

file:///C:/Users/liyji/AppData/Local/Temp/LogiUI/Pak/js/jquery-1.3.2.min.js

jquery .turn

最新资源

bootstrap 学习笔记轮播（Carousel）插件