当前标签 / DOM / 总共3篇

Web前端基础（16）jQuery操作HTML属性和元素

· 大约 400 个字 · 预计 2 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 属性 · 样式 · DOM

属性操作

在jQuery中，用attr()方法来获取和设置元素的属性，用removeAttr()方法来删除元素属性。

attr()方法使用示例

1
2
3
4
5
6
7

var $para = $("p");
//获取
var p_text = $para.attr("title");  
//设置
$para.attr("title", "dp2px");
//可以一次修改多个属性
$para.attr({"title":"dp2px", "name":"地痞兔劈叉"});

removeAttr()方法使用示例

1

$("p").removeAttr("title");

样式操作 

1

<p class="myclass" title="dp2px">地痞兔劈叉</p>

上面代码中，class其实也是p元素的一个属性，因此可以用attr()方法获得和设置class的内容。jQuery提供了一个addClass()方法来追加class值。提供了removeClass()来移除class值。

1
2

$("p").addClass("another");
$("p").removeClass("another");

jQuery中还提供了一个toggleClass()方法来实现单机切换（添加和删除）操作

另外判断是否有某个class值用方法hasClass()来判断。

阅读更多

Web前端基础（15）jQuery选择器和DOM操作

· 大约 1000 个字 · 预计 5 分钟 读完
Web前端 · 基础
Web前端 · 基础 · jQuery · 选择器 · DOM

jQuery 是 JavaScript 中使用最广泛的一个库，它可以帮助我们简化 js 代码，更好的完成工作。

痛点

javascript 遇到的一些痛点：

  • window.onload 事件有个覆盖问题，我们只能写一个
  • 代码容错性差
  • 浏览器兼容性问题
  • 书写很繁琐，代码量多
  • 代码很乱，各个页面到处都是
  • 动画效果，我们很难实现

版本

目前jQuery有三个大版本：

  • 1.x：兼容 ie678,使用最为广泛的，官方只做 BUG 维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

  • 2.x：不兼容 ie678，很少有人使用，官方只做 BUG 维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用 2.x，最终版本：2.2.4 (2016年5月20日)

  • 3.x：不兼容 ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的 jQuery 插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.3.1

引入

使用 jQuery 只需要在页面的 <head> 引入 jQuery 文件即可

1
2
3
4
5
6
7
8
9

<html>
<head>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    ...
</head>
<body>
    ...
</body>
</html>

阅读更多

Web前端基础（6）浏览器对象模型DOM

· 大约 500 个字 · 预计 3 分钟 读完
Web前端 · 基础
Web前端 · 基础 · DOM · Document · Element

JavaScript组成

JavaScript由三部分组成

  1. ECMAscript – 欧洲计算机制造商协会，描述了javascript的语法和基本对象。
  2. DOM – 文档对象模型，处理网页内容的方法和接口。
  3. BOM – 浏览器对象模型，与浏览器交互的方法和接口。

DOM的定义

DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构，目的其实就是为了能让javascript操作html元素而定制的一个规范。

DOM树如下

由结构图中我们可以看到，整个文档就是一个文档节点。而每一个HMTL标签都是一个元素节点。

阅读更多