ajax
发布时间：2020-12-15 22:06:46 所属栏目：百科 来源：网络整理
导读：jquery中对象的html()方法相当于dom对象中的innerHTML属性。 attr() 得到jquery对象的某个属性的值。 $(document).ready ( function () { var title = $("#demo").attr ("title"); alert (title); $("#demo").attr("title","renjiahui"); } ); //可以设置多
|
jquery中对象的html()方法相当于dom对象中的innerHTML属性。 attr() 得到jquery对象的某个属性的值。 $(document).ready ( //可以设置多个属性：以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 () { 移除样式：removeClass()移除所有： removeClass("param")移处param $("input:eq(1)").click(function () {
toggleClass(class)
如果存在（不存在）就删除（添加）一个类
hasClass("another")有没有类another is(".another") 实现简单的功能：获得焦点清空文本域中的东西，如果用户没有输入，当失去焦点是回复原来的值。 javascript中： /** stopPropagation
<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 () {
|