基础DOM和CSS操作(一)
DOM简介
DOM是一种文档对象模型，方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中，DOM不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在jQuery中，已经将最常用的DOM操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
- D表示的是页面文档Document、O表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
- DOM有三种形式，标准DOM、HTML DOM、CSS DOM(难道不是XML DOM吗？)，大部分都进行了一系列的封装，在jQuery中并不需要深刻理解它。
- 树型结构用来表示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";
});
基础DOM和CSS操作(一)的更多相关文章
- 基础DOM和CSS操作(三)
CSS方法 jQuery不但提供了CSS的核心操作方法,比如.css()..addClass()等.还封装了一些特殊功能的CSS操作方法,我们分别来了解一下. width()方法 方法名 描述 wid ...
- 基础DOM和CSS操作(二)
元素样式操作 元素样式操作包括了直接设置CSS样式.增加CSS类别.类别切换.删除类别这几种操作方法.而在整个jQuery使用频率上来看,CSS样式的操作也是极高的,所以需要重点掌握. CSS操作方法 ...
- 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
- Jquery5 基础 DOM 和 CSS 操作
学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 5.CSS 方法 DOM 是一种文档对象模型.方便开发者对HTML 结构元素内容进行展示和修改.在 JavaScr ...
- jQuery的基础dom和css操作
1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...
- jQuery(基础dom及css操作)
设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...
- 第 5 章 基础 DOM 和 CSS 操作
在常规的 DOM 元素中,我们可以使用 html()和 text()方法获取内部的数据.html()方法 可以获取或设置 html 内容,text()可以获取或设置文本内容. $('#box').ht ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
随机推荐
- pcre 使用
1.主页地址:http://www.pcre.org/ 下载pcre-7.8.tar.bz22.解压缩: tar xjpf pcre-7.8.tar.bz23.配置: cd p ...
- 出色的 JavaScript API 设计秘诀
设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架. (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线.软件设计,特别是作为软件设计的次类的AP ...
- 如何在github上fork一个项目来贡献代码以及同步原作者的修改
[-] 如何贡献自己的力量 如何让自己的项目与原作者的项目保持同步 作为一个IT人,通过github进行学习是最快的成长手 段.我们可以浏览别人的优秀代码.但只看不动手还是成长得很慢,因此为别人贡献代 ...
- MATLAB中匿名函数与符号函数的转换
符号函数举例: syms x y=x+1; y1=diff(y); %求导 匿名函数举例: z=@(x)(x(1)+2*x(2)); t=z([2 3]); %计算z在x=[2 3]处的值 z=@(x ...
- ionic:Build mobile apps faster with the web technologies you know and love
http://ionicframework.com/getting-started/ 5 Ionic Framework App Development Tips and Tricks http:// ...
- c 计算 语句 执行 时间
当然,你也可以用clock函数来计算你的机器运行一个循环或者处理其它事件到底花了多少时间: #include “stdio.h” #include “stdlib.h” #include “tim ...
- DataTable分组归类
我们在做项目的时候,经常需要根据表或DataTable中某些字段来归类,为此就写出以下方法,帮组需要的人. #region 对DataTable进行分组 + public void GroupData ...
- Careercup - Google面试题 - 6407924087783424
2014-05-07 15:17 题目链接 原题: Given an array of n elements (a1,a2,..ai,...,an). You are allow to chose a ...
- MVC5 + EF6 入门完整教程 （1）
第0课 从0开始 ASP.NET MVC开发模式和传统的WebForm开发模式相比,增加了很多"约定". 直接讲这些 "约定" 会让人困惑,而且东西太多容易忘记 ...
- 记codevs第一次月赛
第一次参加这种有奖励的比赛(没错,我就是为猴子而去的 一年没怎么碰代码果然手生,还是用没写多久的C++,差点全跪了 T1数学奇才琪露诺: 首先定义一个函数F(x),F(x)=x的各个数位上的数字和 然 ...