<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>
分享到:
相关推荐
本文旨在介绍如何利用jQuery这一流行的JavaScript库来操作HTML文档中的元素属性与CSS样式。对于初学者而言,掌握这些技能对于构建动态网页至关重要。 #### 二、前言 在之前的学习过程中,我们已经掌握了如何使用...
对于元素的属性与样式的操作,JQuery提供了丰富的功能,使得开发者能更加便捷地控制网页元素的行为和视觉效果。 首先,理解元素属性和DOM属性的概念至关重要。在HTML中,诸如`id`、`src`、`alt`和`class`等被称为...
今天我们将主要关注jQuery中的节点操作、特殊属性操作以及事件机制。 一、jQuery节点操作 1. 选择器:jQuery提供了丰富的选择器,如ID选择器(#id)、类选择器(.class)、元素选择器(element)等,用于快速定位DOM元素...
在深入探讨jQuery的样式操作和属性操作之前,我们先来理解一下jQuery是什么。jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript代码的编写,特别是在处理DOM(Document Object Model)操作...
为了更好地掌握jQuery以及attr()方法的使用,读者可以参考本站专题,如《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》以及《jquery选择...
总之,“jQuery淘宝商品多属性查询”是一个综合性的技术实践,涉及了jQuery的选择器、事件、Ajax通信、DOM操作等多个核心知识点。熟练掌握这些技能,不仅有助于开发类似功能,还能为其他前端项目打下坚实的基础。
**jQuery滚动元素固定位置插件详解** 在网页设计中,我们常常希望某些元素在用户滚动页面时保持在屏幕的特定位置,例如导航栏或侧边栏。这时,jQuery-sticky-elements插件就能派上用场。这款插件是基于流行的...
替换操作在JQuery中也非常常见,文档提到了`replace()`和`replaceAll()`方法,这两个方法允许开发者替换DOM中的文本或元素,提供了操作文档内容的灵活性。 在处理表单元素的值时,JQuery提供了`.val()`和`.text()`...
jQuery作为一个流行的JavaScript库,极大地简化了JavaScript编程,尤其在操作DOM元素的内容和样式方面。本文将基于给定内容,详细地介绍如何使用jQuery来操作元素的内容和样式,并提供完整的实例代码分析。 首先,...
本文将详细讲解如何使用 jQuery 修改元素的 CSS `height` 属性值,以便实现动态调整元素高度的功能。 首先,我们需要理解 `height` 这个 CSS 属性。在 CSS 中,`height` 属性用于设置元素的高度,可以是绝对值(如...
综上所述,"jquery元素跟随鼠标移动"这一特效涉及到jQuery的选择器用于选取元素,事件处理机制用于监听鼠标移动,以及CSS定位技术用于动态调整元素位置。通过理解和掌握这些知识点,不仅可以创建有趣的交互效果,也...
下面是一段示例代码,展示了如何通过jQuery选择器和CSS样式来改变错误提示的位置: ```javascript if (box.attr("tipBottom")) { tip.css({ display: "block", left: box.offset().left, top: box.offset().top...
你可以使用`position`属性实现元素的定位,`transition`属性定义元素在动画过程中的变化速度。 3. **jQuery初始化**:在页面加载完成后,我们需要使用`$(document).ready()`函数来确保所有元素都已加载完毕。然后,...
《jQuery标签云无规则样式的实现与探讨》 在网页设计中,标签云(Tag Cloud)是一种常见的展示信息的方式,它能够将大量的关键词以不同大小的字体显示,以直观地反映出各个关键词的重要程度。在本资源"jquery标签云...
2. **背景样式**:可以使用jQuery改变元素的背景颜色、图案、渐变等,通过选择器定位特定元素并应用CSS属性。 3. **jQuery Corner插件**:用于为元素添加圆角效果,是jQuery生态系统中的一个工具,可以方便地实现CSS...
本文主要关注jQuery Mobile中的一个关键特性——data属性,这些属性用于定制和增强UI元素的功能和外观,使其更适合打印和学习。 首先,我们来看`data-role="button"`属性,它用于将HTML元素转化为jQuery Mobile的...
(答案见下载资源) 上机任务1 ... 在chrome的控制台中输入jQuery...为某dom元素应用某css样式可以使用jQuery中的addClass方法,例如:将id为tt的div元素应用.bt样式,可用些语句:$("#tt").addClass("color","red");
jQuery的API设计简洁直观,其中,`removeClass`方法就是用来从匹配的元素集合中的每个元素上移除一个或多个用空格隔开的样式类名。它是一种非常实用的方法,特别是在动态地添加和删除样式时非常有用。 首先,我们来...