AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

ajax

分类：Ajax作者：编程之家

jquery中对象的html()方法相当于dom对象中的innerHTML属性。

attr() 得到jquery对象的某个属性的值。

$(document).ready (
function () {
var title = $("#demo").attr ("title");
alert (title);
$("#demo").attr("title","renjiahui");
}
);

//可以设置多个属性：以javascript对象的形式：（css()也可以）

$("#demo").attr ({"title":"welcome","zhanglei":"hello"});


text()（相当于innerHTML）得到某个元素的内容,如果里面有html标签会进行转义（jquery中一个对象的一个方法一般可以做多件事情

比如：没有参数表示取值，如果有参数表示设值。

）

val()可以得到含有value属性的元素value值。

$("<li title = 'hello''>hello</li>")得到一个jquery元素。

可以转化成dom对象

var a = $(<li title = 'hello'>hello</li>)[0];

var b =$(<li title = 'hello'>hello</li>).get(0);

使用jquery操作dom

append()方法

appendTo()方法

next()

prev();

siblings()

样式：

$("input:eq(0)").click (function () {
$(".demo1").attr("class","high");//对应：removeAttr
});


$("input:eq(1)").click(function () {
$(".demo2").addClass("high");
});

移除样式：removeClass()移除所有：

removeClass("param")移处param

$("input:eq(1)").click(function () {
$(".demo2").toggleClass("high");
});

toggleClass(class)

如果存在（不存在）就删除（添加）一个类

hasClass("another")有没有类another

is(".another")

<form>
username:<input type = "text" value = "username" id = "username"/><br/>
password:<input type = "password" value = "baother" id = "pwd"/>
</form>

实现简单的功能：获得焦点清空文本域中的东西，如果用户没有输入，当失去焦点是回复原来的值。
$(document).ready (
function ()
{
$("#username").focus (function () {
var value = $(this).val()
if (value == "username") {
$(this).val("");
}
});


$("#username").blur (function () {
var value = $(this).val();
if (value == "") {
$(this).val ("username");
}
});

}
);


事件处理：重要：

javascript中：

/** stopPropagation
ie:event.cancelBubble = true;
other:event.stopPropagation ();
stopDefault
ie:returnValue = false
other:preventDefault();
**/


<script type = "text/javascript">
$(document).ready (function (){
$("#hello").bind ("click",function () {
var att = $(this).attr ("demo");
alert (att);
});
});
</script>
</head>

<body>
<div id = "hello" demo = "hello">hello</div>
</body> 
<script type = "text/javascript">
		$(document).ready (function (){
			
			$("#content").bind ("click",function (event) {
				$("#message")[0].innerHTML =  $("#message").html()+"div<br/>";
				event.stopPropagation();
			});


			$("span").bind ("click",function () {
				$("#message")[0].innerHTML = $("#message").html()+"span+<br/>";
			});

			$("body").bind ("click",function () {
				$("#message")[0].innerHTML = $("#message").html()+"body+<br/>"
			});
		});
	</script>
	
	<style type = "text/css">
		#content {
			background:red;
		}
		#content span {
			background:blue;
		}
		
		#message {
			background:#ccc;
		}
	</style>
  </head>
  
  <body>
    	<div id = "content">
    		外层的div<br/>
    		<span>span内</span><br/>
    		外层的div
    	</div>
    	<div id = "message"></div>
  </body>
</html>

其中event.stopPropagation是jquery中的方法。
关于onload（）方法和jquery中$(document).ready ();方法加载时间比较 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">

   var startTime = new Date().getTime();

   $(document).ready(function(){
		test1();
  })
	
  function test1(){
      var endTime2  = new Date().getTime(); 
	  var a = endTime2 - startTime;
	  $("<div>jQuery的ready() : "+a+" ms</div>").appendTo("#div1");
  }

  function test2(){
       var endTime1  = new Date().getTime();
	   var b = endTime1 - startTime;
	   $("<p>JavaScript的window.onload : "+b+" ms</p>").appendTo("#div1");
  }
