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. 日志自定义Tag

    import java.util.concurrent.ConcurrentMap; import java.util.concurrent.ConcurrentHashMap; /** * Crea ...

  2. 【大型web架构】一个大型web系统架构设计和技术选型的讨论摘录

    1.数据库压力问题 所有的压力最终都会反映到数据库方面,一定要对数据库有一个整体的规划. 可以按照业务.区域等等特性对数据库进行配置,可以考虑分库.使用rac.分区.分表等等策略,确保数据库能正常的进 ...

  3. python文件操作的坑( FileNotFoundError: [Errno 2] No such file or directory...)

    环境:Windows8.1, Python3.6  pycharm community 2017   c盘下有一个配置文件:setup   with open('c:\\setup','r') as ...

  4. Codeforces Round #402 (Div. 2) A,B,C,D,E

    A. Pupils Redistribution time limit per test 1 second memory limit per test 256 megabytes input stan ...

  5. Hadoop平台的基本组成与生态系统

    Hadoop系统运行于一个由普通商用服务器组成的计算集群上,该服务器集群在提供大规模分布式数据存储资源的同时,也提供大规模的并行化计算资源. 在大数据处理软件系统上,随着Apache Hadoop系统 ...

  6. 雷林鹏分享:Ruby Web Services 应用 - SOAP4R

    Ruby Web Services 应用 - SOAP4R 什么是 SOAP? 简单对象访问协议(SOAP,全写为Simple Object Access Protocol)是交换数据的一种协议规范. ...

  7. Rspec: everyday-rspec实操: 第10章测试其他功能,第11章TDD 第12章总结。

    10.测试文件上传 作者推荐的Paperclip,官方维护组已经不推荐使用deprecated. 推荐使用rails自带的 ActiveStorage. Active Storage: 推进文件上传到 ...

  8. 手把手教你如何加入到github的开源世界

    我曾经一直想加入到开源项目中,但是因为没有人指导流程,网上看了很多,基本都是说了个大概,如果你也是一个初出茅庐的人,那么,我将以自己提交的一次开源代码为例,教会你步入开源的世界. 1,首先登陆到htt ...

  9. 3.4.1 使用过滤式扩展方法(P43-44)

    对IEnumerable<T>执行标准并且同样返回IEnumerable<T>的扩展方法,可以使用yield关键字对源数据中的项应用选择标准,已生成精简的结果集. public ...

  10. OC 数据持久化(数据本地化)- 本地存储

    // // ViewController.m // IOS_0113_本地存储 // // Created by ma c on 16/1/13. // Copyright (c) 2016年 博文科 ...