前端
文章平均质量分 76
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。
「已注销」
前端工程师 大数据分析师
展开
-
CSS 精灵
CSS 精灵图像精灵图像精灵 - 简单的例子实例例子解释图像精灵 - 创建导航列表实例例子解释图像精灵 - 悬停效果实例例子解释图像精灵图像精灵是单个图像中包含的图像集合。包含许多图像的网页可能需要很长时间才能加载,同时会生成多个服务器请求。使用图像精灵将减少服务器请求的数量并节约带宽。图像精灵 - 简单的例子我们使用以下单幅图像(“navsprites.gif”)而不是使用三幅单独的图像:通过使用 CSS,我们可以仅显示所需图像的某个部分。在下面的例子中,CSS 指定了显示 “nav原创 2021-03-20 10:35:31 · 2228 阅读 · 0 评论 -
CSS 渐变
CSS 渐变CSS 渐变CSS 线性渐变语法线性渐变 - 从上到下(默认)实例线性渐变 - 从左到右实例线性渐变 - 对角线实例使用角度语法实例使用多个色标实例实例使用透明度实例重复线性渐变实例CSS 径向渐变语法径向渐变-均匀间隔的色标(默认)实例径向渐变-不同间距的色标实例设置形状实例重复径向渐变实例CSS 渐变CSS 渐变使您可以显示两种或多种指定颜色之间的平滑过渡。CSS 定义了两种渐变类型:线性渐变(向下/向上/向左/向右/对角线)径向渐变(由其中心定义)CSS 线性渐变如需原创 2021-03-20 09:20:56 · 2828 阅读 · 0 评论 -
CSS3新增选择器
CSS3新增选择器元素关系选择器选择器名称示例示例的意义子选择器div>pdiv的子标签p相邻兄弟选择器img+pimg后面紧跟着的p标签将被选中通用兄弟选择器p~spanp元素之后所有同层级的span元素序号选择器举例意义:first-child第一个子元素:last-child最后一个子元素:only-child选择唯一子元素:only-of-type选择属于其父元素唯一的某类型元素:nt原创 2021-03-19 23:45:46 · 2912 阅读 · 0 评论 -
文档类型与节点类型
文档类型通用标记语言标准通用标记语言超文本标记语言可扩展标记语言GMLSGMLHTMLXML(1969)(1985)(1993)(1998)节点类型节点类型数值常量Element(元素节点)1Attr(属性节点)2Text(文本节点)3Comment(注释节点)8Document(文档节点)...原创 2020-03-26 11:12:43 · 6125 阅读 · 0 评论 -
初识DOM
DOM简介定义样式赋予行为ECMAScript BOM DOMCSSHTMLJavaScript样式设置属性系统表单与表格操作节点查找与筛选节点创建与删除节点探究DOMReady文档对象模型DOM:D:DocumentO:Object...原创 2020-03-26 10:57:58 · 5904 阅读 · 0 评论 -
window对象方法(open和close)
window对象 语法: window.open(pageURL,name,parameters) 功能: 打开一个新的浏览器窗口或查找一个已命名的窗口 参数说明: pageURL:子窗口路径 name:子窗口句柄(name声明了新窗口的名称,方便后期通过name对子窗口进行引用) parameters:窗口参数(各参数用逗号隔开) &nbs...原创 2020-03-24 18:28:48 · 8805 阅读 · 0 评论 -
window对象方法(alert-confirm-prompt)
window对象的方法 语法: window.alert("content") 功能: 显示带有一段消息和一个确认按钮的对话框 语法: window.confirm("message") 功能: 显示一个带有指定消息和OK及取消按钮的对话框 返回值: 如果用户点击确认按钮,则confirm()返回true 如果用户点击取消按钮,则confirm()返回false...原创 2020-03-24 12:08:27 · 8694 阅读 · 0 评论 -
window对象(全局对象)
windowwindow是浏览器的一个实例,在浏览器中,window对象又双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象1选择练习 1关于BOM下列说法正确的是?(选择两项)A BOM是Browser Object Model的缩写,是浏览器对象模型B BOM是Browser Object Model的缩写,是文档对象...原创 2020-03-24 11:10:58 · 7202 阅读 · 0 评论 -
事件类型(二)
事件类型(onfocus和onblur)onfocus事件用于:input标签type为text、passwordtextarea标签选择练习 1关于onfocus和onblur事件下列说法正确的是?(选择两项)A onfocus和onblur事件常用在表单元素中B onfocus事件是失去焦点时触发C onblur事件是获得焦点时触发D onfocus事件是获得焦点时...原创 2020-03-23 18:16:36 · 6115 阅读 · 0 评论 -
事件类型(一)
事件类型(onload)选择练习 1DOM中的哪个事件会在网页中的所有元素(文本、图像、CSS样式等)加载完后才触发执行?(选择一项)A onloadB onclickC onmouseoverD onblur正确答案: A参考解析:该题考察的是DOM的onload事件,正确选项为A;onload事件是在网页中的元素(图片、外部关联文件等)都完全加载到浏览器之后才执行。B:o...原创 2020-03-23 14:29:06 · 6103 阅读 · 0 评论 -
事件的绑定(二)
DOM 0级事件DOM 0级事件通过DOM获取HTML元素(获取HTML元素).事件=执行脚本 语法: ele.事件=执行脚本 功能: 在DOM对象上绑定事件 说明: 执行脚本可以是一个匿名函数,也可以是一个函数的调用不建议使用HTML事件的原因多元素绑定相同的事件时,效率低不建议在HTML元素中写JavaScript代码选择练习关于DOM0级事件...原创 2020-03-23 11:59:31 · 6019 阅读 · 1 评论 -
事件的绑定(一)
HTML事件HTML事件直接在HTML元素标签内添加事件,执行脚本 语法: <tag 事件="执行脚本"></tag> 功能: 在HTML元素上绑定事件 说明: 执行脚本可以是一个函数的调用鼠标事件onload:页面加载时触发onclick:鼠标点击时触发onmouseover:鼠标滑过时触发onmouseout:鼠标离开时触发onf...原创 2020-03-23 10:55:31 · 5919 阅读 · 0 评论 -
JS DOM事件
JS DOM事件为页面中的元素绑定键盘或鼠标事件,从而可以触发和实现我们想要的交互效果学习目标掌握什么是事件掌握HTML事件掌握DOM0级事件掌握常用的鼠标与键盘事件掌握this的指向什么是事件事件就是文档或浏览器窗口中发生的一些特定的交互瞬间...原创 2020-03-22 14:09:33 · 5871 阅读 · 0 评论 -
DOM基础(四)
DOM属性的设置与获取获取属性 语法: ele.getAttribute("attribute") 功能: 获取ele元素的attribute 说明: 1. ele是要操作的DOM对象 2. attribute是要获取的html属性(如:id、type) 设置属性 语法: ele.setAttribute("attribute",value) 功能:...原创 2020-03-22 13:56:21 · 5964 阅读 · 0 评论 -
DOM基础(三)
DOM(innerHTML和className)innerHTML 语法: ele.innerHTML 功能: 返回ele元素开始和结束标签之间的HTML 语法: ele.innerHTML="html" 功能: 设置ele元素开始和结束标签之间的HTML内容为htmlclassName 语法: ele.className 功能: 返回ele元素的c...原创 2020-03-22 10:53:30 · 6113 阅读 · 0 评论 -
DOM基础(二)
DOM(如何设置元素样式)设置元素样式 语法: ele.style.styleName=styleValue 功能: 设置ele元素的CSS样式 说明: 1. ele为要设置样式的DOM对象 2. styleName为要设置的样式名称(不能使用“-”连字符形式font-size,要使用驼峰命名形式fontSize) 3. styleValue为设置的样式值 ...原创 2020-03-22 10:03:03 · 6176 阅读 · 0 评论 -
DOM基础
DOM查找JavaScript DOM基础DOM是Document Object Model(文档对象模型)的缩写文档对象模型(DOM)是HTML和XML文档的编程接口,它提供了对文档的结构化的表述,并定义了一种方法可以使从程序中对该机构进行访问,从而改变文档的结构、样式和内容DOM查找方法 1 语法: document.getElementById("id") 功能: 返...原创 2020-03-21 22:17:07 · 6113 阅读 · 0 评论 -
JavaScript对象之String
charAt() 语法: stringObject.charAt(index) 功能: 返回stringObject中index位置的字符charCodeAt() 语法: stringObject.charCodeAt(index) 功能: 返回stringObject中index位置字符的字符编码substring() 说明: 语法及功能同slice完全一样...原创 2020-03-21 19:02:50 · 5916 阅读 · 0 评论 -
JavaScript之Date对象
如何创建一个日期对象语法:new Data()功能:创建一个日期时间对象获取年月日时分秒及星期的方法getFullYear():返回4位数的年份getMonth():返回日期中的月份,返回值为0-11getDate():返回月份中的某一天getDay():返回星期,返回值为0-6getHours():返回小时getMinutes():返回分...原创 2020-03-21 18:43:49 · 6015 阅读 · 0 评论 -
JavaScript之Math对象
Math.min() 语法: Math.min(num1,num2,...,numN) 功能: 求一组数中的最小值 返回值: NumberMath.max() 语法: Math.max(num1,num2,...,numN) 功能: 求一组数中的最大值 返回值: NumberMath.ceil() 语法: Math.ceil(num) 功能: 向上...原创 2020-03-21 18:31:37 · 5882 阅读 · 0 评论 -
JavaScript对象之数组(总)
数组方法总结push() 语法: arrayObject.push(newele1,newele2,...,neweX); 功能: 把它的参数顺序添加到arrayObject的尾部 返回值: 把指定的值添加到数组后的新长度unshift() 语法: arrayObject.unshift(newele1,newele2,...,neweX); 功能: 把它的参数顺...原创 2020-03-20 19:19:58 · 5875 阅读 · 0 评论 -
JavaScript对象之数组(七)
数组方法(indexOf和lastIndexOf)indexOf() 语法: arrayObject.indexOf(searchvalue,startIndex); 功能: 从数组的开头(位置0)开始向后查找 参数: searchvalue:必需,要查找的项 startIndex:可选,起点位置的索引 返回值: number,查找的项在数组中的位置,没有找...原创 2020-03-20 19:14:56 · 5888 阅读 · 1 评论 -
JavaScript对象之数组(六)
数组方法(splice)删除 语法: arrayObject.splice(index,count); 功能: 删除从index处开始的零个或多个元素 返回值: 含有被删除的元素的数组 说明: count是要删除的项目数量,如果设置为0,则不会删除项目。如果不设置,则删除从index开始的所有值 插入 语法: arrayObject.splice(ind...原创 2020-03-20 14:31:57 · 6602 阅读 · 0 评论 -
JavaScript对象之数组(五)
数组方法(concat和slice)concat() 语法: arrayObject.cancat(arrayX,arrayX,...,arrayX); 功能: 用于连接两个或多个数组 返回值: 数组reverse() 语法: arrayObject.slice(start,end); 功能: 从已有的数组中返回选定的元素 参数: 1. start(必...原创 2020-03-20 13:27:28 · 6438 阅读 · 0 评论 -
JavaScript对象之数组(四)
数组方法(join()、reverse()、sort())join() 语法: arrayObject.join(separator); 功能: 用于把数组中的所有元素放入一个字符串 返回值: 字符串reverse() 语法: arrayObject.reverse(); 功能: 用于颠倒数组中元素的顺序 返回值: 数组sort() 语法: arr...原创 2020-03-20 10:51:31 · 6507 阅读 · 0 评论 -
JavaScript对象之数组(三)
数组方法(push()-unshift()-pop()和shift())push() 语法: arrayObject.push(newele1,newele2,...,neweX); 功能: 把它的参数顺序添加到arrayObject的尾部 返回值: 把指定的值添加到数组后的新长度unshift() 语法: arrayObject.unshift(newele1,ne...原创 2020-03-19 22:16:57 · 6387 阅读 · 0 评论 -
JavaScript对象之数组(二)
Array数组(2)数组长度语法:array.length功能:获取数组array的长度返回值:number说明:通过设置length可以从数组的末尾移除项或向数组中添加新项把一个值放在超出当前数组大小的位置上时,会重新计算数组长度值,长度值等于最后一项索引加1选择练习1下面这段代码运行结果是?(选择一项)var arr=["blue","orange","yellow...原创 2020-03-19 17:53:49 · 6604 阅读 · 0 评论 -
JavaScript对象之数组(一)
Array数组(1)如何创建数组创建数组的基本方式有两种:1、使用Array构造函数 语法:new Array() 小括号()说明: &nb...原创 2020-03-19 15:50:49 · 8026 阅读 · 0 评论 -
JS函数(四)
求任意一组数的平均值选择练习想要获取到函数参数的数量,下列代码哪个可以实现?(选择一项)A argument.lengthB arguments.lengthC arguments(length)D arguments[length]正确答案: B参考解析:本题考察的是arguments的使用,正确选项为B;arguments.length可以获得传递的参数的个数编程练习...原创 2020-03-19 13:07:45 · 6472 阅读 · 0 评论 -
JS函数(三)
argumentsECMAScript中的参数在内部用一个数组表示,在函数体内通过arguments对象来访问这个数组参数说明:arguments对象只是与数组类似,并不是Array的实例[]语法访问它的每一个元素length属性确定传递参数的个数选择练习1关于arguments,下列说法正确的是? (选择两项)A arguments是数组对象B arguments.le...原创 2020-03-19 13:01:43 · 6508 阅读 · 0 评论 -
JS函数(二)
函数的返回值任何函数通过return语句,后面跟着返回的值来实现返回值说明:函数会在执行完return语句之后停止并立即退出return语句也可以不带有任何返回值,用于提前停止函数执行又不需要返回值的情况选择练习1关于return下列说法错误的是? (选择一项)A return后面必须跟返回值B return后面如果没有返回值,那么函数会在执行完return语句后停止并立即...原创 2020-03-19 12:26:35 · 6619 阅读 · 0 评论 -
JS函数(一)
JavaScript中的函数函数的作用通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行函数的定义函数使用function声明,后跟一组参数以及函数体,语法如下:function functionName([arg0,arg1,...,argn]){ statements;}说明:functionName是要定义的函数名,属于标识符[]中的arg0,a...原创 2020-03-18 23:32:49 · 6459 阅读 · 0 评论 -
JavaScript循环语句(二)
for嵌套嵌套当循环与循环发生嵌套时遵循下列规则:外层为假时,内层不执行先执行外层,再执行内层,直至内层的条件为假时再返回外层去执行选择练习1下列关于循环嵌套,说法错误的是?(选择一项)A、发生循环嵌套时,如果外层循环为假,不影响内层循环的执行B、先执行外层循环,再执行内层循环C、内层循环条件为假时,再返回外层循环去执行D、发生循环嵌套时,如果外层循环为假,那么内层...原创 2020-03-18 15:00:31 · 6128 阅读 · 0 评论 -
JavaScript循环语句(一)
for语句语法:for(语句1;语句2;语句3;){ 被执行的代码块}// 语句1:在循环(代码块)开始前执行// 语句2:定义运行循环(代码块)的条件// 语句3:在循环(代码块)已被执行之后执行编程练习小伙伴们,根据效果图,用循环写出代码。任务先写出初始的变量值i=1写出它执行循环的条件i<=9每循环一次后变量值的增加i++输出内容到页面中,注...原创 2020-03-18 14:08:28 · 6039 阅读 · 0 评论 -
JavaScript分支语句(三)
switchswitch语句语法:switch(expression){ case value:statement; break; case value:statement; break; ...... default:statement;}编程练习1小伙伴们,尝试用switch语句来编写一段代码吧,实现如下要求:(1) 页面弹出输入框,提示“请输入您要查询...原创 2020-03-18 13:27:10 · 5943 阅读 · 0 评论 -
JavaScript分支语句(二)
if语句的嵌套编程练习1小伙伴们,判断用户输入的手机号是否是11位的数字,如果不是11位的纯数字,提示用户输入错误,是的话提示输入正确任务第一步:页面弹出输入框,需要用户输入自己的手机号码第二步:对用户的手机号码进行判断,首先判断用户输入的号码是否是11位第三步:确定用户输入的号码是11位后,在此进行判断,用户输入的11位号码是否是纯数字第四步:输入的号码无误,弹出“号码输入正确”...原创 2020-03-18 12:09:01 · 6096 阅读 · 0 评论 -
JavaScript分支语句(一)
if语句if语句语法一:if(condition){ statement1;}语法二:if(condition){ statement1;}else{ statement2;}语法三:if(condition){ statement1;}else if(condition){ statement2;}...else{ statement3;}ale...原创 2020-03-18 10:23:52 · 5955 阅读 · 0 评论 -
JavaScript逻辑操作符(二)
逻辑或|| 或(只要有一个条件成立,返回true)说明:在有一个操作数不是布尔值的情况下,逻辑或操作不一定返回值,此时它遵循下列规则:如果第一个操作数隐式类型转换后为true,则返回第一个操作数1如果第一个操作数隐式类型转换后为false,则返回第二个操作数1如果有两个操作数是null,则返回null如果有两个操作数是NaN,则返回NaN如果有两个操作数是undefined,则返...原创 2020-03-17 19:05:49 · 5902 阅读 · 0 评论 -
JavaScript逻辑操作符(一)
逻辑与逻辑操作符&&:与||:或!:非逻辑与&& 与(只要有一个条件不成立,返回false)说明:在有一个操作数不是布尔值的情况下,逻辑与操作不一定返回值,此时它遵循下列规则:如果第一个操作数隐式类型转换后为true,则返回第二个操作数1如果第一个操作数隐式类型转换后为false,则返回第一个操作数1如果有一个操作数是null,则返回n...原创 2020-03-17 18:33:29 · 5902 阅读 · 0 评论 -
JavaScript数据类型(三)
JavaScript数据类型之数值转换数值转换有3个函数可以把非数值转换为数值:Number()parseInt()parseFloat()说明Number()可以用于任何数据类型parseInt()和parseFloat()则专门用于把字符串转换成数值 parseInt()parseInt():会忽略字符串前面的空格,直至找到第一个非空格字符说明par...原创 2020-03-16 09:27:56 · 6116 阅读 · 0 评论