jQuery和AJAX
一、定义
1.jQuery是一个JavaScript类库，安装时不需要添加额外的环境变量和配置文件。
2.配置：在相应的页面导入
<script type="text/javascript" src="jquery-1.7.2.js"></script>
二、设计思想
1.将HTML DOM对象进行封装，成为jQuery对象，并提供丰富的API来操作这些对象，从而实现动态更新HTML的目标。
2.使用jQuery之后，JavaScript操作不在是HTML元素对应的DOM对象，而是包装DOM对象的jQuery对象。
3.JavaScript通过调用jQuery对象的方法来改变它所包装的DOM对象的属性，从而动态更新更新HTML对象。
三、获取jQuery对象
1.使用jQuery()函数，该函数也可以简写为$()
1)获取文档中所有div标签对应的jQuery对象：$("div")
2)获取文档中id为id的jQuery对象：$("#id")
2.调用jQuery对象的某个方法返回该jQuery对象(绝大部分)
1)var obj = $("#id"); obj.text("你是谁")；
四、jQuery核心函数
示例
<!DOCTYPE html> <html> <head> <title>jQuery.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-1.7.2.js"></script> </head> <body> <div id = "div1"></div> <div id = "div2"></div> </body> <script type="text/javascript"> jQuery(ready);//页面加载完毕后调用ready方法 //该语句是$(document).ready();的缩写。 function ready(){ alert("页面加载完毕"); } //获取所有div标签对应jQuery对象，并改变其内容 $("div").append("DIV标签内容"); //使用HTML字符串创建一个jQuery对象，并添加至body内 var str = "<input type='button' value='点击' onclick='change()'/>"; $(str).appendTo(document.body); function change(){ //获取id为div1的jQuery，并改变其内容 $("#div1").text("DIV1改变"); $("#div2").text("DIV2改变"); } //将DOM对象包装为jQuery对象，并改变其css样式 var obj = $(document.getElementById("div1")); obj.css("background-color","#00ff00"); </script> </html>
五、jQuery选择符
1.分类$()函数
1）#id：根据指定ID匹配一个元素，示例<div id=""></div>,ID
2）element：根据指定元素名称匹配所有元素，示例<div>1</div> <div>2</div> <div>3</div>，标签名
3）.class：根据指定的类型匹配元素，示例<div class="">1</div> <span class="">1</span>，class
4）*：匹配所有的元素，示例<div id=""></div> <div>1</div> <div class="">1</div> <span class="">1</span>，所有的
5）selector1，selector2，selectorN：将每一个选择符匹配到的元素合并后一起返回，示例<div id=""></div> <div>1</div> <div class="">1</div> <span class="s">1</span>，多个一起应用$("div,span.s")
6）parent>child：在指定的父元素下匹配所有的子元素，示例
<!DOCTYPE html> <html> <head> <title>jQuery选择符示例</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-1.7.2.js"></script> </head> <body> <form> <lable>Name:</lable> <input name = "name"/> <fieldset> <lable>Newsletter:</lable> <input name = "newsletter"/> </fieldset> </form> <input name = "none"/> </body> <script type="text/javascript"> $("form>input")//匹配表单中所有子级input元素 //返回结果为 [<input name = "name"/>] </script> </html>
六、jQuery操作DOM对象
1）html()：使用html()方法读取或者设置元素的innerHTML。就是相当于javascript里头的innerHTML。
2）text()：使用text()方法读取或者设置元素的innerText。就是相当于javascript里头的innerText。
3）attr()：使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
4）removeAttr：使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
5）append：用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子)
6）prepend：在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)
7)appendTo：子元素.appendTo(父元素);//主动巴结!到最后一个
8) prependTo：子元素.prependTo(父元素);//主动巴结到第一个。
9)css()：改元素CSS样式
10）show()/hide()：显示/隐藏元素
11）click：单击事件时的处理函数
12）val：获取元素值
<!DOCTYPE html> <html> <head> <title>jQueryDOM示例</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-1.7.2.js"></script> </head> <body> <div id = "name"></div> <div id = "poss"></div> <br/> <form> 用户名： <input type="text" id="username" size="20"/> <span id="userinfo"></span><br/><br/> 密 码： <input type="text" id="possword" size="21"/> <span id="possinfo"><font color="red"></font></span><br/><br/> <input type="button" id="ok" value="确定"/> </form> </body> <script type="text/javascript"> jQuery(ready);//页面加载完毕后调用ready方法 //该语句是$(document).ready();的缩写。 function ready(){ alert("页面加载完毕"); $("#ok").click(login);//为确认按钮指定点击事件 } function login(){ ///获取表单的用户名和密码 var username = $("#username").val(); var possword = $("#possword").val(); if(username!="admin"){ //填充错误信息，并制空用户名 $("#userinfo").html("<font color = 'red'>用户名不正确</font>"); $("#username").val(""); }else{ $("#userinfo").html(""); } if(possword!="admin"){ //填充错误信息，并制空密码 $("#possinfo>font").text("密码不正确"); $("#possword").val(""); }else{ $("#possinfo>font").text(""); } if(username=="admin"&&possword=="admin"){ alert("登入成功"); $("#name"). append("班级：小班").css({color:"0000ff"}); $("#poss"). text("类型：精英").attr({style:"color:blue"}); $("form").hide(); } } </script> </html>
七、jQuery插件
1.日期插件
1）名称：DarePicker
2）文件
jquery-ui-1.8.5.custom.min.js
jquery.ui.datepicker-zh-CN.js
jquery-ui-1.8.5.custom.css
3)HTML代码
<h2 class="demoHeaders">Datepicker</h2> <input type="text" name = "datepicker" id="datepicker"/>
$(function(){ $('datepicker').datepicker(); })
2.树形视图
1）名称：Treeview
2）文件
jquery.treeview.js
jquery.treeview.css
3)HTML代码
<h2 class="demoHeaders">Treeview</h2> <ul id ="treeview" class="filetree"> <li> <span class="folder">Folder 1</span> <ul> <li><span class="file">Item 1.1</span></li> </ul> </li> <li> <span class="folder">Folder 2</span> <ul> <li><span class="folder">Item 2.1</span></li> <ul> <li><span class="file">Item 2.1.1</span></li> <li><span class="file">Item 2.1.2</span></li> </ul> </ul> </li> </ul>
3.链接预览
1）名称：linklook
2）文件：linklook.js
3)HTML和JSP
<h2 class="demoHeaders">Link Previvew</h2> <p><a href="http://www.baidu.com">百度</a></p> <p><a href="http://www.google.com">谷歌</a></p>
$(function(){ $('p').linklook(); })
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'link.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <script type="text/javascript"> <% String url = request.getParameter("url"); String img = "./images/"; if(url.equals("http://www.baidu.com")){ img += "baidu.jpg"; }else if(url.equals("http://www.google.com")){ img += "google.jpg"; }else if(url.equals("http://www.oracle.com")){ img += "oracle.jpg"; } %> </script> <body> This is my JSP page. <br> <jsp:forward page='<%= img %>'> </body> </html>
4.文字限制器
1）名称:Textlimit
2）文件:Textlimit.js
<!-- 文字限制器 --> <h2 class="demoHeaders">Text limit</h2> <form> <textarea name = "textlimit1" cols="40" rows="2" id="textlimit1"></textarea> 还有<span class="counter1"></span>字符可以输入 <input type="text" name = "textlimit2" value ="" id="textlimit2" /> 还有<span class="counter2"></span>字符可以输入 </form>
//文字 $(function(){ $("#textlimit1").textlimit("span.counter1",36); $("#textlimit2").textlimit("span.counter2",16); });
5.表单验证
1）名称：Form Validate
2）文件：jquery.validate.js
<style type="text/css"> #form{ width: 500px; } #form label.error{ margin-left: 10px;color: red; font-style: italic; font-size: 13px; } #form input.submit{ margin-left: 80px; } </style>
<!-- 表单验证 --> <h2 >Form Validate</h2> <form class="cmxform" id="form" method="get" action=""> <p> <label for="cname">Username*:</label> <input id="cname" name="name" class="required" size="25"/> </p> <p> <label for="cemail">E-Mail*:</label> <input id="cemail" name="email" class="required email" size="25"/> </p> <p> <label for="curl">URL*:</label> <input id="curl" name="url" class="url" size="25"/> </p> <p> <label for="ccomment">Comment*:</label> <textarea id="ccomment" name="comment" class="required" col="25"></textarea> </p> <p> <input class="submit" type="submit" value="提交" /> </p> </form>
//表单验证 $(function(){ $.validator.setDefaulte({ submitHandler:function(){ alert("submitted"); } }); $("#form").validate({ rules:{ name:{required:true,mianlength:2}, email:{required:true,email:true}, url:{url:true}, comment:{required:true} }, messages:{ name:{ required:"请输入姓名", mianlength:"姓名中至少包含两个字符" }, email:{ required:"请输入电子邮箱地址", email:"非法的电子邮箱地址" }, url:"请输入合法的URL", comment:"请输入备注信息" } }); });
八、ajax特点
1.允许在同一个页面中多次发送请求，并动态加载服务器数据至页面
2.有效的避免页面的频繁刷新
3.兼容性问题
4.load方法
语法：load(url,data,callback)
url后面可以加选择器，之间用空格，任何一个html节点，都可以使用load方法，直接插入html节点中
九、ajax组成
1.CSS
2.JS
3.XML
十、ajax方法
<!DOCTYPE html>
<html>
<head>
<title>AJAX.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jquery-1.7.2.js"></script>
</head>
<script type="text/javascript">
$.ajax({
type:"post",//post get
async:true,//boolean类型 默认为true 异步请求
url:"http://www.baidu.com",//string类型 url 链接请求
data:"name=zdf",//object或Sting类型
dateType:"text",//服务器返回的数据类型 string xml json等
success:state
//cache:boolean类型 是否从浏览器缓存中加载请求信息，默认true
//contentType：string类型 指定发送到服务器信息的MINE类型，默认为"application/x-www-form-urlencoded"
})
function state(data){
//回调函数，数据在data中
}
</script>
<body>
This is my HTML page. <br>
</body>
</html>
