YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Archive by category "JavaScript"

AutocJS – 为你的文章自动创建目录导航菜单

创作的灵感 AnchorJS 是 AutocJS 的创作灵感。既然 AnchorJS 可创建标题的链接,为什么不直接给文章生成一个目录(Table of Contents)导航呢?于是就有了AutocJS. What is AutocJS? AutocJS 是一个专门用来给文章生成目录(Table of Contents)导航菜单的工具。AutocJS 会查找文章指定区域中的所有h1~h6的标签,并自动生成文章的目录导航菜单。 Why AutocJS? AnchorJS 由于是国外的程序员开发的,所以对中文支持不好,无法给中文标题生成锚点。AutocJS 就是一个即支持英文也支持中文的解决方案。 AutocJS 的特点 全面支持中文… [阅读全文]

jQuery API 教程 – add() 方法详解

jQuery API 教程 – add() 方法详解

jQuery 官方的 API 文档 Description: Add elements to the set of matched elements. 描述:向匹配的元素集合中添加元素 version added: 1.0.add( selector ) selector Type: Selector 参数类型: 选择器 A string representing a selector expression to find additional elements to add to the set of matched elements. Selector为一个选择器字符串,将这个选择器匹配的元素添加到匹配的元素集合。 versio… [阅读全文]

Event Delegation in JavaScript

Event Delegation in JavaScript

Event Delegation 是我很久前就想写的一个话题。Event Delegation 是一个非常高效的事件处理模式,相信做过一段时间前端开发的朋友也都对 Event Delegation 有所耳闻。 什么是 Event Delegation? 直接翻译 Event Delegation 可以翻译为事件代理(委托),那到底什么是 Event Delegation 呢? 我的理解, Event Delegation 应该是利用 JavaScript 中的 Event bubbling (事件冒泡) 机制,通过给单个 DOM (父)节点绑定事件,从而可以管理这个节点下所有子节点的事件处理(Deligage(代理活委托)就是指的所… [阅读全文]

JavaScript 利用 Math.random() 方法生成指定范围数值的随机数

JavaScript 利用 Math.random() 方法生成指定范围数值的随机数

今天有又网友问到我 JavaScript 怎么生成指定范围数值随机数。Math.random() 这个方法相信大家都知道,是用来生成随机数的。不过一般的参考手册时却没有说明如何用这个方法来生成指定范围内的随机数。这次我就来详细的介绍一下Math.random(),以及如何用它来生成制定范围内的随机数。 w3school的random()教程 定义和用法 random() 方法可返回介于 0 ~ 1 之间的一个随机数。 语法 Math.random() 返回值 0.0 ~ 1.0 之间的一个伪随机数。 实例 在本例中,我们将取得介于 0 到 1 之间的一个随机数: <script type=”text/javascript”&g… [阅读全文]

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

JavaScript动态创建的Link标签插入到 head 的最前面会怎么样?

由于本人还是蓝色理想论坛前端的实习版主,所以也把文章《如何用JavaScript动态创建link标签到head里》发到了论坛里(由于我的一个乌龙,1年前测试的时候,发现过IE6直接插入head有问题)有个叫sicoolqs朋友认为我的处理方式(当时还做了浏览器的探测)过于的复杂了,给出了更加简洁的处理方案: var head = document.getElementsByTagName(“head”)[0]; var link = document.createElement(“link”); link.setAttribute(“href”,”xxx.css”); link.setAttribute(“rel”,”stylesh… [阅读全文]

为什么要用JavaScript 动态创建样式表link标签?

为什么要用JavaScript 动态创建样式表link标签?

我前面的文章《如何用JavaScript动态创建link标签到head里》只是一笔带过,发现论坛里有朋友问到了这个问题,我这里就花些篇幅来解释一下。为什么要用JavaScript 动态创建样式表标签?为什么不直接用JavaScript来修改样式? 简单的说,这么做有3个目的: 为了提高页面的加载速度。只在需要的时候才加载相应的样式,减少页面初次加载时(CSS样式)的数据量,从而提交页面的加载数度。 为了提高代码的可维护性和稳定性。将CSS代码和JavaScript代码分离,是我们前端开发一直推荐的编码规范之一。将CSS和JavaScript写在一起,代码的可维护性和稳定性都会受到影响。 为了提高JavaScript代码的性能。通过给… [阅读全文]

JavaScript 如何判断 CSS 文件加载完毕

JavaScript 如何判断 CSS 文件加载完毕

之前我写过《如何用JavaScript动态创建link标签到head里》,今天接着这个话题说下去,说说 JavaScript 如何判断 CSS 文件记载完毕。呵呵,今天的话题应该算是上个话题的姊妹篇。我们动态创建的CSS文件,如何知道添加的CSS文件加载完毕了呢? 要判断这个 CSS 文件是否加载完毕,各个浏览器的做法差异比较大,这次要说IE浏览器做的不错,我们可以直接通过onload方法来处理CSS加载完成以后的处理: // 代码节选至seajs function styleOnload(node, callback) { // for IE6-9 and Opera if (node.attachEvent) { node.at… [阅读全文]

如何用JavaScript动态创建link标签到head里

如何用JavaScript动态创建link标签到head里

我想应该有不少做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这次我就说说如何在浏览器中动态创建link标签。 演示地址:http://www.yaohaixiao.com/scripts/js-create-link-tag.html 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: var cssURL = ‘http://www.yaohaixiao.com/wp-content/themes/BlueNight/style.css’, linkTag = $(‘<link href=”‘ + cssURL +… [阅读全文]

将文本中URL地址替换为可以点击的链接的处理办法

很久没有写文章了,这几天在写一个小程序的时候,需要用到正则表达式匹配用户输入文本中的URL地址,然后将URL地址替换成可以点击的链接。URL地址的匹配,我想这应该是大家在做验证处理中常会用到的,这里就把我整合的一个比较完整的表达式给出来: var URL = /(https?:\/\/|ftps?:\/\/)?((\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(:[0-9]+)?|(localhost)(:[0-9]+)?|([\w]+\.)(\S+)(\w{2,4})(:[0-9]+)?)(\/?([\w#!:.?+=&%@!\-\/]+))?/ig; 这个表达式可以匹配 http,https,f… [阅读全文]

jQuery 1.9.1 的改变,没有了 $.browser 转而使用 $.support

jQuery 1.9.1 的改变,没有了 $.browser 转而使用 $.support

这两天看到 jQuery 升级到了 1.9.1 于是把自己网站的 jQuery 也升级了。但是发现以前的 $.browser 属性没有了。原来新的 jQuery 1.9.1 不再支持这个方法了。转而推荐使用 $.support。引用 jQuery 官方网站的说法: Rather than using $.browser to detect the current user agent and alter the page presentation based on which browser is running, it is a good practice to use feature detection. To make thi… [阅读全文]