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>


jQuery技术之HTML操作_xhtml


      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>


  

jQuery技术之HTML操作_javascript_02


综合案例:

<!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>


jQuery技术之HTML操作_xhtml_03


jQuery技术之HTML操作_function_04

jQuery技术之HTML操作_function_04


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>


jQuery技术之HTML操作_html_06


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>


jQuery技术之HTML操作_html_07


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>


jQuery技术之HTML操作_jquery_08



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>


jQuery技术之HTML操作_html_09


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>


jQuery技术之HTML操作_xhtml_10


 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>



jQuery技术之HTML操作_xhtml_11


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>


jQuery技术之HTML操作_javascript_12

     

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>


jQuery技术之HTML操作_xhtml_13



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>



jQuery技术之HTML操作_xhtml_14