JS知识点
Alert弹框两种方式
<!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>
<title> alert弹出框 </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript">
// alert("你好，我是alert弹出框")
</script>
</head>
<body onload="alert('你好，我是alert弹出框')">
</body>
</html>
变量的使用
<!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>
<title> new document </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
<script type="text/javascript">
//JS的变量的使用同Java一样也是先声明后使用的 var定义变量
var myname = "张三";
var age = 21;
var address = "北京海淀";
var str = myname + ",年龄:" + age + "籍贯:" + address;
alert( str );
</script>
</head>
<body>
</body>
</html>
typeof的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>typeof的功能和用法演示</title>
<script type="text/javascript">
document.write("<h2>对变量或值调用typeof运算符返回值：</h2>");
var width,height=10,name="rose";
var date=new Date(); //获得时间日期对象
var arr=new Array(); //定义数组
document.write("width: "+typeof(width)+"<br>");
document.write("height: "+typeof(height)+"<br>");
document.write("name: "+typeof(name)+"<br>");
document.write("date: "+typeof(date)+"<br>");
document.write("arr: "+typeof(arr)+"<br>");
document.write("true: "+typeof(true)+"<br>");
document.write("null: "+typeof(null));
</script>
</head>
<body>
</body>
</html>
结果
对变量或值调用typeof运算符返回值：
width: undefined
height: number
name: string
date: object
arr: object
true: boolean
null: object
数据类型转换
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据类型转换</title>
<script type="text/javascript">
var str1 = "123.09abc",
str2 = "abc123.09";
var num;
// num = parseInt(str1);
// num = parseFloat(str1);
// num = parseFloat(str1);
// num = str1.toString();
// num = parseInt(str2);
// num = parseFloat(str2);
// num = str2.toString();
// num = Boolean(str1);
// num = Number(str1);
// num = String(str1);
document.write( num +"<br/>类型为："+ typeof num );
</script>
</head>
<body>
</body>
</html>
结果分别为：
//num = parseInt(str1);
123 类型为：number
//num = parseFloat(str1);
123.09 类型为：number
//num = parseFloat(str1);
123.09 类型为：number
//str1.toString();
123.09abc 类型为：string
//num = parseInt(str2);
NaN 类型为：number
//num = parseFloat(str2);
NaN 类型为：number
//num = str2.toString();
abc123.09 类型为：string
//num = Boolean(str1);
true 类型为：boolean
//num = Number(str1);
NaN 类型为：number
// num = String(str1);
123.09abc 类型为：string
总结一下
//从字符串cString非空字符开始转换得到的整数,遇到小数点或其他0-9外的字符就停止，
//如“-1234a”,“-1234.0”都将返回 -1234；如果除第一个符号外一个0-9字符都不是，将返回NaN,如“-a”、“abc”等；
parseInt(cString )
//从字符串cString转换得到的数字，包括Int和Float类型，
//如：“-123”返回-123，“123”和“00123”都返回 123，“234.56”返回234.56等
//cString必须是合法的数字串，否则返回NaN
//如“.123”、“1.23.45”、 “--123”、“123a"都返回NaN.
Number( cString )
Number( ) 更象 parseFloat( ) ，Number对参数更挑剔，稍有不是数字就返回NaN。parseFloat 支持第一个非空字符为小数点，如 parseFloat(".123" ) 返回 0.123。而 Number(".123" ) 返回NaN。空字符串或完全空格串健壮的parseFloat()返回NaN，而Number()返回0，这有点让人费解。除了不支持无前导0小数 （如.123、-.123）和支持多余的前导0(如-00123返回-123)多少不符合常规外，Number能用来验证数字串！
输入和输出
<!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>输出Hello World</title>
<script type="text/javascript">
if( confirm("是否开始运行程序？") ){
var j=prompt("请输入连续输出'hello world！'的次数：",1);
if( j < 0 )alert("请输入大于0的整数");
for(var i=0;i<j;i++){
if( i==0 )document.write("<h3>开始输出</h3>");
document.write("<h3>Hello World</h3>");
if( i==j-1 )document.write("<h3>结束输出，共输出了"+j+"次.</h3>");
}
}else{
alert("你已经放弃了执行程序");
}
</script>
</head>
<body>
</body>
</html>
结果
开始输出
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
结束输出，共输出了10次.
break与continue的使用
<!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>
<title> 演示示例：break与continue </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
<script type="text/javascript">
// break 中断循环
document.write("<br/>---------------break 中断循环------------<br/>");
var i=0;
for (i=0;i<=10;i++)
{
if (i==3){break;}
document.write("The number is " + i);
document.write("<br />");
}
</script>
<script type="text/javascript">
// continue 跳过并继续接下来的循环
document.write("<br/>---------------continue 中断循环------------<br/>");
var i=0;
for (i=0;i<=10;i++)
{
if (i==3){continue;}
document.write("The number is " + i);
document.write("<br />");
}
</script>
</body>
</html>
结果
---------------break 中断循环------------
The number is 0
The number is 1
The number is 2
---------------continue 中断循环------------
The number is 0
The number is 1
The number is 2
The number is 4
The number is 5
The number is 6
The number is 7
The number is 8
The number is 9
The number is 10
for in的使用
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据类型转换</title>
<script type="text/javascript">
for ( var a in window )
{
document.write(a + "------" +window[a]+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
结果
a------a
onpointercancel------null
onpointerdown------null
onpointerenter------null
onpointerleave------null
onpointermove------null
onpointerout------null
onpointerover------null
onpointerup------null
indexedDB------undefined
msIndexedDB------undefined
clientInformation------[object Navigator]
clipboardData------[object DataTransfer]
closed------false
defaultStatus------
event------undefined
return的使用
<!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>
<title> return 返回值 </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
</head>
<body>
<script text="type/javascript">
function sum(iNum1, iNum2) {
return iNum1 + iNum2;
alert(iNum1 + iNum2);
}
document.write(sum(1,3)+"<br/>");
//函数中可能有多个 return 语句 返回数据 结束方法体
//例如，返回两个整数的差值
function diff(iNum1, iNum2) {
if (iNum1 > iNum2) {
return iNum1 - iNum2;
} else {
return iNum2 - iNum1;
}
}
document.write(diff(33,21)+"<br/>");
document.write(diff(21,33) +"<br/>");
</script>
</body>
</html>
结果
4
12
12
siwtch的使用
<!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>switch 语句</title>
<script type="text/javascript" >
var hours = window.prompt("请输入一个0-24的时间点数字");
hours = parseInt(hours);//把字符串类型转为整型
switch( hours ) {
case 12:
case 13:
case 14:
case 15:
case 16:
case 17:
case 18:
document.write("<h3>下午好！欢迎来到贵美。</h3>");
break;
case 19:
case 20:
case 21:
case 22:
case 23:
case 24:
document.write("<h3>晚上好！欢迎来到贵美。</h3>");
break;
default:
document.write("<h3>上午好！欢迎来到贵美。</h3>");
}
</script>
</head>
<body>
</body>
</html>
try catch语句
<!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>输出Hello World</title>
<head>
<script type="text/javascript">
var txt = "";
try{
adddlert("Wellcome guest~");
}catch(err){
txt="此页面存在一个错误。\n\n" ;
txt+="错误描述: " + err.message + "\n\n";
txt+="点击“确定”继续。\n\n";
alert(txt);
}
</script>
</head>
<body>
</body>
</html>
结果
此页面存在一个错误
未定义 adddlert
常见事件应用
<!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>
<title> new document </title>
<meta http-equiv = "content-type" content ="text/html;charset=utf-8" />
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body onload = "dosomething()">
<form onsubmit = "return oncheck();">
<p><label for="username">用户名：</label><input type="text" name="username" id="username" onfocus = "this.value = '';" οnblur="if(this.value == '')alert('用户名不能为空');" value="请输入你的用户名" /></p>
<p><label for="pwd">密码：</label><input type="password" name="pwd" id="pwd" ></p>
<p><input type="checkbox" id="re" name="re" onclick = "alert('你选择了记住密码')" ><label for="re">记住密码</label></p>
<p>
<input type="submit" name="" value="登录" />
<input type="reset" name="pwd" value="取消">
</p>
</form>
<script type="text/javascript">
function dosomething(){
alert("页面加载完成，欢迎来到登录页面");
}
function oncheck(){
if( confirm("确定提交登录吗？") ){
return true;
}else{
return false;
}
}
</script>
</body>
</html>
可以自己运行一下
一个留言板的小例子
<!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 type="text/javascript">
function isSub(){
if( confirm("是否提交留言？") ){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
<form onsubmit = "return isSub();">
<div><label for="title">留言标题</label><input type="text" name="title" id="title" /></div>
<div><label for="content">留言内容</label><textarea name="content"></textarea></div>
<div><input type="submit" name="title" id="title" /></div>
</form>
</body>
</html>
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择器实例
$(this) //当前 HTML 元素
$("p") //所有 <p> 元素
$("p.intro") //所有 class="intro" 的 <p> 元素
$(".intro") //所有 class="intro" 的元素
$("#intro") //id="intro" 的元素
$("ul li:first") //每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") //所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")//id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 事件
jQuery 是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 部分的事件处理方法中：、
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
单独文件中的函数
如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在运行！");
});
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>测试 jQuery</button>
</body>
</html>
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery 事件
下面是 jQuery 中事件方法的一些例子：
//将函数绑定到文档的就绪事件（当文档完成加载时）
$(document).ready(function)
//触发或将函数绑定到被选元素的点击事件
$(selector).click(function)
//触发或将函数绑定到被选元素的双击事件
$(selector).dblclick(function)
//触发或将函数绑定到被选元素的获得焦点事件
$(selector).focus(function)
//触发或将函数绑定到被选元素的鼠标悬停事件
$(selector).mouseover(function)
jQuery 效果
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery 效果 - 淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn() // $(selector).fadeIn(speed,callback)
fadeOut() // $(selector).fadeOut(speed,callback);
fadeToggle() //fadeToggle(speed,callback)
fadeTo() //
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
jQuery 效果 - 滑动
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是滑动完成后所执行的函数名称。
slideDown() //.slideDown(speed,callback);
slideUp() //.slideUp(speed,callback);
slideToggle() //.slideToggle(speed,callback)
jQuery 效果 - 动画
$(selector).animate({params},speed,callback);
//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
默认地，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
实例
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：
实例
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
实例 1
隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
实例 2
下面的例子把 div 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery 停止动画
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery DOM 操作
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值：
实例
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：
实例
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html()：
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变（设置）链接中 href 属性的值：
实例
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性：
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
attr() 的回调函数
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法：
实例
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery - 添加元素
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
实例
$("p").append("Some appended text.");
$("p").prepend("Some prepended text.");
通过 append() 和 prepend() 方法添加若干新元素
在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。
不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：
实例
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
jQuery after() 和 before() 方法
jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。
实例
$("img").after("Some text after");
$("img").before("Some text before");
通过 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：
实例
function afterText()
{
var txt1="<b>I </b>"; // 以 HTML 创建新元素
var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建新元素
var txt3=document.createElement("big"); // 通过 DOM 创建新元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素
}
jQuery - 删除元素
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
jQuery remove() 方法删除被选元素及其子元素。
$("#div1").remove();
jQuery empty() 方法删除被选元素的子元素。
$("#div1").empty();
过滤被删除的元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=“italic” 的所有 “p” 元素：
实例
$("p").remove(".italic");
jQuery - 获取并设置 CSS 类
通过 jQuery，可以很容易地对 CSS 元素进行操作。
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
实例样式表
下面的样式表将用于本页的所有例子：
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
jQuery addClass() 方法
下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：
实例
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
您也可以在 addClass() 方法中规定多个类：
实例
$("button").click(function(){
$("#div1").addClass("important blue");
});
jQuery removeClass() 方法
下面的例子演示如何不同的元素中删除指定的 class 属性：
实例
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
jQuery toggleClass() 方法
下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：
实例
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
jQuery - css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
css(“propertyname”);
下面的例子将返回首个匹配元素的 background-color 值：
实例
$("p").css("background-color");
设置 CSS 属性
如需设置指定的 CSS 属性，请使用如下语法：
css("propertyname","value");
下面的例子将为所有匹配元素设置 background-color 值：
实例
$("p").css("background-color","yellow");
设置多个 CSS 属性
如需设置多个 CSS 属性，请使用如下语法：
css({"propertyname":"value","propertyname":"value",...});
下面的例子将为所有匹配元素设置 background-color 和 font-size：
实例
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 尺寸 方法
jQuery 提供多个处理尺寸的重要方法：
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
下面的例子返回指定的 div 元素的宽度和高度：
实例
$("button").click(function(){
var txt="";
txt+="Width: " + $("#div1").width() + "</br>";
txt+="Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() 和 innerHeight() 方法
innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。
下面的例子返回指定的 div 元素的 inner-width/height：
实例
$("button").click(function(){
var txt="";
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
txt+="Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
下面的例子返回指定的 div 元素的 outer-width/height：
实例
$("button").click(function(){
var txt="";
txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
txt+="Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。
实例
$("button").click(function(){
var txt="";
txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery - 更多的 width() 和 height()
下面的例子返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：
实例
$("button").click(function(){
var txt="";
txt+="Document width/height: " + $(document).width();
txt+="x" + $(document).height() + "\n";
txt+="Window width/height: " + $(window).width();
txt+="x" + $(window).height();
alert(txt);
});
下面的例子设置指定的 div 元素的宽度和高度：
实例
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery 遍历
什么是遍历？
jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
图示解释：
//div 元素是 ul 的父元素，同时是其中所有内容的祖先。
//ul 元素是 li 元素的父元素，同时是 div 的子元素。
//左边的 li 元素是 span 的父元素，ul 的子元素，同时是div的后代。
//span 元素是 li的子元素，同时是 ul 和 div 的后代。
//两个 <li> 元素是同胞（拥有相同的父元素）。
//右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
//<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
遍历方法中最大的种类是树遍历（tree-traversal）。
jQuery 遍历 - 祖先
祖先是父、祖父或曾祖父等等。
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 span元素的的直接父元素：
实例
$(document).ready(function(){
$("span").parent();
});
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。
下面的例子返回所有 span 元素的所有祖先：
实例
$(document).ready(function(){
$("span").parents();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
下面的例子返回所有 span元素的所有祖先，并且它是 ul 元素：
实例
$(document).ready(function(){
$("span").parents("ul");
});
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 span 与 div 元素之间的所有祖先元素：
实例
$(document).ready(function(){
$("span").parentsUntil("div");
});
jQuery 遍历 - 后代
后代是子、孙、曾孙等等。
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()
children() 方法返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历。
下面的例子返回每个 div>元素的所有直接子元素：
实例
$(document).ready(function(){
$("div").children();
});
您也可以使用可选参数来过滤对子元素的搜索。
下面的例子返回类名为 “1” 的所有 p 元素，并且它们是 div 的直接子元素：
实例
$(document).ready(function(){
$("div").children("p.1");
});
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
下面的例子返回属于 div 后代的所有 span 元素：
实例
$(document).ready(function(){
$("div").find("span");
});
下面的例子返回 div 的所有后代：
实例
$(document).ready(function(){
$("div").find("*");
});
jQuery 遍历 - 同胞
同胞拥有相同的父元素。
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
siblings() 方法返回被选元素的所有同胞元素。
下面的例子返回 h2 的所有同胞元素：
实例
$(document).ready(function(){
$("h2").siblings();
});
您也可以使用可选参数来过滤对同胞元素的搜索。
下面的例子返回属于 h2 的同胞元素的所有 p 元素：
实例
$(document).ready(function(){
$("h2").siblings("p");
});
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
下面的例子返回 h2 的下一个同胞元素：
$(document).ready(function(){
$("h2").next();
});
nextAll() 方法返回被选元素的所有跟随的同胞元素。
下面的例子返回 h2 的所有跟随的同胞元素：
实例
$(document).ready(function(){
$("h2").nextAll();
});
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
下面的例子返回介于 h2 与 h6 （不包含h2和h6）元素之间的所有同胞元素：
实例
$(document).ready(function(){
$("h2").nextUntil("h6");
});
jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
jQuery 遍历 - 过滤
缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
first() 方法返回被选元素的首个元素。
下面的例子选取首个 div 元素内部的第一个 p 元素：
实例
$(document).ready(function(){
$("div p").first();
});
last() 方法返回被选元素的最后一个元素。
下面的例子选择最后一个 div 元素中的最后一个 p 元素：
实例
$(document).ready(function(){
$("div p").last();
});
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 p 元素（索引号 1）：
实例
$(document).ready(function(){
$("p").eq(1);
});
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
下面的例子返回带有类名 “intro” 的所有 p 元素：
实例
$(document).ready(function(){
$("p").filter(".intro");
});
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
下面的例子返回不带有类名 “intro” 的所有 p 元素：
实例
$(document).ready(function(){
$("p").not(".intro");
});
jQuery - AJAX 简介
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
提示：如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
语法：
$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
把 “demo_test.txt” 文件中 id=“p1” 的元素的内容，加载到指定的 div元素中：
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery - AJAX get() 和 post() 方法
HTTP 请求：GET vs. POST
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：
实例
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
.post() 方法通过 HTTP POST 请求从服务器上请求数据。
语法：
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 post() 连同请求一起发送数据：
实例
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
1252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
