python2.0_s12_day13_javascript&Dom&jQuery

今天主要内容:
JavaScript
Dom
jQuery

http://www.cnblogs.com/wupeiqi/articles/5369773.html

今天主要内容大致了解:
javascript
    1.首先要知道 JavaScript 和 Java 没有半毛钱关系.
    2.JavaScript 和python语言 一样 它也是一门语言.对于python语言需要用python解释器解释.而javascript的解释器是浏览器.
    3.javascript 能实现什么.javascript就是让我们的前端页面(html)动起来.怎样让它动?
    假如现在有一个页面,页面上有一个标签,用浏览器展示出来,现在我们用javascript把它删掉或者在这个标签上下在加一个标签,是不是就动了!!那么是不是给我们的感觉就有一个动画的效果了.
    对javascript 就是进行删除标签,修改标签,或者修改css的.
Dom
    其实我们经常听到的前端所说的JS,其实就是指javascript+dom.
    javascript实现了对html文件中的html标签或者css进行修改的,而dom就提供了查找指定标签或者css的方法.
    我们既然说dom提供了查找 xxx的方法,那么我们可定会想到dom就是一个类,类实例化成为一个对象后就有相应的方法了.
    对没错,dom其实就是一个类.在html中用docment代表dom实例化后的对象.除了提供一些查找的方法,还提供一些alert(),confirm(),consol.log()等等方法.

jQuery
    jQuery是什么?其实jQuery严格意义上来说它什么都不是,不算是一种具有独特功能的技术模块.
    我们通过javascript+dom两个东西,我们就可以在页面上做任何操作了.但是对于复杂的操作的话.我们需要很多步骤调用很多方法,可能100行代码才能实现.
    而jquery它帮你把所有的功能都封装到一个包里面了.我们只需要引用这个包,调用它的方法,复杂的逻辑,复杂的运算它帮我们做,我们只需要知道一个函数名.
    对于你来说,使用它能让你少做很多步操作就能实现很复杂的功能.
    jQuery的产生就是为了简化程序员代码量.它相当于封装了javascript和dom的类库.
    你后就不用写javascript和dom了,直接使用jque 就可以完成非常复杂的操作了.

我们既然说jQuery封装了javascript和dom,并且以后前端也用jQuery就行了,不用写原生的javascript和dom了,那么为什么不跳过javascript和dom呢,直接学jQuery呢.
因为,他们是基础,不知道原理,你用jQuery会很不顺手的.

下面我们依次学习:
JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编辑相应代码之后,浏览器可以解释并做出相应的处理.
1. JavaScript代码存在形式
    <!-- 方式一 -->

    <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实现特效慢而已.

    <!--下面这个js文件在远端服务器,假设远端服务器挂了,浏览器再解释这段代码的时候会一直找下去,从而导致页面一直是大白页,直至等待超时报错-->
    <!--当代码放到底部时,即使js耗时严重,之前的html代码也都执行完了.-->
    <!--引入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>

    <!--js代码块写到script标签中-->
    <script>
        alert('123');
    </script>

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

    var name = 'ted' #局部变量
    age = 18

注: 注释// 或/* */

4. 基本数据类型
数字(Number)

    var page = 111;
    var age = Number(18);
    var a1 = 1,a2 =2, a3 =3;
    parseInt("1.2");   #转换成数字类型
    parseFloat("1.2"); # 转换成数字类型,只是在显示的时候带小数点

    var age = '18.2'
    console.log(parseInt(age),typeof parseInt(age) )

    结果 18 "number"

    var age2 = '193.3'
    console.log(parseFloat(age2),typeof parseFloat(age2))

    结果:193.3 "number"

    注: JavaScript中是没有float浮点数的,数据类型都是number,只是在显示的时候不一样

字符串(String)

    var name = 'ted';
    var name = String('ted');
    var age_str = String(18);
    常用的方法:
        obj.trim() #去除两边的空格
        obj.charAt(index) #索引取值
        obj.substring(start,end)    #获取字符串的子序列,类似于切片,开始的位置,结束的位置. 顾头不顾尾
        obj.indexOf(char)   # 获取某一个字符的索引位置
        obj.length  # 显示字符串的长度

