学习blus老师js(1)--基础

1.网页换肤：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<link id="l1" rel="stylesheet" type="text/css" href="css1.css" />

<script>

function skin1()

{

    var oL=document.getElementById('l1');

    oL.href='css1.css';

}

function skin2()

{

    var oL=document.getElementById('l1');

    oL.href='css2.css';

}

</script>

</head>

<body>

<input type="button" value="皮肤1" onclick="skin1()" />

<input type="button" value="皮肤2" onclick="skin2()" />

</body>

</html>

css1.css

@charset "utf-8";

/* CSS Document */

body {background:black;}

input {width:200px; height:100px; background:yellow;}

css2.css

@charset "utf-8";

/* CSS Document */

body {background:#CCC;}

input {width:100px; height:50px; background:red;}

任何标签都可以加ID，包括link

任何标签的任何属性，也都可以修改

HTML里怎么写，JS里就怎么写

但是有一个例外，html的class，js里面要写className，因为class在js里面是一个关键字；

除了class外，html里面和js里面属性都是统一。

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

#div1 {width:100px; height:100px; border:1px solid black;}

.box {background:red;}

</style>

<script>

function toRed()

{

    var oDiv=document.getElementById('div1');

    oDiv.className='box';

}

</script>

</head>

<body>

<input type="button" value="变红" onclick="toRed()" />

<div id="div1">

</div>

</body>

</html>

操作属性的方法：

第一种方法：使用xx.xx

oTxt.value = 'abc';

第二种方法：使用[]

oTxt['value'] = '123';

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

function setText(name)

{

    var oTxt=document['getElementById']('txt1');

    //第一种操作属性的方法

    //oTxt.value='dsfasdfasdf';

    //第二种操作属性的方法

    oTxt[name]='dsfasdfasdf';

}

</script>

</head>

<body>

<input id="txt1" type="text" />

<input type="button" value="改变文字" onclick="setText('title')" />

</body>

</html>

4.变量类型

1) typeof运算符

js里面常见的6种类型：

number、string、boolean、undefined、object、function

一个变量应该只存放一种类型的数据

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

var a=12;

//alert(typeof a);    //number

a='asdfasd';

//alert(typeof a);    //string

a=true;

//alert(typeof a);    //boolean

a=function ()

{

    alert('abca');

};

//alert(typeof a);    //function

a=document;

//alert(typeof a);    //object

var b;

alert(typeof b);    //undefined

//1.真的没定义

//2.虽然定义，没有给东西

</script>

</head>

<body>

</body>

</html>

2)数据类型转换：

显式类型转换(强制类型转换)

NaN Not a Number 非数字

var a = parseInt('abc');

alert(a) ; //NaN

alert(isNaN(a)) ; //true

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

window.onload=function ()

{

    var oTxt1=document.getElementById('txt1');

    var oTxt2=document.getElementById('txt2');

    var oBtn=document.getElementById('btn1');

    oBtn.onclick=function ()

    {

        var n1=parseInt(oTxt1.value);

        var n2=parseInt(oTxt2.value);

        if(isNaN(n1))

        {

            alert('您输入的第一个数字有误');

        }

        else if(isNaN(n2))

        {

            alert('您输入的第二个数字有误');

        }

        else

        {

            alert(n1+n2);

        }

    };

};

</script>

</head>

<body>

<input id="txt1" type="text" />

<input id="txt2" type="text" />

<input id="btn1" type="button" value="求和" />

</body>

</html>

l隐式类型转换

　　==、===

var a=5;

var b='5';

alert(a==b);    //true        先转换类型，然后比较alert(a===b);    //false        不转换类型，直接比

var a='12';

var b='5';

alert(a+b);        //125  1.字符串连接        2.数字相加

alert(a-b);        //7  1.数字相减

5.什么是闭包

简单的理解：

子函数可以使用父函数中的局部变量

之前一直在使用闭包

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<script>

//子函数可以使用父函数的局部变量

