基础DOM和CSS操作

DOM简介

DOM是一种文档对象模型,方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中,DOM不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery中,已经将最常用的DOM操作方法进行了有效封装,并且不需要考虑浏览器的兼容性。

  1. D表示的是页面文档Document、O表示对象,即一组含有独立特性的数据集合、M表示模型,即页面上的元素节点和文本节点。
  2. DOM有三种形式,标准DOM、HTML DOM、CSS DOM(难道不是XML DOM吗?),大部分都进行了一系列的封装,在jQuery中并不需要深刻理解它。
  3. 树型结构用来表示DOM,就非常的贴切,大部分操作都是元素节点操作,还有少部分是文本节点操作。

设置元素及内容

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候,我们就可以对这些元素进行DOM的操作。 那么最常用的操作就是对元素内容的获取和修改。

html()和text()方法

方法名 描述
html() 获取元素中HTML内容
html(value) 设置元素中HTML内容
text() 获取元素中文本内容
text(value) 设置元素中文本内容
val() 获取表单中的文本内容
val(value) 设置表单中的文本内容

在常规的DOM元素中,我们可以使用html()和text()方法获取内部的数据。html()方法可以获取或设置html内容,text()可以获取或设置文本内容。

有html代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基础DOM和CSS操作</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="demo.js"></script>
</head>
<body>
    <div id="box">
        <strong>www.ycku.com</strong>
    </div>
</body>
</html>

jQuery代码如下:

alert($("#box").html()); //获取html内容,即<strong>www.ycku.com</strong>
alert($("#box").text()); //text获取的是文本,即www.ycku.com,有html会自动被清理
$("#box").html("<em>www.li.cc</em>"); //替换html内容,HTML会自动解析
$("#box").text("<em>www.li.cc</em>"); //替换文本内容,有HTML会自动转义

注意:当我们使用html()或text()设置元素里的内容时,会清空原来的数据。而我们期望能够追加数据的话,需要先获取原本的数据。

$("div").html($("div").html()+"<em>www.li.cc</em>"); //追加数据

如果元素是表单的话,jQuery提供了val()方法进行获取或设置内部的文本数据。

如有html代码(核心部分):

<input type="text" value="瓢城web俱乐部" />
alert($("input").val()); //获取表单内容
$("input").val("北风网");//设置表单内容

如果想设置多个选项的选定状态,比如下拉列表、单选/复选框等等,可以通过数组传递操作。

html核心代码如下:

<input type="radio" value="男" />男
<input type="radio" value="女" />女
<input type="checkbox" value="编程" />编程

jQuery代码:

alert($("input").val()); //男,选中单选框中的第一个选项
$("input").val("女");
$("input").val(["男","女","编程"]); //value值(下拉列表、单选框、复选框)是这些的将被选定

元素属性操作

除了对元素内容进行设置和获取,通过jQuery也可以对元素本身的属性进行操作,包括获取属性的属性值、设置属性的属性值,并且可以删除掉属性。

attr()和removeAtrr()

方法名 描述
attr(key) 获取某个元素key属性的属性值
attr(key,value) 设置某个元素key属性的属性值
attr({key1:value1,key2:value2,...}) 设置某个元素多个key属性的属性值
attr(key,function(index,value) {}) 设置某个元素key通过fn来设置

html核心代码:

<div id="box">
    <strong>www.ycku.com</strong>
</div>

<div title="bbb">
    <strong>www.ycku.com</strong>
</div>

jQuery代码:

alert($("#box").attr("id")); //获取属性的属性值
$("div").attr("title", "我是域名"); //设置属性及属性值
//传一个对象
$("div").attr({
    title:"我是域名", //属性名可[可不]加引号
    class:"red", //class不建议用attr来设置,后面有功能更强大和更丰富的方法代替
    "data":"123"
});
//通过匿名函数返回属性值
$("div").attr("title", function() {
    return "我是域名";
});

注意:attr()方法里的function() {},可以不传参数,也可以只传一个参数index,表示当前元素的索引(从0开始),也可以传递两个参数index、value,第二个参数表示属性原本的值。

