菜鸟程序猿之jQuery使用

一、jQuery
    1、jQuery是2006年推出的，一经推出 风靡世界，简介的语法、灵活的写法。jQuery就是js的高级类库。可以更加高效的、简单的开发js.
        现在浏览器把js作为一个默认的脚本，都通用。
    
    2、jQuery的版本要求
        1.X ----IE6+
        2.X-----IE9+
        3.X-----IE9+
    
    3、jQuery的语法
        $("要选择的元素").action("具体的操作")
        $("#person").val();
        必须导入jQuery的类库   js文件
        
    4、Aptana插件
        现在最为流行的js页面插件
        插件的使用：
    
    5、对象的转换
        ★dom对象转化为 jQuery     $(dom)===>jQuery对象
        ★jQuery对象转化为dom      
        jQuery对象就是一个Object类型的数组。
        var dom1 = $q.get(0);
        alert(dom1.value+"~~~~~这是dom1对象");
        var dom2 = $q[0];
        alert(dom2.value+"~~~~~这是dom2对象");
        
    6、选择器的使用：
        ★基本选择器：
            $("#b4")  $("input")  $(.mini)   $("#one,input")
            
            6.2层级选择器
            $("form input")   能够匹配form表单下的后 代input     (中间加“ 空格”)
            $("form > input")匹配所有form 下的子元素
            $("label + input")匹配所有紧接在 label 元素后的 input元素
            $("form ~ input")找到所有与表单同辈的 input 元素
            Siblings()能够匹配所有给定元素的兄弟。
            
        ★基本过滤选择器
            可以选择指定的位置 包括
            ：first
            ：last
            ：odd
            ：even
            :not
            ：gt
            :lt
            ：eq
            :header
            
        ★内容选择器
            :contains 匹配包含给定文本的元素
            :empty 匹配所有不包含子元素或者文本的空元素
            :has 匹配含有选择器所匹配的元素的元素
            :parent 匹配含有子元素或者文本的元素
        
        ★可见性选择器
            :hidden 所有的隐藏的属性
            :visible  所有的可见的元素
        
        ★属性选择器
            $("div[id]")  匹配含有ID的div
            $("input[name='newsletter']  name属性的值为XXXX
            $("input[name!='newsletter']") name属性的值不等于XXXX
            $("input[name^='news']")   name属性的值以XXX开头
            $("input[name$='letter']")   name属性以XXXX结尾
            $("input[name*='man']")    name属性包含XXXX
            $("input[id][name$='man']")  多个属性同时满足
        
        ★子元素选择器
            $("ul li:nth-child(2)")   查找所有的ul下边第2个li标签
            下标从1开始
            $("ul li:first-child")   查找所有的ul下第一个li标签
            $("ul li:last-child")     查找所有的ul下的最后一个li标签
            $("ul li:only-child")      查找父元素下只有一个子元素的li标签
        
        ★表单选择器
            ：checked  被选中的单选框和复选框
            ：selected  被选中的option标签
            其他的按照type类型去匹配
            ：checkbox  所有的复选框
        
    7、attr的用法
        通过attr可以获取属性的值     $("#b1").attr("name")
        为属性赋值              $("#b1").attr("name","1607班")  
    
    8、children()
        能够匹配给定元素的所有子元素。
        
    9、追加方法
        A.append(B)    将B中选中的元素 追加到A中。
        A.appendTo(B)   将A中选中的元素追加到B中。
    
    10、创建标签
        $("<tr ></tr>")
    
    11、parent表示父节点
    
二、JSON
    SON(JavaScript Object Notation) 是一种轻量级的数据交换格式,
 
    1、数据传递的形式
        ★xml的格式
        要有xml传递数据必须满足某种格式。并且格式是固定的。使用场景。传递数据格式固定，并且变化不大。
        
        ★JSON格式
        数据的参数没有固定的要求。并且传递非常简单。值的写法也很灵活。
            键值对
                {"key1":value1,"key2":value2}
            格式的选择
                如果数据类型的底层是array就用Array[]
                如果是map类型就用Object
            json对象的转化
                可以通过JsonObject.formObject()将对象类型转化为JSON串。
                转化的方式 调用的是对象中的GetXXX() 获取的key的值就是将GetName()==> name形成{"name":"XXX"}的格式。
                可以将 array list map Object转化为json格式
                
    2、jQuery的ajax
        ★AJAX
            异步刷新：
            当发送请求时  页面局部刷新。整个页面不会重新加载
        
        ★传统AJAX的问题
            传统的AJAX在使用上非常不便捷。需要收到的创建XMlHTTP对象。
            并且还需要设置多个参数并且进行判断。代码非常的繁琐。
            
        ★jQuery中的AJAX
            $.post(url,jsonData,function(data){
                
            });
            或
            $.ajax({
                type: "POST",
                url: "",
                data: {
                    
                },
                datatype: "text",
                async:false,
                success: function (data) {
                    
                },
                error: function (err) {
                   
                }
            })