javaScript 代码笔记

一些小笔记

var words = "Hello World";
console.log(words);

//区分大小写
//变量命名用驼峰命名法

js 变量，数据类型

在控制台中输入与输出

fullName
undefined
fullName +2
NaN
var fullName="王皓",weight=160
undefined
typeof(fullName)
"string"
typeof(weight)
"number"
var fullName="王皓",FirstName="王"
undefined
fullName+FirstName
"王皓王"
weight+2
162
var wei="2,2"
undefined
weight+wei
"1602,2"

words.substring(0,3)
"今天真"
words.replace('今天','昨天')
"昨天真开心啊"
words='今天，真开心啊'
"今天，真开心啊"
words.split(',')
["今天，真开心啊"]
var newWords=words.split(',')
undefined
newWords
["今天，真开心啊"]
newWords[0]
"今天，真开心啊"
words='今天,真开心啊'
"今天,真开心啊"
words.split(',')
(2) ["今天", "真开心啊"]
newWords[0]
"今天，真开心啊"
var newWords=words.split(',')
undefined
newWords[0]
"今天"



(6) ["今天", "明天", "后天", "lalala", "bbbb", "aaa"]
trackCD1.pop('aaa')
"aaa"
trackCD1
(5) ["今天", "明天", "后天", "lalala", "bbbb"]
trackCD1.shift()
"今天"

delete trackCD1[3]
true
trackCD1
(4) ["明天", "后天", "lalala", undefined × 1]
trackCD1.splice(3)
[undefined × 1]
trackCD1
(3) ["明天", "后天", "lalala"]
var a1=['a1','a2']
undefined
var a2=['aa1','aa2']
undefined
var a3=a1.concat(a2)
undefined
a3
(4) ["a1", "a2", "aa1", "aa2"]

if else

var weather = 'rainy';
if (weather === 'sunny' && (temperature <= 26)) {
    alert('sunny');
} else {
    alert('other');
}

switch (weather) {
    case 'rainy':
        alert('raniny');
        break;
    case 'sunny':
        alert('sunny');
        break;

    default:
        alert('soso');
        break;

}

while循环

var i = 0;
while (i < 10) {
    i++;
    if (i % 2 == 0) {
        continue;
    }
    console.log(i);

}

for循环

for (var i = 0; i < 10; i++) {
    console.log(i);
}

//输出数组
var week = ['SUN', 'MON', 'TUE', 'WEDN', 'THUR', 'FRI', 'SAT']

for (var i = 0; i < week.length; i++) {
    console.log(week[i]);
}

函数

function functionName(a,b){}

function alertMessage() {
    alert('hello');
}

alertMessage();


function alertMessage(message) {
    alert(message);
}

alertMessage('hello world');


var alertMessage = function (message) {
    alert(message);
}

alertMessage('hello world');


var message='hello world';
var alertMessage = function (message) {
    alert(message);
    var message_1='hello';
}
var message_1='hello';
alertMessage();

对象 object

property(属性)
method(方法)

var apple = {};
apple.color = 'red';
apple['weight'] = '10';
console.log(apple);

var apple = {
    color: 'red',
    weight: '10'
};
console.log(apple);



var apple = {
    color: 'red',
    weight: '10',
    variety: [' red apple', 'green apple', ' Golden Apple']
};
console.log(apple);

apple.variety[0]
" red apple"
apple.variety[1]
"green apple"
apple.color='green'
"green"
apple
Object {color: "green", weight: "10", variety: Array(3)}
delete apple.color
true
apple
Object {weight: "10", variety: Array(3)}
apple.color
undefined


​


var apple = {
    color: 'red',
    weight: '10',
    variety: [' red apple', 'green apple', ' Golden Apple']
};
apple.showVariety = function () {
    for (var i = 0; i < this.variety.length; i++) {
        document.writeln(this.variety[i]);
    }
}

apple.showVariety();

var property;
for (property in apple) {
    if (typeof apple[property] !== 'function')
        console.log(apple[property]);
}


console.log(apple);

文档对象模型

document.getElementById('pageTitle')
<h1 data-brackets-id=​"6" id=​"pageTitle">​sunny​</h1>​
var pageTitle=document.getElementById('pageTitle')
undefined
pageTitle;
<h1 data-brackets-id=​"6" id=​"pageTitle">​sunny​</h1>​
document.getElementsByTagName('li')
(3) [li, li, li]
length
:
3
0
:
li
1
:
li
2
:
li
__proto__
:
HTMLCollection
var list=document.getElementsByTagName('li')
undefined

list[0]
<li data-brackets-id=​"9">​温暖​</li>​
list[1]
<li data-brackets-id=​"10">​善良​</li>​


querySelector
querySelectorAll

document.querySelectorAll('.artist-list li')
(3) [li, li, li]
document.querySelector('.artist-list li')
<li>​温暖​</li>​





artistList.childElementCount
3
artistList.childNodes
(7) [text, li, text, li, text, li, text]
artistList.firstElementChild
<li>​温暖​</li>​
artistList.firstElementChild.innerText
"温暖"
artistList.firstElementChild.innerText='漂亮'
"漂亮"
artistList.lastElementChild
<li>​幽默​</li>​
artistList.lastChild
#text


​




var newMember3=document.createElement('li')
undefined
var  newMemberText=document.createTextNode('温柔')
undefined
newMember3.appendChild(newMemberText)
"温柔"
document.querySelector('.artist-list').appendChild(newMember3)
<li>​温柔​</li>​
var beauty=document.createElement('h3')
undefined
beauty.innerText='生机勃勃'
"生机勃勃"
artistList.parentElement.insertBefore(beauty,artistList.previousElementSibling)
<h3>​生机勃勃​</h3>​


window.onload = function () {
    var btn = document.querySelector('.btn');

    function showMessage() {
        console.log('被点了');
    }
    btn.addEventListener('click', showMessage, false);

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

事件

var listGroup = document.querySelector('.list-group');
function showMessage(event) {
    console.log('点击了 ul');
    event.stopPropagation();
}
listGroup.addEventListener('click', showMessage, true);

var lost = document.getElementById('lost');
function showAnotherMessage(event) {
    console.log('点击了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);