• 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>
    
    
    
  • 相关阅读:
    linux安装python3
    web模拟终端 --使用shellinabox
    linux防火墙和xshell的链接
    Linux安装在虚拟机上
    DRF(django-rest_framework)框架
    Pycharm常用快捷键
    普通脚本调用django程序
    Pycharm安装模块提示module 'pip' has no attribute 'main'的问题
    Django的ModelForm
    面向对象(常用和特殊的创建类)
  • 原文地址:https://www.cnblogs.com/felo/p/5392538.html
Copyright © 2020-2023  润新知