Python学习第156天（jQuery部分知识回顾）

今天继续关于bootstrap的部分知识讲解，过程中涉及了很多关于jQuery部分的知识，因为不知道就回看了一下，先看代码，根据代码找到对应的知识点。

<script>
    $(function () {
        bindEvent();
        bindSave();
    });

    function bindEvent() {
        $('#addBtn').click(function () {
            $('#addModal').modal('show');
        })
    }
    function bindSave() {

        $('#btnSave').click(function () {
            var postData = {};
            $('#addModal').find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr('name');
                if(n=='gender'){
                    if($(this).prop('checked')){
                        postData[n] = v;
                    }
                }else{
                    postData[n] = v;
                }
            });
            $.ajax({
                url: '/add_student/',
                type: 'POST',
                data: postData,
                success:function (arg) {
                    // arg是字符串
                    // JSON.parse将字符串转换成字典， json.loads
                    var dict = JSON.parse(arg);
                    if(dict.status){
                        window.location.reload();
                    }else {
                        $('#errorMsg').text(dict.message);
                    }
                }
            })

        });
    }
</script>

首先说一下jQuery是怎么遍历找到的所有input、select标签中的数据，集中在：

var postData = {};
            $('#addModal').find('input,select').each(function () {
                var v = $(this).val();
                var n = $(this).attr('name');
                if(n=='gender'){
                    if($(this).prop('checked')){
                        postData[n] = v;
                    }
                }else{
                    postData[n] = v;
                }
            });

如果想要在某个元素下寻找特定的元素，仅仅依靠上面这个方法，就必须对 $("#id")获取的元素进行遍历，获取其子元素。如此一来就显得格外的繁琐，代码量也非常庞大。

于是这就需要用到find()方法。　　

$("#id").find("#child")；
$("#id").find(".child")；
$("#id").find("input[type=‘image‘]")

非常方便好用。

除了上面的find()方法之外，还有一种查找子元素的方法。

　　最基本的：$(".child",parent);

each()方法

有的时候经常会用到数组。在不知道each()方法前，如果碰到数组遍历，

接着是<span>标签

提示：请使用 <span> 来组合行内元素，以便通过样式来格式化它们。

注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。

$(this).attr(key); 获取节点属性名的值，相当于getAttribute(key)方法
$(this).attr(key,
value); 设置节点属性的值，相当于setAttribute(key,value)方法
eg:<div id="w_1"
class="widget" diywidgetid="${template.diyWidgetId}"></div>
var
diywidgetid = $('#w_1').attr('diywidgetid'); //获取节点属性的值

$(this).val();获取某个元素节点的value值，相当于$(this).attr(“value”);

$(this).val(value);设置某个元素节点的value值，相当于$(this).attr(“value”,value);

eg:<input id="i_eg" value="1" type="text"></input>

var i_eg=$('#i_eg').val(); // 获取元素节点的value 值

prop（）方法

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

最关键的jQuery自定义方法：

总结：

* jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$("#**").aa()

*jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa()

* jQuery中添加自定义或函数方法3,（只是在前2种方法的基础上添加了参数处理，严格来说不算一种jQuery 自定义方法）如:　　 $.myFuncThree("www.baidu.com",'hello',myFuncThreeCB);

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body >
         <input type="button" value="按钮" id="myBtn"  >
    </body>
    <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function(){
     
        })
        /**
         * jQuery中添加自定义或函数方法1,如$.fn.extend({'aa':function(){}})或jQuery.fn.aa=function(){},这种调用时就得这样,$("#**").aa()
         */
        jQuery.fn.myFuncOne=function(){
            alert("我的自定义jquery方法1");
        }
        jQuery.fn.extend({
            'myFuncFour':function(){
                alert("我的自定义jquery方法4");
            }
        })
        /**
         * jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa()
         */
        jQuery.extend({
            'myFuncTwo':function(){
                alert("我的自定义jquery方法2");
            }
        })
        /**
         * jQuery中添加自定义或函数方法3,如 $.myFuncThree('/post/getsecurejsonpost',{}, function(data) {});
         */
        $.myFuncThree = function(url, data, successCB){
            alert("我的自定义jquery方法3,参数："+url);
             if(successCB){//回调
                successCB(url);
             }else{
                alert("没有回调");
             }
        }
         
        function myFuncThreeCB(url){
            alert("myFuncThreeCB+"+url)
        }
         
        /*
         * 测试按钮
         */
        $("#myBtn").click(function(){
            $("#myBtn").myFuncOne();
            $("#myBtn").myFuncFour();
            $().myFuncTwo();
            $.myFuncThree("www.baidu.com",'hello',myFuncThreeCB);
            $.myFuncThree("www.baidu.com",'hello');
        })
    </script>
</html>

今天内容很杂，算是笔记吧。。。