dom对象

jquery核心 转自 http://www.iteye.com/topic/783260 (function( window, undefined ) { // 构造jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // 工具函数 Utilities // 异步队列 Deferred // 浏览器测试 Support // 数据缓存 Data // 队列 queue // 属性操作 Attribute // 事件处理 Event // 选择器 Sizzle // DOM遍历 // DOM操作 // CSS操作 // 异步请求 Ajax // 动画 FX // 坐标和大小 window.jQuery = window.$ = jQuery; })(window); 一 构造jquery. 相对于其它库里传统的构造对象方法. jquery提供了一种截然不同的方法. 它选择创造一个全新的奇异世界. 首先所有的jquery代码被一个自动执行的闭包包裹起来, 只在后面暴露$和jQuery这2个变量给外界 尽量避开变量冲突. Java代码 (function(window, undefined){ ….. })

1. window.onload与$(document).ready()的对比 2. jquery对象和Dom对象的区分： 　　　　·jquery对象：通过jquery包装DoM对象后产生的对象。 　　　　·DOM对象：可以通过javascript中的getElementByTagName或者getElementById来获取元素节点。 　　　　·Jquery对象有自己特有的方法，它不能调用DOM对象中的方法，同样，DOM对象也不能使用jquery对象的方法。 3.jquery对象和DOM对象的相互转化： 　　　　 ·jquery对象转成DOM对象： 　　　　　　第一种方法：通过[index]的方法得到相应的DOM对象。　　例如：var $cr=$("#cr"); var ct=$cr[0]; 　　　　　　第二种方法：通过get(index)方法得到相应的DOM对象。　　例如：var $cr=$("#cr"); var $cr=$cr.get(0); 　　　　 ·DOM对象转成Jquery对象 　　　　只需要用$()把DOM对象包装起来，就可以获得一个jquery对象，方式$(DOM对象) 　　　　 例如： 　　　　　　var cr=document.getElementById("cr"); //DOM对象 　　　　　　var $cr=$(cr);　　//jquery对象 4.

一、jQuery的优势 1.轻量级：压缩之后大小只有30KB左右。 2.强大的选择器：jQuery允许CSS1到CSS3几乎所有的选择器以及自身独创的选择器。 3.出色的DOM操作的封装：jQuery封装了大量常用的DOM操作，是开发者在编写DOM操作相关程序的时候能够得心应手。 4.可靠的事件处理机制：jQuery事件处理机制在处理事件绑定的时候相当可靠。 5.完善的Ajax：jQuery将所有的Ajax操作封装在一个函数$.ajax()里面，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 6.不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝不污染其他对象。 7.出色的浏览器兼容性：jQuery修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。 8.链式操作方式：jQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个jQuery对象上的一组动作，可以直接连写而无需重复获取对象。 9.隐式迭代：当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。 10.行为层与结构层分离：开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。

在学习jQuery的时候，有时候总是把DOM对象和jQuery对象弄混，用DOM对象去调用jQuery对象的方法，用jQuery对象的方法去调用DOM对象的方法， 这是不可以的。 其实这两种东西可以进行相互的转换，在使用的时候可以搭配使用。转换的过程十分的简单。 1、DOM对象转换为jQuery对象 对于一个DOM对象来说，要把它转换成jQuery对象只需要给DOM对象前加上$符号即可。 格式：$(DOM对象) 代码示例： var obj = document.getElementById("text"); var jq_obj = $(obj); 经过这样的转换以后，jq_obj就变成了一个jQuery的对象，就可以使用如html()，text()这样的jQuery的方法了。 2、jQuery对象转换为DOM对象 对于一个jQuery对象来说，要把它转换成DOM对象有两种方法，第一种方法是通过数组下标的方法来得到DOM对象。 格式：jQuery对象[index] 代码示例： var dom_obj = jq_obj[0]; 第二种方法是jQuery对象本身提供的，通过get方法得到相应的DOM对象。 格式：jQuery对象.get[index] 代码示例： var dom_obj = jq_obj.get[0]; 在使用的时候可以任意地相互转换jQuery对象和DOM对象。 来源

