11python基础进阶之jquery

一、jquery基础知识
1、jquery简介
jquery 简称jq
jquery是一个函数库，它里面准备好了许多常用的js小功能，供我们直接调用。
jquery本质是一个js文件。
写jq代码，本质上就是写js代码。

    作用：专门用来方便我们书写js代码的。

    jquery的标语 Write Less, Do More（写得少，做得多）
    有了它，可以用更少的js代码做更多事情。

2、jq入口函数
    
完整版：
    $(document).ready(function () {
       
    });

简写版(最常用)：
    $(function(){
       整个网页文档加载完毕才执行
    });

和window.onload的区别：
和window.onload = function(){} 有点像，但是jq的入口函数一个js可以出现很多次，都会被执行(但一般也不会这么写)，而如果window.onload在同一个js文件中出现两次或者以上，则只会执行最后一个window.onload

3、jq操作元素样式


    选择到标签后，可以通过.css()，来操作元素css属性
    访问css属性：     标签.css(要访问的css属性)
    修改一个css属性：     标签.css(要修改的css属性，修改成的值)
    同时修改多个css属性：     标签.css({属性：值，属性：值，属性：值})

    alert($("div").css("width"));  //只传一个参数，获取元素的宽度
    $("div").css("height", "300px"); //传了两个参数，参数1表示要修改的css样式，参数2要修改成的值
    $("div").css({"width": "400px", "height": "400px"})  // 同时修改多个css样式属性


4、选择器
    /*基础选择器：以前css怎么写，$("")现在就怎么写*/
    $("li").css("background", "green");
    $(".li04").css("background", "green");
    $("#oli").css("background", "green");
    $(".box li").css("background", "green");

    /*属性选择器：通过标签属性来获取标签*/
    $("input[type=text]").css("color", "red");  //选择到标签属性type的值为text的input标签


    /*其他选择器*/
    $("ul li").not(".li04").css("background", "green");   // 排除某个/种
    $(".box li").eq(1).css("background", "green");   //  在类为box的标签中选择下标为1的li标签

    $(".li04").prev().css("background", "green");   //选择类为li04的标签前面紧挨着的那一个同级元素
    $(".li04").prevAll().css("background", "green"); //选择类为li04的标签之前所有的同级元素
    $(".li04").next().css("background", "green");  //选择类为li04的标签后面紧挨着的那一个同级元素
    $(".li04").nextAll().css("background", "green");//选择类为li04的标签之后所有的同级元素


    $('div').has('p').css("color", "red");   //选择到有p的div元素
    $("div").find("p").css("color", "red")  //选择到有p的div元素


    选择集过滤的操作：  // 先选择出一类标签，再从这一类标签中过滤出想要的标签
    .eq() 和 .has()

    选择集转移：  //先选择到某一类标签，再转移，变成选择其他的标签
    $(".li04").prev()
    $(".li04").prevAll()
    $(".li04").next()
    $(".li04").nextAll()
    $("div").find("p")
    $(".box").siblings()
    $(".box").parent()
    $(".box").children()


5、关系选择器
    兄弟选择器：
        $(".box").siblings()     选择到.box标签的所有同级标签
    父选择器：
        $(".box").parent()     选择到.box标签的所有父级标签
    子选择器：
        $(".box").children()     选择到.box标签的所有子级标签

一、jquery高级知识
1、jq的事件
.click() 鼠标单击事件
.focus() 表单元素的聚焦事件(光标出现在这个表单元素上的时候)
.blur() 表单元素的失去焦事件(光标在这个表单元素上消失的时候)

    .mouseover()和.mouseout()  如果鼠标移进/出 这个标签的子元素，也会触发事件
    .mouseenter()和.mouseleave()  鼠标移进/出， 会忽略掉对这个标签的子元素的操作

    补充：
    表单域标签的提交事件 
    $("form").submit()  表示 当这个表单提交的时候

2、jq控制标签属性
    选择到标签之后，使用.prop()方法可以控制标签属性，格式和.css()方法一致
    $("input").prop("type");    //访问input标签的type属性的值

    $("input").prop("class", "box");  //修改input标签的class属性的值为box
    $("input").prop({"class": "box", "id": "obox"});  //同时修改input标签的class属性和id属性

    使用.attr()方法也可以控制标签属性，只需要把上面代码中的prop换成attr即可

