• python之路(十七)-javascript


    JavaScript

    JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。

    1. JavaScript的存在形式

    JavaScript有两种存在形式,分别是文件形式和代码块形式

    文件形式:

    <!-- 方式一 -->
    <script type"text/javascript" src="JS文件"></script>

    js代码块存在形式:

    <script type"text/javascript">
        Js代码内容
    </script>

    2、JavaScript代码存在位置

    • html的head标签内
    • html的body底部,推荐使用这种方式,因为html代码是从上往下执行的,这样可以避免某些js脚本问题而导致页面内容不显示,一般会让页面先显示出来然后再执行js脚本。

      代码示例:

      

    <body>
        <script src="jquery-2.2.3.min.js"></script>
        <script>
           (function(){alert(1);})();
           (function(arg){
               console.log("aaabbb",arg)
           })("cccddd");
            function foo(num1,num2){
                this.num1=num1;
                this.num2=num2;
                this.Func= function (arg) {
                    return this.num1+arg;
                }
            }
        
        </script>
    </body>

    3、变量

    • 全局变量
    • 普通变量

      JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量

      

    var name = "seven"  # 局部变量
    age = 18            # 全局变量

    注:注释 // 或 /* */

    4、基本数据类型

    • 数字(Number)

      定义方法: 

    var age=19
    var age=parseInt("20")
    var age=Number("21")
    • 字符串(String)  
            var name =String("北京故宫")
            console.log(name[0]) //按照索引取相应的字符串
            console.log(name.charAt(2))//按照索引取相应的字符串
            console.log(name.substring(1,4))//连续取字符串
            console.log(name.indexOf("京"))//取某字符串的索引
            console.log(name.length)//取字符串的长度    
    • 布尔(Boolean)

      

    var status = true;
    var status = false;
    var status = Boolen(1==1)
    • 数组(Array)

      

    var names = ['alex', 'tony', 'eric']
    var names = Array('alex', 'tony', 'eric')
     
    常用方法:
        添加
            obj.push(ele)                   追加
            obj.unshift(ele)                最前插入
            obj.splice(index,0,'content')   指定索引插入,中间的0是固定参数必须为0
        移除
            obj.pop()                       数组尾部获取
            obj.shift()                     数组头部获取
            obj.splice(index,count)         数组指定位置后count个字符
          
        切片
            obj.slice(start,end)          
        合并
            newArray = obj1.concat(obj2)  
        翻转
            obj.reverse()
          
        字符串化
            obj.join('_')
        长度
            obj.length
    字典
    var items = {'k1'123'k2''tony'}
     

     5. 循环

    <script>
            //数组 方式一
            var names=["alex", "tony", "rain"]
            for (var i=0;i<names.length;i++){
                console.log(names[i]);
            }
            var dics = {"name1":"alex","name2":"tony"}
            for (var n in dics) {
                console.log(dics[n])
            }
            //数组 方式二
            var names=["alex", "tony", "rain"]
            for (var index in names){
                console.log(names[index])
            }
    
            //while循环
            while (1==1){
                console.log("ok!");
                break;
            }
        </script>

    6. if语句

        <script>
    
            //if语句
            a = "alex"
            if (a=="tony"){
                console.log("wrong!");
            }else if (a=="alex"){
                console.log("right!");
            }else{
                console.log("no!");
            }
            //switch case 语句
            names="tony"
            switch(names){
                case "tony":
                    console.log("tony");
                    break;
                case "rack":
                    console.log("rack");
                    break;
                case "alex":
                    console.log("alex");
                    break;
            }
        </script>

    7. 异常处理

            //异常处理
            try {
                dfadfadfadf;
            }catch (e){
                console.log("出错了!");
    
            }finally {
                console.log("endly");
            }

    8. 函数

    <script>
           //普通函数
            function func(){
                console.log("普通函数!")
            }
            func()
            //匿名函数
            var func2 = function(){
                console.log("匿名函数")
            }
            func2()
    
            //自执行函数
    
            (function(){
                console.log("ok")
            })();

    9. 面向对象

    function Foo (name,age) {
        this.Name = name;
        this.Age = age;
        this.Func = function(arg){
            return this.Name + arg;
        }
    }
     
    var obj = new Foo('alex', 18);
    var ret = obj.Func("sb");
    console.log(ret);

    Dom编程

    Dom

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

    注:一般说的JS让页面动起来泛指JavaScript和Dom

    1、选择器

    document.getElementById('id');//根据id获取
    document.getElementsByName('name');//根据name属性获取
    document.getElementsByTagName('tagname');//根据标签名字获取

    2、内容

    innerText
    innerHTML
     
    var obj = document.getElementById('nid')
    obj.innerText                       # 获取文本内容
    obj.innerText = "hello"             # 设置文本内容
    obj.innerHTML                       # 获取HTML内容
    obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
     
     
    特殊的:
        input系列
        textarea标签
        select标签
     
        value属性操作用户输入和选择的值

    3. 创建标签

    方式一:
        var obj = document.createElement('a');
        obj.href = "http://www.etiantian.org";
        obj.innerText = "老男孩";
     
        var container = document.getElementById('container');
        //container.appendChild(obj);
        //container.insertBefore(obj, container.firstChild);
        //container.insertBefore(obj, document.getElementById('hhh'));
     
    方式二:
        var container = document.getElementById('container');
        var obj = "<input  type='text' />";
        container.innerHTML = obj;
        // 'beforeBegin', 'afterBegin', 'beforeEnd',  'afterEnd'
        //container.insertAdjacentHTML("beforeEnd",obj);

    4. 标签属性

    var obj = document.getElementById('container');
    固定属性
        obj.id
        obj.id = "nid"
        obj.className
        obj.style.fontSize = "88px";
     
    自定义属性
        obj.setAttribute(name,value)
        obj.getAttribute(name)
        obj.removeAttribute(name)

    5. 5、提交表单

    document.geElementById('form').submit()

    6. 事件

    特殊的:

    window.onload = function(){}
            //jQuery:$(document).ready(function(){})
            //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。

    7、其他功能

    console.log()
    alert()
    confirm()
     
    // URL和刷新
    location.href
    location.href = "url"  window.location.reload()
     
    // 定时器
    setInterval("alert()",2000);   
    clearInterval(obj)
    setTimeout();   
    clearTimeout(obj)

    jQuery

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。

    http://www.php100.com/manual/jquery/

  • 相关阅读:
    搭建一个简单的springMVC框架
    java枚举使用
    java中枚举类型的使用
    java递归算法
    JAVA递归算法及经典递归例子 对于这个汉诺塔问题
    java斐波纳契数列
    要求给一个数值,计算它的阶乘
    AcWing2193 分配问题(二分图最优匹配)
    2020上海大学校赛L 动物森友会(网络流+二分)
    BZOJ2654 tree(wqs二分)
  • 原文地址:https://www.cnblogs.com/zhaojianbo/p/5397698.html
Copyright © 2020-2023  润新知