Jquery

jQuery概述

功能:

方位页面框架的局部

修改页面的表现

更改页面的内容

响应事件

为页面添加动画

与服务器异步交互

简化常用的JavaScript操作

使用jquery需要导入js文件

jquery-1.10.1.jsjquery.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>




Jquery,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。