布尔(Boolean)

    var status = true;
    var status = false;
    var status = Boolen(1==1)

数组(Array)
数组是我们以后写代码中最长用到的.数组就等价于python的列表.在python里面用list创建列表,而在js里list = Array
创建数组的两种方法

var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric')

常用方法：
    添加
        obj.push(ele)                   追加
        obj.unshift(ele)                最前插入
        obj.splice(index,0,'content')   指定索引插入,中间这个0一定要有
    移除
        obj.pop()                       移除尾部,并获取
        obj.shift()                     移除头部,并获取
        obj.splice(index,count)         数组指定位置后count个字符并获取,是几个字符,不是索引,
            ["xx", "oo", "oo", 11, 22, 33, "aa"]
            li.splice('1',2)  这里的2是个数,前面的1是索引位置
            ["oo", "oo"]
            li
            ["xx", 11, 22, 33, "aa"]
    切片
        obj.slice(start,end)
    合并
        newArray ＝ obj1.concat(obj2)
    翻转
        obj.reverse()

    字符串化
        obj.join('_')  将数组里的元素,使用'_"进行连接
    长度
        obj.length      显示长度

字典
对于javascript内部是没有字典类型的他是通过一个类来实现的.这句话怎么理解呢,意思是,如果你执行了下面的语句,它其实生成了一个对象,这个对象内部其实就像字典.反应到代码就是如下:
    var items = {'k1': 123, 'k2': 'tony'}
    items
    Object {k1: 123, k2: "tony"}
    我们看到,输入items显示上面一个东西.
对于基本的数据类型,就这么多,以后的操作就是对这些数据类型进行操作.并且还有些用不到.

接下来补充一点,并且是以后用的最多的.
    在 python中有json,是将对象序列化和反序列化的.在js中也有json
    用法如下:

        items  #这是一个字典
        Object {k1: 123, k2: "tony"}
        s = JSON.stringify(items)   # 序列化过程
        "{"k1":123,"k2":"tony"}"
        s                           # 查看序列化后的结果
        "{"k1":123,"k2":"tony"}"
        JSON.parse(s)               # 反序列化过程
        Object {k1: 123, k2: "tony"}

     这个一定要会

undefined

    undefined表示未定义值
    var name;

null

    null是一个特殊值

5、循环语句

    var names = ["alex", "tony", "rain"];


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


    // 数组：方式二
    for(var index in names){
        console.log(index);
        console.log(names[index]);
    }

    var names = {"name": "alex", "age": 18};


    // 字典：方式一
    for(var index in names){
        console.log(index);
        console.log(names[index]);
    }

    // while循环

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

6. 条件语句

    //if条件语句

        if(条件){

        }else if(条件){

        }else{

        }

    var name = 'alex';
    var age = 1;

    // switch,case语句
        switch(name){
            case '1':
                age = 123;
                break;
            case '2':
                age = 456;
                break;
            default :
                age = 777;
        }

7、异常处理

    try{

    }catch(e) {

    }finally{

    }

8、函数
    函数的声明

        function func(arg){
            return true;
        }

    匿名函数

        var func = function(arg){
            return "tony";
        }

    自执行函数

        (function(arg){
            console.log(arg);
        })('123')

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

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

    document.getElementById('id');              # 通过标签id获取 对象,这里获得的对象只有一个,因为在html中id是不允许重复的
    document.getElementsByName('name');         # 通过name属性获取 指定的对象,这里获得的是列表,即使是只有一个也被放到列表里
    document.getElementsByTagName('tagname');   # 通过标签的种类获取指定的对象,这里获得的是列表,即使是只有一个也被放到列表里

