动脑学习笔记-javascript基础

javascript基础

数据

变量

分为字符串,数字,undefined, null,对象
undefined类型是只声明了变量,但是没赋值
可以使用typeof()函数来查看变量类型

例子

var weight=160;
var weightIncrease="2.5斤"
// 返回值是"162.5斤"  #整数和字符串类型相加时,会自动把整型转为字符串
weight+weightIncrease  
//把字符串转为整型的函数有2个,用法如下
parseFloat(weightIncrease)  , parseInt(weightIncrease)

字符串的处理

var words = "hello"
words.length   //字符串长度
words.charAt(0)  //获得words中的第一个字符
words.charAt(words.length -1)  //获得最后一个字符
words.indexof('l')  //获得第一个字母'l'的索引号
words.lastindexof('l')  //获得最后一个字母'l'的索引号
words.substring(0,3)   //截取字符串中的前三个字符
words.replace('h','H')  //把h替换成H, 也可替换he为she
 
words = ('你好''美女')
words.split(', ')  //split函数,以逗号为分隔符来切割数组,返回的结果是一个数组["你好","美女"]
var newwords = words.split(',')  //重新赋值给一个变量
newwords[0]  #返回"你好"

数组

var trackCD1= ['长城,'农民','工人']
var tarckCD2= ['红花','绿叶']
 
typeof(trackCD1)//返回结果为object
 
1. trackCD1.push('遥望','家乡')  //在后面追加
2. trackCD1.pop()//删除最后一个元素,并弹出
3. trackCD1.shift()  //删除第一个元素,并弹出
4. delete trackCD1[1]  //删除第一个元素,但是位置还存在,只是设为了undefied
5. trackCD1.splite(1)  //这个可以彻底删除第一个元素
6. var tracks = trackCD1.concat(trackCD2)   //合并2个数组元素

流程控制

if语句

&&表示与;||表示或

var weather = '晴天',temperature = 25;
if ((weather === '晴天') && (temperature <=26)) {
    alert('心情不错');
}
else if (weather === '下雨') {
    alert('忧郁');
}
else {
    alert('心情忧郁');
}

switch语句

var weather = '下雨';
switch (weather) {
case '下雨':
        alert('忧郁');
        break;
case '晴天':
        alert('心情不错');
        break;
default:
        alert('心情糟糕');
        break;
}

while语句

//控制台输出1-10的奇数
var i = 0;
while (i < 10) {
    i++;
    if (i % 2 === 0) {
        continue;
    }
    console.log(i);
}

for语句

var week = ['周一', '周二', '周三' , '周四' , '周五']
for (var i = 0; i < week.length; i++) {
    console.log(week[i]);
}

函数

定义函数

function alertMessage (message) {
        alert(message);
}
alertMessage('您好');
 
 
//可以写上message形参,也可以为空,如下
function alertMessage () {
        alert('hello!');
}
alertMessage();

函数表达式

var alertMessage = function (message) {
        alert(message);
}
alertMessage('hello');
 //为匿名函数,并赋值给变量alertMessage,然后可把这个变量当函数用,传递参数。
function (message) {} 

对象

创建对象及添加属性

var beyond = {};  //创建了一个空对象 beyond
//添加属性的2种方式,如下
beyond.formedIn = '1983';
beyond['foundedIn'] = '香港';

//也可以在创建对象的时候添加对象
var beyond = {
    formedIn:'1983', 
    foundedIn:'香港',
    artist:['黄家驹','罗贯中','刘翔']
};
//访问数组内容:
beyond.artist[1]

更新对象属性

//修改属性
beyond.foundedIn = '台湾'   
//删除属性
delete beyond.foundedIn     

添加方法

var beyond = {
    formedIn:'1983', 
    foundedIn:'香港',
    artist:['黄家驹','罗贯中','刘翔']
};
//这里添加了一个showArtist的方法
beyond.showArtist = function () {
   for (var i = 0; i < this.artist.length; i++) {
        document.writeln(this.artist[i]);
    }
};
beyond.showArtist();

说明:
this表示beyond对象
document表示网页内容
function () {…} 为匿名函数

循环输出对象里的属性

//在上面的基础上添加如下
var property;
for (property in beyond) {
    console.log(beyond[property]);
}
//上面的代码会输出对象的属性和方法,如果不想输出方法内容,可以加一个if语句
var property;
for (property in beyond) {
    if (typeof beyond[property] !== 'function') {
    console.log(beyond[property]);
    }
}

DOM

获取文档中的元素的几种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 id="page-title">Coldplay</h1>
<p>乐队于1997年成立于伦敦</p>
<ul class="artist-list">
    <li>ChrisMatin</li>
    <li>Jonny Buckland</li>
    <li>Guy Beryyman</li>
    <li>Will Champion</li>
</ul>
</body>
</html>
  1. getElementById
比如<h1 id='page-title'>coldplay</h1>
//根据ID名,获取元素返回的对象
document.getElementById('page-title')  
//把对象赋值给一个变量,方便调用
var pageTitle = document.getElementById('page-title') 
  1. getElementsByTagName

//获取所有的li标签元素,返回类型为数组对象
document.getElementsByTagName('li')  
var list = document.getElementsByTagName('li')
//返回第一个<li>中的值
list[0]  

访问元素属性

var pageTitle = document.getElementById('page-title')
pageTitle.nodename    //返回标签名称H1
pageTitle.innerText     //返回标签文本coldpaly
pageTitle.parentNode  //返回父节点标签名,比如<body>
pageTitle.previousElementSibing  #返回上个兄弟节点元素
pageTitle.nextElementSibing   #返回下个兄弟节点元素
pageTitle.nextElementSibing.innerText   #返回下个兄弟节点中的文字
 
<ul class='artist-list'>
  <li>jack</li>
  <li>hong</li>
  <li>son</li>
</ul>
var artistList = document.querySelector('.artist-list');
artistList.childNodes  //查看所有子节点的元素,包括标签和文本
artistList.childElementCount   //查看子节点的元素数, 返回3
artistList.firstElementChild     //返回第一个子节点元素,<li>jack</li>
artistList.lastElementChild     //返回最后一个子节点元素,<li>son</li>
artistList.firstElementChild.innerText    //查看第一个子节点的文本,返回jack
artistList.firstElementChild.innerText = "马丁"    //修改jack值为"马丁"

在文档中创建并插入新的节点

var newMember = document.createElement('li')  //创建<li>元素节点
var newMemberText =  document.createTextNode('张三'); //创建文本节点
newMember.appendChild(newMemberText)  //把文本节点放在元素节点中
//指定<li>元素节点添加位置,并加在最后。
document.querySelector('.artist-list').appendChild(newMember);  
//删除刚才添加的<li>元素节点
document.querySelector('.artist-list').removeChild(newMember);  

使用insertBefore,在指定位置上插入节点
例子1

var artistList = document.querySelector('.artist-list');
//在原先第一个<li>前添加<li>节点
artistList.insertBefore(newMember, artistList.firstChild)  

例子2

var bandMember = document.createElement('h3')
bandMember.innerText = '乐队成员'
//在<ul classs="artist-list">..</ul> 上面的兄弟节点加上一行<h3>乐队成员
artistList.parentNode.insertBefore(bandMember, artistList.previousSibling)

事件

https://www.w3cschool.cn/javascript/js-htmldom-events.html

处理事件的方法

事件定义在script.js中添加如下内容

window.onload = function () {
var btn = document.querySelector('.btn');
btn.onclick = function(){
    console.log('被点了');
};
btn.onmouseover=function () {
    console.log('谁在上面');
};
btn.onmouseout=function () {
    console.log('离开了');
};
};

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。

addEventListener–为对象绑定事件

事件发生的时候,调用一个函数
windows.onload = function () {
    var btn = document.querySelector('.btn');
    function showMessage() {
     //showMessage()里可以加一个参数如event, 那么这里"被点了"
     //可以替换成event参数,这样可以返回一个对象。
        console.log('被点了'); 
    }
    btn.addEventListener('click', showMessage, false);
};

事件的传播

 在一个无序列表中,每一个<li>标签中都有一个图像,想实现点击图像就能显示<img>标签中的alt文本
 <ul class="list-group">
  <li class = "album" >
      <img src='1.jpg' alt='atlas'>
  </li>
  ...
</ul>

方法如下
var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log(event.target.alt);  这个会显示图像标签中<alt>中的文本
}
listGroup.addEventListener('click', showMessage,false);

