锋利的jquery 学习笔记 二

2018-12-19  本文已影响0人  ft207741

Menu

第6章 jQuery与Ajax的应用

第7章 jQuery插件的使用和写法

第11章 jQuery性能优化和技巧


第6章 jQuery与Ajax的应用

跨域请求
<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers
<Directory />
    AllowOverride none
    Require all denied
</Directory>
<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>
<button>提交</button>
<script type="text/javascript">
 $("button").click(function () {
     $("#resText").load("http://localhost/hello.php",   // return的内容给id为restext的div
         function (data, status, xhr) {    // 检测状态,如果状态为success,就打印载入成功
             if(status=="success"){
                 alert("loaded...")
             }
         })
 })

  1. $.get()方法
$(function(){
    $("#send").click(function(){
        $.get("http://localhost/get1.php", {
            username:$("#username").val() ,
            content:$("#content").val()
        }, function (data, status){
            $("#resText").html(data)
        });
    })
})
// html代码同上;
$(function(){
    $("#send").click(function(){
        $.get("http://localhost/get2.php", {
            username :  $("#username").val() ,
            content :  $("#content").val()
        }, function (data, textStatus){
            var username = $(data).find("comment").attr("username");
            var content = $(data).find("comment content").text();
            var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
            alert(txtHtml); // 把返回的数据添加到页面上
        });
    })
})
//HTML代码同上
$(function(){
    $("#send").click(function(){
        $.get("http://localhost/get3.php", {
            username :  $("#username").val() ,
            content :  $("#content").val()
        }, function (data, textStatus){
            jsondata = JSON.parse(data)  //返回的是js字符串, 需要转换为json对象;
            var username = jsondata.username;
            var content = jsondata.content;
            var txtHtml = "<div class='comment'><h6>"
                +username+":</h6><p class='para'>"
                +content+"</p></div>";
            $("#resText").html(txtHtml);
        },"json");
    })
})
  1. $.post()方法

  1. $.getScript()
$(document.createElement("script")).attr("src","test.js").appendTo("head");
// 或者
$("<script type='text/javascript' src='test.js'/>").appendTo("head");
$(function () {
    $("button").click(function () {
        $.getScript("alert.js", function (data, status) {
            $("div").html(data);
            if (status=="success"){
                alert("called..")
            }
        })
    })
})

  1. $.getJSON()
$("button").click(function () {
    $.getJSON("getjson.json", function (data) {   // JSONParse载入的json文件,
        $.each(data,function (key, value) {         // 遍历data的key 和 value
            alert(key + " " + value)
        })
    })
})

$("button").click(function () {
     $.ajax({
         type:"GET",                                  // 传递数据方式;
         url:"http://localhost/get1.php",            // 文件要放在服务器里才会返回数据;
         data:{name:"Bob", age:"17"},                // 也可以直接写字符串"&name=Bob&age=17"
         dataType:"html",
         success:function (data,status) {
             alert(data);
            $("div").html(data);
            if(status=="success"){
                alert("return data success!")
            }
         },
         error:function (xhr,status,thrown) {
             alert(status+thrown)
         }
     })
 })

  1. serialize()方法
$("button").click(function () {
    $.ajax({
        type:"GET",
        url:"http://localhost/get1.php",
        data:$("#myForm").serialize(),           // get所有form里面的input的val,name是变量;
        dataType:"html",
        success:function (data,status) {
            alert(data);
            $("div").html(data);
            if(status=="success"){
                alert("return data success!")
            }
        },
        error:function (xhr,status,thrown) {
            alert(status+thrown)
        }
    })
})

  1. serializeArray()方法
<form>
    <input type="text" name="check1" id="check1">你喜欢夏天吗1?        <!--input 必须要有name属性。name会作为变量名传递-->
    <input type="text" name="check2" id="check2">你喜欢夏天吗2?
    <input type="text" name="check3" id="check3">你喜欢夏天吗3?
    <input type="text" name="check4" id="check4">你喜欢夏天吗4?
</form>
<button>提交</button>
<script>
    $(function () {
        $("button").click(function () {
            var re = $("input").serializeArray();
            $.each(re, function (i, item) {
                alert(i + item.value)                           // 键值对一组。通过item.value获取值
            })
        })
    })
</script>

  1. $.param()方法
var obj = $.param({name:"bob",age:17});
document.write(obj)       // name=bob&age=17 

<div id="loading">加载中…</div>