2、内容
    innerText                           # 获取标签对象内的所有文本值(不包括标签)

    var obj = document.getElementsByTagName('div') # obj获得的是列表,所以要取 [0]
    HTML页面body部分有以下代码:
        <div>
            sbssbsbsbsbs
            <h2 id="111">index1</h2>
        </div>
        <h2>index2</h2>
        <script type="text/javascript">
            var aaa = 1;
            switch (aaa) {
                case 1:
                    console.log('111111');
                    break;
                case 2:
                    console.log('222222');
                    break;
                default:
                    console.log('333333');
            }
        </script>

        用谷歌浏览器打开上面这个网页,并且在console中输入以下内容:
            var obj = document.getElementsByTagName('div')
            obj[0].innerText
            "sbssbsbsbsbs
            index1
            "
         上面我们看到div标签中有字符串和一个h2标签,当使用 obj.innerText获取内容的时候,把div里的字符串和h2标签里的内容都获取到了,但是却没有获取到h2标签(只是把标签的字符串值拿到了)
        innerHTML                           # 获取标签对象内的所有值(包括标签)
        接着上面的例子,我们使用innerHTML看看获取到什么值?
            obj[0].innerHTML
            "
            sbssbsbsbsbs
            <h2 id="111">index1</h2>
            "
        把包含在div标签下的子标签+字符串都获取到了.

    var obj = document.getElementById('nid')
    obj.innerText                       # 获取文本内容
    obj.innerText = "hello"             # 设置文本内容
    obj.innerHTML                       # 获取HTML内容
    obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容

    总结:innerText 和 innerHTML取文本内容和包含标签的内容
    但是又些特殊的标签,就不能使用innerText来获取值,只能使用obj.value来获取值.
    特殊的：
        input系列
        textarea标签
        select标签
        value属性操作用户输入和选择的值
    代码实例1:

        <form action="">
            <input type="text" name="username" value='123'>
            <input type="password" name="pwd" value="456">
        </form>

        <script>
            var obj1 = document.getElementsByName('pwd')[0] ;
            var obj2 = document.getElementsByName('username')[0];
            console.log(obj1,obj2)
            console.log(obj1.value,obj2.value)
        </script>

    代码实例2:(代码实现了获取文本内容,并修改文本内容.这个例子要看懂,)

        <body>
            <input type="text" id="text1">
            <input type="button" value="获取input里的值" onclick="getvalue();"/>
            <script type="text/javascript">

                function getvalue(){
                    var obj1 = document.getElementById('text1')
                    var text = obj1.value
                    alert(text)
                    obj1.value = ''
                }
            </script>
        </body>

    代码实例3:(获取select里的value)

        <body>
            <select id="n3">
                <option value="1">11</option>
                <option value="2">22</option>
                <option value="3">33</option>
            </select>
            <input type="button" value="获取input里的值" onclick="getvalue();"/>
            <script type="text/javascript">

                function getvalue(){
                    var obj1 = document.getElementById('n3')
                    console.log(obj1.value)
                    alert(obj1.value)
                }
            </script>
        </body>

    代码实例4:
    场景:有a连接,我们希望点击a连接的文本在添加一条一模一样的a连接怎么做?

        <body>
            <a href="http://www.oldboyedu.com/" onclick="f1();">添加</a>
            <script type="text/javascript">
                function f1(){
                    alert(123)
                }
        </script>

    上面的代码,会出现当你添加a连接,后,f1()里的js代码会执行,但执行完成后,紧接着会跳转到www.oldboyedu.com 这个网站.
    那么问题来了.我们不希望在执行完f1()函数后跳转应该怎样实现呢? 实现方法,就是定义a标签的onclick事件反回false,这样就不会跳转了.
    于是代码如下:

        <body>
            <a href="http://www.oldboyedu.com/" onclick="return f1();">添加</a>
            <script type="text/javascript">
                function f1(){
                    alert(123)
                    return false
                }
            </script>

        </body>

    小扩展:
    有下面这段html代码

    <body>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <script>
            var lis = document.getElementsByTagName('li');
            for(var i in lis) {
                console.log(i);
            }
        </script>
    </body>

    用谷歌浏览器打开,你会发现,for循环不仅打印了111,222,333还有其他的一些元素.如下:

    0
    1
    2
    length
    item
    namedItem

    这样就不是我们想要的结果了.那么如何解决呢.就用关于数组的第二种for循环方法:

    <body>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>
        <script>
            var lis = document.getElementsByTagName('li');
            for(var i = 0;i<lis.length;i++){
                console.log(i)
            }
        </script>
    </body>

    浏览器打开此页面,看到console中显示:

    0
    1
    2

    接下来看一个小实例:我们看到有些页面让你填写购买商品的数量,然后旁边有一个加号,和减号.那么如何实现的呢?

    <body>
        <input type="button" value="-" onclick="sub_num();"/>
        <div id="num">1</div>
        <input type="button" value="+" onclick="add_num();"/>
        <script>
            function add_num(){
                var obj = document.getElementById('num');
                var get_num = parseInt(obj.innerText);
                get_num += 1;
                obj.innerText = get_num
            }
            function sub_num(){
                var obj = document.getElementById('num');
                var get_num = parseInt(obj.innerText);
                if(get_num<=0){
                    alert("数量不能为负数")
                } else {
                    get_num -= 1
                    obj.innerText = get_num
                }
            }
        </script>
    </body>

    js 中操作的步骤:
        1.找到这个标签
        2.获取标签里的字符串
        3.将获取到的值加1或者减1
