当前标签 / DOM / 总共3篇

Web前端基础(16)jQuery操作HTML属性和元素

属性操作

在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操作

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

JavaScript组成

JavaScript由三部分组成

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

DOM的定义

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

DOM树如下

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

阅读更多