前端
超超.
共同学习,共同努力,共同进步
展开
-
if和switch、计算器
if练习1<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>if练习1</title> <script type="text/javascript"> /* * 从键盘输原创 2019-01-09 19:33:42 · 492 阅读 · 0 评论 -
数组方法和字符串方法
数组数组的创建var aRr01 = new Array(1,2,3,'abc');//面向对象的方法创建var aRr02 = [1,2,3,'def'];//直接创建 推荐使用,性能更高获取数组的成员数量(长度)alert(函数名.length)alert(aRr02[3]); //获取从第4个位置的代码数组常用方法var aRr = [1,2,3,4];1、用-连接数组元...原创 2019-01-07 20:33:17 · 833 阅读 · 0 评论 -
条件判断语句
流程控制语句流程控制语句JS中的程序是从上到下一行一行执行的通过流程控制语句可以控制程序执行流程,使程序可以根据一定的条件来选择执行语句的分类1.条件判断语句2.条件分支语句3.循环语句条件判断语句 if语句 语法一: if(条件表达式){ 语句... } 语法二: if(条件表达式){ 语句... }else{ ...原创 2019-01-07 20:06:00 · 2106 阅读 · 0 评论 -
函数传参和匿名函数
变量和函数预解析alert(a)只把变量a的声明提前,赋值不提前,所以弹出undefined,表示它的值未定义alert(c)报错,c没有声明,这是真正的未定义var a = 123;调用函数:不会报错myalert();定义函数:function myalert(){alert(‘hello!’);}匿名函数有名字的函数:oDiv.onclick = mya...原创 2019-01-07 19:21:48 · 1148 阅读 · 0 评论 -
圆角、阴影、透明度和运动曲线
过渡动画格式:transition: all 500ms ease 1px;在哪产生动画、动画的时间、运动曲线、延迟圆角、阴影、透明度:圆角:border-radius: 50%;border-top-left-radius: 100px 50px;左上角为椭圆圆角border-top-left-radius: 100px;左上角为正圆圆角border-top-right-radiu...原创 2019-01-02 16:31:56 · 205 阅读 · 0 评论 -
js操作属性
js操作属性DOM是为了操作文档(网页)的API,document是它的一个对象整个文档加载完之后执行一个匿名函数:window.onload修改下面div中的title元素window.onload = function(){ document.getElementById('div1').title = "我看到了!";} //调用document.getElementById()...原创 2019-01-05 11:57:17 · 506 阅读 · 0 评论 -
运算符
一元运算符一元运算符,只需要一个操作数+ 正号:正号不会对数字产生任何影响- 负号:负号可以对数字进行符号的取反对于非Number类型的值,它会将先转换为Number,然后再运算可以对一个其他的数据类型使用+,来将其转换为number,它的原理和Number()函数一样自增和自减自增++:对于一个变量自增以后,原变量的值会立即自增1自增分成两种:后++(a++) 和 前++(++...原创 2019-01-05 11:18:15 · 94 阅读 · 0 评论 -
定时器
定时器弹框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器弹框</title> <style type="text/css"> .pop{原创 2019-01-07 20:39:37 · 103 阅读 · 0 评论 -
for知识点
1.打印1-100之间所有奇数之和<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> var原创 2019-01-14 18:58:55 · 351 阅读 · 0 评论 -
jQuery的操作
新增选择器<script type="text/javascript"> window.onload = function(){ var oDiv = document.querySelector('#div1'); alert(oDiv);//弹出[object HTMLDivElement],表示选择了该Div //如果要选择多个元素用querySelec...原创 2019-01-09 19:22:58 · 124 阅读 · 0 评论 -
面向对象
Math随机数<script type="text/javascript"> // var num = Math.random(); // alert(num);//弹出0-1之间的随机数 var a = 10; var b = 20; // var num = Math.random()*(b-a)+a; // alert(num);//弹出10-20之间的随机数...原创 2019-01-09 18:58:56 · 108 阅读 · 0 评论 -
封装函数和闭包
封闭函数封闭函数定义:(function(){……})();;(function(){var str = ‘欢迎访问我的主页’;alert(str);封闭函数其他的写法:在匿名函数前加“!”或者“~”,之后加“()”用变量的方式定义函数/*原来的写法:可以提前myAlert();function myAlert(){ alert('hello!');}*///函数用变...原创 2019-01-09 18:48:07 · 1658 阅读 · 0 评论 -
jQuery其他事件和 绑定事件bind和自定义事件
jQuery其他事件&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery其他事件&lt;原创 2019-01-14 21:09:39 · 292 阅读 · 0 评论 -
元素绝对位置和鼠标移入移出和 input框事件
元素绝对位置&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;元素绝对位置&lt;/title&a原创 2019-01-14 21:06:27 · 10332 阅读 · 0 评论 -
事件冒泡和定时器弹框和事件委托
事件冒泡&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &原创 2019-01-14 21:17:52 · 475 阅读 · 0 评论 -
正则和 正则表达式
正则<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正则</title> <style type="text/css"> </styl原创 2019-01-14 21:21:01 · 528 阅读 · 0 评论 -
jQuery-jsonp和 jsonp公开接口
jQuery-jsonp<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery-jsonp</title> <style type="text/css"&g原创 2019-01-14 21:20:18 · 599 阅读 · 0 评论 -
jQuery动画和循环
jQuery动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery动画</title> <style type="text/css"> .bo原创 2019-01-14 19:15:30 · 753 阅读 · 0 评论 -
浏览器的默认样式,内联元素,修改元素的性质,文档流,浮动
浏览器的默认样式我们浏览器默认的样式的有8个外边距和内边距,我们可以通过以下的代码 清除浏览器的默认样式 *{ margin: 0; padding: 0; }内联元素的盒模型常见的内联元素有 :span、a、img、iframe内联元素不能设置width和height设置水平内边距,内联元素可以设置水平方向的内边距水平外边距,内联元素支持水平方向的外边距为右边...原创 2018-12-25 13:31:22 · 565 阅读 · 0 评论 -
前端超链接
作业:风满楼代码如下:&lt;!DOCTYPE html&gt;&lt;a name="ding"&gt;&lt;/a&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"/&am原创 2018-12-19 11:33:07 · 441 阅读 · 0 评论 -
固定定位
position:fixed固定定位固定定位也是一种绝对定位,它的大部分特点都和绝对定位一样不同的是:固定定位永远都会相对于浏览器窗口进行定位固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit原创 2018-12-27 18:45:57 · 316 阅读 · 0 评论 -
绝对定位
position:absolute绝对定位属性:static:默认值没有定位absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。绝对定位:1.开启绝对定位,会使元素脱离文档流2.开启绝对定位以后,如果不设置偏移量,则元素的位置不会发生变化3.绝对定位是相对于离他最近的、开启了定位...原创 2018-12-27 18:42:25 · 421 阅读 · 1 评论 -
相对定位
position设置元素定位- 通过position属性来设置元素的定位 -可选值: -static:默认值,元素没有开启定位 -relative:开启元素的相对定位 -absolute:开启元素的绝对定位 -fixed:开启元素的固定定位(也是绝对定位的一种)当元素的position属性设置为relative时,则开启了元素的相对定位:1.当开启了元素的相对定位以后,而不设...原创 2018-12-26 23:10:58 · 5456 阅读 · 0 评论 -
解决高度塌陷
第一种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高度塌陷</title> <style type="text/css"> .box1{ bo原创 2018-12-26 23:02:59 · 315 阅读 · 0 评论 -
清除浮动
clear : none;可选值:- left,清除左侧浮动元素对当前元素的影响- right,清除右侧浮动元素对当前元素的影响- both,清除两侧浮动元素对当前元素的影响清除对他影响最大的那个元素的浮动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2018-12-26 22:59:08 · 175 阅读 · 0 评论 -
导航条设置
清除默认样式、去除项目符号、设置背景、设置宽度、设置居中、解决高度塌陷、转换块元素、设置文字居中、去除超链接的下划线代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导航条</title> &原创 2018-12-26 22:55:53 · 373 阅读 · 0 评论 -
简单布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简单布局</title> <style type="text/css"> /*清除默认样式*/ *{原创 2018-12-26 22:51:22 · 122 阅读 · 0 评论 -
列表和字体样式
列表1、无序列表: 使用ul和li来创建 前边用小圆点表示&amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;列表项1&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;列表项2&amp;lt;/li&amp;gt; &amp;lt;li&amp;gt;原创 2018-12-21 11:39:25 · 902 阅读 · 0 评论 -
文本标签
文本标签1、em:表示一段内容的着重点。用斜体显示格式:他们只是 <em>看起来</em> 很友好效果:他们只是 看起来 很友好2、strong表示一段内容的重要性。用粗体显示 格式:<strong>警告:任何情况下不要接近僵尸。</strong>效果 :警告:任何情况下不要接近僵尸。3、“ i ” 标签会使文本变成斜体。...原创 2018-12-20 20:40:26 · 127 阅读 · 0 评论 -
元素的层级和背景图片
z-index(数值)设置元素层级设置层级后,父元素层级在高也不会盖住子元素如果定位元素的层级是一样,则下边的元素会盖住上边的通过z-index属性可以用来设置元素的层级可以为z-index指定一个正整数作为值,该值将会作为当前元素的层级,层级越高,越优先显示对于没有开启定位的元素不能使用z-indexopacity设置元素透明背景opacity可以用来设置元素背景的透明,它需要...原创 2018-12-27 19:03:50 · 5559 阅读 · 0 评论 -
背景的偏移与定位和背景固定
background-position背景的偏移背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置可选值:该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置top left 左上bottom right 右下如果只给出一个值,则第二个值默认是center也可以直接指定...原创 2018-12-27 19:26:44 · 5008 阅读 · 0 评论 -
盒子模型
盒子模型1、一个盒子我们会分成几个部分:内容区(content)内边距(padding)边框(border)外边距(margin)2、边框的三个重要的条件:border-width: 10px; 边框的宽度 -border-width: 10px 20px 30px 40px如果是四个值的话,顺序是上右下左 -border-width: 10px 20px 30px 如果...原创 2018-12-24 20:35:21 · 84 阅读 · 0 评论 -
数据类型的转换、运算符
Number在JS中所有的数值都是Number类型,包括整数和浮点数(小数)表示的数字的最大值:Number.MAX_VALUE大于0的最小值:Number.MIN_VALUE如果使用Number表示的数字超过了最大值,则会返回一个:Infinity 表示正无穷Infinity 表示负无穷检查数据类型用:typeofNaN:是一个特殊的数字,表示Not A Number使用t...原创 2019-01-03 23:18:35 · 118 阅读 · 0 评论 -
变量、标识符和数据类型
字面量(常量)和变量:字面量(常量),都是一些不可改变的值:比如 :1 2 3 4 5 “hello”字面量都是可以直接使用,但是我们一般都不会直接使用字面量在js中使用var关键字来声明一个变量:var a; 声明变量为变量赋值:a = 123;声明和赋值同时进行:var b = 789;标识符在JS中所有的可以由我们自主命名的都可以称为是标识符如:变量名、函数名、...原创 2019-01-03 22:45:07 · 522 阅读 · 0 评论 -
js位置和语法
js代码位置js内部样式表,代码都写到script标签里边<script type="text/javascript">alert(“内容”) :控制浏览器弹出一个警告框document.write(“内容”) :可以向body中输出一个内容console.log(“内容”) :作用是向控制台输出一个内容</s...原创 2019-01-03 22:23:47 · 318 阅读 · 0 评论 -
表单和表单项
表单创建表单:这是一个空白的表单,还需要往里边添加不同的表单项<form action="服务器的地址"> </form> acting必须有值表单项使用input来创建一个注册文本框,它有一个type类型是text<input id="um" type="text" name="username">需要设置一个name来接收用原创 2018-12-29 11:48:23 · 1555 阅读 · 0 评论 -
表格的布局和完善clearfix
表格的布局以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了表格的列数由td最多的那行决定表格是可以嵌套,可以在td中在放置一个表格代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格的布局原创 2018-12-28 19:38:41 · 138 阅读 · 0 评论 -
表格、表格样式和长表格
表格(table)在html中表格的创建是需要table标签的tr:表示表格中的一行,有几行就有几对trtd:需要td来创建一个单元格,有几个单元格就有几个td用table来创建一个单元格,设置单元格的外边框1,宽度占页面的40%,位置居中,代码如下:<table border="10" width="80%" align="center">rowspan用来设置纵向的合...原创 2018-12-28 19:27:48 · 484 阅读 · 0 评论 -
简写背景属性和按钮练习
简写背景属性可以同时设置所有的背景相关样式:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>简写背景属性</title> <style type="text/css"&原创 2018-12-27 19:33:20 · 177 阅读 · 0 评论