3、创建标签
    方式一(采用对象的模式)：

        var obj = document.createElement('a');
        obj.href = "http://www.etiantian.org";
        obj.innerText = "老男孩";

        var container = document.getElementById('container');
        //container.appendChild(obj);
        // 对象要被添加的地方,必须使用appendClild(),如果使用container.innerHTML = obj 添加的不是整个标签对象,而是http://www.etiantian.org 这个字符串.
        // 记住,如果要使用对象模式,就使用appendChild
        //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";
        #我们知道在fontSize在style的真实写法是 style = 'font-size = 88px;'
        # 所以当通过 obj.style.xxYx 找style里面的元素时,遇到 - 的时候,就把-去掉,并把-后面的字符大写:如font-size 写成 fontSize

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

5、提交表单

    document.geElementById('form').submit()
    之前我们做提交表单,都是使用form标签,普通方式的代码如下:
        <form action="http://www.sogou.com/web" method="get">
            <input name="query" type="text" >
            <input type="submit" value="提交">
        </form>
    这是我们通过submit标签提交的,那么我们想,能不能通过div标签提交?
    能,默认肯定不能提交,解决办法那是不是在div中加onclick事件,
    提交的流程:
        1.找到这个要提交的form 标签
        2. 执行form_obj.submit()方法就可以提交了.
    代码如下:
    <body>
        <form id="form1" action="http://www.sogou.com/web" method="get">
            <input name="query" type="text" >
            <!--<input type="submit" value="提交">-->
            <div onclick="f1();">提交</div>
        </form>
        <script type="text/javascript">
            function f1() {
                document.getElementById('form1').submit();
            }
        </script>
    </body>

上面的知识点:不仅submit可以提交form表单,其他也可以.
设置默认要求提交时表单不能为空:
    场景:我们知道当我们登录网站,输入用户名和密码时,要通过form标签和input里的submit类型标签.
    正常情况下,我们点击submit标签就会把form中的input.value内容提交到后台.
    那么如用户只输入用户名没输入密码时,是不是要告诉用户:"你有没填写的字段,不能提交".
    实现方法就是在submit标签加上onclick事件,然后去校验几个input标签里是否有值.如果没满足条件就让onclick事件反回false.
    具体代码如下:

        <body>
            <form id="form1" action="http://www.sogou.com/web" method="get">
                <input name="query" type="text" >
                <input type="submit" onclick="return f3();" value="提22交">
            </form>
            <script type="text/javascript">
                function f3() {
                    var q = document.getElementsByName('query')[0];
                    if (q.value.trim()){
                        alert('11111')
                        return true;
                    } else {
                        alert("22222");
                        return false;
                    }
                }
            </script>
        </body>

6、事件


