(1)给父元素设置overflow:hidden;或float:left;或position:absolute;或position:relative;。触发块级格式化上下文(BFC),从正常文档流脱离,父元素本身实现独立布局,围住其中的浮动元素。但专门这样设置,可能会改变布局,对于后三者,使block变为inline-block,父元素宽度变化。
(3)在父元素上加clearfix类名,在父元素的最后加块级元素.(伪元素选择器),通过clear:both使父元素括住浮动的元素来清除float的影响,使.不可见。常用这种方式,Bootstrap支持clearfix类名。
,通过display:inline; zoom:1;模拟inline-block。
.parent{display:table-cell; text-align:center; vertical-align:middle;}
.child{display:inline-block;}
(2) relative+absolute+transform
绝对定位脱离文档流,不会对其它元素产生影响。transform是CSS3新增内容,对IE6,7,8可能没法兼容,在高版本浏览器需要加前缀。
.parent{position:relative;}
.child{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);}
(3)flex
IE6,7,8可能没法兼容flex。
.parent{display:flex; justify-content:center; align-items:center;}
如果子元素大小确定。
.parent{position:relative;}
.child{
width:100px; height:100px;
position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}
3、CSS选择器有哪些?优先级如何计算
(1)普通选择器:通配符选择器*、标签选择器、id选择器#、类选择器.、属性选择器[]、伪类选择器:
(2)伪元素选择器::
(3)组合选择器:后代选择器 、子选择器、兄弟选择器+、只要前面有某种元素~
优先级:将权重相加。a=行内样式style,1000;b=id选择器,100;c=类、伪类和属性选择器,10;d=标签选择器和伪元素选择器,1。相同属性优先级高覆盖低、后面覆盖前面,不同属性合并。
超链元素伪类的设置顺序:link :visited :hover :active
4、px、em和rem的区别
px,像素,相对于显示器屏幕分辨率而言;
em,相对长度单位,相对于当前对象内文本的字体大小,若字体大小未显式设置,则相对于浏览器默认的字体大小;
rem,相对长度单位,相对于html根元素的字体大小。
5、display:none和visibility:hidden的区别
display:none设置元素不显示,是彻底消失,不在文档流中占位,浏览器也不会解析该元素。visibility:hidden是视觉上消失,可理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素。
使用visibility:hidden比display:none性能上要好。display:none切换显示时,页面产生回流reflow(页面中的部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建)。而visibility:hidden切换是否显示时则不会引起回流,只是元素的外观被改变,且在没有改变布局的情况下发生。
6、用一个div写出三条横线的小图标
div{
height:5px;
width:30px;
background-color:#DD575C;
background-clip:content-box;
padding-top:5px;
padding-bottom:5px;
border-top:#DD575C solid 5px;
border-bottom:#DD575C solid 5px;
}
7、用一个div实现倒三角
div{
width:0;
border-top:10px solid #DD575C;
border-left:5.77px solid transparent;
border-right:5.77px solid transparent;
}
其它方法仅供参考。ASCII码31是倒三角。
/* 正方形旋转加截取 */
.parentDiv {
height:50px;
overflow:hidden;
}
.triangleDiv {
position: relative;
height:70.7px;
width:70.7px;
top:-35.4px;
left:19.6px;
background-color:#DD575C;
transform:rotate(45deg);
}
8、盒模型
在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content)、内边距(padding)、边框(border),外边距(margin)四个部分。
标准盒子模型 = margin + border + padding + content (content = width | height)
IE盒子模型 = margin + content (content = border + padding + width | height)
box-sizing:content-box|border-box 切换标准模型和IE模型
9、position的absolute和fixed的共同点与不同点
共同点:脱离文档流,文档流中没有它的空间,未设置偏移时在原位置。默认宽度为内容宽度。
absolute:绝对定位。参照物为第一个定位元素(非static)/根元素html(与浏览器窗口同等大小的首屏区域)。元素随页面的滚动而滚动。
fixed:固定定位。参照物是视窗。不随页面的滚动而滚动。
10、sprite精灵图
把设计稿上的小图标拼合到同一张图片中,减少网络请求,提升网页加载速度。
①排列常用横向排列和纵向排列。 ②图片之间必须保留孔隙,小图标20像素。如果更改按钮大小,CSS里背景图位置属性不须改变;容错,如果CSS设置错误,不会导致下面图片露出来。③合并原则:同属于一个模块、大小相近、色彩相近。只本页用到的图片合并、集中使用,有状态的图标合并。④IE6不支持PNG24半透明,存两份:高级浏览器PNG24 sprite.png、IE6 PNG-8 sprite_ie.png。
background-image:url("/images/x.png"); background-repeat:no-repeat; background-position:20px 60px; background-size:10px 10px;
11、HTML5
表现页面中的章节结构:
嵌入资源:
新的 类型:email、url、number、tel、search、range、color、date
新的表单元素(datalist、keygen、output)和属性
getCurrentPosition()、web存储(localStorage、sessionStorage)、拖放
12、CSS3
选择器:属性选择器、伪类选择器
盒模型:box-shadow、box-sizing
边框:border-radius、border-image
背景:background-image、background-size、background-origin、background-clip、渐变
文字特效:text-shadow、text-overflow、word-wrap、word-break、字体@font-face
2D/3D转换:transform、transform-origin、transform-style、perspective、perspective-origin、backface-visibility
过渡和动画:transition、animation、@keyframes
多列布局:column-count、column-width、column-fill、column-gap、column-rule、column-span
用户界面:resize、outline-offset
弹性盒子:flex
13、 的alt和title
alt:描述图片含义。地址写错或网络状况不好,无法查看图像时,显示该说明。可用于屏幕阅读软件和搜索引擎。
title:光标悬浮在图像上时以提示的方式显示该特性内容。
14、href和src的区别
href标识超文本引用,在当前元素和引用资源之间建立联系。。当浏览器解析到css文件时会下载,但不会停止对当前文档的处理。
src引用资源,指向外部资源的位置,将外部资源下载并替换当前元素。用在
(function() {
var a=b=5;
})();
console.log(b); // 5
console.log(a); // Uncaught ReferenceError: a is not defined
2、操作符
使用加法操作符+时,如果其中一个操作数是字符串,则把另一个操作数也转换为字符串,并将两字符串拼接。
var foo=10+'20'; // '1020'
x||y如果x表达式运行结果转换为Boolean值为false,则返回表达式y的运行结果
(window.foo||(window.foo='bar'));
console.log(window.foo); // 'bar'
指针和赋值运算符的执行顺序
var foo={n:1};
var bar=foo; // {n: 1}
foo.x=foo={n:2};
foo.x // undefined
foo // {n: 2}
bar // {n: 1, x: {n: 2}}
3、==和===的区别
===判断左右两边对象或值是否类型相同且值相等。==判断操作符两边对象或值是否相等,类型不同时,使用Number()转换。例外规则,null==undefined,null/undefined进行==运算时不进行隐式类型转换。通常把值转为Boolean值,进行条件判断。
[1]==[1] false
var a="123";
var b="123";
var c="4";
var oa=new String("123");
var ob=new String("123"); var oc=oa; a===oa; //false,a为值类型,oa为对象类型 oa===ob; //false,不是同一个引用 oa===oc; //true,同一个引用 a===b; //true,值相等,且都是值类型 a===c; //false "99"==99; //true new String("99")==99; //true false=="0"; //true 0==null; //false "undefined"==undefined; //false
4、js各类型在转换为Boolean时的规则
5、数值
Number()函数,用于任何数据类型。对于字符串向数值型转换,数字、浮点数、十六进制数->十进制数,前导0被忽略;””->0;除此之外(包含非数字等)转换为NaN。
Number(undefined) // NaN
Number(null) // 0
Number(false) // 0
Number('11') // 11
Number('11.2') // 11.2
Number('011') // 11
Number('0x13') // 19
Number('11a') // NaN
parseInt(),忽略空格,找到第一个非空格字符,直到遇到无效字符。第二个参数为转换进制。前导0被忽略。
parseFloat(),前导0被忽略,只解析十进制。如果没有小数点或小数点后都是0则返回整数。
parseInt('10/01') // 10
parseInt('011') // 11
parseInt('x08') // NaN
parseInt('0x08') // 8
parseInt('11.12a') // 11
parseFloat('11.12a') // 11.12
4、字符串
字符串replace查找字符串替换成目标字符。 第一个参数是RegExp对象或字符串,第二个参数是字符串或函数。要想替换所有字符串,提供正则表达式,指定g标志,否则只替换第一个满足要求的字符串。
split(separator,howmany)方法,按分割符将字符串分割成字符串数组。 第一个参数分隔符是字符串或RegExp对象,第二个参数用于指定数组大小,返回数组不会超过既定大小。
"I have a cat".split("").reverse().join("-") // 't-a-c- -a- -e-v-a-h- -I'
5、正则表达式
\d:数字[0-9] \D:[^0-9] \s:空白字符[\t\n\x0B\f\r] \S \w:单词字符[a-zA-Z_0-9] \W
^ 以...开始 $ 以...结束
*:0到多 +:1到多 ?:0或1 {n}:匹配确定的n次 {n,}:至少匹配n次 {n,m}:最少匹配n次且最多匹配m次
var reg=/^w+[^d]+$/;
console.log(reg.test('ww_32r')); // true
console.log(reg.test('123_dskr')); // false
console.log(reg.test('w7_d2')); // false
6、比较typeof和instanceof
(1)typeof运算符 typeof 变量名; //返回字符串 可以识别标准类型(Null除外),不能识别具体的对象类型(Function除外)。 (2)instanceof 变量名 instanceof 类型; 判别内置对象类型、自定义对象类型,不能判别标准类型。给定引用类型的实例则返回true,检测基本类型值返回false。
7、包装类类型识别
包装类Boolean、Number、String。所有基本包装类型的对象(new创建)都会被转换为布尔值true,typeof均得到object。
var strObj=new String('abc');
console.log(strObj instanceof String); // true
console.log(typeof strObj=='string'); // false
8、对象的深克隆
function deepClone(obj){}
9、数组
数组的sort(),默认按升序排列,返回排序后的数组。 sort()方法调用每个数组项的toString()方法,比较得到的字符串,即使是数值。sort()方法可以接收一个比较函数作为参数,指定排序方法。比较函数接收两个参数,如果第一个参数位于第二个参数之前则返回一个负数,两个参数相等则返回0,如果第一个参数应该位于第二个参数之后则返回一个正数。
colors.slice(1,4); 截取,取1-3,返回新数组 返回从起始位置到结束位置-1的项;只有一个参数,则至数组末尾;有负数,则与length相加;结束位置小于起始位置则返回空数组。 splice(start, deleteCount[, item1[, item2[, …]]]),从数组中删除或添加元素,并更改数组内容,返回一个数组,该数组包含从原始数组中删除的项。
var foo=[];foo[2]=1;foo.push(2);alert(foo.length); // 4
10、数组去重并排序,打印重复字符及次数
10、函数
var m=1;
function add(n){
return n=n+1;
}
y=add(m); // 4
function add(n) {
return n=n+3;
}
z=add(m); // 4
a(); // '函数声明'
function a(){
console.log("函数声明");
}
b(); // Uncaught TypeError: b is not a function
var b=function(){
console.log('函数表达式');
}
一个函数实现add(1)(2)(3)和add(1,2)不同的调用方式。
function add(...a){
let sum=0;
for(let num of a){
sum+=num;
}
function s(...b){
for(let num of b){
sum+=num;
}
return s;
}
s.toString=function(){return sum;}
return s;
}
console.log(add(2,3)); // 5
console.log(add(2)(3)); // 5
console.log(add(1)(2,3)(4,5,6)); // 21
11、闭包
闭包是指有权访问另一个函数作用域中的变量的函数,由函数和与其相关的引用环境组成。闭包允许函数访问其引用环境中的变量,有可能是外部环境变量,该变量称为自由变量。创建闭包的常见方式,在一个函数内部创建另一个函数。
闭包的应用,保存变量现场。闭包只能取得包含函数中任何变量的最后一个值,但可以强制创建另一个匿名函数强制让闭包的行为符合预期。
闭包的应用,私有作用域的匿名函数。临时需要一些变量,就可以使用私有作用域,限制向全局作用域中添加过多的变量和函数。私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。
for(var i=0;i<6;i++){
setTimeout(function(){
console.log(i); // 打印6个6
},1000);
}
// ES6语法可以实现打印1 2 3 4吗?
var numbers=[0,1,2,3];
var functions=[];
for(var i=0;num=numbers[i],i
12、call、apply和bind的区别
函数调用时绑定this值:call()、apply()让函数在特定的作用域下进行调用,即设置函数体内this对象的值。扩充函数运行的作用域,对象不需要与方法有任何耦合关系。区别仅在于接受参数的方式不同, call()方法传递的参数逐个列举,第一个参数是作用域;apply()方法接收两个参数,作用域和参数数组。
为函数绑定this值但并不调用:bind()传入新作用域,返回新函数,该函数在bind作用域执行。第二个参数是参数列表,与call一致。
var scope='window';
env={
scope:'inner',
getscope:function(){
console.log(this.scope);
}
}
env.getscope(); // 'inner'
env.getscope.apply(window); // 'window'
env.getscope.call(window); // 'window'
env.getscope.bind(window)(); // 'window'
var f=env.getscope;
f(); // 'window'
13、垃圾回收机制和内存管理
js具有自动垃圾回收机制,找出不再使用的变量,垃圾收集器按一定时间间隔(影响性能)释放其占用的内存。“标记清除”是目前主流的垃圾回收算法,给当前不使用的值加上标记,再回收内存。另一种算法是“引用计数”,跟踪记录所有值被引用的次数,当代码中存在循环引用现象时会导致问题。及时解除不再使用的全局对象、全局对象属性及循环引用变量的引用,确保有效回收内存。
14、异步加载JS的方式
使用defer属性让脚本在文档完全呈现之后再顺序执行,async属性同样让脚本立即下载延迟执行,但不保证顺序。
动态生成
标签
a.XHR注入(通过XMLHttpRequest对象来获取JS,然后创建一个script元素插入到DOM结构中); b.ajax eval(使用ajax得到脚本内容,然后通过eval(xmlhttp.responseText)
来运行脚本); c.iframe等
DOM
1、节点操作
(1)获取节点 getElementById getElementsByTagName getElementsByClassName
querySelector/querySelectorAll 获取指定元素的后代元素中符合选择器的节点,第一个符合条件的元素或所有元素的列表
(2)创建节点 createElement createDocumentFragment
(3)修改节点内容 textContent innerText
(4)插入节点 appendChild insertBefore
(5)删除节点 removeChild replaceChild
2、样式操作
(1)增加内联样式 element.style.color='red'; element.style.cssText='border-color:red;color:red;';
(2)更新class element.className+='invalid';
(3)更换样式表
offsetWidth:元素在水平方向上占用的空间大小。
clientWidth:元素内容区的宽度加左右内边距的宽度。
scrollWidth:在没有滚动条的情况下,元素内容的总宽度。
console.log('one');
setTimeout(function(){
console.log('two');
},0);
console.log('three');
// one three two
对于事件委托,如何为不同子元素绑定特定的功能
event.target
12、判断一个字符串中出现次数最多的字符/单词,统计这个次数
13、去掉一个数组的重复元素
求一个字符串的字节长度
你可能感兴趣的:(1.1,前端基础,前端基础——html,CSS,JavaScript,ES6)
【脑洞小剧场】零帧起手创业小公司之 新人入职的一天
Foyo Designer
技术职场小剧 职场和发展 程序人生 学习方法 改行学it 创业创新 远程工作 程序员创富
点击查看小剧场合集https://blog.csdn.net/foyodesigner/category_12896948.html阳光明媚的早晨,段萌儿怀揣着对新工作的无限憧憬,踏入了这家充满未知的小公司。然而,她万万没想到,第一天上班就迎来了一场“惊悚”之旅。场景一:段萌儿的“惊悚”发现段萌儿,新入职的前端工程师,一早便迫不及待地打开了公司的代码库,想要一窥项目的“真容”。然而,当她看到代码库
html重点知识总结
*goliter *
html 前端
html重点知识一直在网上看过许多不同的前端资料,但是总觉的只是单单的阅读和记忆不能够真正的加深自己的知识理解,所以开始尝试自己在不查看其他一切资料的情况下对自己了解的知识做一个总结(顺序或许有点乱),如果之后发现有不足再来补充,我相信输出才是最好的输入!!!H5新增内容语义化标签:h5新增了一系列语义化标签,他们本质上和一般的div标签没有区别,但是在语义上有不同。header:专门指页面的顶部
让人感到疑惑的const
浪裡遊
javascript 开发语言 ecmascript 前端
const关键字在不同的编程语言中有着不同的含义和限制,但通常它被用来声明一个常量或只读变量。然而,在JavaScript中,const的行为有时可能会让人感到困惑,因为它并不总是意味着“不可变”(immutable)。让我们详细探讨一下这个问题。JavaScript中的const在JavaScript中,当你使用const声明一个变量时,你实际上是创建了一个不能重新赋值的绑定。这意味着一旦给这个
python中的下划线用法总结
白色机械键盘
python实践 python 开发语言
在Python中,下划线(underscore)有多种用法。它在不同的上下文中可以扮演不同的角色,下面是其常见用法的总结:1.单下划线"_"1.1作为临时变量或无用变量在循环或解包操作中,表示一个临时的或不关心的变量。for_inrange(5):print("Hello,World!")a,_,b=(1,2,3)print(a,b)#输出:131.2在交互式解释器中在交互式解释器中,"_"用于保
lxml模块的学习
bad kid's cute
lxml模块 lxml模块 python 爬虫
1.lxml的认识在前面学习了xpath的语法,那么在代码中我们如何使用xpath呢,对应的我们需要lxm博文链接:xpath和lxml类库安装方式:pipinstalllxml2.lxml的使用1.导入lxml的etree库(导入没有提示不代表不能用)fromlxmlimportetree2.利用etree.HTML,将字符串转化为Element对象,Element对象具有xpath的方法,返回
如何用deepseek快速生成思维导图和流程图?
ProcessOn官方账号
流程图
一起来看看md格式和mermaid格式,与deepseek的碰撞会产生怎样的魔法吧!1、md格式+deepseek,快速生成思维导图Markdown是一种轻量级的标记语言,旨在以易读易写的纯文本格式编写文档,并能够轻松转换为结构化的HTML(超文本标记语言)或其他格式。它最初由JohnGruber和AaronSwartz于2004年创建,因其简洁性和可读性而广受欢迎。操作方法:Step1:给dee
JavaScript 性能优化实战:数据结构选择对性能的影响
deying0865423
开发语言 javascript
目录数组(Array)特点与适用场景性能短板链表(LinkedList)特点与适用场景性能短板集合(Set)特点与适用场景性能短板映射(Map)特点与适用场景性能短板栈(Stack)与队列(Queue)特点与适用场景性能短板在JavaScript开发中,数据结构的选择如同搭建房屋时选择合适的建筑材料,对程序性能起着决定性作用。合理的数据结构能显著提升代码执行效率,减少资源消耗,反之则可能导致性能瓶
JavaScript 性能优化实战:优化 DOM 操作提升交互响应
deying0865423
javascript 开发语言 ecmascript
目录一、理解DOM操作的性能损耗二、减少DOM操作次数(一)批量操作DOM(二)缓存DOM查询结果三、优化DOM查询(一)使用更高效的查询方法(二)利用事件委托四、减少回流与重绘(一)批量修改样式(二)使用requestAnimationFrame在现代Web应用开发中,JavaScript与DOM(文档对象模型)的交互极为频繁。无论是创建动态界面、响应用户操作,还是更新页面内容,DOM操作都扮演
install of jenkins-2.501-1.1.noarch conflicts with file
计算机辅助工程
centos jenkins
在处理RPM包冲突问题时,首先要明确的是,Jenkins2.501-1.1.noarch是一个特定的RPM包版本,通常用于RedHatEnterpriseLinux(RHEL)或CentOS系统。如果你在安装或更新Jenkins时遇到了冲突问题,这通常是因为系统中已存在一个或多个与新安装包冲突的包。解决步骤查找冲突的包:使用rpm命令来查找哪些包与Jenkins2.501-1.1.noarch冲突
Vue 过滤器深度解析与应用实践
二川bro
前端 vue.js 前端 javascript
文章目录1.过滤器概述1.1核心概念1.2过滤器生命周期2.过滤器基础2.1过滤器定义2.2过滤器使用3.过滤器高级用法3.1链式调用3.2参数传递3.3动态过滤器4.过滤器应用场景4.1文本格式化4.2数字处理4.3数据过滤5.性能优化与调试5.1性能优化策略5.2调试技巧6.最佳实践建议6.1命名规范6.2代码组织7.常见问题与解决方案7.1问题列表7.2调试技巧8.扩展阅读1.过滤器概述1.
利用Python进行数据可视化(Plotly与Dash的应用)
步入烟尘
Python超入门指南全册 信息可视化 python plotly
本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学,从基础到精通不断进阶深入,后续还有实战项目,轻松应对面试,专栏订阅地址:https://blog.csdn.net/mrdeam/category_12647587.html优点:订阅限时19.9付费专栏,私信博主还可进入全栈VIP答疑群,作者优先解答机会(代码指导、远程服务),群里大佬众多可以
JS逆向案例-致远OA的前端密码加密逆向分析
布啦啦李
我的渗透笔记 python JS逆向 javascript逆向 致远OA 密码爆破 防范措施 js逆向
免责声明本文仅为技术研究与渗透测试思路分享,旨在帮助安全从业人员更好地理解相关技术原理和防御措施。任何个人或组织不得利用本文内容从事非法活动或攻击他人系统。如果任何人因违反法律法规或不当使用本文内容而导致任何法律后果,本文作者概不负责。请务必遵守法律法规,合理使用技术知识。一、致远OA的登录过程1.1实验版本致远A6+协同管理软件V8.0SP2用户名不变,密码加密,无验证码。1.2登录过程步骤操作
JavaScript基础-DOM 简介
難釋懷
javascript 开发语言
在现代Web开发中,JavaScript与HTML和CSS一起构成了网页的核心技术。而在这三者之中,DOM(DocumentObjectModel,文档对象模型)作为浏览器处理网页内容的一种接口,扮演着至关重要的角色。通过DOM,JavaScript能够动态地访问和操作网页的内容、结构以及样式。本文将介绍DOM的基本概念、核心组成部分以及如何使用JavaScript来操作DOM。一、什么是DOM?
HTML入门
Yeauty
html
HTML的概述什么是HTML:HyperTextMarkupLanguage超文本标记语言超文本:比普通文本更加强大,能够定义许多文本样式标记语言:通过一组标签来对内容进行标记,并且修饰-标签:为什么要学习HTML它是网页设计的设计,基本上所有的网站都是用它开发的如何来学习HTMLHTML语法规范HTML是一个.html或者.htm结尾的文件HTML文件中是头和体两部分HTML是通过一组标签来对内
快速部署一个k8s集群
懒人P
Kubernetes 云原生 kubernetes 容器 运维
部署单Master的K8s集群kubeadm方式文章目录部署单Master的K8s集群一,前置知识点1.1生产环境可部署Kubernetes集群的两种方式1.2准备环境1.3操作系统初始化配置【所有节点】二,安装Docker/kubeadm/kubelet(所有节点)2.1安装Docker。2.2添加阿里云YUM软件源。2.3安装kubeadm,kubelet和kubectl.三,部署Kubern
【 <二> 丹方改良:Spring 时代的 JavaWeb】之 Spring Boot 的起步依赖:快速构建 JavaWeb 项目
Foyo Designer
spring spring boot java Spring Data JPA JUnit
点击此处查看合集https://blog.csdn.net/foyodesigner/category_12907601.html?fromshare=blogcolumn&sharetype=blogcolumn&sharerId=12907601&sharerefer=PC&sharesource=FoyoDesigner&sharefrom=from_link一、起步依赖:SpringBoo
【Python】解析 XML
茉菇
Python python xml
1、Python对XML的解析1.1SAX(simpleAPIforXML)SAX解析器使用事件驱动模型,通过在解析XML的过程中触发一个个的事件并调用用户定义的回调函数来处理XML文件。xml.sax模块牺牲了便捷性来换取速度和内存占用。事件驱动指一种基于回调(callback)机制的程序运行方法。利用SAX解析XML文档牵涉到两个部分:解析器:负责读取XML文档,并向事件处理器发送事件,如元素
JavaScript 浏览器对象实例
lsx202406
开发语言
JavaScript浏览器对象实例引言JavaScript作为一种广泛应用于网页开发的脚本语言,提供了丰富的浏览器对象模型(BrowserObjectModel,简称BOM)。BOM使得JavaScript能够与浏览器环境进行交互,从而实现各种动态效果和交互功能。本文将详细介绍JavaScript中的浏览器对象实例,包括其概念、常用对象及其使用方法。一、浏览器对象模型概述浏览器对象模型是JavaS
JavaScript执行机制
javascript
大纲1、场景分析2、执行机制相关知识点3、以实例来说明JavaScript的执行机制4、相关概念场景分析/*以下这段代码的执行结果是什么?如果依照:js是按照语句出现的顺序执行这个理念,那么代码执行的结果应该是://"定时器开始啦"//"马上执行for循环啦"//"执行then函数啦"//"代码执行结束"但结果并不是这样的,得到的结果是://"马上执行for循环啦"//"代码执行结束"//"执行t
tomcat下直接访问html网页
努力的搬砖人.
在conf/server.html配置文件中添加(在标签上添加)访问地址:http://localhost:8081/hello.html
CSS入门:为文档添加样式的几种方法
程序员
CSS入门:为文档添加样式的几种方法一、先从HTML开始吧HTML是网页的基础结构,我们需要先有HTML文档才能添加样式。二、添加CSS试试看?让我们开始为HTML添加一些基本的CSS样式。三、样式化HTML元素基本语法p{color:green;}四、改变元素的默认行为修改元素的默认显示方式和行为。五、使用类名通过类名选择器来定义样式:.special{color:orange;}六、根据元素在
HTML基础语法:写好网页的第一步
程序员
HTML基础语法:写好网页的第一步在Web开发的世界里,HTML是构建网页的基石。今天,让我们一起来了解HTML的基础语法,掌握编写规范网页的要点。一、HTML的基本构成1.HTML元素的解析HTML元素通常由三部分组成:开始标签(如)内容(实际的文本内容)结束标签(如)例如:这是一个段落2.元素的嵌套HTML元素可以相互嵌套,但必须注意正确的嵌套顺序:我的猫咪非常可爱二、元素的类型1.块级元素在
JavaScript 高频面试题
好运连连女士
JavaScript javascript
文章目录JavaScript手写防抖和节流CommonJS和ES6模块的区别this指向问题,如何修改this指向引申1:模拟bind引申2:为什么多次绑定,只指向第一次绑定的obj对象?有没有解决办法?引申3:一般函数和箭头函数的区别数据类型有哪些引申1:如何判断数据类型new操作的原理引申1:什么是闭包?引申2:内存泄露和内存溢出引申3:作用域和作用域链?JS实现数组扁平化深拷贝与浅拷贝的区别
ChatGPT + Vue3:如何打造 AI 智能助手?
Js_x
chatgpt 人工智能
引言人工智能(AI)正快速渗透到前端开发领域,越来越多的开发者希望将ChatGPT集成到自己的应用中,为用户提供智能对话、自动回复、辅助决策等功能。本文将介绍如何使用Vue3+OpenAIAPI搭建一个AI智能助手,让你的应用拥有强大的AI交互能力。1.项目准备1.1技术栈选择本项目将使用以下技术:Vue3-现代化的前端框架,响应式强,适合构建交互式应用。Vite-高效的Vue3项目构建工具,提升
用 AI 提高开发效率:自动生成代码、优化 SQL 查询、写测试用例
Js_x
人工智能 sql 测试用例
引言人工智能(AI)正在深刻改变软件开发行业。从代码自动补全到SQL查询优化,再到自动化测试,AI工具已经成为开发者提高生产力的重要助手。本文将介绍ChatGPT、GitHubCopilot、Tabnine等AI编程工具的实际应用,帮助开发者更高效地编写代码、优化数据库查询,并自动生成测试用例。1.AI代码生成:提升开发效率1.1ChatGPT代码生成ChatGPT具备强大的自然语言处理能力,可以
JavaScript相关面试题
努力的搬砖人.
javascript
以下是150道JavaScript相关面试题及详细答案:JavaScript基础1.JavaScript是什么?JavaScript是一种直译式脚本语言,主要用于网页开发,也可用于服务器端开发(如Node.js)。它是一种动态类型、弱类型、基于原型的语言,支持函数式编程和面向对象编程。2.JavaScript的基本数据类型有哪些?包括Undefined、Null、Boolean、Number、St
设计模式之外观模式:原理、实现与应用
wenbin_java
设计模式 外观模式
引言外观模式(FacadePattern)是一种结构型设计模式,它通过提供一个统一的接口来简化复杂系统的使用。外观模式隐藏了系统的复杂性,使得客户端可以通过一个简单的接口与系统交互。本文将深入探讨外观模式的原理、实现方式以及实际应用场景,帮助你更好地理解和使用这一设计模式。1.外观模式的核心概念1.1什么是外观模式?外观模式是一种结构型设计模式,它通过提供一个统一的接口来简化复杂系统的使用。外观模
Git 实战指南:本地客户端连接 Gitee 全流程
Yant224
Git git gitee 开发语言 python
本文将以Gitee(码云)、系统Windows11为例,详细介绍从本地仓库初始化到远程协作的全流程操作目录1.前期准备1.1注册与配置Gitee1.2下载、安装、配置客户端1.3配置公钥到Gitee2.本地仓库操作(PowerShell/GitBash)2.1初始化本地仓库2.2关联Gitee远程仓库3.克隆已有仓库4.日常开发操作4.1分支管理(GitBash示例)4.2处理换行符问题(CRLF
原生JavaScript控制页面跳转的几种方式
thinkQuadratic
javascript 前端 开发语言
在开发一些简单的页面,不需要复杂的单页面应用(SPA)功能的时候。可以使用原生JavaScript的跳转即可满足需求。另外在处理一些需要直接与服务器进行交互的表单提交后跳转,或者在某些浏览器兼容性要求较高的场景下,原生JavaScript的跳转方式更加稳定可靠。正文开始这里本地创建两个html文件进行演示,index.html和home.htmlwindow.location.hrefindex页
AI:188-利用Python进行自然语言生成和文本摘要
一键难忘
python 开发语言 人工智能 自然语言处理
本文收录于专栏:精通AI实战千例专栏合集https://blog.csdn.net/weixin_52908342/category_11863492.html从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。每一个案例都附带关键代码,详细讲解供大家学习,希望可以帮到大家。正在不断更新中~一.利用Python进行自然语言生成和文本摘要近年来,人工智
Linux的Initrd机制
被触发
linux
Linux 的 initrd 技术是一个非常普遍使用的机制,linux2.6 内核的 initrd 的文件格式由原来的文件系统镜像文件转变成了 cpio 格式,变化不仅反映在文件格式上, linux 内核对这两种格式的 initrd 的处理有着截然的不同。本文首先介绍了什么是 initrd 技术,然后分别介绍了 Linux2.4 内核和 2.6 内核的 initrd 的处理流程。最后通过对 Lin
maven本地仓库路径修改
bitcarter
maven
默认maven本地仓库路径:C:\Users\Administrator\.m2
修改maven本地仓库路径方法:
1.打开E:\maven\apache-maven-2.2.1\conf\settings.xml
2.找到
 
XSD和XML中的命名空间
darrenzhu
xml xsd schema namespace 命名空间
http://www.360doc.com/content/12/0418/10/9437165_204585479.shtml
http://blog.csdn.net/wanghuan203/article/details/9203621
http://blog.csdn.net/wanghuan203/article/details/9204337
http://www.cn
Java 求素数运算
周凡杨
java 算法 素数
网络上对求素数之解数不胜数,我在此总结归纳一下,同时对一些编码,加以改进,效率有成倍热提高。
第一种:
原理: 6N(+-)1法 任何一个自然数,总可以表示成为如下的形式之一: 6N,6N+1,6N+2,6N+3,6N+4,6N+5 (N=0,1,2,…)
java 单例模式
g21121
java
想必单例模式大家都不会陌生,有如下两种方式来实现单例模式:
class Singleton {
private static Singleton instance=new Singleton();
private Singleton(){}
static Singleton getInstance() {
return instance;
}
Linux下Mysql源码安装
510888780
mysql
1.假设已经有mysql-5.6.23-linux-glibc2.5-x86_64.tar.gz
(1)创建mysql的安装目录及数据库存放目录
解压缩下载的源码包,目录结构,特殊指定的目录除外:
32位和64位操作系统
墙头上一根草
32位和64位操作系统
32位和64位操作系统是指:CPU一次处理数据的能力是32位还是64位。现在市场上的CPU一般都是64位的,但是这些CPU并不是真正意义上的64 位CPU,里面依然保留了大部分32位的技术,只是进行了部分64位的改进。32位和64位的区别还涉及了内存的寻址方面,32位系统的最大寻址空间是2 的32次方= 4294967296(bit)= 4(GB)左右,而64位系统的最大寻址空间的寻址空间则达到了
我的spring学习笔记10-轻量级_Spring框架
aijuans
Spring 3
一、问题提问:
→ 请简单介绍一下什么是轻量级?
轻量级(Leightweight)是相对于一些重量级的容器来说的,比如Spring的核心是一个轻量级的容器,Spring的核心包在文件容量上只有不到1M大小,使用Spring核心包所需要的资源也是很少的,您甚至可以在小型设备中使用Spring。
 
mongodb 环境搭建及简单CURD
antlove
Web Install curd NoSQL mongo
一 搭建mongodb环境
1. 在mongo官网下载mongodb
2. 在本地创建目录 "D:\Program Files\mongodb-win32-i386-2.6.4\data\db"
3. 运行mongodb服务 [mongod.exe --dbpath "D:\Program Files\mongodb-win32-i386-2.6.4\data\
数据字典和动态视图
百合不是茶
oracle 数据字典 动态视图 系统和对象权限
数据字典(data dictionary)是 Oracle 数据库的一个重要组成部分,这是一组用于记录数据库信息的只读(read-only)表。随着数据库的启动而启动,数据库关闭时数据字典也关闭 数据字典中包含
数据库中所有方案对象(schema object)的定义(包括表,视图,索引,簇,同义词,序列,过程,函数,包,触发器等等)
数据库为一
多线程编程一般规则
bijian1013
java thread 多线程 java多线程
如果两个工两个以上的线程都修改一个对象,那么把执行修改的方法定义为被同步的,如果对象更新影响到只读方法,那么只读方法也要定义成同步的。
不要滥用同步。如果在一个对象内的不同的方法访问的不是同一个数据,就不要将方法设置为synchronized的。
将文件或目录拷贝到另一个Linux系统的命令scp
bijian1013
linux unix scp
一.功能说明 scp就是security copy,用于将文件或者目录从一个Linux系统拷贝到另一个Linux系统下。scp传输数据用的是SSH协议,保证了数据传输的安全,其格式如下: scp 远程用户名@IP地址:文件的绝对路径
【持久化框架MyBatis3五】MyBatis3一对多关联查询
bit1129
Mybatis3
以教员和课程为例介绍一对多关联关系,在这里认为一个教员可以叫多门课程,而一门课程只有1个教员教,这种关系在实际中不太常见,通过教员和课程是多对多的关系。
示例数据:
地址表:
CREATE TABLE ADDRESSES
(
ADDR_ID INT(11) NOT NULL AUTO_INCREMENT,
STREET VAR
cookie状态判断引发的查找问题
bitcarter
form cgi
先说一下我们的业务背景:
1.前台将图片和文本通过form表单提交到后台,图片我们都做了base64的编码,并且前台图片进行了压缩
2.form中action是一个cgi服务
3.后台cgi服务同时供PC,H5,APP
4.后台cgi中调用公共的cookie状态判断方法(公共的,大家都用,几年了没有问题)
问题:(折腾两天。。。。)
1.PC端cgi服务正常调用,cookie判断没
通过Nginx,Tomcat访问日志(access log)记录请求耗时
ronin47
一、Nginx通过$upstream_response_time $request_time统计请求和后台服务响应时间
nginx.conf使用配置方式:
log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_r
java-67- n个骰子的点数。 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S。输入n,打印出S的所有可能的值出现的概率。
bylijinnan
java
public class ProbabilityOfDice {
/**
* Q67 n个骰子的点数
* 把n个骰子扔在地上,所有骰子朝上一面的点数之和为S。输入n,打印出S的所有可能的值出现的概率。
* 在以下求解过程中,我们把骰子看作是有序的。
* 例如当n=2时,我们认为(1,2)和(2,1)是两种不同的情况
*/
private stati
看别人的博客,觉得心情很好
Cb123456
博客 心情
以为写博客,就是总结,就和日记一样吧,同时也在督促自己。今天看了好长时间博客:
职业规划:
http://www.iteye.com/blogs/subjects/zhiyeguihua
android学习:
1.http://byandby.i
[JWFD开源工作流]尝试用原生代码引擎实现循环反馈拓扑分析
comsci
工作流
我们已经不满足于仅仅跳跃一次,通过对引擎的升级,今天我测试了一下循环反馈模式,大概跑了200圈,引擎报一个溢出错误
在一个流程图的结束节点中嵌入一段方程,每次引擎运行到这个节点的时候,通过实时编译器GM模块,计算这个方程,计算结果与预设值进行比较,符合条件则跳跃到开始节点,继续新一轮拓扑分析,直到遇到
JS常用的事件及方法
cwqcwqmax9
js
事件 描述
onactivate 当对象设置为活动元素时触发。
onafterupdate 当成功更新数据源对象中的关联对象后在数据绑定对象上触发。
onbeforeactivate 对象要被设置为当前元素前立即触发。
onbeforecut 当选中区从文档中删除之前在源对象触发。
onbeforedeactivate 在 activeElement 从当前对象变为父文档其它对象之前立即
正则表达式验证日期格式
dashuaifu
正则表达式 IT其它 java其它
正则表达式验证日期格式
function isDate(d){
var v = d.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/i);
if(!v) {
this.focus();
return false;
}
}
<input value="2000-8-8" onblu
Yii CModel.rules() 方法 、validate预定义完整列表、以及说说验证
dcj3sjt126com
yii
public array rules () {return} array 要调用 validate() 时应用的有效性规则。 返回属性的有效性规则。声明验证规则,应重写此方法。 每个规则是数组具有以下结构:array('attribute list', 'validator name', 'on'=>'scenario name', ...validation
UITextAttributeTextColor = deprecated in iOS 7.0
dcj3sjt126com
ios
In this lesson we used the key "UITextAttributeTextColor" to change the color of the UINavigationBar appearance to white. This prompts a warning "first deprecated in iOS 7.0."
Ins
判断一个数是质数的几种方法
EmmaZhao
Math python
质数也叫素数,是只能被1和它本身整除的正整数,最小的质数是2,目前发现的最大的质数是p=2^57885161-1【注1】。
判断一个数是质数的最简单的方法如下:
def isPrime1(n):
for i in range(2, n):
if n % i == 0:
return False
return True
但是在上面的方法中有一些冗余的计算,所以
SpringSecurity工作原理小解读
坏我一锅粥
SpringSecurity
SecurityContextPersistenceFilter
ConcurrentSessionFilter
WebAsyncManagerIntegrationFilter
HeaderWriterFilter
CsrfFilter
LogoutFilter
Use
JS实现自适应宽度的Tag切换
ini
JavaScript html Web css html5
效果体验:http://hovertree.com/texiao/js/3.htm
该效果使用纯JavaScript代码,实现TAB页切换效果,TAB标签根据内容自适应宽度,点击TAB标签切换内容页。
HTML文件代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
Hbase Rest API : 数据查询
kane_xie
REST hbase
hbase(hadoop)是用java编写的,有些语言(例如python)能够对它提供良好的支持,但也有很多语言使用起来并不是那么方便,比如c#只能通过thrift访问。Rest就能很好的解决这个问题。Hbase的org.apache.hadoop.hbase.rest包提供了rest接口,它内嵌了jetty作为servlet容器。
启动命令:./bin/hbase rest s
JQuery实现鼠标拖动元素移动位置(源码+注释)
明子健
jquery js 源码 拖动 鼠标
欢迎讨论指正!
print.html代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>发票打印</title>
&l
Postgresql 连表更新字段语法 update
qifeifei
PostgreSQL
下面这段sql本来目的是想更新条件下的数据,可是这段sql却更新了整个表的数据。sql如下:
UPDATE tops_visa.visa_order
SET op_audit_abort_pass_date = now()
FROM
tops_visa.visa_order as t1
INNER JOIN tops_visa.visa_visitor as t2
ON t1.
将redis,memcache结合使用的方案?
tcrct
redis cache
公司架构上使用了阿里云的服务,由于阿里的kvstore收费相当高,打算自建,自建后就需要自己维护,所以就有了一个想法,针对kvstore(redis)及ocs(memcache)的特点,想自己开发一个cache层,将需要用到list,set,map等redis方法的继续使用redis来完成,将整条记录放在memcache下,即findbyid,save等时就memcache,其它就对应使用redi
开发中遇到的诡异的bug
wudixiaotie
bug
今天我们服务器组遇到个问题:
我们的服务是从Kafka里面取出数据,然后把offset存储到ssdb中,每个topic和partition都对应ssdb中不同的key,服务启动之后,每次kafka数据更新我们这边收到消息,然后存储之后就发现ssdb的值偶尔是-2,这就奇怪了,最开始我们是在代码中打印存储的日志,发现没什么问题,后来去查看ssdb的日志,才发现里面每次set的时候都会对同一个key