复习JavaScript时的笔记

复习JavaScript时的笔记(自己看的)

跟着w3cSchool复习时，一些没记住的东西。没有顺序逻辑的内容。

• Math类
  Math.round()四舍五入
  Math.random() 0~1之间随机数
• 正则表达式
  RegExp 对象

var patt1=new RegExp(“e”);
document.write(patt1.test(“The best things in life are free”)); //输出true

exec()
var patt1=new RegExp(“e”);
document.write(patt1.exec(“The best things in life are free”)); //输出 eeee

compile()
var patt1=new RegExp(“e”);
document.write(patt1.test(“The best things in life are free”));
patt1.compile(“d”);
document.write(patt1.test(“The best things in life are free”));//改变RegExp，输出trueflase

• 所有浏览器的宽高

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

• 警告框：alert(文本)
• 确认框：confirm(文本)
• 提示框：prompt(“文本”,”默认值”)
• 计时事件
  setTimeout()//未来的某时执行代码
  clearTimeout()//取消setTimeout()
• 下拉列表
  var mylist=document.getElementById(“myList”)
  document.getElementById(“favorite”).value=mylist.options[mylist.selectedIndex].text

• parseFloat() 函数
  可解析一个字符串，并返回一个浮点数。
  该函数指定字符串中的首个字符是否是数字。如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

• filter:alpha(opacity=100)
  fliter是滤镜属性，alpha是css中的函数，opacity参数代表透明度，它的值为0—100，这个属性和现代浏览器中的opacity属性是一个意思

• xmlns
  可以在文档中定义一个或多个可供选择的命名空间

• alt
  规定在图像无法显示时的替代文本
• offset家族
  offsetWidth = width + border + padding

offsetLeft, offsetTop 子盒子到父盒子边框到边框的距离

offsetParent 与 parentNode 区别 ：
前者 ——返回父级，不一定是亲爸爸
后者——无CSS定位（position: absolute/relative）时，取body的距离；有CSS定位时，取最近的那个父级

offsetTop 与 style.top 区别：
前者——可以返回无定位盒子的距离左侧的位置，返回值是数字，且只读
后者——不可以返回无定位盒子的距离左侧的位置，返回字符串（数字+单位），且可读写

• line-height 行高 实际高度取决于内容的多少
• height 高不变

跟着大神做了项目练习，个别笔记：
Respect—–https://www.jianshu.com/p/2961d9c317a3

1.图形列表：移入移出改变透明度
先建一个类，函数里直接调用。

 #imgList li.current img{opacity:1;filter:alpha(opacity=100);}

 oLi[i].onmouseover = function ()
{
            this.className = "current"  
        };
        oLi[i].onmouseout = function ()
        {
            this.className = "" 
        }

2.图片点击放大，左右切换/弹出层
利用display = “block”;切换状态
3.简易选项卡

   oUl[n].style.display = "none";
   oUl[this.index].style.display = "block"

“`

4.年历 建一个数组，替换内容

    var oArray = [
    "元旦：1月1日至3日放假三天。",
    "春节：2月2日至8日放假7天。",
    "妇女节：3月8日妇女节，与我无关。",

];
        for(var n = 0; n < oLi.length; n++) 
        ｛oLi[n].className = "";｝
        this.className = "current";
        oP.innerHTML = oArray[this.index];
        oStrong.innerHTML = this.index + 1;

5.下拉播放列表
style.display = style.display==”none”? “block”:”none”
oH2.className = style.display==”none”? “open”:”“

例：greeting = (visitor ==”PRES”)? “Dear President”:”Dear”//如果变量visitor中的值是“PRES”，则向量greeting赋值Dear President，否则赋值”Dear”

6.鼠标移过，图片路径改变
使用空div标签，用来放正在加载图片
正则替换：img.src = oImg[0].src = this.src.replace(/small/,”big”) //把路径里的small换成big

7.复选框
dl定义列表 创建一个普通的列表
dt ->definition title 创建列表中的上层项目
dd ->definition description 创建列表中的最下层项目

判断是否全选的函数->isCheckAll函数
全选/全不选: oInput[i].checked = this.checked
反选： oInput[i].checked = ! oInput[i].checked
根据复选个数更新全选框状态

8.两个数比大小
正则替换法：/^\d{2}$/ ：验证未来给出的值是否为数字，且为两位数，返回true/false
/ 后开始；^ 匹配输入字符串的结束位置；\d 数字0-9; {2} 匹配2次;$
$匹配输入字符串的结束位置

将问号替换成较大的那个数： aSpan.innerHTML = Math.max(aInput[0].value,aInput[1].value);
test()函数 检测一个字符串是否匹配某个模式

9.简易计算器
eval(string)函数 计算 某个字符串并执行其中的JS代码
substr() 函数 –stringObject.substr(start,length)
在字符串中抽取从star下标开始的指定数目的字符
search()函数 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，如果没有找到任何匹配的子串，则返回-1

replace(regexp/substr,replacement)
$1 与regexp中的第1到第99个子表达式相匹配的文本
$ & 与regexp相匹配的子串
$` 位于匹配子串左侧的文本
$' 位于匹配子串右侧的文本
$$ 直接量符号