3、事件冒泡现象
    当点击子元素p，它的点击事件会向它父元素传递，也会触发了父元素的点击事件

    即，下面这种如果div和p都有单击事件，而用户只单击了p元素，但此时div元素的单击事件也会被触发，所以div的click事件里面的代码也会被执行
    <div>
        <p></p>
    </div>

4、事件代理
    事件代理：也叫事件委托。如果有一个需求，所有的li都有单击事件且效果相同，如果此时选中所有的li添加事件，则事件的绑定次数相当多，效率低下，我们可以把li的事件委托给父级ul，这样就只绑定一次

    作用：
        1、事件代理首先可以极大减少事件绑定次数，提高性能；
        2、其次可以让未来的子元素也可以拥有相同的操作

    <ul>
        <li>文字01</li>
        <li>文字02</li>
        <li>文字03</li>
        <li>文字04</li>
        <li>文字05</li>
        <li>文字06</li>
        <li>文字07</li>
        <li>文字08</li>
        <li>文字09</li>
        <li>文字010</li>
    </ul>

    格式：
        $(父级元素).delegate(真正的事件源，事件， 匿名函数/事件对应要执行的代码)
    例如：
        $("ul").delegate("li", "click",function () {
            alert("ok");
        })

5、节点操作
    DOM 文档对象模型   document object model

    例如有以下html：
    <ul>
        <!--2-->
        <li>旧的li标签</li>
        <!--1-->
    </ul>


    增加节点：

    1、 append 在1号位增加节点
        $ul.append($li);  //目的地.append(要添加的节点)

    2、prepend 在2号位增加节点
        $ul.prepend($li);
    
    删除节点：
        $("ul").remove();  //包括ul和ul内部所有节点删除

    剪切节点(移动节点)：
        //这两个都是已有标签
        $("p").insertBefore("ul");  //把p标签移动到ul标签前面
        $("p").insertAfter("ul");  //把p标签移动到ul标签后面

二、前后端数据交互
1、javascript对象

    通过顶级Object类型创建对象
        var dog = new Object();
        dog.name = "小白";
        dog.age = 12;
        dog.say = function () {
            alert(this.name);
        }
        dog.say();

    字面量的方式创建对象
        var dog = {
            name: "小黑",
            age: 13,
            say: function(){
                alert("my name is " + this.name);
            }
        }

        dog.say();

2、json
    json javascript对象的表现方法，是一种数据的格式

    格式：
        {
            "name": "小白",
            "age": 18,
            "arr":[10, 20, 30, 40],
            "data":{
                "a":10,
                "b":20
            } 
        }

    将json数据的格式转为js对象:
        var jsonString = '{"name":"python","age":28}';    
        var jsObject = JSON.parse(jsonString); //字符串转换为js对象
        alert(jsObject.name); //获取json中的值

        var jsonString2 = '[{"name":"python","age":28}, {"name":"javascript","age":25}]';    
        var jsObject2 = JSON.parse(jsonString2);
        alert(jsObject2[1].name)  //获取json中的值

    仅做了解：
        var st = JSON.stringify(jsObject); //js对象转换为json类型的字符串


3、(重点)AJAX
 　
    作用： 使用js向服务器发送请求，获取(或提交)页面数据，可以用来页面局部刷新，即页面无刷新加载数据

    格式：
    $.ajax({
        url:"请求的路径",
        type:"GET",
        data: //要提交到服务器的数据 (了解)
        contentType: //提交的数据的类型 (了解)
        dataType: "JSON",  //服务器返回给我们的数据格式
        success:function(resp){   回调函数
            //数据返回成功时执行的代码
            //resp就是服务器返回给我们的数据内容
            
        },
        error:function(){
            //数据返回失败时执行的代码
        }
    })

    常用参数：
    1、url 请求地址
    2、type 请求方式，默认是'GET'，常用的还有'POST'
    3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
    4、success 设置请求成功后的回调函数
    5、error 设置请求失败后的回调函数