我们不止仅仅会使用框架开发,还需要知其所以然 今天领大家不借助任何框架的基础上手动搭建一个资料查找网站 主要内容 TCP网络模型 正则表达式匹配资源 如何编写一个tcp server服务端 开始我们的代码...可以使用Python自带的一个通讯模型:socket python中内置的网络模型库tcp / udp import socket 为浏览器发送数据的函数 1....向浏览器发送http数据 如果浏览器在接收完http协议数据之后遇到了换行,自动将下面的数据转成网站内容body中去 response = 'HTTP/1.1 200 OK \r\n' response...+= '\r\n' # 构建你想要显示的数据内容 response += 'hello world' 3....[数据 html css JavaScript 静态文件(图片 音频)] 需要让浏览器首先能找到这台电脑 ip 才可以访问这台电脑的数据资源 需要绑定电脑的ip地址 4.将网站服务设置成监听模式 等待浏览器链接
的使用 useState可以在函数组件中,添加state Hook。...不,还有个问题:就说我们这里只是用了一个useState,要是我们使用了很多个呢?难道要声明很多个全局变量吗?...基本的使用方法: const MyContext = React.createContext() 如果要使用创建的上下文,需要通过 Context.Provider 最外层包装组件,并且需要显示的通过...通过 React.createContext 创建出来的上下文,在子组件中可以通过 useContext 这个 Hook 获取 Provider 提供的内容 const {funcName} = useContext...原理 原理跟useEffect一样,只是调用时机不同 上面说到useEffect的调用时机是浏览器渲染结束后执行的,而useLayoutEffect是在DOM构建完成,浏览器渲染前执行的。
[详解Slots.001] 前言 熟悉 Vue 的同学应该都知道”插槽(slot)“的概念,通过使用插槽可以让页面内容的组织更加灵活。...div> 既然是模板,那就意味着在很多地方都会使用到它,但是,这里会存在一个问题:所有使用这个模板的地方都将显示模板中的内容,即并不是所有人的名字都叫 ”编程三昧“。...想要使得这个模板具有通用性,其关键点在于 .details 中显示的内容是否具有通用性。 开动脑筋想一想,我们是不是可以将其中的”编程三昧“设为动态内容,谁使用这个模板,谁就传入自己的名字。...其实结合以上两点,还可以得出一个结论:如果有引用 Slots ,那只有对应 name 的 Slots 内容会被显示,其余的 Slots 皆不显示。 正常 DOM 中可以使用 Slots 吗?...一个自定义元素中可以使用多个同名 Slots 吗?
第5章 浏览器对象模型 5.1 介绍 浏览器对象模型(Browser Object Model)–英文简称 BOM,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。...我们使用JavaScript与浏览器交互的所有内容,均来自 浏览器对象模型。...对象的子对象; https://developer.mozilla.org/zh-CN/docs/Web/API/Window 5.2 对话框 window.alert() : 显示一个警告对话框,上面显示有指定的文本内容以及一个...window.prompt() : 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字. var s = window.prompt('你觉得很幸运吗?'...port:端口号 整数,可选,省略时使用方案的默认端口,如http的默认端口为80。 path:路径 由零或多个'/'符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
给大家分享一个我最近在用的神器脚本,解决了我多年来的烦恼——浏览器多开问题! 这是什么工具? 简单说,就是一个小程序,能帮你一键创建多个“独立”的浏览器。...想想这些场景: 微信工作号和生活号要同时登录 淘宝多个店铺账号要同时管理 玩游戏需要开小号 做运营要管理多个社交媒体账号 以前要么得来回切换账号,要么得装多个浏览器,特别麻烦!...第一步:下载文件 就两个小文件,加起来还没一张照片大 第二步:双击运行 直接双击那个.bat文件,黑窗口会自动打开 第三步:选择浏览器 会显示你电脑上装的所有浏览器: 1 Chrome...实际使用感受 我平时要同时管理3个公众号,以前都是: 登录A账号 → 发文章 退出 → 登录B账号 → 发文章 退出 → 登录C账号 → 发文章 现在直接开3个浏览器窗口,同时操作!...常见问题 Q:对电脑有要求吗? A:Win10/Win11都能用,不需要高配置 Q:会被杀毒软件报毒吗?
(本文年代久远,请谨慎阅读)今天学习了JQuery的一些基本用法,包括JQuery选择器和JQuery包装集; 从现在开始,要慎重区分DOM对象和JQuery对象,两种对象的方法不同,属性不同,在使用中要特别注意...(根据元素的css类选择) $("*")选择页面所有元素(选择所有元素) $("#divId, element, .class")(可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容...$("input[id][name$='...']")复合属性选择器,需要同时满足多个条件时使用 [id][name$='...']...[i].innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象,而是DOM对象} JQuery包装集 在此介绍一些基本的JQuery包装集及使用 ready()方法...方法追加到testDiv这个被选元素的结尾,这个被选元素即某个控件, 如一个div块或者一个文本框,效果是在此控件后显示一个下拉框; 其他一些常用的操作JQUERY包装集的函数 $("p").eq(1)
做完这个以后直接拿electro包装成exe文件就可以直接在班里电脑使用了 HTML <!...doubleNumber(num) { //计时器辅助功能,因为计时器在小于10的时候只显示一位数,例如 1 ,2。。。...window.onload = function()来让页面所有元素加载完毕之后才执行js代码,可以优化用户体验应对网速较慢的情况 function funcStart() { //这是计时器的开始功能...timer = setInterval(function () { //使用timer来接收setinterval的值,setinterval是js内置的计时器功能,执行过程为,。...然后暂停计时器,把时分秒标签内容归为字符串类型的‘00’; clearInterval(timer); document.getElementById("sec").innerHTML
3.使用了自执行匿名函数,让网页载入后自动开始执行定时器,开始轮播广告通知。 实现效果:文字实现无缝跑马灯滚动轮播效果,鼠标划入停止滚动,鼠标移出继续滚动。...// 作用:可以用它创建命名空间,只要把自己的所有代码都写在这个特殊的函数包装内,那么外部就不能访问,防止代码 (function(){ var box = document.getElementById...// scrollLeft:是该元素的显示(可见)的内容与该元素实际的内容的距离!!!...// 此属性相当有用,比如可以用来制作水平无缝滚动效果 // 简单了说:元素会从scrollLeft的位置显示该元素的内容。...// 这个属性只能用于元素设置了overflow的css样式中,一般和overflow:hideen配合使用 // scrollLeft相当于该元素的显示(可见)的内容与该元素实际的内容的距离
var doc = document; var db = doc.body; var odiv = doc.getElementById('div1'); 2、避免使用with表达式,因为他改变了运行期上下文的作用域链...11、querySelectorAll()可以联合查询,即querySelectorAll(‘div .warning,div .notice’),在各大浏览器中支持也挺好的,还可以过滤很多非元素节点;...这个网站是:canIuse,可以检查HTML、CSS元素在各大浏览器的兼容情况,一个很有用的网站!...因此强烈建议,在数据量很大的表格中,减少鼠标在表上移动效果,减少高亮行的显示,使用高亮是个慢速过程CPU使用率会提高到80%-90%,尽量避免使用这种效果。...; 因此,因为每一个元素有一个或多个事件句柄与之相连时,可能会影响性能,毕竟连接每一个句柄都是有代价的,所以我们采用事件托管技术,在一个包装元素上挂接一个句柄,用于处理子元素发生的所有事件。
MixinsReact Mixin通过将共享的方法包装成Mixins方法,然后注入各个组件来实现,官方已经不推荐使用,但仍然可以学习一下,了解为什么被遗弃。...你会记得更新这个mixin来读取props而不是state吗?如果此时,其它组件也在使用这个mixin呢?Mixins引起名称冲突无法保证两个特定的mixin可以一起使用。...比如高阶组件名为withSubscription,被包装组件的显示名称为CommentList,显示名称应该为WithSubscription(CommentList) function withSubscription...注意:你不一定要用名为 render的prop来使用这种模式。事实上,任何被用于告知组件需要渲染什么内容的函数prop在技术上都可以被称为“render prop”。...提示:与componentDidMount或componentDidUpdate不同,使用useEffect调度的effect不会阻塞浏览器更新屏幕,这让你的应用看起来响应更快。
以下代码段尝试设置存储在以下内容中的元素的内部HTML target: var target = document.getElementById( "target" ); target.innerHTML..."div" ); target.parentNode.insertBefore( newElement, target.nextSibling ); 通过将target元素包装在jQuery对象中,相同的任务变得更加简单...链接获取元素到jQuery对象 当使用CSS选择器调用jQuery函数时,它将返回一个包含与此选择器匹配的元素的jQuery对象。...检查.length属性是确保选择器成功匹配一个或多个元素的常用方法。 如果目标是仅选择第一个标题元素,则需要另一个步骤。有很多方法可以做到这一点,但最直接的就是.eq()功能。...链接不是所有的jQuery对象都被创建=== 关于这种“包装”行为的一个重要细节是每个包装的对象是唯一的。即使使用相同的选择器创建对象或包含对完全相同的DOM元素的引用,这一点也是如此。
SwiftUI 的状态管理SwiftUI 的状态管理主要依靠属性包装器,如 @State、@Binding 和 @EnvironmentObject 来管理不同类型的状态。...,显示当前计数,并有两个按钮可以增加或减少计数。...答:可以使用 @EnvironmentObject 或 ObservableObject 来在多个视图间共享状态,这样可以避免手动在组件层次间传递状态。...Q3: React 的 useContext 可以实现类似 SwiftUI 的 @EnvironmentObject 吗?...小结SwiftUI 和 React 都提供了高效的状态管理机制。SwiftUI 的状态管理基于属性包装器,而 React 依赖钩子函数。
input filte 提供按钮上传一个或多个文件。 默认情况下,它使用操作系统的本机文件浏览器上传单个文件。...管理文件内容 成功上传文件后显示文件内容,站在用户的角度上,如果上传之后,没有一个预览的,就很奇怪也不体贴。 我们可以使用FileReader对象将文件转换为二进制字符串。...我们可以上传整个目录吗?嗯,这是可能的,但有一些限制。...拖拽上传 不支持文件上传的拖拽就有点 low 了,不是吗?我们来看看如何通过几个简单的步骤实现这一点。 首先,创建一个拖放区域和一个可选的区域来显示上传的文件内容。...当你结束使用某个 URL 对象之后,应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。
因此一般项目来说,使用1.x版本就可以了,最好版本在1.7.2 以上。...如果不考虑兼容低版本的浏览器可以使用2.x,一般不要用,直接要么用3.x版本,兼容低版本浏览器就用1.x就行了。...// 第二种用法:还可以接受一个css的选择器(string),返回选择器对应dom节点的jQuery包装对象。 // 我们一般给jQuery的对象加一个$....oddTrs.css('backgroundColor', '#aaa'); // jQuery:如果包装对象里面元素是多个时候,做设置操作会影响包装对象中的所有dom对象。...($('.list li:first')); // 包含选择器 var $div = $('div:contains("laoma")'); // 如果选择器返回的是多个元素的时候
这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。...1.2.4. jQuery中的顶级对象$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用 。...是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用包装成jQuery对象,就可以调用jQuery 的方法。 1.2.5....方法1: 操作 css 方法 jQuery 可以使用 css 方法来修改简单元素样式; 也可以操作类,修改多个样式。...商品介绍模块内容 div> div class="item"> 规格与包装模块内容 div
content = document.getElementById("content").value; // 将输入的内容显示到主窗体info 中 window.parent.document.getElementById...但是我们可以使用jQuery提供方法,将DOM对象通过jQuery()函数包装成为jQuery对象,同样我们可以把jQuery对象转化成DOM对象。...多个选择器同时使用 selector1,select2 例如 : $("#xxid ,.xxxclass") 同时选择id 和 class匹配两类元素 练习1: ² 通过each() 在每个div元素内容前...在动画完成时执行的函数 div> ④:内容过滤选择器 内容选择器是对子元素和文本内容的操作 :contains(text) 选取包含text文本内容的元素 $("div:contains...具体选中元素 l 表单操作 :checked :selected 选中 表单选中元素 配合基本过滤选择器,缩小选中的范围 4.jQuery的DOM操作 使用jQuery的九种选择器可以基本选中需要操作的对象
前言 textContent、innerText 和 innerHTML 三个方法的使用场景和区别 textContent 和 innerText IE 浏览器最早引入了innerText, 虽然是IE...火狐浏览器把innerText换成了textContent , 但其他浏览器上面,也是可以使用textContent。...innerText 的返回值会被格式化 ,但是textContent的返回值不会被格式化 innerText会把页面里的空标签当作换行处理, ( 一个空标签是一行 , 连续的多个空标签也是一行) ,但是...最重要的区别 innerText返回的值, 依赖于页面的显示. textContent依赖于代码的内容 示例:获取p标签文本内容 div id="demo"> 这是文本内容...p标签隐藏元素, innerText依赖于页面的显示. textContent依赖于代码的内容 div id="demo">
中数据项是Signal Switch Switch组件是Show组件的扩展,如果在一个多层条件判断的情况下,使用Show组件会发生多级嵌套,代码臃肿,使用Switch/Match可以很好的解决这种情况,...("app")); Portal Portal组件可以在正常顺序之外插入元素,默认情况下,Portal的子内容将从正常的DOM顺序中拿出来,插入到document.body下的 中,举个 main.tsx...ErrorBoundary ErrorBoundary是一个可以捕获子组件任何未知产生的JavaScript错误,并显示发生错误的报错信息,举个 import { render } from "solid-js...,就可以通过use:使用。...重要提示:use: 需要被编译器检测并进行转换,并且函数需要在作用域内,因此不能作为传值的一部分或在组件上使用。