</script>
</head>

<body  onload="test2();">
	<img src="http://www.shengsiyuan.com/Images/Ad/N.jpg" style="width:200px;height:200px;"/>

	<img src="http://www.infoq.com/resource/skyscraper/250/InfoQ%20Banner%20-%20ME4S.gif" style="width:200px;height:200px;"/>

<div id="div1"></div>

</body>

</html

结果：
图片没有完全出来时（html demo 树）ready就执行了，onload要等所有的外部文件都完成才执行。 

/*
			$("p").mouSEOver (function () {
				$(this).next().show(1000);
			});
			$("p").mouSEOut(function (){
				$(this).next().hide(1000);
			});
			*/
			$("p").hover(function () {
				$(this).next().show();
			},function () {
				$(this).next().hide();
			});

二者是等价的。 
<%@ 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 'jquery4.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/jquery-1.4.4.js"></script>
	<script type = "text/javascript">
		$(document).ready (function () {
			/*
			$("p").mouSEOver (function () {
				$(this).next().show(1000);
			});
			$("p").mouSEOut(function (){
				$(this).next().hide(1000);
			});
			*/
			/*
			$("p").hover(function () {
				$(this).next().show();
			},function () {
				$(this).next().hide();
			});*/
			$("p").toggle (function () {
				$(this).addClass("high");
				$(this).next().show();
			},function () {
				$(this).removeClass("high");
				$(this).next().hide();
			});
		});
	</script>
	
	<style type = "text/css">
			p {
				background:red;
			}
			
			.high {
				background:orange;
			}
	</style>
  </head>
  
  <body>
    	<p>wwww.baidu.com</p>
    	<ul style = "display:none;">
    		<li>131231</li>
    		<li>131231</li>
    		<li>131231</li>
    		<li>131231</li>
    		<li>131231</li>
    		<li>131231</li>
    		<li>131231</li>
    	</ul>
    	
    	
  
  </body>
</html>

阻止默认行为：
<%@ 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 'jquery5.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,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/jquery-1.4.4.js"></script>
	<script type = "text/javascript">
		$(document).ready (function (){
			$("#sub").click(function (event){
				var value = $("input:eq(0)").val();
				if (value == ""){
						event.preventDefault();
				}
			});
		});
	</script>
  </head>
  
  <body>
   		<form>
   			<input type = "text" name = "username" />
   			<input type = "submit" value = "submit" id = "sub"/>
   		</form>
  </body>
</html>

$(document).ready (function (){
$("#sub").click(function (event){
var value = $("input:eq(0)").val();
if (value == ""){
//event.preventDefault();
return false;//即可以阻止默认行为要可以阻止bubble
}
});
}); 
<%@ 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 'jquery6.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,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/jquery-1.4.4.js"></script>
	<script type = "text/javascript">
		$(document).ready (function (){
			//当inner被点击了.
			$("#outer").click(function (event) {
					//event.target是dom对象,$(event.target)转化成jquery对象
					//alert ($(event.target).id);//undefined
					alert($(event.target).attr("id"));//inner
			});

			$("#inner").click(function (event) {
				alert (event.target.id);//inner
		});
		});
	</script>
	<style type = "text/css">
			#outer {
				width:400px;
				height:400px;
				background:red;
			}
			
			#inner {
				width:200px;
				height:200px;
				margin:0px auto;
				margin-top:100px;
				background:green;
			}
	</style>
  </head>
  
  <body>
   	<div id = "outer">
   		<div id = "inner">
   			
   		</div>
   	</div>
  </body>
</html>
jquery大多数的函数都是方法链的方式： 
$(document).ready (function (){
			$("#content").bind("click",function () {
				alert ("hello1");
			}).bind("click",function () {
				alert ("hello2");
			});
		});



unbind([type],[data])

bind()的反向操作，从每一个匹配的元素中删除绑定的事件。

如果没有参数，则删除所有绑定的事件。

你可以将你用bind()注册的自定义事件取消绑定。

I如果提供了事件类型作为参数，则只删除该类型的绑定事件。

