zoukankan      html  css  js  c++  java

  • Python 第十三篇之一：前端页面 js和dome

    　　

    一：JavaScript:

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

    1、位置：

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

    2、JavaScript代码存在位置

    • HTML的head中
    • HTML的body代码块底部(推荐)

    由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

    如：
 
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert('123');
</script>

    例如2,先写正常的代码，将JavaScript写在最下端：

    <body>
     <h1>xxxxxx</h1>
    <script>
        function f1() {
            alert("f1")
        }
        f1()
    </script>
    </body>

    3、变量

    　　全局变量

    　　局部变量

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

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

     注释：

     // 
    或
     /* */

    4、基本数据类型：

    数字（Number）

    1
2
3
4
5
var page = 111; #整数
var age = Number(18); #数值
var a1 = 1,a2 = 2, a3 = 3; #多个局部变量
parseInt("1.2"); #转换成整数
parseFloat("1.2"); #抓换成浮点数

    字符串(String)：

    var name = "jack";
var name = String("jack");
var age_str = String(18);
 
常用方法：
    obj.trim()
    obj.charAt(index)
    obj.substring(start,end)
    obj.indexOf(char)
    obj.length
可以在google浏览器的调试模式的console接口进行调试：



布尔(Boolean)：

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

var names = ['jack', 'tom', 'eric']
 
常用方法：
    添加
        obj.push(ele)                   追加
        obj.unshift(ele)                最前插入
        obj.splice(index,0,'content')   指定索引插入
    移除
        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'}
　　获取值
　　items.k1();
　
　　序列化：
　　#将字典转换为字符串
　　s1 = JSON.stringify(items)
　　"{"k1":123,"k2":"tony"}"

　　将字符串序列化为对象：
　　s2 = JSON.parse(s1)
　　Object {k1: 123, k2: "tony"}
　　s2
　　Object {k1: 123, k2: "tony"}

    undefined：

    undefined表示未定义值
var name;

    null：

    null是一个特殊值

    5、循环语句：

    var names = ["jack", "tony", "rain"];
 
 
// 数组：方式一
for(var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i]);
}

    如图：

    //属组：方式二

    var names = {"name": "jack", "age": 18};
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

    如图：

    //字典循环：

    // 字典：方式一

var names = {"k1":"v1","k2":"v2"}
undefined
for(var index in names){
    console.log(index);
    console.log(names[index]);
}

    如图：

    while 循环：

    while(条件){
    // break;
    // continue;
}

    6、条件语句：

    //if条件语句
 
    if(条件){
 
    }else if(条件){
         
    }else{
 
    }
    var username= 'jack';
    var age = 111;

    // switch,case语句
        switch(age){
            case 111:
                console.log("111");
                break;
            case 222:
                console.log("222");
                break;
            default :
                console.log("333");
                age = 333;
        }

    7、异常处理：

    try{
 
}catch(e) {
 
}finally{
 
}
    #try是正常代码块，catch(e)捕获指定错误，finally当上面都没有执行的时候执行

    8、函数：

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

函数2：
function  func(arg){
    console.log(arg);
    return "uuu"
}
func("jack");
var ret = func("123");
console.log(ret);


函数3：匿名函数
var f= function(arg){
    console.log(arg)
};
f("123");

函数4--自执行函数：
<script>
 (function(){
     console.log("abc");
 })();
</script>

    
函数5--自执行参数2-带参数：
<script>
 (function(arg){
     console.log("jack",arg);
 })("tom");
</script>

    8、面向对象：基于函数加原型构造数类似于面向对象的功能

    <script>
    function  Foo(name,age){
        this.Name = name;
        this.Age = age;
        this.Func = function(arg){
            return this.Name + arg;
        }
    }

    var obj = new Foo("jack",18);

    console.log(obj.Name);
    console.log(obj.Age);
    var ret = obj.Func("sb");
    console.log(ret);

