ajax

来源：互联网发布：js单例模式编辑：程序博客网时间：2024/06/13 04:41

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 (){$("#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,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 (){$("#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,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 (){//当inner被点击了.$("#outer").click(function (event) {//event.target是dom对象,$(event.target)转化成jquery对象//alert ($(event.target).id);//undefinedalert($(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();

unbind([type],[data])

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

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

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

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

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

返回值

jQuery

参数

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

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

示例

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

jQuery 代码:

$("p").unbind()

将段落的click事件取消绑定

jQuery 代码:

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

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

jQuery 代码:

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":""});      }    );

unbind([type],[data])

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

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

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

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

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

返回值

jQuery

参数

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

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

示例

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

jQuery 代码:

$("p").unbind()

将段落的click事件取消绑定

jQuery 代码:

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

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

jQuery 代码:

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,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 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()函数：