JS笔记
1.素数 只能被1和自己整除
function isPrimerNumber(num){
var flag= true;
for(var i=2;i<num;i++){
if(num%i==0){
flag=false;
break;
}
}
return flag;
}
2.完全数 自己因数相加
var arr = [];
for(var num = 2; num < 100; num++) {
var sum1 = 0;
for(var i = 1; i < num; i++) {
if(num % i == 0) {
sum1 += i;
}
}
if(sum1 == num) {
arr.push(sum1);
}
}
3.各个位数和
var sum=0;
while(num!=0){
var i = num % 10;
sum+=i;
num=parseInt(num*10/100);
}
4.排序
一.冒泡排序
function sort(arr) {
for(var i = 0; i < arr.length - 1; i++) {
for(var j = 0; j < arr.length - 1 - i; j++) {
if(arr[j] > arr[j + 1]) {
var c = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = c;
}
}
}
return arr;
}
二.选择排序
function sort1(arr) {
for(var i = 0; i < arr.length - 1; i++) {
for(var j = i+1; j < arr.length; j++) {
if(arr[i] > arr[j]) {
var c = arr[j];
arr[j] = arr[i];
arr[i] = c;
}
}
}
return arr;
}
三.sort（） 默认情况下，按照字符的ASCII码进进行排序，如果数组中是数值，也会自动转化成字符
arr2.sort(); [9, "a", "d", "s"]
arr2.sort(function(a,b){return a-b;}) //升序 [2, 4, 9, 45, 456]
arr2.sort(function(a,b){return Math.random()-0.5;}) //随机排序
5.数组
一.二维数组排序 先进行横排序，再进行竖排序，最后一维数组
用一个新的数组接收横竖的最大值
for(var i = 0; i < 2; i++) {
var max = arr1[i][0];
for(var j = 0; j < 2; j++) {
if(max < arr1[i][j]) {
max = arr1[i][j];
}
}
brr.push(max);
}
for(var j = 0; j < 2; j++) {
var max = arr1[0][j];
for(var i = 0; i < 2; i++) {
if(max < arr1[i][j]) {
max = arr1[i][j];
}
}
brr.push(max);
}
for(var z = 0; z < brr.length; z++) {
var smax = brr[0];
if(smax < brr[z]) {
smax = brr[z];
}
}
二.添加数
function insertNum(arr,num){
var index;//num所在的位置
for( var i= 0 ; i < arr.length ; i++ ){
if(arr[i] >= num ){
index = i;//0
for( var j = arr.length ; j > index ; j-- ){
arr[j] = arr[j-1];
}
break;
}
}
if( index ){
arr[index] = num;
}else if( index == 0 ){
/*arr.shift();
arr.unshift( num );*/
arr[index] = num;
}else{
arr.push(num);
}
return arr;
}
三.数组新增方法
1.indexOf 判断一个元素苏在一个数组这个是否存在 如果存在就返回下标 否则返回-1
var newArr=[];
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i])==-1 ) {
newArr.push(arr[i]);
}
}
2.forEach 遍历数组，没有返回值
arr.forEach（function（item，index）{console.log（index）}）
3.filter 过滤 返回一个符合某个条件的数组
var filte=arr.filter(function(item){return item>5;})
4.map 映射 遍历数组-操作数组 返回操作后的数组 toFixed（2）保留两位小数
var resArr=arr.map(function(item){return (item*3).toFixed(2);})
类型为 string
5.reduce 归并
var res=arr.reduce(function(prev,next){
console.log(prev+" "+next+"");
return prev;
})
6.字符串
一.charAt（数字） 判断当前的个字符是否与某个数组中的对应的字符相同
arr.charAt（5）==“z”
二.charCodeAt(数字) 返回某个索引位置处的ASCII值
97<=arr.charCodeAt( 数字)<=122 a<=arr.charCodeAt( 数字)<=z
65<=arr.charCodeAt( 数字)<=90 A<=arr.charCodeAt( 数字)<=Z
48<=arr.charCodeAt( 数字)<=57 0<=arr.charCodeAt( 数字)<=9
三.fromCharCode（数字 ASCII值）获取某个ASCII值的对应的字符
String.fromCharCode(111)
四.indexOf（字符）判断某个字符是否存在于某个字符串中 返回字符首次出现的位置 找不到返回-1
arr.indexOf(“s”)
五.lastIndexOf（字符）判断某个字符是否存在于某个字符串中 返回字符最后出现的位置 找不到返回-1
arr.lastIndexOf(“s”)
六.substr（截取数字的开始位置数字，截取的长度）截取从指定位置开始执行长度的字符串
arr.substr(2, 5)
substring（截取数字的开始位置数字，可选可不选 end）
不选时，截取当前位置处到最后的字符串
选时，截取从指定位置处到end-1位置处的字符串
arr.substring(1,6)
七.replace（原字符串，要替换的字符）返回新替换的字符串 默认只能替换一次
arr.replace(“sa”,“dd”)
八.split（） 将某个字符串转换成数组
在括号里加“”时，将字符串中的每个字符转成一个数组中的值
不加“”时，将整个字符串转成数组
join（" “）将数组转换成字符串
arr.split().join(” ")
7.事件监听 事件委托 事件捕获 事件冒泡
设置事件监听 事件委托事要先设置好获取事件源对象
一.事件委托
var e=e||event
var tag=e.target||e.srcElement
if(tag.tagName.toLocaleLowerCase==“img”){tag.src=“img/sad11.jpg”}
二.事件监听 添加监听事件
$(“dd”).addEventListener(“click”,function(e){
var e=e||event
var tag=e.target||e.srcElement
if(tag.tagName.toLowerCase==“img”){
tag.src=“img/sad11.jpg”
}
})
三.toLocaleLowerCase 和 toLowerCase 区别 字符串转成小写字母
只有少数语言具有本地特色的大小写映射，所以该方法基本和toLowerCase一样
8.时间事件
var dd=new Date（）
var y=dd.getFullYear();
var m=toTow(dd.getMonth());
var d=dd.getDate();
var h=dd.getHours();
var mi=dd.getMinutes();
var s=dd.getSeconds();
var xingqi=dd.getDay(); 星期
var haomiao=dd.getTimes(); 得到毫秒值
function diff(start,end){
return Math.abs(start.getTime()-end.getTime())/1000;
}
var now=new Date();
var birth=new Date("1996-08-02 00:00:00");
console.log(diff(now,birth));
二.随机抽学生
先将随机出来的index存入到brr数组 再用brr.indexOf(index)!=-1 判断index是否存在 存在就减1 否则将index对应的数添加到arr中 最后输出
9.open 弹出窗口
var zi=open("弹出窗口路径","窗口名称","窗口属性")
opener 反向操作父窗口
window.opener.document.body.style.background="red";
zi.focus(); 让焦点一直停留在子页面
判断当主页面被关闭时，子页面是否被关闭
window.onunload=function(){ if ( !zi.closed ){ zi.close(); } }
10.页面
一.跳转页面
location.href=“url”
location.replace(“url”)
location.assign(“url”)
二.刷新页面
location.reload();
三.属性获取
obj.getAttribute(“属性名称”); 一般用于获取自定义属性
obj.属性=值
四.设置属性
obj.setAttribute(“属性名称”); 一般用于设置自定义属性
obj.属性=值
五.属性删除
removeAttribute(“要删除的属性名称”);
六.样式操作
obj.style.样式=值;
obj.className=“class名”;
obj.style.cssText=“font-size:20px;”
七.内容操作
innerHTML
innerText
outerHTML 操作到元素本身
value 表单
11.图片切换
一.自动切换
function autoplay(){
index++;
for(var i=0;i<aa1.length;i++){
for(var j=0;j<aa1.length;j++){
aa2[j].className=" ";
}
if(index==4){
index=0;
}
aa1[index].style.zIndex= ++zindex;
aa2[index].className=“red”;
}
}
for(var i=0;i<aa2.length;i++){
aa2[i].index=i;
aa2[i].onmouseenter=function(){
clearInterval(timer);
index=this.index-1;
autoplay();
}
aa2[i].onmouseout=function(){
timer=setInterval(autoplay,1000);
}
}
二.选项卡
for(var i=0;i<aa.length;i++){
aa[i].index=i;
aa[i].onclick=function(){
for(var j=0;j<aa.length;j++){
aa[j].className=" ";
con[j].style.display="none";
}
this.className="on";
con[this.index].style.display="block";
}
}
12.dom节点
父节点：parentNode
前一个兄弟节点：previousElementSibling
下一个兄弟节点：nextElementSibling
第一个兄弟节点：firstElementSibling
最后一个兄弟节点：lastElementSibling
一.childNodes 元素文本
二.nodeType
返回的节点值为1 节点是一个元素节点
返回的节点值为2 节点是属性节点
返回的节点值为3 节点是文本节点
返回的节点值为8 节点是注释节点
dd.nodeType
三.节点的动态操作
document.createElement(""); 创建元素节点
document.createTextNode(" "); 创建文本节点
ss.cloneNode（true）true表示深度克隆 即克隆
对象又克隆对象的内容 如果没有参数 只克隆该对象本身
父节点.appendChild（子节点）
父节点.removeChild（子节点)
父节点.insertBefore（要添加的子节点 ss，参照节点 a1.childNodes[0]）
父节点.firstElementChild
父节点.lastElementChild
父节点.insertBefore（要添加的子节点 ss，参照节点 a1.childNodes[0]）
var ss=document.createElement("div");
var sss=document.createTextNode("6666");
a1.appendChild(ss);
a1.insertBefore(ss,a1.childNodes[0]);
a1.removeChild(ss);
13.键盘事件
e.keyCode document.onkeydown
13 enter 37left 40bottom 39right 38top 65a 83s 68d 87w
li.scrollIntoView();//让li所在可视区的滚动条在最低端显示
14.鼠标事件
一.clientX clientY 如果不触发滚动条想过和pageXpageY一样，如果触发滚动条，获取到可视口顶端或左端的距离
二.pageX pageY 获取距离文档顶端或左端的距离 一定要用 onmousemove
三.offsetX offsetY 获取内侧的偏移量 相对于文档 e.offsetX e.offsetY
四.鼠标一串串
先让鼠标的移动位置赋值给div块的第一个，然后循环从div的长度减1，把div[i]的宽度和高度赋值为div[i-1]
var e=e||event;
var x=e.pageX;
var y=e.pageY;
odiv[0].style.left=x+"px";
odiv[0].style.top=y+"px";
for(var i=odiv.length-1;i>0;i--){
odiv[i].style.left=odiv[i-1].style.left;
odiv[i].style.top=odiv[i-1].style.top;
}
五.阻止事件冒泡 兼容
e.cancelBubble IE e.stopPropagation
e.stopPropagation？window.event.cancleBubble=true?e.stopPropagation
cursor:pointer;
六.鼠标兼容事件属性
判断鼠标操作的是 左键？滑轮？右键
function getButton(evt){
var e=evt || event;
if(evt){//高版本浏览器
return e.button;
}else if(window.event){//IE:浏览器
switch(e.button){
case 1:return 0; 左键
case 4:return 1; 滑轮
case 2:return 2; 右键
}
}
}
15.拖拽
一.拖拽要点
拖拽时，要先设置好定位position:absolute;鼠标不会变即e.pageX 要改变的是要移动的div块，即dd.offetLeft，鼠标在div块中心的位置：e.pageX-dd.offsetLeft dd.style.left=x+“px”
二.碰撞检测
碰撞检测的原则是 如果obj2上>obj1下 obj2左>obj1右 obj1上>obj12下 obj1左>=obj2右时 flag为false； 否则flag=true；
16.正则表达式
?,*,+,\d,\w 都是等价字符
?等价于匹配长度{0,1}
*等价于匹配长度{0,}
+等价于匹配长度{1,}
\d等价于[0-9]
\D等价于[^0-9]
\w等价于[A-Za-z_0-9]
\W等价于[^A-Za-z_0-9]
var reg = /^lichun8ee$/ ;
var reg = /^\d{6}$/; //一个邮编 六位数字
var reg = /^\w{6,}$/; //密码 ： 由字母和数字 下划线组成 至少6位
var reg = /^[a-z]{6,18}$/i; // 密码 6--18位 的字母 不区分大小写
var reg = /^[a-z$_](\w|\$){2,5}$/; //定义一个变量 不能用数字开头 只能由 字母 数字 下划线 $ 3--6
var reg = /^8\+9$/; // 8+9
var reg = /^[\u4e00-\u9fa5]{2,6}$/; //中文名字2-6
var reg = /^http:\/\/www\.baidu\.com$/; //http://www.baidu.com
var reg = /^\w+@\w+(\.\w+)+$/; // 邮箱 ewr@sina.com.cn
var str = $("txt").value;
alert( reg.test(str) );
一.密码强度 后面的g是全局匹配 不加只显示一个 从左到右
var reg=/\d+/g;
var regNum=/\d+/;//包含数字
var regChar=/[a-z]+/i;//包含字母
var regother=/[\W_]+/;//包含特殊字符
var regNum1=/^\d+$/;//只包含数字
var regChar1=/^[a-z]+$/i;//只包含字母
var regother1=/^[\W_]+$/;//只包含特殊字符
二.正则表达式方法
reg.test(str)
reg.exec(str) 根据正则表达式的规范在str中查找出满足条件的 返回长度为1的数组
var reg=/[a-z]+/g;//含有一个以上的字母
var str="发sd发dd发a发asd";
alert(reg.exec(str)) sd
str.search(reg) indexof() 返回字符串第一个满足正则规范的字符的位置
str.match(reg) //根据正则规范在str中实现全局查找
str.replace(reg) //根据正则规范，将满足正则条件的替换成* 返回替换后的新字符串
alert(str.search(reg)) 1
var reg=/[a-z]+/g;// g实现全局查找
var str="发sd发dd发a发asd";
alert(str.match(reg)) sd,dd,a,asd
alert(str.replace(reg,"*")); 发*发*发*发*
var str="good good study,day day up";
将数组中的good替换成best
alert(str.replace(/good/g,"best"));
var str="hello big,hello big beg bog bag bag";
将 bog beg bag big 替换成bug；
alert(str.replace(/b[aeoi]g/g,"bug"));
var str=" sdfassa arfafas ";
console.log(str.replace(/^\s+/g,"")) 去除开始位置的空白字符
console.log(str.replace(/\s+$/g,"")) 去除结束位置的空白字符
console.log(str.replace(/\s+/g,"")) 去除全部空白字符
console.log(str.replace(/(^\s+)|(\s+$)/g,"")); 一次性去除开始位置和结束位置的空白字符
查找字符串中是否含有中文,如果有就返回中文
var str="发sd发dd发a发asd";
var reg=/[\u4e00-\u9fa5]/;
if(reg.exec(str)){
alert("包含中文");
}
三.typeOf 用法
typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined."
if (typeof d == "number" ){
alert("number");
}
四.过滤敏感词 eval("/"+arr[i]+"/g");//将字符串转成 正则表达式
var arr=["tmd","dd","ff","rrr"];
for(var i=0;i<arr.length;i++){
var reg=eval("/"+arr[i]+"/g");//将字符串转成 正则表达式
//var reg=new RegExp(arr[i],"g")
content=content.replace(reg,"*")
}
17.json对象
一.基础
var json = {
‘balloon’: ‘12-img/balloon.png’,
‘love’: ‘12-img/heart.gif’,
‘knife’: ‘12-img/knife.gif’,
‘jiong’: ‘12-img/jiong.gif’,
‘shuai’: ‘12-img/shuai.gif’
};
for（var attr in json）{console.log（attr）;console.log(json[attr])} [“balloon”, “love”, “knife”, “jiong”, “shuai”]
二.字体选择
var str="";
var arr=t.value.split("");
for( var i = 0 ; i < arr.length ; i++ ){
str += “
}
show.innerHTML += str+"
";
三.垂直滚动条
取消文字选中状态
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
bar.onmousedown=function(e){
var e=e||event;
var disY=e.offsetY+box.offsetTop;
document.onmousemove=function(e){
var e=e||event;
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
var maxH=scroll.offsetHeight-bar.offsetHeight;
var y=e.pageY-disY;
if(y<0){
y=0;
}else if(y>maxH){
y=maxH;
}
bar.style.top=y+"px";
var a=maxH;
var b=content.offsetHeight-box.offsetHeight;
//b/a=top /y
var ctop=y*b/a;
content.style.top=-ctop+"px";
}
18.offsetHight offsetLeft offsetWidth offsetTop
一. 小米手机移动
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ if((“pic”).offsetTop<=-(1360-400)){
clearInterval(timer)
}else{
(
"
p
i
c
"
)
.
s
t
y
l
e
.
t
o
p
=
("pic").style.top=
("pic").style.top=(“pic”).offsetTop-20+“px”;
}
},50)
}
$("picUp").onmouseout=function(){
clearInterval(timer)
}
$("picDown").onmouseover=function(){
timer1=setInterval(function(){
if($("pic").offsetTop>=0){
clearInterval(timer1)
}else{
$("pic").style.top=$("pic").offsetTop+20+"px";
}
},50)
}
$("picDown").onmouseout=function(){
clearInterval(timer1)
}
二.放大镜
普通放大镜
#box{
width:350px;
height:350px;
border:1px solid black;
margin:200px;
position: relative;
}
#big{
position: absolute;
left:355px;
top:0px;
width:400px;
height:400px;
border:1px solid black;
overflow: hidden;
display: none;
}
#small{
position: relative;
}
#mask{
width:175px;
height:175px;
/*opacity: 0.3;*/
background: url(001.jpg);
position: absolute;
top:0;
left:0;
display: none;
}
#bigImg{
position: absolute;
}
#center{
width:350px;
height:350px;
background: gray;
opacity:.3;
position: absolute;
left:0;
top:0;
}
<div id="box">
<div id="small">
<img src="001.jpg" id="smallImg" alt="">
<span id="center"></span>
<span id="mask"></span>
</div>
<div id="big">
<img src="0001.jpg" id="bigImg" alt="">
</div>
</div>
$("small").onmouseover=function(){
$("mask").style.display="block";
$("big").style.display="block";
}
document.onmousemove=function(e){
var e=e||event;
var disx=box.offsetLeft+mask.offsetWidth/2;
var disy=box.offsetTop+mask.offsetHeight/2;
var x=e.pageX-disx;
var y=e.pageY-disy;
var maxL=box.offsetWidth-mask.offsetWidth;
var maxH=box.offsetHeight-mask.offsetHeight;
if(x<0){
x=0;
}else
if(x>maxL){
x=maxL;
}
if(y<0){
y=0;
}else
if(y>maxH){
y=maxH;
}
mask.style.left=x+"px";
mask.style.top=y+"px";
mask.style.backgroundPositionX=-x+"px";
mask.style.backgroundPositionY=-y+"px";
//大图的宽度：小图的宽度=bigleft:x
var bigleft=x*bigImg.offsetWidth/smallImg.offsetWidth;
var bigtop=y*bigImg.offsetHeight/smallImg.offsetHeight;
bigImg.style.left=-bigleft+"px";
bigImg.style.top=-bigtop+"px";
}
$("small").onmouseout=function(){
$("mask").style.display="none";
$("big").style.display="none";
}
三.楼层效果
/*
1、触发滚动条 ： 左侧的楼层号显示
2、点击每一个楼层号，对应的楼层显示到页面可视区
设置 document.body.scrollTop = 当前楼层号对应的楼层的offsetTop值（选项卡）
3、触发滚动条 ：
如果某个楼层号是高亮的，说明 这个楼层在可视区上是最大的
该楼层一定满足条件 ：
Math.abs(这个楼层的offestTop - 页面滚走的距离) < 楼层高度的一半
*/
var floor=document.getElementById("floor");
var floors=document.getElementsByClassName("floorli");
var boxs=document.getElementsByClassName("box");
window.onscroll=function(){
var stop=document.body.scrollTop || document.documentElement.scrollTop;
if(stop>100){
floor.style.display="block";
}else{
floor.style.display="none";
}
//根据滚动条的操作控制楼层号的显示
for(var i=0;i<boxs.length;i++){
if( Math.abs(boxs[i].offsetTop - stop) < boxs[i].offsetHeight/2 ){
floors[i].style.backgroundColor="orange";
}else{
floors[i].style.backgroundColor="#ccc";
}
}
}
for(var i=0;i<floors.length;i++){
floors[i].index=i;
floors[i].onclick=function(){
for(var j=0;j<floors.length;j++){
floors[j].style.backgroundColor="#ccc";
}
this.style.backgroundColor="orange";
document.body.scorllTop=document.documentElement.scrollTop=boxs[this.index].offsetTop;
}
}
$("bcTop").onclick=function(){
document.body.scorllTop=document.documentElement.scrollTop=0;
}
四.子弹移动
document.onkeydown=function(e){
var e=e||event;
var code=e.keyCode;
switch( code ){
case 37 :
odiv.style.left = odiv.offsetLeft - 5 + "px";
break;
case 38 :
odiv.style.top = odiv.offsetTop - 5 + "px";
break;
case 39 :
odiv.style.left = odiv.offsetLeft + 5 + "px";
break;
case 40 :
odiv.style.top = odiv.offsetTop + 5 + "px";
break;
case 32 :
var div=document.createElement("div");
div.className="pd";
document.body.appendChild(div);
div.style.top=odiv.offsetTop-div.offsetHeight+"px";
div.style.left=odiv.offsetLeft + odiv.offsetWidth/2-div.offsetLeft/2+"px";
timer=setInterval(function(){
div.style.top=div.offsetTop-5+"px";
},50)
if(div.offsetTop<- div.offsetHeight){
clearInterval(timer)
div.remove()
}
}
}
19.this指向 bind指向
一.bind指向
var odiv=document.querySelectorAll(“div”)[1];
setTimeout(function(){
this.innerHTML=“div内容”;
}.bind(odiv),2000)
20.面向对象
一.对象的两个方式
第一种：基于Object对象 工厂模式
工厂—创建多个对象
function ggg（name,age）{
//备料 – 创建对象
var person = new Object();
//加工 – 为对象添加属性和方法
person.name = name;
person.age = age;
person.getName = function(){
return this.name;
}
person.running = function(){
return this.name+“在跑步”;
}
//出厂-- 返回对象
return person;
}
//调用工厂
var ddd=ggg(“jack”,18);
console.log(ddd.running());
第二种：对象字面量方式（比较清楚的查找对象包含的属性及方法）
var person = {
name : ‘My name’,
age : 18,
getName : function(){
return this.name;
}
}
二.面向对象的调用方式 拖拽
拖拽功能
down：记录当前点击的位置相对div的偏移量 调用move up
move 改变div的left和top
up 取消移动和抬起
对象的思路： 操作的元素 就是对象的属性 init 初始化方法—获取要操作的方法 程序的入口
var drag={
init:function(){
box=document.getElementById(“box”);
box.οnmοusedοwn=drag.down;
},
down:function(e){
var e=e||event;
disx=e.pageX-box.offsetLeft;
disy=e.pageY-box.offsetTop;
document.οnmοusemοve=drag.move;
document.οnmοuseup=drag.up;
window.getSelection().removeAllRanges();
},
move:function(e){
var e=e||event;
box.style.left=e.pageX-disx+“px”;
box.style.top=e.pageY-disy+“px”;
document.οnmοuseup=drag.up;
},
up:function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
drag.init();
21.构造函数
一.拖拽
function Drag(){
this.div=document.getElementById(“box”);
this.init=function(){
this.down();
}
this.down=function(){//入口
var that=this;//将this存入到一个变量中
this.div.οnmοusedοwn=function(e){
//this 指向事件的触发者 div
var e=e||event;
//记录鼠标相对于div的偏移量
//that 指向构造函数new出来的对象
that.disx=e.pageX-that.div.offsetLeft;
that.disy=e.pageY-that.div.offsetTop;
//调用移动的功能
document.οnmοusemοve=function(e){
var e=e||event;
that.move(e);
}
//调用鼠标抬起功能
document.οnmοuseup=function(){
that.up();
}
return false;
}
}
this.move=function(e){
//改变了div的left 和 top
this.div.style.left=e.pageX-this.disx+"px";
this.div.style.top=e.pageY-this.disy+"px";
}
this.up=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
var d=new Drag();
d.down();
22.原型方法 混合用法 实例方法
一.原型方法
function dog(){
}
dog.prototype.name="jack";
dog.prototype.age="55";
dog.prototype.running=function(){
return this.name+"在跑";
}
var dd=new dog();
console.log(dd.running())
二.混合
function Dog(name,age){
this.name=name;
this.age=age;
}
Dog.prototype.running=function(){
return "在跑";
}
var dog1=new Dog("大黄",2);
console.log(dog1.running())
三.混合 导航条
window.onload=function(){
new DropMenu().init();
}
function DropMenu(){
this.list=document.getElementById("list");
}
DropMenu.prototype.init=function(){
var that=this;
for(var i=0;i<this.list.length;i++){
this.list[i].onmouseover=function(){
//this指向当前操作的一级菜单
//鼠标移入移出当前一级li的子元素显示
that.show(this.children[0]);//将要显示的子元素ul通过参数传递
}
this.list[i].onmouseout=function(){
that.hide(this.children[0]);//将要隐藏的子元素ul通过参数传递
}
}
}
//显示 obj指向要显示的二级菜单
DropMenu.prototype.show=function(obj){
obj.style.display="block";
}
//隐藏
DropMenu.prototype.hide=function(obj){
obj.style.display="none";
}
扫一扫
1116
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
