JQuery基础知识及DOM树四种方法

最新推荐文章于 2023-02-15 00:23:19 发布
最新推荐文章于 2023-02-15 00:23:19 发布
阅读量279 收藏
点赞数
分类专栏： 笔记 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/opo77_/article/details/108802816
版权

JQuery
用过更加快速，便捷的方法实现常见的JavaScript任务。使用CSS样式选择器来获取元素
document.getElementById(“hot”);可替代为$("#hot")
用一行代码就能实现网页页面的更新，隐藏，显示元素等功能
document.getElementById(“ele”).doSomething();
document.getElementById(“ele”).doOtherthing();
可替代为
$("#ele").doSomething().doOtherthing();

  • 输出hello World
<!DOCTYPE html>
<html lang="en">
<head> 
<meta charset="UTF-8">   
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>   
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
</head>
	<body>  
 		<div></div>   
   		<script>       
   		$(document).ready(function(){ 
  			$('div').html("hello World!")})   
   		 </script>  
  	 </body>
 </html>

  • jQuery公式$(selector).action()
    selector代表选择符，.action（）代表我们即将进行的操作
    eg：在这里插入图片描述

  • $(document).ready()函数，
    文档就绪事件，为了防止文档在完全加载之前运行jQuery代码**
    在这里插入图片描述
    Document Object Model简称DOM 文档对象模型
    DOM规定了我们的浏览器该怎样创建HTML页面的模型，以及JavaScript怎样访问和修改页面中的内容。
    在这里插入图片描述
    document：文档节点
    其他：元素节点
    id名，class名：属性节点
    标签之内的内容：文本节点

遍历相关元素节点
.parent()当前选取元素的直接父节点
.children()当前选取元素的所有子节点
.siblings()当前选取结果的所有兄弟节点
.next()返回的是当前元素的下一个兄弟节点
.prev()返回的是当前元素的上一个兄弟节点

选中一个元素后返回的jQuery对象叫做匹配结果集

opo77_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解DOM树
guoping16的专栏
07-07 2604
理解DOM树能更好的理解libxml函数操作原理。只要理解的，才是深刻的，能做到知其然而知其所以然，使用函数时心里有底而且不易出错。为了大家更好理解DOM树在内存中的构造，我特地写了一个典型XML文件(dom.xml)，并且画出其DOM树内存构造图。其后提供了一个不用XML库，查
jQuery基础知识(一)
weixin_43711397的博客
09-25 231
文章目录jQuery介绍1.官网2.什么是jQuery？3.jQuery中文API4.快速入门5.用途 jQuery介绍 1.官网 官网：https://jquery.com 2.什么是jQuery？ jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML documen...
深入理解 WKWebView (渲染篇) —— DOM 树的构建
lihui49的博客
03-22 7000
当客户端 App 主进程创建 WKWebView 对象时，会创建另外两个子进程:渲染进程与网络进程。主进程 WKWebView 发起请求时，先将请求转发给渲染进程，渲染进程再转发给网络进程，网络进程请求服务器。如果请求的是一个网页，网络进程会将服务器的响应数据 HTML 文件字符流吐给渲染进程。渲染进程拿到 HTML 文件字符流，首先要进行解析，将 HTML 文件字符流转换成 DOM 树，然后在 DOM 树的基础上，进行渲染操作，也就是布局、绘制。最后渲染进程通知主进程
DOM树的构建
smell201611010513的博客
02-15 707
DOM
Dom树 CSS树 渲染树(render树) 规则、原理
热门推荐
weixin_45820444的博客
10-11 1万+
  前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？ 首先你要了解浏览器渲染的顺序：   1.构建dom 树   2.构建css 树   3.构建渲染树   4.节点布局   5.页面渲染 什么是dom 树？   浏览器将HTML解析成树形的数据结构，简称DOM。   DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树
