当前标签 / DOM / 总共3篇

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

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

属性操作

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

attr()方法使用示例

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

removeAttr()方法使用示例

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

样式操作

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

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

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

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

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

阅读更多

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

· 大约 700 个字 · 预计 4 分钟 读完
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只需要在页面的引入jQuery文件即可

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

阅读更多

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

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

JavaScript组成

JavaScript由三部分组成

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

DOM的定义

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

DOM树如下

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

阅读更多