$("div").attr("title", function(index,value) {
    return "原来的title是"+value+",现在的title是:我是"+(index+1)+"号域名"; //原来没有title,则为undefined
});

注意:jQuery中很多方法都可以使用function() {}来返回出字符串,比如html()、text()、val()和上一章刚学过的is()、filter()方法。而如果又涉及到多个元素集合的话,还可以传递index参数来获取索引值,并且可以使用第二个参数value(并不是所有方法都适合,有兴趣可以自己逐个尝试)。

$("div").html(function(index) { //通过匿名函数赋值,并传递index
    return "我是" + (index + 1) + "号div";
});
$("div").html(function(index,value) { //还可以实现追加内容
    return value + "<em>www.li.cc</em>";
});

注意:我们也可以使用attr()来创建id属性,但我们强烈不建议这么做。这样会导致整个页面结构的混乱。当然也可以创建class属性,但后面会有一个语义更好的方法来代替attr()方法,所以也不建议使用。

删除指定的属性,这个方法就不可以使用匿名函数,传递index和value均无效。

$("div").removeAttr("title"); //删除指定的属性
$("div").removeAttr(function() { //不可以传递function
    return "title";
});
时间: 2024-11-02 23:31:36

基础DOM和CSS操作的相关文章

基础DOM和CSS操作(三)

CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 width() 获取某个元素的长度 width(value) 设置某个元素的长度 width(function(index,width) {}) 通过匿名函数设置某个元素的长度 html代码(部分)如下: <div style="background: #eee; width: 800px;&quo

jQuery基础DOM和CSS操作

$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li.cc</em>');//设置 html 内容$('#box').text('<em>www.li.cc</em>');//设置文本内容,会自动转义 html标签$('#box').html($('#box').html() + '<em>www.li.cc&l

jQuery 基础 DOM 和 CSS操作

设置元素及内容 通过选择器.过滤器来得到我们想要操作的元素.这个时候,我们就可以对这些元素进行 DOM 的操作.那么,最常用的操作就是对元素内容的获取和修改. 在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').html(); //获取 html 内容 $('#box').text(); //获取文本内容,会自动清理 html 标签 $('#box').

基础DOM和CSS操作(二)

元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 方法名 描述 css(name) 获取某个元素行内的css样式 css([name1,name2,name3]) 获取某个元素行内多个css样式 css(name,value) 设置某个元素行内的css样式 css(name,function(index,value) {}) 设置某个元素行内的c

jQuery 基础DOM和CSS操作

要点: 设置元素及内容 元素属性操作 元素样式操作 CSS 方法 一.设置元素及内容 1.设置和获取元素中的HTML内容 <div id="test"> <h1>This is H1</h1> </div> console.log($("#test").html()); // <h1>This is H1</h1> 先获取当前的内容,再追加内容 $("#test").html

JQUERY DOM和CSS操作

jQuery碎语(1) 基础、选择要操作的元素、处理DOM元素

1.基础 jquery对象集: $():jquery对象集合 获取jquery对象集中的元素: 使用索引获取包装器中的javascript元素:var temp = $('img[alt]')[0] 使用jquery的get方法获取jquery对象集中的javascript元素:var temp = $('img[alt]').get(0) 使用jquery的eq方法获取jquery对象集中的jquery对象元素: $('img[alt]').eq(0) $('img[alt]').first(

jQuery基础——DOM篇

jQuery基础--DOM篇 在javascript中如何创建节点? 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 例子: document.addEventListener('click',function(){ //创建2个div元素 var rightdiv = document.cre

DOM 手势和操作 (HTML)

通过基本文档对象模型 (DOM) 手势事件处理,你可以自定义使用 Windows 触摸语言(如滑动.旋转和调整大小)描述的某些基本手势的用户体验. 针对 Windows 8.1 进行的更新:  Windows 8.1 针对指针输入 API 引入了多个更新和改善措施.请参阅 Windows 8.1 的 API 更改获取详细信息. 如果你不熟悉使用 JavaScript 开发应用:  阅读这些主题来熟悉此处讨论的技术. 采用 JavaScript 创建你的第一个应用 采用 JavaScript 的应