jQuery 及ajax学习

ajax特点：局部刷新


ajax的核心或引擎 ：XMLHttpRequest对象


优势：
1.通过异步模式，提升了用户体验
2.优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了带宽占用
3.ajax引擎在客户段运行，承担了一部分本来由服务器来承担的功能，从而减少了大用户量下的服务器负载

实例

1.用 ajax 编写登录系统

JS代码

function User(){
var username = $("#userid").val();
var password =$("#userpad").val();
$.get("UserServlet",{username:username,password:password},function(data){//传输数据，date为接收到的数据
if(data=="1")
alert("用户名不存在");
else
alert("用户名存在");
});
}

HTML代码

<div align="center">
  用户名：<input type="text"  id="userid"  value="用户名"/>
  密码：<input type="password" id="userpad"/>
  <input type="button" onclick="User()" value="提交">
  </div>

Servlet代码

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
UserDao userDao = UserDao.getInstance();
Map<String, String> map = new HashMap<String, String>();
map.put("username", username);
map.put("password", password);
User user = userDao.getMap(map);
PrintWriter out =response.getWriter();
if(user==null){
out.print("1");//向页面返回数据
}else{
out.print("0");
}
}

（jdbc部分见文章《通过Servlet验证登录信息并录入登录信息》）

选择器

html代码

<div id="notMe"  ><p>id="notMe"</p></div><b>字体加粗</b>

<div class="class">这是class</div>

1.id选择器

$("#notMe")

结果

<div id="notMe"  ><p>id="notMe"</p></div>

 2.标签选择器

$("b")

结果

<b>字体加粗</b>

3.class选择器

$(".class")

结果

<div class="class">这是class</div>

4.多个查找

HTML代码

<div>div</div><p class="myClass">p class="myClass"</p><span>span</span><p class="notMyClass">p class="notMyClass"</p>

内容

$("div,span,p.myClass")

结果

<div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span>

HTML代码

<form>  <label>Name:</label>  <input name="name" />  <fieldset>      <label>Newsletter:</label>      <input name="newsletter" /> </fieldset></form><input name="none" />  <input name="nn"/>

5.给定的祖先元素下匹配所有的后代元素

内容

$("form input")

结果

<input name="name" />, <input name="newsletter" /> 

6. 给定的父元素下匹配所有的子元素

 $("form >input")

结果

<input name="name" />

7.匹配所有紧接在 form 元素后的 input 元素--注：匹配到所有form后的紧挨着的input元素

$("form+input")

结果

<input name="none" />

8.匹配 form 元素之后的所有 input 元素

$("form~input")

结果

<input name="none" />  <input name="nn"/>

9.匹配 的第一个元素

$("input:first")

结果

 <input name="name" />

10.$("h1,h2").remove();//删除选中的部分、remove()

HTML代码 <h1>这是H1</h1>

H中间

<h2>这是H2</h2>

结果

H中间

11删除选中的部分,相当于清空标签内的内容留下标签、empty()

$("h1,h2").empty();

HTML代码 <h1>这是H1</h1>

H中间

<h2>这是H2</h2>

结果

<h1></h1>

H中间

<h2></h2>