day26-web前端

1 基础语法(对象)

1.1什么是对象

对象-和python中的对象一样,拥有对象属性和对象方法

1.2创建对象

创建对象字面量
对象字面量:{属性名1:属性值,属性名2:属性值}
注意:当属性值是普通值我们叫这个属性为对象属性;当属性值是函数时,这个属性就是对象方法

p1={name:'老王',age:10,eat:function(){Console.log('吃饭')}}

通过构造方法创建对象
声明构造方法(类似python声明类)-声明一个函数,使用函数名来模拟类名,在函数中通过this关键字来添加对象属性和对象方法
构造方法的函数名,首字母大写
this类似python中的self
通过构造方法创建对象
对象=new 构造方法()

function Person(name='张三',age=18,sex='女'){
    this.name=name
    this.age=age
    this.sex=sex
    //添加对象方法
    this.eat=function(food){
        console.log(this.name+'在吃'+food)
    }
    //返回对象
    return this
}
//创建person对象
p3=new Person()
p4=new Person('小明')

函数中this关键字
当调用函数的时候前面加关键字new,就是这个函数当成构造函数创建对象,函数中的this就是当前对象;
直接调用函数的时候,函数中的this是window对象

1.3使用对象属性

a.对象.属性
b.对象[属性名]

var t='age' 
p5=new Person('小花',20,'女')
console.log(p5.name,p5['sex'],p5[t])

1.4修改对象属性的值

属性存在的时候是修改,不存在的时候就是添加
对象.属性=值
对象[属性名]=值
给对象添加属性只作用于一个对象,不影响其他对象
构造方法名(类名).prototype.属性=值 给指定构造方法创建的所有的对象都添加指定的属性

Person.prototype.aaa='123'
console.log(p5.aaa)

创建学生类,并对其按分数进行排序

function Student(name,age,score){
    this.name=name
    this.age=age
    this.score=score
    return this
}   
s1=new Student('小明',18,88)
s2=new Student('小王',15,98)
s3=new Student('小法',16,77)
students=[s1,s2,s3]
//sort方法排序后,原数组会改变,也会产生新的数组
new_students=students.sort(function FUN(a,b){
        return a.score-b.score})
console.log(students)

2 DOM获取节点

2.1什么是DOM(文档对象模型)

DOM是document object mode的缩写
DOM模型就是一个树结构,里面是由各种节点组成

2.2document对象

document对象是js中写好的一个对象,代表的是网页内容结构,代表的是网页的内容结构
通过document对象可以拿到网页中所有内容对应的节点

2.3获取节点(在js中获取网页中的标签)

2.3.1通过标签的id获取

通过标签的id值来获取指定的标签
document.getElementById(id值) -返回节点对象
如果html中同样的id对应的标签有多个,只能取一个。所以一般在使用id的时候id要唯一

var pNode=document.getElementById('p1')
console.log(pNode)

2.3.2通过标签名来获取

document.getElementsByTagName(标签名) - 返回的是一个数组,数组中是节点

var aNodeArray=document.getElementsByTagName('a')
console.log(aNodeArray)
for(x in aNodeArray){
    拿到aNodeArray对象中的所有属性,这儿除了a标签以外还有length,item等其他非标签对象
    aNode=aNodeArray[x]
    console.log(x,aNode)
    只对标签进行操作
    aNode=aNodeArray[x]
    if(typeof(aNode)=='object'){
        console.log(aNode,'是标签')
    }
}

2.3.3通过类名来获取

document.getElementsByClassName(类名)-获取所有class属性值是指定的值的标签,返回的是一个数组对象

var c1NodeArray=document.getElementsByClassName('c1')
console.log(c1NodeArray)

2.3.4通过name属性的值获取(了解)

console.log(document.getElementsByName('username'))- 返回一个节点数组对象

console.log(document.getElementsByName('username'))

3DOM间接获取节点

3.1获取父节点

子节点.parentElement - 获取子节点对应的父节点

<body>
    <div id="box1">
        box1
        <div id="box11">div11</div>
        <div id="box12">div12</div>
        <div id="box13">div13</div>
    </div>
</body>
var box11Node=document.getElementById('box11') //获取节点
var box1Node=box11Node.parentElement //获取父节点法一
var box1Node2=box11Node.parentNode //获取父节点法二
console.log(box1Node,box1Node2)

3.2获取子节点

a.获取所有的子节点
父节点.children-返回一个数组对象

var allChild=box1Node.children
console.log(allChild)

父节点.childNodes - 获取父节点下所有的内容(包括子节点和文本)

var allChird2=box1Node.childNodes
console.log(allChird2)

b.获取第一个字节点
父节点.firstElementChild

var childNode=box1Node.firstElementChild
console.log(childNode)

c.获取最后一个子节点
父节点.lastElementChild

var childNode2=box1Node.lastElementChild
console.log(childNode2)

4创建添加和删除节点

    获取节点
var pNode=document.getElementById('p1')
获取标签内容
var content=pNode.innerHTML
修改标签内容
pNode.innerHTML='我不是段落'
获取标签样式中的文字颜色
var pColor = pNode.style.color;
修改标签样式
pNode.style.color = 'salmon'
pNode.style.fontSize = '30px'

4.1 创建节点

document.createElement(标签名) - 创建指定标签节点(创建后不会自己添加到浏览器上)
标签节点就是标签对象,可以通过document去网页中获取到,也可以自己创建
a.节点属性
标签对象中有相应的标签相关的属性,可以通过标签节点获取或者修改这些属性值
例如,a标签节点有:href属性,id属性,className属性,style属性等
img标签节点有:src属性,id属性,style属性,alt属性,title属性等
b.innerHTML和innerText属性
innerHTML-双标签的标签内容(包含其他标签)
innerText-双标签的标签内容(侧重只有文字)

创建一个div标签对象
var divNode=document.createElement('div')
divNode.innerText='写的都是什么鬼玩意儿'
创建一个img标签对象
var imgNode=document.createElement('img')
imgNode.src='img/a1.jpg'

4.2添加节点

a.在指定的标签中的最后添加一个节点
父节点.appendChild(需要添加的节点)

var div1Node=document.getElementById('div1')
div1Node.appendChild(divNode)
    创建并添加一个节点的函数
function addDiv(){
    var divNode=document.createElement('div')
    div1Node.innerText='111'
    div1Node.appendChild(divNode)
}

b.在指定的节点前插入一个节点
父节点.insertBefore(新节点,指定节点) -- 在父节点中的指定节点前插入指定的节点

div1Node.insertBefore(imgNode,div1Node.firstChild)

4.3删除节点

父节点.removeChild(子节点) - 删除父节点中指定的子节点

div1Node.removeChild(imgNode)
div1Node.removeChild(div1Node.lastChild)

4.4清空标签(删除所有的子标签)

    删除父标签中所有的子节点
div1Node.innerHTML=null
    节点.remove()-将节点从浏览器中删除
div1Node.remove()

删除一个标签的函数

function close1(){
    var adNode=document.getElementById('ad')
    通过父标签删除
    adNode.parentNode.removeChild(adNode)
    直接删除
    adNode.remove()
    将要删除的标签隐藏(未删除)
    adNode.style.display='none'
}

产生随机数
Math.random()-产生随机数0~1(小数)
parseInt()-转换成整数
parseFloat()-转换成小数

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容