如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

返回值

jQuery

参数

type(String) : (可选) 事件类型

data(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例

把所有段落的所有事件取消绑定

jQuery 代码:

$("p").unbind()

将段落的click事件取消绑定

jQuery 代码:

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

jQuery 代码:

var foo = function () {
// 处理某个事件的代码

toggleClass();

var foo = function () {
// 处理某个事件的代码


toggleClass(class)


如果存在（不存在）就删除（添加）一个类。
返回值


jQuery
参数


class (String) :CSS类名
示例


为匹配的元素切换 'selected' 类
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p>
jQuery 代码:
$("p").toggleClass("selected");
结果:
[ <p class="selected">Hello</p>,<p>Hello Again</p> ] 
<script type = "text/javascript">
		$(document).ready (function (){
			$("#outer").click (function () {
				//1：点击下,top变成500px(如果一开始大于500就减少到500，否则加大到500)
				$("#outer").animate ({"top":"500px","left":"400px"},1000);
				//和上面的区别是：left会在原来的基础是增大400，
				//$("#outer").animate ({"top":"500px","left":+=400px"},1000);
			});
			
		});
	</script>
  </head>
  
  <body>
    	<div id = "outer" style = "left:500px;position:absolute;width:100px;height:100px;background:red;">
    		
    	</div>
  </body>
</html>
上面第二个参数是在指定的时间内完成动画，可以有第三个参数是callback，等动画结束后执行。 
<script type = "text/javascript">
		$(document).ready (function (){
			$("#outer").click (function () {
				
				$("#outer").animate ({"left":"400px"},1000);
				$("#outer").animate ({"left":"100px"},2000);
			});
			
		});
	</script>
  </head>
  
  <body>
    	<div id = "outer" style = "position:absolute;width:100px;height:100px;background:red;">
    		
    	</div>
  </body>
</html>

上面是先执行完left->400后在执行400->100.这个过程在3000ms内完成。

toggle 

toggle(fn,fn)

每次点击后依次调用函数。
如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
可以使用unbind("click")来删除。
返回值

jQuery
参数

fn (Function) : 第一数次点击时要执行的函数。
fn2 (Function) : 第二数次点击时要执行的函数。
fn3,fn4,... (Function) : 更多次点击时要执行的函数。
示例

对表格的切换一个类
jQuery 代码:
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },function () {
    $(this).removeClass("selected");
  }
);
对列表的切换样式
HTML 代码:
  <ul>
    <li>Go to the store</li>
    <li>Pick up dinner</li>
    <li>Debug crash</li>
    <li>Take a jog</li>
  </ul>
jQuery 代码:
    $("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc","color":"blue"});
      },function () {
        $(this).css({"list-style-type":"disc","color":"red"});
      },function () {
        $(this).css({"list-style-type":"","color":""});
      }
    );


var foo = function () {
// 处理某个事件的代码 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri = "/struts-tags" prefix = "s"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'Debug.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,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/jquery-1.4.4.js"></script>
	<script tpye = "text/javascript">


		/**
			jquery版本
		**/

			$(document).ready (function (){
				$("button:eq(0)").click (function () {
					var array = [];
					alert ("d");
					$("form :checked").each(function (){
						array.push ($(this).attr("value"));
					});
					alert ("你选中的是："+array.join("-"));
				});
			});
		</script>
  </head>
  
  <body>
    	<%
    		Enumeration enum2 = request.getAttributeNames();
    		out.println(request.getClass().getName()+"<br/>");
    		while (enum2.hasMoreElements()) {
    			out.println (enum2.nextElement()+"<br/>");
    		}
    	%>
    	
    	<s:debug></s:debug>
    	
    	<form>
    		1.<input type = "checkBox" value = "1"/>
    		2.<input type = "checkBox" value = '2'/>
    		3.<input type = "checkBox" value = '3'/>
    		4.<input type = "checkBox"  value = '4'/>
    	</form>
    	
    	<button>click</button>
  </body>
</html>
jquery中的循环each()函数：

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native