dom

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 ) ： 表示与发生事件相关的目标对象。

DOM解读 DOM概念 - document object model：文档对象模型 操作文档的一套方法，document是一个对象，是dom的顶级对象，属于window的一个对象，并且可以说是最出色的一个儿子。 DOM元素的获取： document.getElementById("id名字") //根据ID名字来获取标签； document.getElementByTagName("标签名") //根据标签名来获取； document.getElementByClassName("类名") //根据类名来获取； document.getElementByName("name的属性值") //根据name属性来获取； document.querySelector(css选择器) //根据CSS选择器来获取； document.querySelectorAll(css选择器) //根据CSS选择器来获取所有满足条件的元素； //3、5、6在IE中不兼容 DOM元素的操作： 内容操作： 元素.innerText //文本内容操作； 元素.innerHTML //带标签的内容操作； 元素.value //表单元素的内容操作（input类型） 元素.outText //包含自身的标签； 元素.outHTML //包含自身的标签； 属性操作： 元素.getAttribute("属性名") /

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 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $

　　文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。这里我们主要是讲用javascript操作DOM。 1. 查找元素 1.1 直接查找 document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合 1.2 间接查找 parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild //

本文由云+社区发表 作者：嘿嘿嘿 可能大家都知道，js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗？接下来，我就来对css加载对DOM树的解析和渲染的影响做一个测试。 为了完成本次测试，先来科普一下，如何利用chrome来设置下载速度 \1. 打开chrome控制台(按下F12),可以看到下图，重点在我画红圈的地方 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 \2. 点击我画红圈的地方(No throttling),会看到下图,我们选择GPRS这个选项 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 \3. 这样，我们对资源的下载速度上限就会被限制成20kb/s，好，那接下来就进入我们的正题 css加载会阻塞DOM树的解析渲染吗？ 用代码说话： <!DOCTYPE html> <html lang="en"> <head> <title>css阻塞</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> h1 { color: red !important } </style> <script> function

<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