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>
$(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 οnlοad="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);//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>
$(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><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":""});
}
);
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()函数：
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