</script>

    二：Dom

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

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

    默认格式是查找内容-->操作内容：

    修改内容：

    tags = document.getElementsByTagName('h1');  #根据tagName修改：
　　[<h1>​xxx​</h1>​, <h1>​yyy​</h1>​]
tags = document.getElementsByTagName('h1');
　　[<h1>​xxx​</h1>​, <h1>​yyy​</h1>​]
tags[0];
　　<h1>​xxx​</h1>​
tags[0].innerText = "1234";
　　"1234"
tags[1].innerText = "2234";
　　"2234"

    1、选择器：

    <script type="text/javascript">
    var nid = document.getElementById('n1'); //根据标签的id取值，id在性别选择和checkbox的时候是一样的，其他时候不能一样
    nid.innerText = "jack";
</script>

<script type="text/javascript"> //不指定的话默认就是text/javascript，如果写成别的会导致javascript无法正常使用
    var lis = document.getElementsByTagName('li'); //根据标签的名称获取值
    for(var i in lis){ //循环一个对象
        var item = lis[i]; //取出对象里面的值
        item.innerText = i; //innerText 是修改对应key的值
    }

    var lis2 = document.getElementsByClassName('c1');  //根据标签使用的哪一个class获取值
    for(var i in lis2){
        var item = lis2[i];
        item.innerText = i;
    }
var username = document.getElementsByName('username')[0];  //根据标签内置的name获取value
var pwd = document.getElementsByName('pwd')[0];
console.log(username.value,pwd.value); //value表示取出对应的值，username.value就是获取到username对应的值，pwd.value就是获取pwd的值

    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属性操作用户输入和选择的值

    通过修改文本内容实现数值自动增加：

    <body>
    <div>
        <div id="num">1</div>
        <input  type="button" value="+1" onclick="Add();" />
    </div>

    <script type="text/javascript">
        function Add() {
            var nid = document.getElementById('num');
            var text = nid.innerText;
            text = parseInt(text);
            text += 1;
            nid.innerText = text;
        }
    </script>
</body>

    获取文本内容：

    获取到内部所有标签的文本内容，不包含div，h1等标签：

    <div id="n1">
    <h1>jack</h1>
    <h1>XX</h1>
</div>
<script type="text/javascript">
    var text = document.getElementById("n1");
    console.log(text.innerText);
</script>
</body>

    结果：

    jack
XX

    获取包含标签在和文本内容在内的信息：

    <body>
<div id="n1">
    <h1>jack</h1>
    <h1>XX</h1>
</div>

<script type="text/javascript">
    var text = document.getElementById("n1");
    console.log(text.innerHTML);
</script>
</body>

    结果：

    <h1>jack</h1>
<h1>XX</h1>

    特殊性：input、select、textarea：通过value 获取值，不能通过 innerText获取：

    <body>
   <div id="n11">alex
        <h1>XXX</h1>
    </div>
    <h1>特殊的：value</h1>
    <h3><input type="button" onclick="GetValue();" value="获取值"></h3>


    <input id = "n22" type="text">
    <select id="n33">
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
    </select>
    <textarea id="n44">aa</textarea>
</body>

// 通过id获取到值并进行操作
function  GetValue(){
    var  obj = document.getElementById('n22');
    alert(obj.value);
    obj.value = "2"; //重新赋值
}

    做一个搜索框吧：默认显示"请输入要搜索的内容"，当鼠标点到搜索框就则不显示，如果搜索框内没有输入任何内容，当鼠标离开时在显示"请输入要搜索的内容"。

    <body>
 <input type="text" id="search" value="请输入要搜索的内容"  onfocus="Focus();" onblur="Blur();" />
    <script>
        function Focus(){
           var nid = document.getElementById("search");
           var value = nid.value;
           if(value == "请输入要搜索的内容") {
               nid.value = "";
           }else if(value == "请再次输入关键字") {
               nid.value = "";
           }
        }
        function Blur(){
            var  nid = document.getElementById('search');
            var  value = nid.value;
            if(!value.trim()){
                nid.value = "请输入要搜索的内容";
            }
        }
    </script>
