python之路-第13周

0.HTML&CSS

1.介绍

javascript是一门语言，与python一样，通过浏览器就可以让网页动起来
dom和javascript配合就是我们泛指的js，有这两个玩意就可以完成所有的功能了
jQuery是js的内库，封装了js的内容，可以完成非常复杂的操作

2.javascript 这门语言

1）存在形式

正如css有三种存在形势，对于js有两种方式：

<!-- 方式一 单独文件-->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 标签，代码块->
<script type"text/javascript">
    Js代码内容
</script>

2）存放位置

- html中的head
- html的body底部【**推荐**】

3） js基本语法

1）声明变量

局部变量：var age=123;
全局变量：name = "alex";

2）注释：

单行：//
多行：/*      */

3）单行结尾：

要加分号

4）基本数据类型
数字（number）：

var a1 =1,a2 =2, a3 =3;  //同时定义多个变量
var age = "18.2";
var age1 = Number(18);  //也可以这么定义
console.log(parseInt(age),typeof age);  //在console中打印转化为数字的age
console.log(parseFloat(age),typeof age);  //在console中打印转化为float数字的age
//在js中int和float都是number类型，不再区分

result：

用console能直接解释js代码；

字符串string：

var name = "felo"  //定义字符串
var name = "felo   "
name.trim()  //去除空格
"felo"
name.charAt(1)  //查看index为1的字符
"e"
name.substring(0,2)  //切片
"fe"
name.indexOf("l")  //字符位置
2
name.length  //长度
7

布尔类型boolean：

a = Boolean(1)  //1为真0为假
true
a = Boolean(0)
false
a = true
true
a = false
false

数组array：

li = [1,23,3,4,5,3,32,]
[1, 23, 3, 4, 5, 3, 32]
li = Array(1,2,3,2,4,2,323,2,23,5,6,0)
[1, 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0]
li.push(100)  //追加，返回长度
13
li
[1, 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0, 100]
li.unshift(0)  //前面追加
14
li.splice(2,0,"alex")  //指定位置增加，中间参数必须为0
[]
li
[0, 1, "alex", 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0, 100]

li.pop()  //删除最后，并返回
100
li.shift()  //删除最前
0
li.splice(5,3)  //删除5号位置后面3个元素
[4, 2, 323]
li
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0]
li.slice(2,4)  //切片
[2, 3]
li2 = [1,2]
[1, 2]
li3 = li.concat(li2)  //合并
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0, 1, 2]
li3
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0, 1, 2]
li.reverse()  //原array反转
[0, 6, 5, 23, 2, 2, 3, 2, "alex", 1]
li.join("-")  //合并成字符串
"0-6-5-23-2-2-3-2-alex-1"
li.length
10
var dic = {1:34,2:345}  //字典
undefined
dic
Object {1: 34, 2: 345}

json序列化：

s = JSON.stringify(dic)  //json序列化
"{"1":34,"2":345}"
s
"{"1":34,"2":345}"
m = JSON.parse(s)  //json反序列化
Object {1: 34, 2: 345}
m
Object {1: 34, 2: 345}

5）循环

//数组循环

li = [11,22,33,44,55];
for(var index in li){
    console.log(index,li[index]);
}

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

//字典循环
dic = {"k1":132,"k2":342};
for(var index in dic){
    console.log(index,dic[index]);
}

//IF 判断
var name = "alex";
if(name == "alex"){
    console.log(name);
}else if(name == "eric"){
    console.log(name)
}else{
    console.log("wrong....")
}

while循环

while(true){
    if(name == "alex"){
        console.log(name);
        break;
    }else if(name == "eric"){
        console.log(name)
    }else{
        console.log("wrong....")
    }
}

switch

var name1 = "eric";
switch(name1){
    case "alex":
        console.log("alex");
        break;
    case "eric":
        console.log("eric");
        break;
    default:
        console.log("wrong....")
}

try

try{
    console.log(a)
}catch(e){
    console.log(e)
}finally{
    console.log("ok...........")
}

4）函数

//        函数的声明
        function func1(arg){
            return true;
        }
        console.log(func1(123));

//        匿名函数
        var func2 = function(arg){
                return "tony";
            };
        console.log(func2(456));

//        自执行函数
        (function(arg){
                console.log(arg);
            })('789');

5）面向对象

function Foo(name,age){
    this.name = name;
    this.age = age;
    this.func = function(attr){
        console.log(this.name,attr,this.age);
    }
}

var obj = new Foo("alex",18);
obj.func("sb");

3.DOM

将整个html生成一个document的对象，通过调用document的方法来获取和修改值；

选择器：常用的有id，tagname，classname，name。

分别为：

document.getElementById
document.getElementsByTagName
document.getElementsByClassName
document.getElementsByName


var nid = document.getElementById("n1");   //字符串，因为id是唯一的。
console.log(nid.innerText);

var lis = document.getElementsByTagName("li");  //列表
for(var i in lis){
    lis[i].innerText = i;
}

var c1s = document.getElementsByClassName("c1");  //样式为c1的列表
for(var i in c1s){
    c1s[i].innerText = i;  //获取标签中间的值使用innerText
}

var user = document.getElementsByName("username")[0];  //列表
var pwd = document.getElementsByName("password")[0];  //列表
user.value = "alex";  //修改user.value
pwd.value = "123123"; //修改pwd.value
console.log(user.value,pwd.value)  //在console中显示

获取值

innerText：获取标签中间的文本
innerHTML：获取标签中间的所有字符
value：获取特殊标签的内容，如select,input,textarea

<div>
    <input id="n2" type="text"/>
    <select id="n3">
        <option value="1" selected="selected">shanghai</option>
        <option value="2">beijing</option>
        <option value="3">guangzhou</option>
    </select>
    <textarea id="n4">i am the textarea...</textarea>
    <input type="button" value="getValue" onclick="GetValue();"  />
</div>

<script>
function GetValue(){
    var obj = document.getElementById("n4");  //n2,n3,n4
    alert(obj.value);
    obj.value = "2"
</script>
}

来个搜索框的例子

// 没获取焦点的时候显示请输入关键字，获取焦点就请款输入框
<div>
    <input id="search" type="text" value="请输入关键字" onfocus="Focus();"
    onblur="Blur()"/>
</div>
<script>
    function Focus(){
        var obj = document.getElementById("search");
        if(obj.value == "请输入关键字"){
            obj.value = "";
        }
    }

    function Blur(){
        var obj = document.getElementById("search");
        if(!obj.value.trim()) {
            obj.value = "请输入关键字";
        }
    }
</script>