【JS】328- 8个你不知道的DOM功能

最近一直在关注工具,从 React 和 npm-install-everything 中休息一下,看看一些原生的 DOM 和 Web API 的功能,他们可以在没有任何依赖库的浏览器中直接运行. 这篇文章将介绍八个鲜为人知的 DOM 功能,浏览器已经支持了这些功能.为了帮助解释每个功能的工作原理,我将为您用代码来演示这些功能. 这些方法没有陡峭的学习曲线,并且可以为你的项目所用. 你肯定习惯于使用 addEventListener() 将事件添加到Web中的元素,一般情况下, addEventL…

利用原生JS实现类似浏览器查找高亮功能(转载）

利用原生JS实现类似浏览器查找高亮功能在完成 Navify 时,增加一个类似浏览器ctrl+f查找并该高亮的功能,在此进行一点总结: 需求在.content中有许多.box,需要在.box中找出搜索的字符串,再将无搜索结果的.box隐藏掉,此外还要将字符串高亮.这个页面用vue.js实现了数据交互,不想用jquery来实现得查找高亮功能,得用原生js来实现该功能. 原理将各个.box的文本内容提取,利用正则判断是否匹配字符串,若无搜索字符串,则隐藏该.box:否则继续找到具体的与该字符串匹…

jquery.cookie.js 操作cookie实现记住密码功能的实现代码

jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.c…

Lining.js - 为CSS提供 ::nth-Line 选择器功能

在CSS中,我们使用 ::first-line 选择器来给元素第一行内容应用样式.但目前还没有像 ::nth-line.::nth-last-line 甚至 ::last-line 这样的选择器.实际上这期选择器在某些情况下是非常有用的,Lining.js 提供了这样的功能. 在线演示插件下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发…

js仿手机端九宫格登录功能

js仿手机端九宫格登录功能最近闲来无事把以前无聊时开发的小东西拿出来和大家分享下,写的不好的请指出,我会及时修改.谢谢. 功能及方法逻辑都注释在代码中.所以麻烦大家直接看代码. 效果如下: 话不多说直接上代码: js部分: <script> $(function () { var urlinfo = window.location.href; var UserName = urlinfo.split("_")[1]; //查看用户是否设置手势密码,如果设置调用add,…

js/jQuery实现类似百度搜索功能

一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>js/jQuery实现类似百度搜索功能</title> <meta name="Author" content=&quo…

vue+node.js+webpack开发微信公众号功能填坑——v -for循环

页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入修改部门代码 app.vue <yd-flexbox> <yd-flexbox-item>能耗排行</yd-flexbox-item> <yd-flexbox-item>房间号</yd-flexbox-item> <yd-flexbox-item>能耗程度</yd-flexbox-item&g…

js实现类型jq的dom加载完成

有时候我们只想在 dom 加载完成后运行 js ,而不是等所有图片加载完成.所以不需要 onload , onload 会加载图片等其他媒体.很消耗时间. 原:http://blog.csdn.net/shoushou71/article/details/52252340 前沿处理页面文档加载的时候,我们遇到一个难题,就是使用window.onload这种将所有内容加载后(包括DOM文档结构,外部脚本.样式,图片音乐等)这样会导致在长时间加载页面的情况下,js程序是不可用的状态.而JS其实只需…

原生JS操作iframe里的dom

转:http://www.css88.com/archives/2343 一.父级窗口操作iframe里的dom JS操作iframe里的dom可是使用contentWindow属性,contentWindow属性是指指定的frame或者iframe所在的window对象,在IE中iframe或者frame的contentWindow属性可以省略,但在Firefox中如果要对iframe对象进行编辑则,必须指定contentWindow属性,contentWindow属性支持所有主流浏览器. 相…

JS实现下拉菜单的功能

<!DOCTYPE html> <html> <head> <meta charset = "utf8"> <title>JS实现下拉菜单的功能</title> <style> .mynav>ul{ list-style-type:none; padding:0; } .mynav>ul>li{ float:left; margin:10px 20px ; color:white; }…

JS实现联想自动补齐功能

<!DOCTYPE HTML> <html> <head> <meta charset = "utf-8"> <title>JS实现联想自动补齐功能</title> <style> * { box-sizing: border-box; } #container{ position:relative; top:50px; left:30%; /*为了好看一点定个位*/ } form{ padding:6…

js、jquery实现列表模糊搜索功能

实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 2. 可以点击某一项进行选中列表项 3. 可以按下上.下.回车键来控制列表项 4. 按下回车键时则会选中列表项 5. 点击文本框中的下拉键头时会切换下拉框的显示/隐藏 6. 点击文本框外部时自动隐藏下拉框先来预览一下效果吧! 列表中包含的列表项有: 北京.上海.杭州.安庆.大兴安岭.安阳.广州.贵阳.哈尔滨.合肥.邯郸.呼伦贝尔.淮南.黄山.济南.济宁.嘉兴.南昌.南通.南宁.南京在预览时…

JS事件编程练习-自制计算器使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

编程练习使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElementById("id").value = 1: 取值:var = document.getElementById("id").value: 任务第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getEl…

Vuet.js规则详解，它是你不知道的强大功能？

Vuet.js是什么? Vuet.js是给Vue.js提供状态管理的一个工具,与vuex不同,它是一种崇尚规则定制的状态管理模式.事先将状态更新的规则写好,然后将规则注入到组件中,然后状态按照预订的规则来进行更新.github:Vuet.js 主动型和被动型规则 Vuet.js内置了life.manual.need.once.route这几种常见的规则,除了manual规则外,其他都是属于主动型更新规则,在达到一定的条件上会自动触发状态更新. life 描述: 每次都会在组件的beforeCre…

廖雪峰js教程笔记13 插入DOM

当我们获得了某个DOM节点,想在这个DOM节点内插入新的DOM,应该如何做? 如果这个DOM节点是空的,例如,<div></div>,那么,直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容,相当于"插入"了新的DOM节点. 如果这个DOM节点不是空的,那就不能这么做,因为innerHTML会直接替换掉原来的所有子节点. 有两个办法可以插入新的节点.一个是使用appendChild,把一个子…

DOJO DOM 功能

In this tutorial, you'll learn about how to use Dojo to manipulate the DOM in a simple, cross-browser way. Using basic DOM knowledge and only a few Dojo functions, you will be able to efficiently create, read, update and delete elements in the page o…

使用Hammer.js的H5页面开发DOM的一些小说法

前几天,一个小伙伴说叫我帮他写一个移动端上的一个轮播图,个人一般是不接私活的,毕竟平时工作也是单双休,时间也不很多. 可能大部分程序员,多余的时间都是看看新闻,打游戏,或者学习新的知识,缺少运动吧. 所以,个人感觉接私活那点时间,你可以去锻炼身体,或者学习新的知识,当然这些都是看法,完全不代表你跟我有一样的看法,好吧,不过既然是朋友,以前也是同学,而且不就是一个轮播图吗,自己也写过一些移动端里,轮播图是移动端上最常见的一个广告展示功能. 但是,当小伙伴把大致的需求高速了我以后,完全跟轮播图没有,…

【JS】 Javascript与HTML DOM的互动寻路

JS HTML DOM DOM的全程是Document Object Module,即文档对象模型.一般来说,当一个页面被加载时,浏览器会在内部创建一个当前文档的DOM.就像用python的Etree之类的模块解析xml文件时建立的对象一样,浏览器建立的DOM对象抽象了整个html文件,并且形成了一颗html元素的树. 而JS,就被赋予了和这种DOM互动的能力.也就是说,JS可以通过增删改查DOM来实现动态灵活地改变html内容.比如JS可以做到:更改html元素,更改html元素的属性,更改c…

js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子操作DOM 文本对象 js三种引入方式 (1)行间式:书写在代码块写在全局事件属性中 <div id="box" onclick="this.style.backgroundColor = 'red'; "></div> (2)内联式:书写在body最下方 <div id="temp…

Hammer.js——给bootstrap添加触屏功能

Hammer.js qq群号(html5技术交流):158677025 手机端演示二维码(或直接在手机中输入网址:http://lilinfeng.cncoder.me 浏览效果): 一.前言移动端框架当前还处在初级阶段,但相对于移动端的应用来说已经有很长时间了.虽然暂时还没有PC端开发的需求量大,但移动端的Web必然是一种趋势,在接触移动端脚本的过程中,最开始想到的是juqery.Jquery2.0版本及以上已经开始偏向移动端,如对h5的支持,但支持还是不够完善,希望jq在后面的版本能够…

angular.js ng-repeat动态插入删除dom节点

既然上面提到 angular.js 下无需用户直接操作dom ,而是在编译间断 dom 与控制层model 实现了双向绑定,一方做出改变,另一方就会立即改变,那问题来了,我想插入一个文本框和按钮,并且文本框里数据要和控制层一个属性绑定,按钮要实现 ng-click 事件,如何做? 传统实现方法,在父节点里直接新增一段 dom ,html标签的事件也会被自动注册. angular.js实现方法: 将节点添加到父节点后,我们需要重新编译, 将数组对象 (包含 ng-click 等 angular.…

js学习之BOM和DOM

1. 浏览器的原理 1.1 浏览器的多线程 (1) 解析js引擎线程 (2) UI渲染线程 (3) 事件发起线程 (4) 发起请求的线程 (5) 定时器的线程 1.2 同步异步 (1) 前面事情的干完才能干后面的事情,例如吃完饭才能喝水. (2) 前面的事情可以不干完,就干后面的事情,然后后面的事情干一半,可以回到前面的事情接着干,例如吃一口饭,喝一口水,然后再吃饭,再喝水. 1.3 浏览器执行JS的过程第一阶段载入阶段默认:同步 (1) 获取html的内容进行解析 (2)…

读书笔记 - js高级程序设计 - 第十章 DOM

文档元素是文档的最外层元素,在Html页面中,文档元素始终都是<html>元素在xml中,任何元素都可以是文档元素 Node类型 Node.ELEMENT_NODE 元素 Node.ATTRIBUTE_NODE 属性 Node.TEXT_NODE 文本元素 Node.CDATA_SECTION_NODE Node.ENTITY_REFERENCE_NODE Node.ENTITY_NODE Node.PROCESSING_INSTRUCTION_NODE; Node.COMMENT_…

ztree : 增删改功能demo与自定义DOM功能demo的结合

最近有个项目要用ztree,需要用ztree自带的功能(增删改),也需要自定义DOM的功能(置顶). ztree的demo里有增删改的demo,也有自定义DOM的demo,但没有两者结合的. 所以我把demo改了一下,两个功能合在了一起. 上代码. <!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO - edit</TITLE> <meta http-equiv="content-ty…

《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上…

廖雪峰js教程笔记12 用DOM更新 innerHMTL 和修改css样式

拿到一个DOM节点后,我们可以对它进行更新. 可以直接修改节点的文本,方法有两种: 一种是修改innerHTML属性,这个方式非常强大,不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树: // 获取<p id="p-id">...</p> var p = document.getElementById('p-id'); // 设置文本为abc: p.innerHTML = 'ABC'; // <p id="…

JS 学习（三）DOM

HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. HTML DOM树: JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应查找HTML元素通过 id 找到 HTML 元素,是最简单的方式 <p…

react.js 之批量添加与删除功能

最近做的CMS需要用到批量添加图片的功能:在添加文件的容器盒子内,有两个内容,分别是:添加按钮与被添加的选择文件组件. 结构分析: 被添加的组件,我们称为:UploadQiNiuFiles(七牛文件上传组件),含一个删除当前组件的删除按钮添加按钮的事件被添加组件存放的容器做这个效果只需要明白三个方法的用途就OK: 直接绑定要删除组件的 deleteType(),它是调用删除index数量的方法 removeContent() //删除{qiniu}与{deleteQiNiu}内容,是把…

廖雪峰js教程笔记11 操作DOM(包含作业)

由于HTML文档被浏览器解析后就是一棵DOM树,要改变HTML的结构,就需要通过JavaScript来操作DOM. 始终记住DOM是一个树形结构.操作一个DOM节点实际上就是这么几个操作: 更新:更新该DOM节点的内容,相当于更新了该DOM节点表示的HTML的内容: 遍历:遍历该DOM节点下的子节点,以便进行进一步操作: 添加:在该DOM节点下新增一个子节点,相当于动态增加了一个HTML节点: 删除:将该节点从HTML中删除,相当于删掉了该DOM节点的内容以及它包含的所有子节点. 在操作一个DO…

Nodejs学习笔记（八）--- Node.js + Express 实现上传文件功能（felixge/node-formidable）

目录前言 formidable简介创建项目并安装formidable 实现上传功能运行结果部分疑惑解析写在之后前言前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码这里选择了formidable,也是githu…

【【JS】328- 8个你不知道的DOM功能】的更多相关文章