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的定义

链接

我的虚拟出版

Android内部分享

JavaScript 面向对象

Python 最佳实践

HTML+CSS基础

分类

标签云

最新文章

归档

最新文章

归档

标签

Your browser is out-of-date!