1：操作HTML
1.1 获取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" language="javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var htmlString = $("ul li").html();
alert(htmlString);
});
</script>
</head>
<body>
<ul>
<li><a href="#">北京</a></li>
<li>上海</li>
<li>广州</li>
<li>西安</li>
</ul>
</body>
</html>
1.2 设置HTML的内容
语法格式： html(htmlString);
例子：$("ul li").html("<h3>所有匹配元素的html内容被替换</h3>);
1.3 根据索引设置HTML内容
格式：html(function(index, html));
index为元素在集合中的索引位置，html为原来的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" language="javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul li").html(function(index, html) {
if(index == 0) {
return "<span style='color: red;'>" + html+ "</span>";
} else {
return "<span style='color: yellow;'>" + html+ "</span>";
}
});
});
</script>
</head>
<body>
<ul>
<li><a href="#">北京</a></li>
<li>上海</li>
<li>广州</li>
<li>西安</li>
</ul>
</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>html()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<div>
<fieldset>
<legend>帮助中心</legend>
<div class="faq">
<h3>订阅班级都需要什么?</h3>
<p>1、注册成为窗内网站会员。<br/>
2、会员积分大于订阅班级所需的积分。 </p>
<h3>如何订阅班级？</h3>
<p>1、登录网站。 <br/>
2、进入班级信息页面。<br/>
3、单击【订阅班级】完成订阅。 </p>
</div>
<hr/>
<div id="res"> </div>
</fieldset>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert($(".faq").html());
var faq=$(".faq h3").html();
$("#res").html(faq);
$(".faq h3").html("问题描述");
$(".faq p").html("问题解决办法");
$(".faq h3").html(function(index,html){
if(index==0){
return "<u>"+html+"</u>";
}
else{
return "<span style='color:red'>"+html+"</span>";
}
});
});
</script>
</div>
</body>
</html>
2：操作文本
jQuery提供了text()方法来获取或者设置元素的文本内容
2.1 获取文本的内容
text()方法将获得所有匹配元素的内容，返回结果是由所有匹配元素包含的文本内容组合起来的文本。
<!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" language="javascript" src="jquery-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert($("ul").text());
});
</script>
</head>
<body>
<ul>
<li><a href="#">北京</a></li>
<li>上海</li>
<li>广州</li>
<li>西安</li>
</ul>
</body>
</html>
2.2 设置文本内容
text(textString); 可以设置匹配元素集合中每个元素的文本内容。
text方法在必要时会对textString中的字符串进行转义，以便在HTML文档中正确的呈现字符串的内容。
2.3 根据索引设置文本内容
text(function(index, html));
它返回的文本内容将用于设置每个匹配的元素，index为元素在集合中的索引位置，text为当前元素原来的文本内容。
<!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>text()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#content {
text-align:left;
font-size:16px;
}
#content h1 {
margin:0px;
padding:0px;
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
}
#content img {
float:left;
padding: 5px;
border: 2px solid #D6D6D6;
margin: 10px;
}
#res {
clear:both;
}
</style>
</head>
<body>
<div id="content">
<h1>C#2008网络大讲堂 视频教程</h1>
<p><img src="csharp.png" title="asfaf" />
<span>C#是随.NET Framework一起发布的一种新语言，是一种崭新的面向对象的编程语言，强调以组件基础的软件开发。不但结合了Visual Basic的简单易用性，同时也提供了Java和C++语言的灵活性和强大功能。C#在.NET Framework构架中扮演着一个重要角色。可以说是Microsoft公司面向下一代互联网软件和服务战略的重要内容，也是编写.NET Framework应用程序的首选。</span>
</p>
</div>
<div id="res"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var allText=$("#content").text();
$("#res").html(allText);
$("p span").text("<h1>暂时没有合适的说明，请补充。</h1>");
});
</script>
</body>
</html>
3：操作值
val()方法，可以获取和设置表单元素的值，包括文本框、下拉列表框、单选按钮以及复选框等。
3.1 获取元素的值 val()方法
3.2 设置元素的值 val(value)方法
3.3 根据索引设置元素的值 val(function(index, value)); index为元素在集合中的索引，value为当前元素的值
$("input:checkbox").val(function(index, value) {
return "chk_" + $(this).val();
});
综合例子：
<!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>val()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
<!--
body {
background-color: #F2F2F2;
font-size: 12px;
color: #000000;
margin:0;
padding:0px;
}
table {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color:#FFFFFF;
}
tr th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color:#00509F;
}
-->
</style>
</head>
<body>
<table width="95%" border="0" cellspacing="2" cellpadding="0" align="center">
<tr>
<td width="65%">
<table width="471" align="center" cellpadding="5" cellspacing="1" >
<tr height=20>
<th width="445" >用 户 调 查 表 单</th>
</tr>
<tr>
<td >用户名:<input type="text" id="nameIpt" value="游客" size="10">
密码: <input type="password" id="passIpt" value="123456" size="10"></td>
</tr>
<tr>
<td>常去网站:
<input type="checkbox" name="chkWebSite" value="csdn">CSDN
<input type="checkbox" name="chkWebSite" value="msdn">MSDN
<input type="checkbox" name="chkWebSite" value="xinwen">新闻网
<input type="checkbox" name="chkWebSite" value="ccw">计世网
<input type="checkbox" name="chkWebSite" value="jiaocheng">教程网</td>
</tr>
<tr>
<td>默认搜索:
<input type="radio" name="rdSearch" value="baidu">baidu
<input type="radio" name="rdSearch" value="google">google
<input type="radio" name="rdSearch" value="yahoo">yahoo
<input type="radio" name="rdSearch" value="msn">MSN</td>
</tr>
<tr>
<td valign="top">掌握技能:
<select name="select" multiple="multiple" id="select1">
<option>前台Web设计</option>
<option>网站优化与推广</option>
<option>ASP.NET网站开发</option>
<option>js客户端编程</option>
<option>XML应用</option>
<option>DIV+CSS</option>
</select>
最想了解的技术:
<select name="select2" id="select2">
<option>jQuery开发</option>
<option>.NET框架</option>
<option>设计模式</option>
<option>sql数据库</option>
<option>网络通信</option>
</select></td>
</tr>
<tr>
<td valign="top">简单描述:<br>
<textarea name="textarea" cols="50" rows="2" id="more">网站:www.itzcn.com</textarea></td>
</tr>
<tr>
<td><input type="submit" id="btnSubmit" value="提交">
<input type="reset" id="btnReset" value="重置"></td>
</tr>
</table>
</td>
<td align="left" valign="top">
<table width="100%" border="0" align="center">
<tr>
<th height="20">结 果 显 示 区 域</th>
</tr>
<tr>
<td id="res"></td>
</tr>
</table>
</td>
</tr>
</table>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#passIpt").val("hellojquery");
$("input:checkbox[name='chkWebSite']").val(["msdn","csdn"]);
$("input:radio[name='rdSearch']").val(["baidu"]);
$("#select1").val(["前台Web设计","ASP.NET网站开发"]);
$("#btnSubmit").click(function(){
var nameStr=$("#nameIpt").val();
var passStr=$("#passIpt").val();
var webSites=Array();
$("input:checkbox[name='chkWebSite']:checked").each(function(){
webSites[webSites.length]=$(this).val();
});
var searchs=$(":radio[name='rdSearch']:checked").val();
var skill=$("#select1").val();
var tech=$("#select2").val();
var text=$("#more").val();
var btnName=$("#btnSubmit").val();
var res=btnName+"按钮被按下，各个选项的结果为：<br/>"
+"<u>姓名：</u>"+nameStr+"，<u>密码：</u>"+passStr
+"<br/><u>常去网站：</u>"+webSites+"<br/><u>默认搜索：</u>"+searchs
+"<br/><u>掌握技能：</u>"+skill+"<br/><u>想了解技术：</u>"+tech
+"<br/><u>个人描述：</u>"+text;
$("#res").html("您的选择结果如下<hr/>"+res);
});
});
</script>
</body>
</html>
4：元素属性
在jQuery中只需要使用attr()方法即可完成对元素属性的获取和设置，使用removeAttr()方法可以删除元素属性
4.1 读取和修改属性
attr(attributeName);如果元素没有相应的属性，则返回undefined.若要分别获取每个元素的属性值，则可以使用each()方法来构造一个循环结构。
$("ul li").attr("class" );
$("a").attr("href");
attr(attributeName, value); // attributeName为要修改的属性的名称， value为要修改的值
attr(map); //参数map表示要修改的值以"属性:值"对的形式出现，多个值之间用逗号分隔。
可以同时修改一个元素的多个属性，使用map参数形式实现，例如设置a元素的href、target和title属性，代码如下：
$("a").attr({target: "_self", href: 'xinwen.html', title: '最新国内新闻'});
当设置多个属性时，属性名可以使用引号，但是，当设置的属性是"class"时，必须使用引号。
4.2 根据索引设置属性
attr(attributeName, function(index, attr)); index为当前元素的索引值，attr则是当前元素的旧属性值
$("div").attr("id", function(index, attr) {
return "div_" + index; //以div_0、div_1...的顺序定义id属性
}).each(function(index) {
$(this).text("这是第" + (index + 1) + "个div元素"); //修改div的文本内容
});
4.3 删除属性
removeAttr(attributeName);
如：$("a").removeAttr("target"); //从a元素中删除属性target
综合例子：
<!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 language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#content {
text-align:left;
font-size:16px;
}
#content h1 {
margin:0px;
padding:0px;
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
}
#content img {
float:left;
padding: 5px;
border: 2px solid #D6D6D6;
margin: 10px;
}
</style>
</head>
<body>
<div id="content">
<h1>我收藏的课程列表</h1>
<img />
<img />
<img />
<img />
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("img").attr({width:150,height:150});
$("img").attr("src", function(index,attr) {
return (++index)+".gif";
}).attr("title",function(index,attr){
return "这是第"+(++index)+"张图片";
});
});
</script>
</body>
</html>
5：元素样式
5.1 添加样式类
addClass(className);
addClass(function(index, class));
index表示当前元素在集合中的索引，class表示当前元素原来的class属性值
如： $("div").addClass("main"); $("h3").addClass("TabTitle");
$("ul li").addClass(function(index, class) {
return "li_" + $(this).index();
});
$("div").removeClass("main").addClass("tab");
addClass与attr方法的区别
addClass方法的作用是追加样式，而attr方法才是真正的设置样式
|
步骤 |
attr()方法 |
add |
|
页面中的一个元素 |
<h1>你好吗</h1> |
|
|
设置title样式 |
$(“h1”).attr(“class”, “title”); |
$(“h1”).addClass(“title”); |
|
结果 |
<h1 class=”title”>你好</h1> |
|
|
设置hight样式 |
$(“h1”).attr(“class”, “high”); |
$(“h1”).addClass(“high”); |
|
结果 |
<h1 class=”high”>你好</h1> |
<h1 class=”title high”>你好</h1> |
5.2 移除样式类
removeClass方法可以从所匹配的元素中删除一个、多个或者全部样式类，语法格式如下：
removeClass([className]);
removeClass(function(index, class));
index表示当前元素在集合中的索引值，参数class表示当前元素的class属性值，该函数返回要移除的一个或者多个类名。
$("p").removeClass();
$("li").removeClass("tab activate");
$("input: text").removeClass("readOnly");
<!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>addClass()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
idiv {
margin: 20px auto 10px auto;
width: 600px;
background: #fff;
padding: 10px;
border: 5px solid #000;
text-align: left;
height:40px
}
ul {
margin:0 auto;
padding:0;
list-style:none;
text-align:center;
}
ul li {
float:left;
margin-left: 5px;
padding: 2px;
cursor:pointer;
}
.bgColor {
background-color: #BDBDBD;
}
.liWidth {
width: 60px;
}
.tabin {
background-color: #393;
border: 1px solid #000;
color: #FFF;
}
</style>
</head>
<body>
<ul>
<li>新闻</li>
<li>网页</li>
<li>视频</li>
<li>空间</li>
<li>图片</li>
<li>地图</li>
<li>更多</li>
</ul>
<div></div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("p").removeClass();
$("li").removeClass("tab active");
$("input:text").removeClass("readOnly");
//$("li").removeClass(function(index,class){
//
//});
$("ul li").addClass("bgColor liWidth");
$("ul li").mouseover(function(){
$(this).addClass("tabin");
});
$("ul li").mouseout(function(){
$(this).removeClass("tabin");
});
});
</script>
</body>
</html>
5.3 切换样式
jQuery提供了一个toggleClass方法来控制指定元素上的样式重复切换，也就是如果样式存在则删除，不存在就添加它。
主要有3种形式：
toggleClass(className);
toggleClass(className, switch); //switch为true，则添加该类，如果为false，则移除该类
toggleClass(function(index, class), [switch]);
className表示要对每个匹配元素切换的一个或者多个类名（用空格分隔），switch是一个boolean值，指定要添加或者移除类名
$("h3.TabTitle").toggleClass("activate");
$("span").click(function() {
$(this).toggleClass("clearFloat);
});
$("ul li").toggleClass(function(index, class) {
if($(this).parent().is(".menu")) {
return “style1”;
} else {
return "style2";
}
});
综合例子：
<!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>toggleClass()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:14px
}
#wrap {
margin: 20px auto 10px auto;
width: 600px;
background: #fff;
padding: 10px;
height:140px;
border: 5px solid #000;
text-align: left;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
margin-top:0px;
}
ul, li {
/*清除ul和li上默认的小圆点*/
list-style: none;
}
ul {
/*清除子菜单的缩进值*/
padding: 0;
margin: 0;
}
.main {
background-image: url(images/title.gif);
background-repeat: repeat-x;
width: 140px;
float: left;
margin-right: 5px;
}
li {
background-color: #EEEEEE;
}
a {
/*取消所有的下划线*/
text-decoration: none;
padding-left: 20px;
display: block;
display: inline-block;
width: 120px;
padding-top: 3px;
padding-bottom: 3px;
}
.main a {
color: white;
background-image: url(images/collapsed.gif);
background-repeat: no-repeat;
background-position: 3px center;
}
.main li a {
color: black;
background-image: none;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<h1>精通jQuery视频目录索引</h1>
<ul>
<li class="main"> <a href="#">JavaScript</a>
<ul>
<li> <a href="#">内容概述</a> </li>
<li> <a href="#">JavaScript基础语法</a> </li>
<li> <a href="#">JavaScript实用编程</a> </li>
</ul>
</li>
<li class="main"> <a href="#">Web开发基础</a>
<ul>
<li> <a href="#">HTML</a> </li>
<li> <a href="#">CSS</a> </li>
<li> <a href="#">DOM</a> </li>
</ul>
</li>
<li class="main"> <a href="#">jQuery简单应用</a>
<ul>
<li> <a href="#">配置开发环境</a> </li>
<li> <a href="#">核心函数</a> </li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".main a").attr("title","切换显示与隐藏")
$(".main a").click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
ulNode.toggleClass("hide");
//修改主菜单的指示图标
changeIcon($(this));
});
});
/**
* 修改主菜单的指示图标
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
</script>
</body>
</html>
6 元素CSS
6.1 读取CSS样式
css(cssName); 该方法将从匹配元素集合中获取第一个元素的样式属性值并返回。
在js中，通过 “对象.style.CSS属性”的语法来读取或者设置DOM元素的CSS样式，如span.style.color和p.style.backgroundColor等。
$("div").css("float"); //jQuery方式
$("div").css("cssFloat"); //W3C标准浏览器
$("div").css("styleFloat"); //IE浏览器
6.2 设置CSS样式
css(cssName, value);
css(map);
css(cssName, function(index, value));
$("div").css("color", "#FFFFFF");
$("div").css("background-color", "black");
$("div").css({"color":"#FFFFFF", "background":"black"});
<!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>css()方法</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:14px
}
#wrap {
margin: 20px auto 10px auto;
width: 480px;
background: #fff;
padding: 10px;
height:140px;
border: 5px solid #000;
text-align: left;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
margin-top:0px;
clear:both
}
ul {
list-style:none;
padding:0;
}
ul li {
display:block;
width:10px;
height:10px;
background-color:#000;
margin-right:3px;
float:left;
cursor:pointer
}
</style>
</head>
<body>
<div id="wrap">设置字体的颜色
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h1>精通jQuery视频目录索引</h1>
<div id="res"></div>
</div>
<script language="javascript" type="text/javascript">
var colors=new Array("#000","#339","#c93","#6C3","#00F","#0FF","#F66");
$(document).ready(function(){
$("li").each(function(index){
$(this).css("background-color",colors[index]);
});
$("li").click(function(){ //遍历li元素
//从颜色数组中设置相应的颜色
var activeCss={"border":1,"border-style":"solid","border-color":"#f00"};
$(this).css(activeCss); //设置当前元素为激活状态
$("li").not($(this)).css("border","0"); //设置其他元素为不激活状态
var activeColor=$(this).css("backgroundColor"); //获取当前元素的背景色
$("h1").css("color",activeColor); //将颜色应用到字体上
$("#res").html("当前字体的颜色值为："+activeColor);
});
});
</script>
</body>
</html>
6.3 元素CSS位置
jQuery提供了一些用于元素定位的方法，可以用来获取元素相对于文档或其父元素的坐标，可以控制元素在水平和垂直滚动条的位置。
6.3.1 offset方法
可以控制元素相对于文档的当前坐标。
offset()
offset(coordinates)
其中，不带参数时返回匹配集合中第一个元素相对与文档的top和left坐标，参数coordinates是一个包含top和left属性的对象，值为整数，表示
匹配元素的新top和left坐标。
var point = $("img:last").offset(); //获取坐标
var x = point.left; //获取left坐标值
var y = point.top; //获取top坐标值
offset方法不同于position方法，后者用来获取元素相对于其父元素的当前位置，在全局操作(如拖放)，如果要在一个现有元素基础上定位一个新元素，
offset方法更加有用。
对id为panel的容器进行重新定位： $("#panel").offset({top: 50, left: 350});
6.3.2 position方法
用于获取匹配元素相对于父元素的当前偏移量。它返回的对象包括两个属性：top和left.
var point = $("#panel").position();
$("#res").html("当前left:" + point.left + ", 当前top:" + point.top);
6.3.3 scrollLeft和scrollTop方法
分别用于获取元素的滚动条距顶端和左端的距离。
var leftValue = $("div").scrollLeft(); //获取滚动条距左端的距离
var topValue = $("div").scrollTop(); //获取滚动条距离顶端的距离
还可以通过这两个方法控制元素滚动到指定位置，例如，控制textarea元素内的滚动条滚动到距顶端10，距左端20的位置，
$("textarea").scrollTop(10);
$("textarea").scrollLeft(20);
<!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>css位置</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:14px;
text-align:center
}
#wrap {
margin: 20px auto 10px auto;
width: 700px;
background: #fff;
padding: 10px;
border: 5px solid #000;
position: relative;
height: 150px;
overflow: auto;
text-align: center;
}
h1 {
color:#006;
font-size:24px;
font-weight:bold;
text-align:center;
margin-top:0px;
}
#pic {
margin: 20px;
padding: 15px;
}
</style>
</head>
<body>
<br />
拖动滚动条查看完整内容
<div id="wrap">
<h1>经典卡通人物－采蘑菇的小姑娘</h1>
<div id="pic"> <img src="picture.jpg" /> </div>
</div>
<div id="result1"></div>
<div id="result2"></div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var demo = $("#wrap");
var s = "相对于文档: left=<span>" + Math.round(demo.offset().left) + "</span>, top=<span>" + Math.round(demo.offset().top) + "</span>";
s += "<br />相对于父元素: left=<span>" + Math.round(demo.position().left) + "</span>, top=<span>" + Math.round(demo.position().top) + "</span>";
$("#result1").html(s);
});
$("#wrap").scroll(function () {
var msg = "滚动条的当前位置：" + "scrollLeft=<span>" + $(this).scrollLeft() + "</span>; scrollTop=<span>" + $(this).scrollTop() + "</span>";
$("#result2").html(msg);
});
</script>
</body>
</html>
7:元素CSS尺寸
7.1 height方法和width方法
返回一个整数值，该值不包括内边距(padding)、边框(border)和外边距(margin)
var divHeight = $("div").height(); //获取高度
var divWidth = $("div").width(); //获取宽度
var winHeight = $(window).height(); //获取浏览器窗口高度
var winWidth = $(window).width(); //获取浏览器窗口宽度
var docHeight = $(document).height(); //获取文档高度
var docWidth = $(document).width(); //获取文档宽度;
使用css方法也能实现获取元素高度和宽度的功能，两者的区别在于前者返回的值包含单位(如200px)，后者则返回无单位的像素值（如20）
height(value); //设置元素的高度为value
width(value); //设置元素的宽度为value;
$("div").height("200");
$("div").width("95%");
7.2 innerHeight()和innerWidth()方法
为只读方法，用于获取元素的内部高度和内部宽度，也就是包含顶部内边距和底部内边距，但不包含边框和外边距的值，而且不支持window和document对象。
var inHeight = $("#banner").innerHeight();
var inWidth = $("#banner").innerWidth();
7.3 outerHeight()和outerWidth方法
可以返回元素的外部宽度和外部高度
outerHeight(includeMargin);
outerWidth(includeMargin);
includeMargin是boolean值，用于指定返回值中是否包含外边距，该参数值为false，表示不计算外边距，仅包含边框和内边距，如果为true，则将外边距计算在返回
值内。
var outHeight = $("#banner").outerHeight();
var outWidth = $("#banner").outerWidth();
<!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>CSS尺寸</title>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:14px;
text-align:center
}
#wrap {
margin: 20px auto 10px auto;
padding: 10px;
width: 700px;
background: #fff;
border: 5px solid #000;
}
#pic {
padding: 5px;
border: 2px solid #D6D6D6;
clear:both
}
</style>
</head>
<body>
<div id="wrap"> </div>
<img src="keyboard.jpg" id="pic" /><br />
<br />
<br />
<div>高度：
<input id="newHeight" type="text" size="10" />
宽度：
<input id="newWidth" type="text" size="10" />
<input id="btnChange" type="button" value="修改" />
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
display();
});
function display(){
var picHeight=$("#pic").height();
var picWidth=$("#pic").width();
var picInnerHeight=$("#pic").innerHeight();
var picInnerWidth=$("#pic").innerWidth();
var picOuterHeight=$("#pic").outerHeight();
var picOuterWidth=$("#pic").outerWidth();
$("#newHeight").val(picHeight);
$("#newWidth").val(picWidth);
var result="图片高度："+picHeight+"，图片宽度："+picWidth
+"；内部高度："+picInnerHeight+"，内部宽度："+picInnerWidth
+"；外部高度："+picOuterHeight+"，外部宽度"+picOuterWidth;
$("#wrap").html(result);
}
$("#btnChange").click(function(){
var newHeight=$("#newHeight").val();
alert("newHeight:" + newHeight);
var newWidth=$("#newWidth").val();
alert("newWidth:" + newWidth);
//document.getElementById("pic").height = newHeight;
//document.getElementById("pic").width = newWidth;
$("#pic").height(newHeight).width(newWidth);
display();
});
</script>
</body>
</html>