然后用CSS控制元素隐藏,当Ajax请求开始的时候,将此元素显示,用来提示用户Ajax请求正在进行。当Ajax请求结束后,将此元素隐藏。代码如下:

$("#loading").ajaxStart(function(){
    $(this).show();
});
$("#loading").ajaxStop(function(){
    $(this).hide();
}); //也可以使用链式写法

第7章 jQuery插件的使用和写法

 // 下载地址:https://github.com/jquery-validation/jquery-validation/releases
<script src="./js/jquery.validate.js" type="text/javascript"></script>   // 插件本身
<script src="./js/jquery-validation/dist/localization/messages_zh.js" type="text/javascript"></script> // 中文补丁
<form class="cmxform" id="commentForm" method="get" action="#">
    <fieldset>
        <legend>一个简单的验证带验证提示的评论例子</legend>
        <p>
            <label for="cusername">姓名</label><em>*</em>
            <input id="cusername" name="username"
                   size="25"  />
        </p>
        <p>
            <label for="cemail">电子邮件</label><em>*</em>
            <input id="cemail" name="email"
                   size="25"  />
        </p>
        <p>
            <label for="curl">网址</label><em>&nbsp;</em>
            <input id="curl" name="url"
                   size="25"  value="" />
        </p>
        <p>
            <label for="ccomment">你的评论</label><em>*</em>
            <textarea id="ccomment" name="comment"
                      cols="22"></textarea>
        </p>
        <p>
            <label for="cvalcode">验证码</label>
            <input id="cvalcode" name="valcode" size="25"  value="" />=7+9
        </p>
        <p>
            <input class="submit" type="submit" value="提交"/>
        </p>
    </fieldset>
</form>
<script>
    $.validator.addMethod(                  // 创建**自定义规则**的方法
        "formula",                 // define验证规则的名称
        function(value, element, param) {   //怎么验证的function;value==input里的value,element==input name的值入,param==规则的值;
            return value == eval(param)      //  是否符合规则 true false
        }, "wrong number");                   //  错误提示信息

    $("#commentForm").validate({            // 调用规则验证指定元素里相应的name元素是否符合规则
        rules: {                               //
            username: {required: true, minlength: 2},      // name属性是username的元素 用该规则验证;
            email: {required: true, email: true},
            url:"url",
            comment: "required",
            valcode: {formula: "7+9"}                       //  name属性是valcode的元素用formula的自定义规则来验证,"7+9"传給param
        },
        messages: {                                         //   自定义设置错误提示信息
            username: "用户名是必填项目",
            email: {
                required: "邮箱是必填项目",
                email:"邮箱格式不正确"
            },
            url:"网址错拉",
            comment: "必填"
        }
    })
</script>

<body>
<form id="myForm" action="http://localhost/get1.php" method="GET">
    名称: <input type="text" name="name" /> <br/>
    地址: <input type="text" name="address" /><br/>
    自我介绍: <textarea name="comment"></textarea> <br/>
    <input type="submit" id="test" value="提交" /> <br/>
    <div id="output1" style="display:none">提交成功!欢迎下次再来</div>
</form>
<div  class='comment'>已有评论:</div>
<div id="resText" >
</div>
</body>
<script>
    $(document).ready(function() {
        var options = {
            target:        '#resText',   // target element(s) to be updated with server response
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse,  // post-submit callback

            // other available options:
            // url: "http://localhost/demo.php"         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        }

        $('#myForm').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });
    })
        // 提交前的回调函数;
        // 在里面进行表单验证,利用validate插件来进行验证;
        function showRequest(formData, jqForm, options) {
            $("#myForm").validate({            // 调用规则验证指定元素里相应的name元素是否符合规则
                rules: {                               //
                    name: {required: true, minlength: 2},      // name属性是username的元素 用该规则验证;
                    address: {required: true, minlength: 6},
                    comment: "required"
                }
            })
            var p = $("#myForm").valid()     // 如果验证通过为true再提交;提交就是return true
            if (String(p) == "true"){        // validate的valid方法会返回true or false
                alert("in if true;")
                var queryString = $.param(formData);
                alert('aaaaaaAbout to submit: \n\n' + queryString);
                return true;
            }
            else{
                alert("in else false;")       // 没通过则不提交;
                return false
            }
    }
  // 提交后的回调函数。得到返回的数据和状态等;
    function showResponse(responseText, statusText, xhr, $form)  { 
        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
            '\n\nThe output div should have already been updated with the responseText.');
    }
</script>

<head>
    <script src="./js/jquery.cookie.js" type="text/javascript"></script>
