大家好，这里是「 Daotin的梦呓 」从零开始学 Web 系列教程。此文首发于「 Daotin的梦呓 」公众号，欢迎大家订阅关注。在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！ 一、兼容代码 1、封装 innerText 和 TextContent // 设置任意标签的文本内容为任意内容 function setText(element, text) { (t
预解析：js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面
HTML5学堂：本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop()，很多开发者在使用时，经常容易混淆，今天HTML5学堂小编-其其就带你一起看看attr和prop方法。 jQuery文档中，attr和prop的参数都是一样的，而这两个东西都被认为是属性，那么他们之间到底有什么区别呢？下面我们一起验证下。 attr与prop的真身 attr全称attribute(属性) prop全称property(属性) 虽然都是属性，但他们所指的属性并不相同，attr所指的
小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组 否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组.
文档对象模型（Document Object Model），简称DOM，是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准接口。
在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！
函数组件中我们一般情况下使用useEffect实现数据的请求 // useEffect Hook 看做 componentDidMount，componentDidUpdate 和 componentWillUnmount (加载，更新，卸载)这三个函数的组合。 语法格式： useEffect(()=>{ },[])
前端领域这几年涌现了很多新兴的前端框架，比如Qwik、Svelte、Astro等。
Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。
自定义属性（有时候也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如：--main-color: black;），由var() 函数来获取值（比如：color: var(--main-color);）
其实Attribute和Property这两个单词，翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”，以示区别。从而我们也可以顾名思义
在上一篇 掉了两根头发后，我悟了！vue3的scoped原来是这样避免样式污染（上） 文章中我们讲了使用scoped后，vue是如何给CSS选择器添加对应的属性选择器[data-v-x]。这篇文章我们来接着讲使用了scoped后，vue是如何给html增加自定义属性data-v-x。注：本文中使用的vue版本为3.4.19，@vitejs/plugin-vue的版本为5.0.4。
然后由于后面的template会生成一个临时的dom,会把前面el关联的整个标签变成template中的内容
components:{App}//注册的组件 名称来自import引入时的名字
本系列文章主要将总结React从15.x升级到v16.x所需要注意的内容，本文则主要总结为什么要升级到v16.x，v16.x的一些新特性，主要内容包括：
本文作者：IMWeb 谦龙 原文出处：IMWeb社区 未经同意，禁止转载 前言 以前我们使用Zepto进行开发的时候，会把一些自定义的数据存到dom节点上，好处是非常直观和便捷，但是也带来
日常开发中所说的 CSS 变量，实际上是 CSS 的变量函数 var() 与 CSS 自定义属性的统称。
无奈的开头 关于DOM节点操作，如果仅仅是根据标准API来操作，那是最简单不过的了。但是现实中却哪有这么容易的问题让我们解决，其实不仅仅是节点的克隆与删除，节点的添加也是如此，而且添加节点需要考虑的情况更多，这里不详细讲解，只说明大概过程。 问题那么多，主要出现在浏览器自身实现上，其中尤属legacy IE上—IE6,7,8. 在添加节点的API实现上，IE做了一个贡献，那就是insertAdjacentHTML函数被纳入HTML5规范上，这个函数在之前的文章中详细讲解并实现
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。
搜索功能举例 jquery回车监听事件在最后那行代码 define('widget/search.js', [], function (require, exports, module) { var _dom = { keyword: $('.js_keyword'), dataRole: $('.js_submit').attr('data-role'), btn: $('.js_submit'), }; function sea
前言 大家好,我是webfansplz.这两天肝了个Vite插件,本文主要跟大家分享一下它的功能和实现思路.如果你觉得它对你有帮助,请给一个star支持作者 💗. 介绍 vite-plugin-vue-inspector的功能是点击页面元素,自动打开本地IDE并跳转到对应的Vue组件.类似于Vue DevTools的 Open component in editor功能. 用法 vite-plugin-vue-inspector支持Vue2 & Vue3,并且只需要进行简单的配置就可以使用. Vue2 //
在传统的CSS中，通常我们需要写重复的属性值，而自定义原则能让我们避免这种情况。做到“一处定义，处处使用”。
JavaScript 和 CSS 已经并存超过了 20 年。但是在它们之间共享数据非常困难。当然也有大量的尝试。但是我所想到的是一些简单而直观的内容——不涉及结构更改，而是使用 CSS 自定义属性甚至 Sass 变量。
作用：表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
所有浏览器的focus/blur事件都不冒泡，万幸的是大部分浏览器支持focusin/focusout事件，不过可恶的firefox连这个都不支持。
自己运营了一个公众号，在发文章的时候，需要在网上找一些图，而有些网站的图片可能隐藏在属性或者背景图中，要下载的时候经常审查元素，查看源码，不太方便，最近在看一些谷歌插件的api，便顺手做了一个插件Im
今天我就教大家用两种方式实现前端一键换肤的功能，都是给予原生 css 和 js 的方法属性，不用安装任何的第三方库
在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候，经常不知道dom元素的attr和prop方法到底有什么区别？各自有什么应用场景，什么时候使用attr方法更合适？什么时候使用prop方法更加方便？今天我就结合自己平常的使用来谈谈这些问题以及我个人的理解。
通过在标签内使用slot属性指定值，组件内使用solt标签通过name接收slot属性值
jQuery 常用属性操作有三种：prop() / attr() / data() ;
Window是浏览器内置的全局对象（也叫顶级对象），我们学习的所有Webapi知识都是基于Window对象实现的。 DOM BOM都是属于window对象
继昨天讲完了jq插件的二种编写方法和区别之后，今天的web前端零基础课中，又回过头来继续把电商网站中的checkBox复选框，进行了进一步的封装与自定义。 //////// 电商网站的购物车的商品选项
一、前言 当需要新元素时我们可以通过 document.createElement 接口来创建一个全新的元素，也可以通过克隆已有元素的方式来获取一个新元素。而在部分浏览器中，通过复制来获取新元素的效率比通过 document.createElement 方式的要高一些，具体的性能比较如下： 2% in IE8, but no change in IE6 and IE7 Up to 5.5% in Firefox 3.5 and Safa
我们在父组件给子组件传值得时候，为了避免不必要的错误，可以给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop可以传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的所有属性。组件可以为 props 指定验证要求。如果未指定验证要求，Vue 会发出警告比如传一个number类型的数据，用defalt设置它的默认值，如果验证失败的话就会发出警告。
单页面应用程序（英文名：Single Page Application）简称SPA，顾名思义，指的是一个web网站中只有唯一的一个HTML页面，所有的功能和交互都是在这唯一的一个页面内完成。
jQuery 常用属性操作有三种：prop() / attr() / data() ;
单页面应用程序 SPA，指的是一个 Web 网站中只有唯一一个 HTML 页面，所有的功能和交互都在这个唯一的页面内完成。
几个星期前，CSS Variables ——CSS 变量草案发布在了W3C官方 ,更准确的应该叫CSS 自定义属性，目前在Chrome Canary 版里面已经支持，开启该功能见附[1] 当Chrome浏览器工程师Addy Osmani第一时间把这消息发布在twitter后，遭到了数万人的否定、敌视和怀疑。于我而言，更多的感到是一个惊喜，因为这个功能实在让人太兴奋了。 快速的扫了一遍之后，发现99%人抱怨的无外乎这两点： 语法太丑和不够简洁 Sass 、Less早就有这些玩意了，不太care 虽然我承认我也
CSS in JS是一种解决css问题想法的集合，而不是一个指定的库。从CSS in JS的字面意思可以看出，它是将css样式写在JavaScript文件中，而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、tree-shaking。还解决了css中的一些问题，譬如：更方便解决基于状态的样式，更容易追溯依赖关系，生成唯一的选择器来锁定作用域。尽管CSS in JS不是一个很新的技术，但国内的普及程度并不高。由于Vue和Angular都有属于他们自己的一套定义样式的方案，React本身也没有管用户怎样定义组件的样式[1]，所以CSS in JS在React社区的热度比较高。
它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。
需求：我们在开发浏览器插件的时候，有一些页面中会变一些变量挂在全局变量中（window.xxx）
Web Components（Web 组件）规范是一个新兴的技术集合，允许您在前端Web应用程序中定义已封装的自定义HTML元素。 使用Web Components，您可以创建自己声明的API来定义UI，从而创建您自己的商业化应用程序。
这里我想到了2个方法： 方法一： 直接给相应的元素加id,然后再document.getElementById("id");获取，然后设置相应属性或样式 方法二： 使用ref,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素 注意：在获取相应元素之前，必须在mount钩子进行挂载，否则获取到的值为空， 如果是给子组件加id并修改自定义属性，则直接会加载改子组件对应的外层div上，并不会改变该子组件原本的自定义属性的值 如果给子组件加ref,然后获取到该D
基本用法大家肯定很熟悉，需要注意的地方是，我们也可以直接获取定义在html标签上以data-为前缀的属性。接下来我们就直接看源码实现啦
首先第一个问题，比较简单，直接使用dom.dataset，如果“===”undefined则不支持
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！
当调用this.setState()的时候，自动触发render()方法，更新页面。
自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