更改事件传播方式

var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log('点击了 url');  //点击任何一个图片都会显示这个文本
}
listGroup.addEventListener('click', showMessage,false);
 
//在一个图片标签中加上一个id属性, 值为lost,这样点击这个图片时,会显示"点击了lost"
var lost = document.getElementById('lost');
function showAnotherMessage(event) {
    console.log('点击了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);
说明,当最后一个参数是false时,事件传递方式是从内到外;当为true时,方式为从外到内
所以此时点击lost图片是,控制台显示
点击了 lost
点击了 ul   
先触发<img>中的事件,显示"点击了 lost";然后到<li>,无事件;最后到<ul>中的事件,显示“点击了ul"
 
如果把listGroup.addEventListener中的true改为false,那么显示顺序为
点击了 ul
点击了 lost

停止传播事件

var listGroup = document.querySelector('.list-group')
function showMessage(event) {
    console.log('点击了 url'); 
    event.stopPropagation();
}
listGroup.addEventListener('click', showMessage,true);
 
var lost = document.getElementById('lost');
function showAnotherMessage(event) {
    console.log('点击了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);
 
这样点击lost图片时,只会在控制台显示"点击了url", 因为现在事件传播方式是从外到内,
并且使用了event.stopPropagation()来停止传播事件,所以就不会触发<img>中的事件
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值