</head>
<body>
用户名:<input type="text" name="username" id="username"/> <br/>
<input type="checkbox" name="check" id="check"/>记住用户名
</body>
<script>
    $(function() {
        var COOKIE_NAME = 'username';
        // 判断cookie里是否有“username”的cookie,如有就自动把cookie里的值填进去;
        if( $.cookie(COOKIE_NAME) ){
            $("#username").val($.cookie(COOKIE_NAME));
            }
        $("#check").click(function(){
            if(this.checked){
                // 如果checked,那就把现在的username里的值覆盖掉原来cookie里的值,
                // path: 定义cookie的有效路径。默认情况下,该参数的值为创建 cookie 的网页所在路径 。
                // 如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。
                $.cookie(COOKIE_NAME, $("#username").val() , {
                    // 可选参数:
                    path: '/',
                    expires: 10,
                    domain:"example.com",
                    secure:true,
                });
            }else{
                // 如果你想删除一个定义 了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null,{ path: '/' });。
                $.cookie(COOKIE_NAME, '', { path: '/' });
            }
        });
    });
</script>

// 可以在插件头尾都加上一个分号,以免他人的不规范代码给插件带来影响。
;(function test($) {             
    var name = "Bob";
    var func = function(){
      alert(name)
    };
    $.func = func    // 让匿名函数内部的函数func()可在全局范围内访问;
})(jQuery)

$.func()    // 调用匿名函数内部的func函数;func函数可调用到匿名函数内部的其它局部变量;

// $.extend 扩展对象
function options(obj1, obj2){
    target = {
        name: "name",
        age: "0",
        job: null
    }
    // 用后面的对象数据合并到第一个target对象
    jQuery.extend(target, obj1, obj2)   
    return options
}
newOptions = options({name:"Bob"},{age:1})
    // 遍历对象的item
$.each(newOptions,function (k,v) { 
    alert(k + v)
})

;(function ($) {
    $.fn.extend({
        "color":function (colorName) {
            if(!colorName){
                return this.css("color")
            }else{
                return this.css("color",colorName)
            }
        }})
})(jQuery);
<head>
    <script src="./js/jquery.color.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv" style="color:red">div test</div>
</body>
<script>
    alert($("#mydiv").color()) // get color
    alert($("#mydiv").color("cyan")) // set color
// html
<head>
<style>
        .odd{
            background-color:orange;
        }

        .selected{
            background-color:cyan;
        }
</style>
    <script src="./js/jquery.alterBgColor.js" type="text/javascript"></script>
</head>
<body>
<table id="table1">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="choice" value=""/></td>
        <td>张山</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>李四</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>王五</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>找六</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>Rain</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>MAXMAN</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    </tbody>
</table>


<br /><br />


<table id="table2">
    <thead><tr><th> </th><th>姓名</th><th>性别</th><th>暂住地</th></tr></thead>
    <tbody>
    <tr>
        <td><input type="checkbox" name="choice" value=""/></td>
        <td>张山</td>
        <td>男</td>
        <td>浙江宁波</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>李四</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" checked="checked" /></td>
        <td>王五</td>
        <td>男</td>
        <td>湖南长沙</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>找六</td>
        <td>男</td>
        <td>浙江温州</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="choice" value="" /></td>
        <td>Rain</td>
        <td>男</td>
        <td>浙江杭州</td>
    </tr>
    <tr id="mytrr">
        <td><input type="checkbox" name="choice" value="aaa" checked="" /></td>
        <td>MAXMAN</td>
        <td>女</td>
        <td>浙江杭州</td>
    </tr>
    </tbody>
</table>

</body>
<script>
    $("#table2").alterBgColor()
</script>

//插件代码

;(function($){
    $.fn.extend({
            "alterBgColor": function(options){
                var option = {
                    odd:"odd",
                    even:"even",
                    selected:"selected"
                };
                var newOptions = $.extend(option, options);   // 扩展参数对象
                $("tbody>tr:odd", this).addClass(newOptions.odd);  // 给偶数行加上odd class
                $("tbody>tr:even", this).addClass(newOptions.even);
                $("tbody>tr", this).click(function () {           // 给选中的table的tr加上click事件
                    var hasSelected = $(this).hasClass(newOptions.selected);  //判断单击选中的tr是否有class selected
                    // 如果选中的tr已经有class selected 则去掉, 没有则加上;再找到单选框子元素,做同步勾选或取消勾选操作;
                    $(this)[hasSelected? "removeClass": "addClass"](newOptions.selected).find(':checkbox').attr('checked',!hasSelected);
                })
                //如果单选框默认情况下是选择的,则自动加上class selected, 即高色显示
                $('tbody>tr:has(:checked)',this).addClass(newOptions.selected);
                return this  //返回jQuery对象
            }
    })
})(jQuery)

  1. 封装全局函数的插件