</body>

     3、创建标签：

    <body>
    <div id="container"></div>
    <a href="http://www.baidu.com" onclick="return AddElement();">添加</a>
    <script>
        function AddElement(){
             /*
            var nid = document.getElementById('container');
            var tag = "<input type = 'text' value='defalut' />";
            nid.innerHTML = tag;
            container.insertAdjacentHTML("beforeBegin",tag);
            return false; 
　　　　　　　　//return false表示其后面的将不再执行
           */
            var  createObj = document.createElement('a');
            createObj.href = "http://www.baidu.com";
            createObj.innerText = "我的搜索";
            //nid.innerHTML = createObj;
            var nid = document.getElementById('container');
            nid.appendChild(createObj);
            return false;
        }
    </script>
</body>

    4、标签属性及修改：

    var obj = document.getElementById('container');
修改固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "yy";

    如图：

    获取默认属性：

    自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

    如图：

    总结：有的属性是默认属性可以使用obj.key直接获取，对于没有的属性即自定义可以使用obj.setAttribute("key","value")设置，然使用obj.getAttribute("key")可以获取值

    5、提交表单

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

    6、事件

    特殊的：

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

    7、其他功能

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

     更改style里里面的属性：

    var nid = document.getElementById("n1"); #找到id为n1的属性
nid.style.backgroundColor = "green" #进行操作

    如图：

    8、提交表单：

    不做验证，即不判断用户的输入是否为空：

    <body>

    <form id="forml" action="https://www.sogou.com/web" method="get">
        <input name="query" type="text" />
       <!-- <input type="submit" value="提交">  /* 方法1，使用submit直接提交 */ -->
        <div onclick="Submit();">提交</div>
    </form>
    <script>
        function  Submit(){
            document.getElementById('forml').submit(); #找到id为forml的并将表单给其提交
        }
    </script>
</body>

    验证用户的输入是否为空：

    <body>
    <form id="forml" action="https://www.sogou.com/web" method="get">
        <input name="query" type="text" />
       <input type="submit" value="提交" onclick="return MySubmit();" style="background-color: #999999">

    </form>
    <script>
        function  MySubmit(){
            var q = document.getElementsByName('query')[0];
            if(q.value.trim()){
                return true
            }else {
                alert('请输入内容')
                return false
            }
        }
    </script>
</body>

    注：提交成功后将是搜狗的搜索界面

    定时器：

    <head>
    <meta charset="UTF-8">
    <title>欢迎光临本网站，您的满意是我们最大的需求！</title>
</head>
<body>
    <input type="button" onclick="Stop();" value="停下来吧" >
    <input type="button" onclick="Start();" value="继续转吧" >

    <script>
        //setInterval("操作"，"间隔时间毫秒")

        obj1 = setInterval("Func()",1000);
        //obj2 = setTimeout("Func()",10000); //设置超时时间，即一共转动多少秒
        function Stop(){
            //清楚定时器
            clearInterval(obj1);
            //clearTimeout(obj2); //调用超时
        }

        function Start(){
            obj1 = setInterval("Func()",1000);
        }

        function  Func(){
            var  text = document.title;
            var  firstChar = text.charAt(0);
            var  subText = text.substring(1,text.length);
            var  newTitle = subText + firstChar;
            document.title = newTitle;
        }
    </script>
</body>

    三：jQuery

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

    http://www.php100.com/manual/jquery/
  • 相关阅读:
    谷歌的教育软件
    一些视频教程网站推荐
    TexturePacker 介绍
    Flash Builder常用快捷键
    flash builder 4 编译器参数
    Flex中神奇的快速辅助 Ctrl+1
    iPhone 真机调试应用程序
    说说Xcode4中xib绑定的原理
    springboot + mybatis + gradle项目构建过程
    Elasticsearch Xpack认证
  • 原文地址：https://www.cnblogs.com/zhang-shijie/p/5413535.html
Copyright © 2011-2022 走看看