Jquery使用(1)
来源:互联网 发布:java 简单工作流 思路 编辑:程序博客网 时间:2024/04/24 00:49
2012-07-06 19:44
Jquery使用(1)
<script type="text/javascript"src="JQuery/jquery-1.5.1.js"></script>
<script type="text/javascript"defer>
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。
//==================================操作元素属性==================================
//返回元素指定属性值
vartxt1_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值
vartxt1_offset=$("#txt1").offset();
vartop=txt1_offset.top;
varleft=txt1_offset.left;
//返回相对父元素的相对偏移位置,返回两个值一个top,一个left
vartxt1_position=$("#txt1").position();
vartop=txt1_position.top;
varleft=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>
<script type="text/javascript"defer>
//标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。
//==================================操作元素属性==================================
//返回元素指定属性值
vartxt1_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值
vartxt1_offset=$("#txt1").offset();
vartop=txt1_offset.top;
varleft=txt1_offset.left;
//返回相对父元素的相对偏移位置,返回两个值一个top,一个left
vartxt1_position=$("#txt1").position();
vartop=txt1_position.top;
varleft=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>
0 0
- 使用 jQuery (1)
- Jquery使用(1)
- Jquery DataTable插件使用(1)
- 使用 jQuery dataTables - 1
- Jquery使用(1)
- 使用 jQuery dataTables - 1
- 使用 jQuery dataTables - 1
- jQuery插件使用1
- 1使用jQuery
- Rails5.1使用jquery
- jquery使用(1)
- 使用 jQuery (2)
- jquery.validate使用攻略 - 1
- Jquery使用小技巧(1)
- jquery.validate使用攻略 - 1
- jquery使用注意事项总结1
- jQuery.mobile使用(一)
- jquery的使用(杂)
- STL map中key为结构体的用法
- down_interruptible函数
- 算法学习--------大数据处理算法
- 解决MySQL不允许从远程访问的方法
- Doing Enterprise Architecture-Planning: TOGAF
- Jquery使用(1)
- 【转载】Sniffer pro 找不到网卡的解决方法
- 如何在局域网内共享文件
- C++ Primer学习之(7)——函数
- IE快捷键大全
- mysql的常用命令增删改查系列语句
- 电脑快捷操作的使用
- 【转载】PS将阴天相片变成蔚蓝天空
- 教你如何用ps美化皮肤 每一步都很容易理解!