//html代码
<head>
    <script src="./js/jquery.trim.js" type="text/javascript"></script>
</head>
<body>
    <input id="input" value="    aabb  "/>
    <input id="in">
</body>
<script>
    text = $("input").val();
    ntext = $.trim(text);
    $("#in").val(ntext)
</script>
// 插件代码
;(function ($) {
        $.extend({"ltrim":function(text){                  // 去除左空格的全局函数
                return (text||"").replace(/^\s+/g, "");    //用正则表达式去掉左空格
            },
            "rtrim":function(text) {
                return (text||"").replace(/\s+$/g, "")
            }
        })
    })(jQuery);

  1. 自定义选择器
$.expr[':'].test = function(obj, index, meta, stack) {
    /* obj   - is a current DOM element 当前DOM元素
       index - the current loop index in stack 当前元素在stack中的索引,
       meta  - meta data about your selector !!! 用来存参数值,详见带参数的自定义选择器。
       stack - stack of all elements to loop 选择器所选中的元素集。
   
       Return true to include current element 返回 true 就包含当前元素
       Return false to explude current element 返回 false 就抛弃当前元素
    */
};
$('.someClasses:test').doSomething();
$('.someClasses:test(argument)').doSomething();
[
    ':test(argument)', // full selector 整个自定义选择器
    'test',            // only selector 自定义选择器名称
    '',                // quotes used   使用了什么引号(很明显这里没有)
    'argument'         // parameters    参数
]
$('.someClasses:test("arg1, arg2")').doSomething();
[
    ':test("arg1, arg2")', // full selector 整个自定义选择器
    'test',                // only selector 自定义选择器名称
    '"',                   // quotes used   使用了什么引号(这里用的是双引号)
    'arg1, arg2'           // parameters    参数
]
$.expr[':'].withAttr = function(obj, index, meta, stack){
    return ($(obj).attr(meta[3]) != '');
};
$('a:withAttr(rel)').css('background-color', 'yellow');

第11章 jQuery性能优化和技巧

//在全局范围定义一个对象 (例如: window对象)
window.$my = {
    head : $("head"),
    traffic_light : $("#traffic_light"),
    traffic_button : $("#traffic_button")
};
function do_something(){
// 现在你可以引用存储的结果并操作它们
    var script = document.createElement("script");
$my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
    $my.cool_results = $("#some_ul li");
$my.other_results = $("#some_table td");
// 将全局函数作为一个普通的jquery对象去使用.
    $my.other_results.css("border-color", "red");
$my.traffic_light.css("border-color", "green");
}
//你也可以在其他函数中使用它
//记住,永远不要让相同的选择器在你的代码里出现多次。
var top_100_list = [...], // 假设这里是100个独一无二的字符串
    $mylist = $("#mylist"); // jQuery选择到 <ul> 元素
for (var i=0, l=top_100_list.length; i<l; i++){
    $mylist.append("<li>" + top_100_list[i] + "</li>");
}
var top_100_list = [...] , $mylist = $("#mylist"),
    top_100_li = ""; // 这个变量将用来存储我们的列表元素
for (var i=0, l=top_100_list.length; i<l; i++){
    top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);
$.each(array, function (i) {
    array[i] = i;
});
//使用for代替each()方法,代码如下:
var array = new Array();
for (var i=0; i< array.length; i++) {
        array[i] = i;
    }
$('#myTable td').click(function(){
    $(this).css('background', 'red');
});
$('#myTable').click(function(e) {
    var $clicked = $(e.target);  // e.target 捕捉到触发的目标元素
    $clicked.css('background', 'red');
});
$('#myTable').on('click','td',function() {
    $(this).css('background', 'red');
});
var array = [];
for(var i=0;i<=10000;i++) {
    array[i] = '<li>'+i+'</li>';
}
$('#list').html(array.join(''));
<div id="d1" data-role="page" data-last-value="43" data-options='{"name":"John"}'></div>
//为了读取数据,你需要使用如下代码:
$("#d1").data("role");                  // "page"
$("#d1").data("lastValue");         //  43
$("#d1").data("options").name; // "John";



上一篇 下一篇

猜你喜欢

热点阅读