function aaa()        //父函数

{

    var a=12;

    function bbb()    //子函数

    {

        alert(a);

    }

    bbb();

}

aaa();

</script>

</head>

<body>

</body>

</html>

但是闭包还有一些高级的应用；

6.命名规范：

命名规范及必要性

l可读性——能看懂

l规范性——符合规则

匈牙利命名法

l类型前缀

l首字母大写

7.什么是真、什么是假：

真：true、非零数字、非空字符串、非空对象

假：false、数字零、空字符串、空对象、undefined

8.json

var json={a: 12, b: 5, c: 7};

//循环json

for(var key in json)

{

    alert('第'+key+'个东西：'+json[key]);

}

------------------

学习blus老师js(1)--基础的更多相关文章

学习blus老师js(6)--js运动基础
运动基础一.匀速运动运动框架在开始运动时,关闭已有定时器把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...
学习blus老师js(5)--DOM操作应用高级
一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...
学习blus老师js(3)--定时器的使用
1.无缝滚动——基础物体运动基础让Div移动起来 offsetLeft的作用用定时器让物体连续移动 offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...
学习blus老师js(2)--深入JavaScript
1.函数传参可变参(不定参):arguments 参数的个数可变,参数数组例1.求和求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...
学习blus老师js(4)--DOM
一.DOM节点 1.获取子节点: childNodes nodeType 节点类型 children 只包括元素,不包括文本: 子节点只算第一层.只算孩子一级 ...
Node.js系列基础学习----安装，实现Hello World, REPL
Node.js基础学习简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
Node.js学习笔记（一）基础介绍
什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...
node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
Vue.js的基础学习
Vue.js的基础网上很多,这里不记录开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...

随机推荐

[BZOJ2834]回家的路
Description Input Output Sample Input 2 1 1 2 1 1 2 2 Sample Output 5 思路还是很简单的,然而最短路打错各种对拍各种调了一早上 ...
FZU 2280 Magic（字符串Hash）题解
题意:给你n个字符串,每个字符串有一个值w,有q次询问,一共两种操作:一是“1 x y”表示把第x个串的w变为y:二是“2 x”,输出第x个串能放几次魔法.放魔法的条件是这样:用串x放魔法,如果在1~ ...
python 返回系统位数
# For bit it will and bit it will import struct print()
ng-grid
请查看官网:http://angular-ui.github.io/ui-grid/ 简单的使用: 总的来说我们 1.需要引入ng-grid-1.3.2.js 2.在html页面需要加入 class ...
sql语句in
在今天之前sql一直用in语句,知道今天遇到一张数据量很大的表查了三分钟才查出来,这才意识到数据库优化有多重要.作为一名开发人员,首先从优化sql语句开始. 之前用in写sql是这样的 select ...
bzoj3172: [Tjoi2013]单词 ac自动机
某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input 第一个一个整数N,表示有多少个单词,接下来N行每行一个单词.每个单词 ...
<p>1、查询端口号占用，根据端口查看进程信息</p>
2017年6月份的时候,我就着手在公司推广git,首先我自己尝试搭建了GitLab来管理代码,并且通过以下博客记录了GitLab的搭建,以及GitLab备份,GitLab升级等事情. git学习——& ...
Java HashMap的工作原理
面试的时候经常会遇见诸如:”java中的HashMap是怎么工作的”.”HashMap的get和put内部的工作原理”这样的问题. 本文将用一个简单的例子来解释下HashMap内部的工作原理. 首先我 ...
Uedit个人专注
Uedit个人专注 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\Shell\Uedit] [HKEY_CLASSES_ROO ...
Alpha冲刺一（7/10）
前言队名:拖鞋旅游队组长博客:https://www.cnblogs.com/Sulumer/p/10013652.html 作业博客:https://edu.cnblogs.com/campus ...

学习blus老师js(1)--基础

学习blus老师js(1)--基础的更多相关文章

随机推荐

热门专题