2018-10-16日

7 分钟读完 (大约 999 个字)

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()方法使用示例

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()来判断。

2018-10-15日

Web前端 / 基础

20 分钟读完 (大约 2970 个字)

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>

2018-10-02日

Web前端 / 基础

5 分钟读完 (大约 789 个字)

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

JavaScript组成

JavaScript由三部分组成

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

DOM的定义

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

DOM树如下

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

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

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

属性操作

样式操作

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

痛点

版本

引入

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

JavaScript组成

DOM的定义

链接

广告位招租

分类

标签云

最新文章

归档

最新文章

归档

标签

Your browser is out-of-date!