<L3> DOM对象和jquery

129 阅读2分钟

仅供本人学习用,侵删

今天是 js中的DOM,jquery入门。jquery东西好多,有点烦

DOM模型

DOM全称是Document Object Model 文档对象模型

Document 对象:

  1. Document 它管理了所有的 HTML 文档内容。
  2. document 它是一种树结构的文档。有层级关系。
  3. 它让我们把所有的标签 都 对象化
  4. 我们可以通过 document 访问所有的标签对象。

这个感觉很有用。

查询对象

document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值

document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值

document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名

document.createElement( tagName) 方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

注意以上的方法一定要在页面加载完成后才能查询到标签对象

常用的属性

childNodes 获取当前节点的所有子节点 firstChild 获取当前节点的第一个子节点 lastChild 获取当前节点的最后一个子节点 parentNode 获取当前节点的父节点 nextSibling 获取当前节点的下一个节点 previousSibling 获取当前节点的上一个节点 className 用于获取或设置标签的 class 属性值

innerHTML 表示获取/设置起始标签和结束标签中的内容 innerText 表示获取/设置起始标签和结束标签中的文本

无参数表示获取,有参数表示设置

Jquery

jquery的核心函数$

jQuery的核心函数,能完成jQuery的很多功能。 是 jQuery 的核心函数,能完成 jQuery 的很多功能。()就是调用$这个函数

1、传入参数为 [ 函数 ] 时: 表示页面加载完成之后。相当于 window.onload = function(){} 2、传入参数为 [ HTML 字符串 ] 时: 创建这个 html 标签对象 3、传入参数为 [ 选择器字符串 ] 时: (“#id 属性值”); id 选择器,根据 id 查询标签对象 (“标签名”); 标签名选择器,根据指定的标签名查询标签对象 $(“.class 属性值”); 类型选择器,可以根据 class 属性查询标签对象 4、传入参数为 [ DOM 对象 ] 时: 把这个 dom 对象转换为 jQuery 对象

jquery对象

jQuery 对象的本质是

​ dom 对象的数组 + jQuery 提供的一系列功能函数。

与DOM对象互相转换

​ jQuery 对象不能使用 DOM 对象的属性和方法 ​ DOM 对象也不能使用 jQuery的

1、dom 对象转化为 jQuery 对象(重点) 1、先有 DOM 对象 2、$( DOM 对象 ) 就可以转换成为 jQuery 对象 2、jQuery 对象转为 dom 对象(重点) 1、先有 jQuery 对象 2、jQuery 对象[下标]取出相应的 DOM 对象

jquery 选择器与元素筛选

这里知识非常多,用的时候查文档最好。