JQuery操作元素的属性与样式及位置

< script type ="text/javascript" src ="JQuery/jquery-1.5.1.js" ></ script >
< script type ="text/javascript" defer >
// 标签的属性称作元素属性，在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。

// ==================================操作元素属性==================================

// 返回元素指定属性值
var txt1_val = $( " #txt1 " ).attr( " value " );

// 通过元素的DOM属性名更改DOM属性值
$( " #txt1 " ).attr({ value : " txt1_value " , className : " txt1_class " });

// 通过指定元素属性改变元素属性值
$( " #txt1 " ).attr( " class " , " txt1_class2 " );

// 给指定元素属性赋值，通过后面捆绑的方法返回值
$( " #txt1 " ).attr( " class " , function (){
return " txt1_class3 " ;
})

// 移除指定的元素属性
$( " #txt1 " ).removeAttr( " class " );

// ==================================修改CSS类==================================

// 给CSS类即class元素属性添加一个属性值，可以添加多个之间用空格分开以下的对CSS类操作函数同样可以填入多个CSS类
$( " #txt1 " ).addClass( " txt1_class txt1_class2 " );

// 判断是否已有该CSS类，返回真假
$( " #txt1 " ).hasClass( " txt1_class txt1_class2 " );

// 移除指定CSS类，用空格分开，如无指定则删除该元素所有CSS类
$( " #txt1 " ).removeClass( " txt1_class " );

// 判断是否有这个CSS类，有就删除，没有就添加
$( " #txt1 " ).toggleClass( " txt1_class " );

// 根据后面的返回真则添加此CSS类，假则删除此CSS类
$( " #txt1 " ).toggleClass( " txt1_class " , false );

// ==================================修改CSS属性==================================

// 返回指定CSS样式值
$( " #txt1 " ).css( " color " );

// 一次赋多个样式
$( " #txt1 " ).css({color: " #ff0011 " ,background: " blue " });

// 一次赋一个指定的样式
$( " #txt1 " ).css( " color " , " black " );

// ==================================宽和高相关==================================

// 设置元素的高度，无值则返回该元素的高度单位像素
$( " #txt1 " ).height( 25 );

// 设置元素的宽度，无值则返回该元素的宽度
$( " #txt1 " ).width( 150 );

// 获取元素的内部高度，不包括边框
$( " #txt1 " ).innerHeight();

// 获取元素内部宽度，不包括变宽
$( " #txt1 " ).innerWidth();

// 获取元素外部高度，包括边框
$( " #txt1 " ).outerHeight();

// 获取元素外部宽度，包括边框
$( " #txt1 " ).outerWidth();

// ==================================位置相关==================================

// 获取元素相对窗口的偏移位置，返回两个值，一个top值，一个left值
var txt1_offset = $( " #txt1 " ).offset();
var top = txt1_offset.top;
var left = txt1_offset.left;

// 返回相对父元素的相对偏移位置，返回两个值一个top，一个left
var txt1_position = $( " #txt1 " ).position();
var top = txt1_position.top;
var left = txt1_position.left;

// 针对的元素具有垂直滚动条，设置从总体内容向下的第20行像素开始，显示在滚动条可视窗口内上方顶端
// 如无参数，则返回当前滚动条可视窗口上方顶点位置，距离整体内容上方顶点的距离
$( " #div_outer " ).scrollTop( 20 );

// 针对的元素具有横向滚动条，设置从总体内容左侧的第20列像素开始，显示在滚动条可视窗口内左端顶点
// 如无参数，则返回当前滚动条可视窗口左端顶点位置，距离整体内容左端顶点的距离
$( " #div_outer " ).scrollLeft( 20 );
</ script >
< input type ="text" name ="txt1" id ="txt1" class ="txt1" value ="txt1" />

< div style ="width:200px;height:200px;background-color:#999999;overflow:auto;" id ="div_outer" >
< div style ="width:300px;height:300px;background-color:#FFFF00;" id ="div_inner" >
这些文字显示在内层元素中。
</ div >
</ div >