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/