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;}

2.

任何标签都可以加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>

3.

操作属性的方法：
第一种方法：使用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]);

}

9.

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

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

  1. 学习blus老师js(6)--js运动基础

    运动基础 一.匀速运动 运动框架 在开始运动时,关闭已有定时器 把运动和停止隔开(if/else) <!DOCTYPE HTML> <html> <head> &l ...

  2. 学习blus老师js(5)--DOM操作应用高级

    一.表格应用 - 1 获取 tBodies.tHead.tFoot.rows.cells 一个表格可以有很多tbody,所以tBodies是数组: 一个表格只能有一个thead和tfoot,所以tHe ...

  3. 学习blus老师js(3)--定时器的使用

    1.无缝滚动——基础 物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动   offsetLeft: 获取物体的左边距:最大的优点在于可以综合考虑所有影响这个物体位置的 ...

  4. 学习blus老师js(2)--深入JavaScript

    1.函数传参 可变参(不定参):arguments 参数的个数可变,参数数组   例1.求和 求所有参数的和 <!DOCTYPE HTML> <html> <head&g ...

  5. 学习blus老师js(4)--DOM

    一.DOM节点 1.获取子节点: childNodes  nodeType         节点类型 children            只包括元素,不包括文本:  子节点只算第一层.只算孩子一级 ...

  6. Node.js系列基础学习----安装，实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  7. Node.js学习笔记（一）基础介绍

    什么是Node.js 官网介绍: Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js us ...

  8. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  9. Vue.js的基础学习

    Vue.js的基础网上很多,这里不记录 开始正式页面的开发 1.页面加载时请求数据 methods: { post() { //发送post请求 this.$http.post('../../ashx ...

随机推荐

  1. 使用IDEA创建基于Gradle构建的JavaWeb项目

    环境配置 jdk: 1.8 Gradle: 4.4.1 Tomcat: 9.0.0 One Step! 创建项目,初始化项目结构. 打开我们的IDEA,进入创建项目的界面,勾选Java,Web两个选项 ...

  2. MongoDB中的数据聚合工具Aggregate和Group

    周煦辰 2016-01-16 来说说MongoDB中的数据聚合工具. Aggregate是MongoDB提供的众多工具中的比较重要的一个,类似于SQL语句中的GROUP BY.聚合工具可以让开发人员直 ...

  3. 雷林鹏分享：Ruby 多线程

    Ruby 多线程 每个正在系统上运行的程序都是一个进程.每个进程包含一到多个线程. 线程是程序中一个单一的顺序控制流程,在单个程序中同时运行多个线程完成不同的工作,称为多线程. Ruby 中我们可以通 ...

  4. C#MVC中@HTML中的方法

    //生成表单 @{ Html.BeginForm("Index", "Simple", FormMethod.Post, new { id = "my ...

  5. C#中as和is关键字

    一. as 运算符用于在兼容的引用类型之间执行某些类型的转换.例如: static void Main(string[] args) { ]; obj[] = new class1(); obj[] ...

  6. halcon之共线连接union_collinear_contours_xld

    union_collinear_contours_xld 很多时候当我们用edges_sub_pix, threshold_sub_pix  等算子得到边缘后,因为有噪声.物体本身断裂等原因 很多边缘 ...

  7. 别名的使用注意，""真坑。

    我们使用别名都是使用as关键字. 大多数时候我们都会省略as关键字,然后后面直接加别名就好了.我的习惯是别名用双引号括起来. 今天因为这个习惯坑了我一大波 首先oracle的别名的规则: AS 别名 ...

  8. prototype原型模式

    /** * 原型模式 Prototype * 用原型实例指定创建对象的种类,并通过拷贝这些原型创建新的对象 */ 需求: public class Resume { /** * 要求:一个简历类,必须 ...

  9. STL标准库-容器-deque

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性. deque双向开口可进可出的容器 我们知道连续内存的容器不能随意扩充,因为这样容易扩充别人那去 deque却可以,它创造了内存 ...

  10. 在Windows中配置Rsync同步

    Rsync是一款不错的文件免费同步软件,可以镜像保存整个目录树和文件系统,同时保持原来文件的权限.时间.软硬链接.第一次同步时 rsync 会复制全部内容,下次只传输修改过的文件部分.传输数据过程中可 ...