jQuery开发之DOM操作五

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。在jQuery中,可以直接利用css()方法获取元素的样式属性,jQuery示例代码如下:

$("p").css("color");  //获取<p>元素的样式颜色

无论color属性是外部css导入,或者是直接拼接在HTML元素里(内联),css()方法都可以获取到属性style里的其他属性的值。

css()方法设置单个样式属性,代码如下:

$("p").css("color","red");

与attr()方法一样css()方法可以同时设置多个样式属性,代码如下:

$("p").css({"fontsize":"30px","backgroundolor":"#888888"});

注意:

(1) 如果是数字,将会被自动转换为像素值。

(2) 在css()方法中,如果属性中带有“-”符号,例如font-size 和background-color ,如果再设置这些属性的值的时候,不带引号,那么也可以不带引号,但是建议带上引号,养成好的书写习惯。

在jQuery中还有另外一种方法来获取元素的高度,height()方法。示例代码如下:

$("p").height();

也可以设置元素的高度,示例代码如下:

$("p").height(100);//高度100像素
$("p").height("100em");  //高度100em

注意:

(1) 在jQuery1.2以后的height()方法可以用来获取window和document的高度。

(2) 两者的区别是:css()方法获取到的高度值与样式的设置有关,可能会得到”auto”,也可能的到“10px” 这样的字符串;而height()方法获取到的高度是元素在页面中的实际高度,与样式的设置无关,并且不带单位。

与height()方法对应的还有一个width()方法,发可以获取匹配元素的宽度值(px)。

1, offset()方法

它的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。

jQuery示例代码如下:

var offset = $("p").offset();
var left = offset.left; //获取左偏移
var top = offset.top;   //获取顶部偏移

2,position()方法

它的作用是获取元素相对于最近的一个position样式属性设置为relative 或者absolute的祖父节点相对偏移,它返回的对象包含两个属性,即top和left。

jQuery示例代码如下:

var position = $("p").position();
var left = position.left;
var top = position.top;

3, scrollTop()方法和scrollLeft() 方法

这两个方法的作用分别是获取元素的滚动条距顶端的和距离和左侧的距离。

jQuery示例代码如下:

var $p = $("p");
var left = $p.scrollLeft();获取元素的滚动条距离左侧的距离
var top = $p.scrollTop();获取元的滚动条距离顶端的距离

另外还可以设定一个参数控制元素的滚动条滚动到指定的位置。

jQuery示例代码如下:

$("textarea").scrollTop(300);//元素的滚动条垂直滚动到指定的地方
$("textarea").scrollLeft(300);//元素的滚动条水平滚动到指定的地方
时间: 2024-11-09 00:55:53

jQuery开发之DOM操作五的相关文章

jQuery开发之DOM操作一

1,查找节点 1),查找元素节点 获取元素节点并打印出它的文本内容,jQuery代码如下: var $li = $("ul li:eq(1)"); //获取<ul> 里第2个<li> 节点 var li_text =$li.text(); //获取第二个<li> 节点的文本内容 alert(li_text); //打印文本内容 2),查找属性节点 var $para = $("p") // 获取<p>节点 var p_

jQuery开发之DOM操作二

接上篇文章 3,插入节点 插入节点的方法如下图: 4,删除节点 (1) remove()方法 作用是从DOM中删除所有匹配的元素.示例代码如下: var $li =$("ul li:eq(1)").remove(); //获取第二个<li>节点后,将它从网页中删除. 注意:当某个节点用remove()删除后,该节点包含的所有后代节点将同时被删除.这个方法的返回值是一个指向被删除节点的引用,因此可以在以后继续使用这些元素. (2) detach()方法 detach() 和r

jQuery开发之DOM操作三

1,属性操作 (1)获取属性和设置属性 获取<p>元素的title属性示例代码如下: var $para =$("p"); var p_title =$para.attr("title"); 设置单个属性的jQuery示例代码如下: var $para =$("p"); $para.attr("title","your title"); 设置多个属性的jQuery的示例代码如下: var $pa

jQuery开发之DOM操作四

1,设置获取HTML.文本和值 (1) html()方法 此方法类似于javaScript的innerHTML属性,可以用来读取或者设置某个元素的HTML内容. 示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta ht

Jquery基础之DOM操作

 一.jQuery对象与Dom对象的区别 一直以来对于通过jQuery方式获取的对象使不能直接使用JavaScript的一些方法的,开始的时候不理解,现在此案知道,原来jQuery获得的对象并不和我们平时使用getElementById获得的对象是一样的对象.所以一些新手就很迷惑,为什么${”#Element”}不能直接innerHTML,这就是原因所在,解决方式请看下文. jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法.注意dom对象和jquery对象是有

jQuery 选择器和dom操作

JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1).“$(“#id”)”,获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2).“$(“.class”)”,获取class指定的元素,不同的元素可以具有相同的class属性,所以它可能具有多个成员. 3).“$(“element”)”,获取element(元素名,比如div.ta

jQuery核心之DOM操作的常用方法

参考jQuery官网API文档 1..attr() 获取 : $( "a" ).attr( "href" ); 设置: $( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" ); $( "a" ).attr({ title: "all titles are the same too!", href: "s

jQuery简介之dom操作

正文 dom 获取标签 $(选择器): 创建标签对象 $("标签"): 因为返回的都是jQuery对象,所以可以链式调用(任何的jQuery API 返回的都是jQuery对象) 插入标签 内部插入 1.append(content|fn) 概述 向每个匹配的元素内部追加内容. 这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似. 参数 contentString, Element, jQueryV1.0 要追加到目标中的内容 function(inde

HTML5移动开发之路(36)——jQuery中的DOM操作

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(36)--jQuery中的DOM操作 1.查询 利用选择器查找节点 使用 html() / text() / attr() 输出节点文本和属性值. 注意:下拉列表使用 val() [html] view plain copy print? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery