whoops_butterfly的博客

原创 JS使用[]或.来访问对象属性

属性是一个变量，用来表示一个对象的特征(height/width/color...)；方法是一个函数，用来表示对象的操作。在JavaScript中，有两种方法访问对象的属性"."和"[ ]"。1、使用"."  "[ ]"访问对象属性      1> "."            oBtn.style.width       2> "[ ]"           

原创 JS作用域基本概念

域：空间，范围，区域作用：读，写作用域：在某个空间范围内，可以对数据进行读写操作浏览器‘JS解析器’（至少分为两步：预解析，逐行解读代码）：eg1:全局与局部作用域解析：eg2:上述代码解析过程：作用域链：从子集作用域返回到父集作用域的过程局部有能力去改外面（全局）的值eg3:eg4举一反三:eg5举一反三:注意：if,for不是一个作用域想要获取函数内的值：1>通过作用域链2>通过传...

原创 函数传参，参数类型

1.函数传参(函数传递参数)过程：传什么就接收什么，并且是一一对应的关系，参数可以多个。单个：两个或多个，以逗号隔开:2.参数=JS的数据类型（数字 字符串 函数 对象 布尔 未定义）可以多次执行，传不同的参：fn2('one');fn2('哈哈哈');function fn2(a){        alert(a.charAt(1));      //执行了两次，结果分别为n,哈}3.传函数1&...

原创 JS数据类型及相关操作

ECMAScript:核心，一种标准。typeof：判断数据类型。JS中的数据类型：Number(数字NaN)     字符串String(HTML中拿到的内容，类型都是字符串)     布尔boolean   函数   对象(obj、[数组]、{json}、null)     未定义undefinedNaN了解及应用实例:NaN:not a number 不是一个数字的数据类型一旦写程序时,出现...

原创 带缩略图的图片切换

无标题文档ul,li,p{ margin:0px; padding:0px;}#list{position:absolute; bottom:35px; left:282px; }#max{width:712px; height:568px; margin:0 auto; background:url(../img/back.png); position:relative;}#word{

原创 QQ列表展开收缩扩展（自定义属性，索引值练习）

无标题文档ul,h2{margin:0; padding:0;}li{list-style-type:none;}#list{margin:0 auto; border:#333 solid 1px; width:250px;}#list h2 {background: url(../img/ico1.gif) no-repeat 5px 14px #0C6; text-ind

原创 如何让样式跟着鼠标点击移动

如果想要让active的这个样式，随鼠标的点击移动，有以下两种思路：思路一：全部清空，当前添加思路二：清空上一个，当前添加1.用一个东西存储‘上一个’（最开始是空）：2.找到最初的‘上一个’：（直接找到初始化时最先有样式的li，也就是上一个【这里的num,之前定义的就是var num = 0;】）3.清空当前li的样式：

原创 开关onoff的使用

自定义一组开关（自定义属性）：

原创 自定义属性-索引值

HTML标签属性：标签自带的已有属性，比如input的type和value;要想操作元素身上的属性：元素.属性名 = 自定义属性：给一个元素添加的一个它原本没有的属性要想操作自定义属性，读和写两个操作:JS可以为任何HTML元素添加任意个自定义属性： 给多个标签添加自定义属性值（for循环）：

原创 Js-push方法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度,它直接修改 arrayObject，而不是创建一个新的数组。eg:

原创 自动生成10个li(提高版)-四次切换

无标题文档li{width:50px; height:50px; background:red; color:#fff; font-size:18px; text-align:center; line-height:50px; position:absolute ; top:0px; left:0px; font-weight:bold;} window.onload = func

原创 this指向及应用

this:指的是调用当前方法（函数）的那个对象

原创 for循环生成坐标—逢十换行/v字排列

逢十换行：无标题文档 div{width:50px;height:50px;background:#0C9;text-align:center;line-height:50px;color:#fff;font-size:18px;position:absolute;top:0px;left:0px;} window.onload = function(){ v

原创 JS基础—模拟手机短信发送

无标题文档#max{margin:0 auto; width:350px; height:500px; border:5px solid #000;}#content{width:350px; height:435px; border-bottom:2px solid #999; overflow:auto; overflow-x:hidden; position:relative;}

原创 HTML实现滚动条

overflow: scroll;这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll（默认值为visible），不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。eg:div {background-color:#00FFFF;width:100px;height:100px;over

原创 条件判断

1.2.实例：点击按钮，使两张图片切换（JS部分）：3.

转载 什么时候用相对定位或绝对定位

要理解定位你要先理解文档流，在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。111222而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。111222如上面的实例，111和222会重叠，审查元素你会发现222有实际位置，111没有位置。他是使用left，right，top，bo

原创 JS基础学习记录

JS中如何获取元素：  1.通过Id名称来获取元素——静态方法：       document.getElementById("id名");  2.通过标签名来找到元素——动态方法：      document.getElementsByTagName("标签名");  3.如果整个页面只有它一个标签：     eg:        那我们找到body或者title可以用如下方式：        ...

原创 定位 浮动 透明度

定位：浮动

原创 记录—块元素和内联元素

inline-block（内联块）:先有如下代码：无标题文档 div,span{ width:200px; height:200px; background:red; } div1 div2 span1 span2此时页面效果：之后我们加上di

原创 选择器优先级

优先级：代码执行生效的顺序基础选择器优先级：行间样式(style)>id选择器>类选择器>标签选择器包含选择器优先级计算技巧：首先对它们进行归类，赋予他们值（类似于人民币面值）：行间样式 1000id选择器 100类选择器 10标签选择器 1

原创 css reset

原创 小白训练营结业作业

HTML： My Blog 文章 图片 音乐 视频 哪里有土，哪里有水，哪里就长着草。

原创 简易的登录界面

登陆界面 body{ background-image: url(../图片/背景.jpg); } #main{ width: 280px; height: 360px; background-image: url(../图片/登陆背景.jpg);

原创 卡片二【优化】

#lside{ border: 8px outset black ; border-radius: 10px; box-shadow: 5px 5px 2px gray; width: 355px; height: 480px; background-ima

原创 html写卡片

#card{ border: 8px outset black; width: 355px; height: 480px; background-image: url(../图片/芈月.png); margin: 0px auto; padding: 1px 1px; } #

原创 用HTML写一首诗

用HTML写一首诗 #poem{ width: 300px; height: 200px; margin: 0 auto; text-align: center; color: green; font-size: 20px; } body{ background

原创 第一天学习_笔记

第一天——第一部分1>HTMLl基础知识：（1）HTML初步了解：     % 它是一种描述网页的超文本标记语言     %标记语言是一套标记标签，它使用标记标签来描述网页（2）HTML标签     %格式：     %成对出现     %eg:前者为开始标签，后者为结束标签（3）HTML文档=网页    %HTML 文档包含 HTML 标签和纯文本