dom对象 | 易学教程

Javascript学习笔记2.1 Javascript与DOM简介

阅读更多关于 Javascript学习笔记2.1 Javascript与DOM简介

DOM（文档对象模型）简介 DOM（文档对象模型）针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构，它是中立于平台和语言的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。 Javascript通常都是用来进行DOM操作和交互的。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。以下讨论的是HTML DOM。每一个网页元素（一个HTML标签）被看做一个对象。文档对象模型通常被理解成一棵树的形状。树根是document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容，所以如果你下载一个JavaScript语言的参考帮助文档来查的话

优化网站设计（十九）：减少DOM元素的数量

阅读更多关于优化网站设计（十九）：减少DOM元素的数量

前言网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考 Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules.html ，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/ 我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。准备工作为了跟随我进行后续的学习，你需要准备如下的开发环境和工具 Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。 https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh https://addons.mozilla

【前端】jquery基础学习

阅读更多关于【前端】jquery基础学习

jQuery引入下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。 jquery对象和dom对象 jquery找到的标签对象称为 -- jquery对象原生js找到的标签对象称为 -- dom对象 dom对象只能使用dom对象的方法,不能使用jquery对象的方法 jquery对象也是,它不能使用dom对象的方法 dom对象和jquery对象互相转换: jquery对象转dom对象 -- jquery对象[0] 示例:$('#d1')[0] dom对象转jquery对象 -- $(dom对象) jQuery选择器基本选择器 jQuery('#d1') -- $('#d1') 基本选择器（同css）　　　　　　id选择器： $("#id") #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容　　　　　　标签选择器： $("tagName") $('div') 　　　　　　class选择器： $(".className") 　　　　　　配合使用： $("div.c1") //

vue生命周期

阅读更多关于 vue生命周期

　　今天来说说vue的生命周期，这也是vue最基本要知道的，面试是也会常被提到的一个问题，现在开始吧！ vue生命周期常用的8个阶段：　　 beforeCreate阶段：vue实例的挂载元素el和数据对象data都是undefined，还没有开始初始化。　　 created阶段：vue是咧的数据对象data有了，可以访问里面的数据和方法，未挂载到DOM，el还没有。　　 beforeMount阶段：vue实例的el和data都初始化了，但是挂载之前为虚拟的dom节点。　　 mounted阶段：vue实例挂载到真实DOM上，就可以通过DOM获取DOM节点。　　 beforeUpdate阶段：响应式数据更新时调用，发生在虚拟DOM打补丁之前，适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器　　 updated阶段：虚拟DOM重新渲染和打补丁之后调用，组成新的DOM已经更新，避免在这个钩子函数中操作数据，防止死循环。　　 beforeDestory阶段：实例销毁前调用，实例还可以用，this能获取到实例，常用于销毁定时器，解绑事件。　　 destroyed阶段：实例销毁后调用，调用后所有事件监听器会被移除，多有的子实例都会被销毁 vue生命周期详细解说：　　我们在谈到Vue生命周期的时候，首先需要创建一个实例，也就是在new Vue(

jQuery总结

阅读更多关于 jQuery总结

一、jQuery初步认知 jQuery概述 JQuery概念 javascript概念基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素 JQuery概念基于javascript的，同上，提高了代码的效率 jQuery是什么: 是一个javascript代码仓库，我们称之为javascript框架。是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。它可以帮我们做什么(有什么优势) 轻量级、体积小，使用灵巧(只需引入一个js文件) 强大的选择器出色的DOM操作的封装出色的浏览器兼容性可靠的事件处理机制完善的Ajax 链式操作、隐式迭代方便的选择页面元素(模仿CSS选择器更精确、灵活) 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式) 控制响应事件(动态添加响应事件) 提供基本网页特效(提供已封装的网页特效方法) 快速实现通信(ajax) 易扩展、插件丰富如何引入JQuery包引入本地的JQuery 引入Google在线提供的库文件（稳定可靠高速）使用Google提供的API导入写第一个JQUery案例解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery() <script type=“text

jQuery基本知识