浏览器是如何工作的系列：解析和DOM树的构建
Benjamin——前端攻城师
06-23 4377
三、解析和DOM树的构建 1、解析： 由于解析渲染引擎是一个非常重要的过程，我们将会一步步的深入，现在让我们来介绍解析。 解析一个文档，意味着把它转换为一个有意义的结构——代码可以了解和使用的东西，解析 的结果通常是一个树的节点集合，用来表示文档结构，它被称为解析树或者语法树。 例子： 解析表达式“2+3-1”，返回树如下图3.1   1)、语法： 解
jQuery基础知识
ying_0608的博客
10-29 158
JQuery基础知识总结 一、什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] jQuery库包含以下功能：     1.HTML 元素选取     2.HTML 元素操作     3.CSS 操作     4.HTML 事件函数     5.JavaScript 特效和动画     6.HTML DOM 遍历和修改 1、jQuery 简单应用 1.1 原生js设置背景 window.onload = function (
jQuery基础知识点总结(DOM操作)
10-22
下面小编就为大家带来一篇jQuery基础知识点总结(DOM操作)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【JavaScript】JQuery基础知识及应用
最新发布
08-10
一、jQuery基础 1. 引入jQuery库：在HTML文档中，可以通过`<script>`标签引入jQuery库，通常从CDN（内容分发网络）获取，例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ```...
jQuery基础知识点总结(必看)
10-22
在本文中，我们将深入探讨 jQuery 的基础知识点，帮助开发者更好地理解和运用这一强大的工具。 1. **jQuery 入口函数与 JavaScript 入口函数的区别** - **书写个数不同**：JavaScript 的入口函数通常是 `window....
boom.js:用于构建DOM树的简单模块
05-06
繁荣是荷兰人的树。 boom.js是一个用于构建DOM树的简单库。 只需放置一个boom （树），将其传递给容器选择器和一些takken （分支），它将呈现您在容器中指定的DOM树。 这使您可以以编程方式呈现DOM树。 压缩后只有〜1kb，不需要jQuery或其他依赖项。 用法 通过npm安装： npm install boom.js 导入应用 //ES5 var boom = require ( 'boom.js' ) . boom var tak = require ( 'boom.js' ) . tak //ES6 :) import { boom , tak } from 'boom.js' 或仅包含boom.js / boom.min.js，即可在全球范围内使用boom和tak < script src =" node_modules/dist/boom.min.js "
jQuery基础知识小结
10-25
本文主要通过jQuery基础知识、选择要操作的元素及处理DOM元素3个方面给我们做了下小结，非常的详尽，推荐给有需要的小伙伴。
JS--程序员必画的DOM树
苛性钠的博客
08-24 1996
DOM是什么？ DOM 是 W3C（万维网联盟）的标准。 DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。” W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 XML DOM - 针对 XML 文档的标准模型 HTML DOM - 针对 HTML 文档的标准模型 什么是 HTML DOM？ HTML DOM 是： HTML 的标准对象模
如何构建DOM树？
龘
04-09 1017
如何构建DOM树 1、浏览器获取到HTML文件，对文件进行解析，形成DOM树 2、通过<!DOCTYPE>告知浏览器当前的html是个什么版本的页面， 3、在头部标签中的标签会有一个编码格式，和视口大小，是否能够缩放， 4、向下继续解析就会有一个标签，line一般引入的是css样式，然后进入这个链接进行一个解析，生成styleRules,在解析过程中，并不影响DOM的渲染 5、DOM继续向下进行渲染，当遇到 ...
jquery操作dom树
UserGuan的博客
05-16 292
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> </head> <body> <style> .o.
前端提高篇(八十九)：jQuery的DOM的遍历操作（二
qd520_1314的博客
04-25 596
4 5 span2 画一下body侧的dom树，head侧的就没有画了 [](()1.1 parent()：寻找直接父元素 //寻找span的直接父元素，并打印 console.log( $(‘span’).parent() ); 效果：搜索到div.demo，和第5个li 还可以进一步筛选，给parent传入css选择器，直接父元素还要满足这个选择器才能被选中 console.log( $(‘span’).parent(‘li’) );//寻找span的直接父元素，且直接父元素是li 效果：之..
巧妙运用小工具来使用jQuery生成树状结构
欢迎光临寒舍，真诚希望能够帮到您……
11-30 742
本文主要通过使用jquery_treeview工具来介绍web前端树状结构的生成 先展示下最终生成的样式 下面就具体介绍下工具的使用过程： 1. 首先下载工具（网上有很多这样的工具，这里介绍jquery_treeview，我的博客会附上工具文件）。 2. 建立自己想实现的html 文件（为了方便测试，建议把html文件建在工具文件的根目录下）。 3. 编辑html文件，首先必须导入j
Html遍历dom树,jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
weixin_29332623的博客
06-25 175
在这个sprint中，因为要写前端UI，所以用到了jQuery，但是jQuery在向上遍历DOM树的API中，有parents()、 parent()、closest()这几个，一直不太清楚它们具体的区别，所以狠下心好好读了一下jQuery的API文档，并把区别记在这里，以供参考。1.parents([selector])本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节...
DOM树结构
sunshine_0880的博客
11-12 6031
DOM树结构 1.所谓的DOM操作，操作是什么？ 操作的是DOM树，进行增删改查。 （jq操作选择器获得节点） 2. 一般DOM树结构 父节点 兄弟节点 当前节点 属性节点 子节点 兄弟节点 3.绘制DOM树：childNodes,attributes（属性节点） *从一个中心元素，访问所有的直系亲属元素 *访问父元素：parentNode *访问上一个兄弟元素：p
学习jQuery这一篇就够了
02-17
通过学习jQuery的基础知识，以及了解其基础选择器、层次选择器和过滤选择器的使用，还有解决与其他库冲突的方法，能够让开发者更加熟练地使用jQuery进行页面开发和交互。因此，建议初学者花时间系统地学习jQuery，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值