7、其他功能

    console.log()
    alert()
    confirm()
    # confirm 有什么用呢?我们在页面上删除某条纪录,有时会出来一个"确认"和"取消"的窗口,这就是confirm.
    确认反回的是true,取消反回的是false
    代码举例:
        <body>
            <input type="button" value="上来啊" onmousemove="MyConfirm();">
            <script>
                function MyConfirm(){
                    var ret = confirm("是不是要点!")
                    alert(ret)
                }
            </script>
        </body>
    这是confirm最简单的实现方法,真实开发中,一般情况下confirm弹窗咱们是自己写的,因为默认的太难看了.

    // URL和刷新
    location.href 获取当前html文件的访问路径
    location.href = "url"   可以获得,当然也可以赋值,赋值的时候相当于跳转了
    window.location.reload() 重新加载

    这两个好用处不大

    // 定时器
    setInterval("alert()",2000);
    clearInterval(obj)
    #告诉大家,setInterval其实就是每隔多长时间创建一个线程,用这个东西能做什么呢?可以做标签的滚动效果.

    setTimeout();   # 和setInterval 用法一样,不一样的是只执行一次.比如说setTimeout('f1()',2000)意思是过两秒后执行一次f1函数
    clearTimeout(obj)
    # setTimeout() 的应用场景:我们看到qq邮箱删除邮件的时候,在页面上会提示删除邮件成功,5秒后这个提示字样消失了.就是用setTimeout做的.
    # 具体是,当你点击删除的时候,立马跳出删除成功的标签.紧接着在函数中在调用setTimeout('删除这个标签的函数',5000)

jQuery 简介
    学了jQuery后,你不能理解为就不用js和Dom了,应该说复杂的操作都用jQuery操作.而相对于简单的操作,jQuery没必要去封装简单的操作.
    jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
    http://www.php100.com/manual/jquery/
    我们使用js,dom ,jQuery 最终目的让html页面动起来.
    动起来技术实现方法就是让 事件 和 改html文件里的内容 关联起来
    改 html 文件内容就需要两部分:
    1. 获取要改动的标签
    2. 修改
    无论是使用js还是使用jQuery都是围绕着上面两个目的进行的 .
    所以jQuery提供的方法,从功能上大致就分为两个方法:1.获取标签 2.修改
    jQuery实现了几百种方法,多,但是无论多牛B的网站也都没全用到,只会用到那么一些常用的(大概几十种).

jQuery之基本选择器
jQuery中提供的用于获取标签的方法都有哪些?
    jQuery提供的 "选择器" 和 "筛选器" 两大分类都是用于获取标签的方法.
    选择器获得的是结果集,筛选器是从结果集里跳出来指定条件的 很好理解
    筛选器: 过滤 查找 串联
    最基本的选择器(3种):

    $("#id").text('123');  #id 选择器,找到1个对象
    $("a").text('2222'); # 标签选择器,找到对象集合,并且内部循环将这些对象的字符串值设置成222
    $(".c1").text('3333') # class选择器,找到 对象集合,并且内部循环将这些对象的字符串值设置成333

    上面3中选择器是jQuery中最基本的选择器,一定要会.
    还有要会组合使用它们,如:

    $("#n3 div .c4 span").text('4444') # 找到id为n3标签下的div标签下的class为c4下的span标签的字符串值设置成4444

    一次查找多个类型的选择器时用逗号隔开,如下:

    $("div,a,.c4").text('555') 查找所有div,所有a标签以及所有calssname为c4的标签,并把它们的字符串值设置成555

接下来看看一些其他选择器:不要求记住,但是你要知道,当碰到某些场景,你能想起来哪种类型的,能够查到即可.
    比较重要的:
    属性选择器类:
    筛选器以下几种必须要会:
    children()  目标标签的儿子们
    find()      找到的结果集中find
    next()      目标标签的下一个兄弟标签
    nextAll()   目标标签的下面的所有兄弟标签
    parent()    目标标签的父标签
    prev()      目标标签的上一个标签
    prevall()   目标标签的上面所有的兄弟标签
    siblings()  目标标签的所有兄弟标签
    这些筛选器里的方法只要记住,能完成99.99%的工作