jQuery 是 JavaScript 的一个函数库。方便、主流 jQuery的开发步骤： （1） 导入jQuery 库 （2） 在 <script src="../js/jquery-3.1.0.min.js" type="text/javascript"></script> <script> $(function(){ 写jQuery代码； }); </script> （3）jQuery对象 vs DOM对象 1.jQuery对象 和 DOM对象 不可混用，不能使用另一方的属性和方法 2.jQuery对象 是一个 DOM数组对象。所以可以用 下标的方式 转为 DOM对象 var $btn = $("button"); var btn = $btn[0]; 3.jQuery对象 使用 $() 包装 DOM对象后 产生的对象 例：进行遍历的时候（jQuery对象 遍历的方式使用 each，在each 内部的 this 是正在得到的 DOM 对象，而不是一个 jQuery对象。 ） $("select : seclected").each(function(){ //alert(this.value); 如果想用jQuery的属性和方法，用$() 包装起来。 alert( $(this) .value); }); （4）jQuery 选择器（综合使用，威力巨大） 选取被选中的

　　本篇主要介绍HTML中的事件知识：事件相关术语、DOM事件规范、事件对象。 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三) 事件流、事件委托 4. HTML 事件(四) 模拟事件操作 目录 1. 事件相关术语 ：介绍事件相关的术语；如：事件类型、事件名称、事件目标等等。 2. DOM事件规范 ：介绍W3C目前定义的三种DOM事件规范：0、2、3级。 3. 事件类型 ：介绍了HTML目前的事件类型；如：UIEvent、FocusEvent、MouseEvent、WheelEvent、KeyboardEvent、CompositionEvent。 4. Event 事件对象 ：表示事件发生时的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。 1. 事件相关术语 事件可表示为动作。以鼠标为例，移动、点击、悬停都是一种动作，也是事件。 事件类型 ( event type ) ： 表示事件的类型。如： MouseEvent (鼠标事件)、 KeyboardEvent (键盘事件)。 事件名称 ( event name ) ： 表示事件的名称。如：click(单击)、dblclick(双击)。 事件目标 ( event target ) ： 表示与发生事件相关的目标对象。

jQuery是什么 说白了jQuery是一个js库 当然了除了这个库之外，我们还有跟多的库，比如：Prototype、YUI、Dojo、Ext JS、移动端的zepto等 目的就简洁的，快速的开发 学习jQuery本质： 就是学习调用这些函数（方法）。 1.jQuery的优点 轻量级。核心文件才几十kb，不会影响页面加载速度。 跨浏览器兼容，基本兼容了现在主流的浏览器。 链式编程、隐式迭代。 对事件、样式、动画支持，大大简化了DOM操作。 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。 免费、开源。 2.jQuery如何使用呢？ 首选你要去下载 在你的scrpit标签中（末尾）引入这个文件，当然了你也可以在加载的时候在页面头部引入,比如你使用windows.load.....，不过在jquer中有更好的解决方案 最简单的使用 $('div').hide(),//隐藏盒子 特别要说明的一点是：jQuery有一些兼容的小问题，但.....你不用去管它 3.正式的开始使用它 3.1入口函数 这个就是一个人入口函数，相当于 DOMContentLoaded等待dom结构加载完再去执行js代码 // 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $

<html> <head> <title>DOM对象 </title> <link href=" /Content/Site.css " rel=" stylesheet" type=" text/css" /> <script src=" /Scripts/jquery-1.7.1.min.js " type=" text/javascript"> </script> </head> <body> 　　<h3>例子 </h3> 　　<p title=" 选择你喜欢的水果。">你最喜欢的水果是？ </p> 　　<ul> 　　　　<li>苹果 </li> 　　　　<li>橘子 </li> 　　　　<li>菠萝 </li> 　　</ul> </body> </html> 　 来源： https://www.cnblogs.com/kuangxin/p/4240714.html

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <script src="../js/react.development.js"></script> 8 <script src="../js/react-dom.development.js"></script> 9 <script src="../js/babel.min.js"></script> 10 </head> 11 <body> 12 <div id="test1"></div> 13 <div id="test2"></div> 14 </body> 15 </html> 16 <!-- 方式一：纯JS创建虚拟DOM元素对象 --> 17 <script> 18 const msg="I like you."; 19 const myid="box1"; 20 var vh3=React.createElement('h3',{id:'myid'},msg);//创建虚拟DOM 21 ReactDOM.render(vh3

一、vue中的双向数据绑定主要使用到了Object.defineProperty（新版的使用Proxy实现的）对Model层的数据进行getter和setter进行劫持，修改Model层数据的时候，在setter中可以知道对那个属性进行修改了，然后修改View的数据。 二、简易版双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Proxy双向数据绑定大概原理</title> </head> <body> <div id="app"> <input type="text" id="inpt"/> <span id="txt"></span> </div> <script> var inputDom = document.getElementById("inpt"), spanDom = document.getElementById("txt"), data = {} // 更新DOM function