jQuery概述
功能：
方位页面框架的局部
修改页面的表现
更改页面的内容
响应事件
为页面添加动画
与服务器异步交互
简化常用的JavaScript操作
使用jquery需要导入js文件
jquery-1.10.1.js，jquery.min.js
jQuery
选择器：选择页面中的某一类元素或某个元素
H2 a{ 添加CSS属性 }
调用jQuery
${“ h2 a ”}
2.html
<!DOCTYPE html>
<html>
<head>
<title>jquery选择器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="jquery-1.10.1.js"></script>
<script language="javascript">
window.onload = function() {
//选择匹配元素
var oElements = $("h2 a"); //选择匹配元素
for ( var i = 0; i < oElements.length; i++)
oElements[i].innerHTML = i.toString();
//jquery去空格,trim() 清理空格
/* var str="123 457 89 ";
var jstr=$.trim(str);
alert(jstr.length);
var s=jstr.split(" ");
var ss="";
for(var i=0;i<s.length;i++){
ss=ss+s[i];
}
alert(ss.length); */
//添加文字, 创建DOM元素
/* var o=$("<p>这是一个感人肺腑的故事</p>");
o.insertAfter("#new");
*/
}
</script>
</head>
<body>
<p id="new"></p>
<h2>
<a href="#">正文</a>内容
</h2>
<h2>
正文<a href="#">内容</a>
</h2>
</body>
</html>
3.html
<!DOCTYPE html>
<html>
<head>
<title>jquery属性选择器</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
<!--
a {
text-decoration: none;
color: #000000;
}
.myClass { /* 设定某个CSS类别 */
background-color: #d0baba;
color: #5f0000;
text-decoration: underline;
}
-->
</style>
<script src="jquery-1.10.1.js"></script>
<script language="javascript">
$(function(){
function change(title) {
//属性选择器:[ ] 匹配给定的属性是某个特定值的元素：$("a[href=10-9.html]").addClass("myClass");
//$("a[id=my]").addClass("myClass");//直接匹配
//$("a[href^=10-8]").addClass("myClass");//开头匹配
//$("a[name$=csdn]").addClass("myClass");//结尾匹配
//$("a[name*=csdn]").addClass("myClass");//内容包含匹配
//包含选择器:$("ul li ul li:has(a)")
//$("ul li ul li:has(a)").addClass("myClass");
//位置选择器:$("p:lt(2)")
// $("ul li ul li:gt(1)").addClass("myClass");//从0开始
//过滤选择器:$("input[name="+oCheckBox+"]
//var title = "圆角矩形";
//$("ul li ul li a[title="+title+"]").addClass("myClass");
}
//反向过滤选择器$(":input:not(:checkbox):not(:radio)")
//$("ul li ul li a[name]:not(javacsdn)").addClass("myClass");//得到了所有的name属性的选择器
$("ul li ul li a:not([name=a])").addClass("myClass");//正确
});
</script>
</head>
<body>
<input type="button" onclick="change(‘圆角矩形‘)" value="点击我">
<ul>
<li><a href="http://picasaweb.google.com/isaacshun">isaac
photo</a>
<ul>
<li>10-6.html</li>
<li><a id="my" href="10-7.html">10-7.html</a></li>
<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
<li><a name="javacsdn" href="10-9.html">10-9.html</a></li>
<li><a name="a" href="10-9.html">10-9111.html</a></li>
<li><a name="ss" href="10-9.html">1.html</a></li>
<li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
</ul></li>
</ul>
</body>
</html>
管理选择器结果
5.html
<!DOCTYPE html>
<html>
<head>
<title>size()方法</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
<!--
html {
cursor: help;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
div {
border: 1px solid #003a75;
background-color: #FFFF00;
margin: 5px;
padding: 20px;
text-align: center;
height: 20px;
width: 20px;
float: left;
}
-->
</style>
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
//1.$("div").size()得到数量
//2.(document.body).append()//追加节点
//3.$("span").html(i);修改显示
document.onclick = function() {
var num = $("div").size() + 1;
$(document.body).append("<div>" + num + "</div>");
$("span").html(num);
};
</script>
</head>
<body>
页面中一共有
<span>0</span>个div块。点击鼠标添加div：
</body>
</html>
6.html
<!DOCTYPE html>
<html>
<head>
<title>get()方法</title>
<style type="text/css">
<!--
div{
border:1px solid #003a75;
color:#CC0066;
margin:5px; padding:5px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
height:20px; width:20px;
float:left;
}
-->
</style>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//$("div").get();//得到处理函数
//aDiv.reverse();//反序，传给处理函数
var divs=$("div").get();
divs.reverse();
//在最后div上追加
for(var i=0;i<divs.length;i++){
//$("div:last").append($("<div style=‘background:"+divs[i].style.background+";‘>"+divs[i].innerHTML+"</div>"))//divs[i]);////jquery-1.10.1.js::::迭代 ，，， jquery.min.js::;;横行
$(document.body).append($("<div style=‘background:"+divs[i].style.background+";‘>"+divs[i].innerHTML+"</div>"));//jquery-1.10.1.js和 jquery.min.js都是横行
}
});
</script>
</head>
<body>
<div style="background:#FFFFFF">1</div>
<div style="background:#CCCCCC">2</div>
<div style="background:#999999">3</div>
<div style="background:#666666">4</div>
<div style="background:#333333">5</div>
<div style="background:#000000">6</div>
</body>
</html>
7.html
<!DOCTYPE html>
<html>
<head>
<title>index(element)方法</title>
<style type="text/css">
<!--
body {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
div {
border: 1px solid #003a75;
background: #fcff9f;
margin: 5px;
padding: 5px;
text-align: center;
height: 20px;
width: 20px;
float: left;
cursor: help;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function() {
//click()添加点击事件
$("div").click(
function(){
var i=$("div").index(this);
$("span").html(i.toString());
}
)
});
</script>
</head>
<body>
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
点击的div块序号为：
<span></span>
</body>
</html>
用ajaxSend()方法创建全局Ajax发送事件
UserAction.java
package action;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.ServletActionContext;
import com.opensymphony.xwork2.ActionSupport;
public class UserAction extends ActionSupport {
private String name;
private String pass;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPass() {
return pass;
}
public void setPass(String pass) {
this.pass = pass;
}
@Override
public String execute() throws Exception {
return SUCCESS;
}
public void check() throws IOException, InterruptedException{
System.out.println(name);
if(name!=null && !name.trim().equals("")){
HttpServletResponse response=ServletActionContext.getResponse();
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
Thread.sleep(1000);
if(name.equals("yan")){
out.print("用户名被占用");
}else{
out.print("用户名可用");
}
}
}
}
Struts.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"> <struts> <package name="hello" namespace="/hello" extends="struts-default"> <action name="hello" class="action.UserAction" method="check"> <result name="success"> /index.jsp </result> </action> </package> </struts>
Index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
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 ‘index.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">
-->
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$(function(){
$("#UserResult").ajaxSend(
function(){
$(this).html("<font style=‘background:#990000; color:#FFFFFF;‘>loading... </font>");
}
);
});
function startCheck(name) {
$.ajax({
type : "GET",
data : {
"name" : name.value
},
url : "http://localhost:8080/sina/hello/hello",
success : function(data) {
$("#UserResult").html(data);
},
dataType:"text"
});
}
</script>
</head>
<body>
<form name="register">
<table cellpadding="5" cellspacing="0" border="0">
<tr>
<td>用户名:</td>
<td><input type="text" onblur="startCheck(this)" name="name"></td>
<td><span id="UserResult"></span></td>
</tr>
<tr>
<td>输入密码:</td>
<td><input type="password" name="passwd1"></td>
<td></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="passwd2"></td>
<td></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="注册">
<input type="reset" value="重置"></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>