阅读更多关于 jQuery基本知识

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　jQuery知识结构 * jQuery入门? * js函数库(DOM/ajax) * 特点: * HTML元素选取 * HTML元素操作 * CSS操作 * HTML事件处理 * JS动画效果 * 链式调用 * 浏览器兼容 * Ajax封装 * 易扩展插件 * helloworld * 引入库 * 引入库文件到项目中 * 在页面中引入 * 使用库 * 使用jQuery核心函数 : $/jQuery * 使用jQuery核心对象 : 使用调用$()返回的结果 $(function(){ $('#demo').click(function(){ //处理点击响应逻辑 }); }); * 回调函数: * 你定义的 * 你没有调用 * 但它最终执行了(一定时机/条件) * jQuery的2把利器 * jQuery核心函数 : * $/jQuery : jQuery库定义的两个全局函数 * 作为一般函数调用 : $(params) * callback function : 绑定文档加载完成的回调 * 选择器字符串 : 查找所有匹配的dom元素, 并包装为jQuery对象返回 * 标签字符串 : 生成dom元素对象, 并包装为jQuery对象返回 * dom元素对象: 将指定的dom元素包装为jQuery对象返回

DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

阅读更多关于 DOM元素尺寸和位置(clientwidth ,scrollwidth , offsetwidth.......)

[1] slientWidth 和 sclientHeight slientWidth：获取的是可视宽度　　　 slientHeight:获取的是可视高度　　　 <html> 　　<head> 　　　　<style> 　　　　　　.div1{ 　　　　　　　　width:50px; 　　　　　　　　height:50px; 　　　　　　　　overflow:scroll;　　　　//设置滚动条　　　　　　} 　　　　</style> 　　</head> 　　<body> 　　　　<div id="div" class="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> 　　</body> </html> 【1】slientWidth：34px ; slientHeight: 34px 因为client他的宽度和高度都没有包括滚动条，所以会减去滚动条的宽高度；【2】当div内的内容溢出(内容量超过div大小)的时候，client获取的仍然是34px；因为他只是获取到可视内容的高度 //-----------------------------------------------------------------------------------------------------

【原创】jQuery1.8.2源码解析之jQuery.data

阅读更多关于【原创】jQuery1.8.2源码解析之jQuery.data

数据缓存，jQuery现在支持两种： 1. dom元素，数据存储在jQuery.cache中。 2.普通js对象，数据存储在该对象中。以下是源代码： 1 var rbrace = /^(?:\{.*\}|\[.*\])$/, 2 rmultiDash = /([A-Z])/g; 3 4 // 首先是对jQuery对象自身的扩展 5 jQuery.extend({ 6 // 即jQuery.cache，负责存储dom元素的缓存数据 7 cache: {}, 8 9 // removeData时，缓存的数据被清除，返回的当时对应的id，以便再利用 10 deletedIds: [], 11 12 // Please use with caution 13 // 将数据存储到jQuery.cache中时，需要唯一id，用它来维护 14 uuid: 0, 15 16 // Unique for each copy of jQuery on the page 17 // Non-digits removed to match rinlinejQuery 18 // 内部key（随即生成），之后会作为key添加到dom的属性集中，而key对应的value则是该dom对应的缓存对象 19 expando: "jQuery" + ( jQuery.fn.jquery + Math.random(

jQuery对象数据缓存Cache原理及jQuery.data详解

阅读更多关于 jQuery对象数据缓存Cache原理及jQuery.data详解

网上有很多教你怎么使用jQuery.data(..)来实现数据缓存，但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别，所以我用到了，研究下分享给大家。 $("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象，当时我分别在使用它俩的时候真的吓我一跳，区别可大了，真是不用不知道，一用吓一跳。看例子先吧，后再根据源代码分析。 Js代码 <div id= "test2" onclick= "test()">test2</div> <div id= "abc3" onclick= "test()">test3</div> <div id= "test" onclick= "test()">test</div> <p id= "ttt">aaaa</p> <script> $(document).ready( function(){ $( "#test").click( function(){ alert( "JQUERY"); var e=$( "div"); //定义了两jquery对象 var w=$( "div"); /

DOM节点操作

阅读更多关于 DOM节点操作

DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M” 。页面中的元素结构就是通过这种节点模型来互相对应着的，我们只需要通过这些节点关系，可以创建、插入、替换、克隆、删除等等一些列的元素操作。创建节点为了使页面更加智能化，有时我们想动态的在html结构页面添加一个元素标签，那么在插入之前首先要做的动作就是：创建节点。 html代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>DOM节点操作</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> </body> </html> 创建一个节点： var box = $("<div id='box'>节点</div>"); //创建节点将节点插入到<body>元素内部： $("body").append(box); //插入节点插入节点在创建节点的过程中，其实我们已经演示怎么通过.append

订阅 dom对象