锋利的jQuery笔记2

2015-04-01 本文已影响106人暗夜的怒吼

标签：我的笔记

JQuery中的动画

显隐 show、hide

$("div").hide(); //隐藏所有DIV元素，相当于sytle=”display:none”
$("div").show(); //显示所有DIV元素

加特效 duang

$("div").hide(1000);//一秒内隐藏

slow() 600毫秒， normal() 400毫秒， fast() 200毫秒

透明度 fadeIn、fadeOut

$("div").fadeOut(); //变透明，直至消失（支持速度参数）
$("div").fadeIn(); //变清晰

收缩 slideUp、slideDown

$("div").slideUp(); //向上收缩，直至消失（支持速度参数）
$("div").slideDown(); //向下

自定义动画animate

$(elem).animate(params, speed, callback);

params：样式属性及值的映射 {property1:"value", property2:"value"}
speed: 速度参数
callback: 动画完成后执行函数，可选

即：用speed毫秒将elem的样式改为params的值。

$("#myDiv").animate({left:"500px"}, 2000); //两秒内将元素的left属性改为500px
$("#myDiv").animate({left:"+=500px"}, 2000); //同上，支持累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上，多重动画，同时执行

多个animate可以形成动作队列。

停止动画

$("#myDiv").stop([cleanQuene] [,gotoEnd]);

判断元素是否在执行动画

$("#myDiv").is(":animate");

其它动画

$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%

jQuery操作表单、表格

表单应用

单行文本框

$(":input").focus(function() { // 获得焦点时
    $(this).addClass("focus");
    if ($(this).val() == this.defaultValue) {
        $(this).val("");
    }
}).blur(function() {  // 失去焦点时
    $(this).removeClass("focus");
    if ($(this).val() == '') {
        $(this).val(this.defaultValue);
    }
});

多行文本框

1、放大、缩小多行文本框的高度

var $txt = $(“#textArea”);
$(“.bigger”).click(function(){
    if( $txt.height() < 500) 
        $txt.height( $txt.height() + 50 );
});

复选框（实现全选、全不选、反选）

//全选
$(“#btnCheckedAll”).click(function(){ 
    $(“[name=items]:checkbox”).attr(“checked”, true);
});
//全不选
$(“#btnCheckedNone”).click(function(){ 
    $(“[name=items]:checkbox”).attr(“checked”, false);
});
//反选
$(“#btnCheckedRev”).click(function(){ 
    $(“[name=items]:checkbox”).each(function(){
        $(this).attr(“checked”, !$(this).attr(“checked”));
        //this.checked = !this.checked; //这里用js更简单
    }
});
//输出值
$("#btnCheckedRev").click(function(){
    var str="你选中的是：\r\n";
    $('[name=items]:checkbox:checked').each(function(){
        str+=$(this).val()+"\r\n";
    })
    alert(str);
});

下拉框

将一个下拉列表的选中项搬至另一个下拉列表

//将选中选项搬过去
$(“#btnAdd”).click(function(){ 
    $(“#mySelect1 option:selected”).appendTo(“#mySelect2″);
});
//将全部选项搬过去
$(“#btnAddAll”).click(function(){ 
    $(“#mySelect1 option”).appendTo(“#mySelect2″);
});
//双击项搬过去
$(“#mySelect1″).dblclick(function()[ 
    $("#mySelect1 option:selected").appendTo("#mySelect2");
}

表单验证

<form>
    <div>
        <label>用户名：</label>
        <input type="text" id="txtUid" value="" />
    </div>
</form>

//往每个class有required样式的input元素后面添加*号
$("form :input.required").each(function(){ 
    $(this).parent().append( $("<span class='star'>*</span>") );
});

//失去焦点时验证域
$("form :input.required").blur(function(){ 
    if( this.value == "" ){
        $(this).parent().append( $("<span class='error'>必填字段</span>") );
    }
    else{
        $(this).parent().append( $("<span class='success'>验证正确</span>") );
        $(this).parent().find(".error").remove();
    }
}).keyup(function(){ //用户每点一个键触发
    $(this).triggerHandler("blur");
}).focus(function(){ //控制有焦点时触发
    $(this).triggerHandler("blur");
});
$("#btnSubmit").click(function(){
    $("form :input.required").trigger("blur"); 
    //让所有需要验证的域失去焦点
    var errNum = $("form .error").length;
    if( errNum ){
        alert("有验证字段失败，请重新填写");
        return false;
    }
});

表格应用

$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

$("tr:contains('王五')").addClass("highlightTr"); //查找包含”王五”的行，添加highlightTr样式

$("tr").click(function(){
    $(this).addClass("selectedTr") //给当前行添加选中样式
    .siblings().removeClass("selectedTr") //反选移除选中样式
    .end() //结束，返回$(this)，否则则是反选的行
    .find(':radio").attr("checked",true); //在当前行查找单选框，选中它
});

jQuery与Ajax

加载数据：$(selector).load()

$(selector).load( url [,data] [,callback] )方法
url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数

1、 载入HTML文档
$(“#myDiv”).load(“hello.html”); //向myDiv元素加载hello.html的内容

2、 筛选载入的HTML文档 
$(“#myDiv”).load(“hello.html .myClass”); //筛选，只加载hello.html中myClass样式的内容

3、 传递方式 
load()方法的传递方式根据参数data来自动指定。如果没有参数传递，则采用GET方式传递；反之，则自动转换为POST方式。 

$(“#myDiv”).load(“hello.html”, function(){
    //...
} );//无参数是GET
$(“#myDiv”).load(“hello.html”, {id:’123′, name:’dier’}, function(){
    //...
} ); //有参数是POST 

4、 回调参数
$(“#myDiv”).load(“hello.html”, function(responseText, textStatus, XMLHttpRequest){ 
    //responseText : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout
    //XMLHttpRequest : Ajax对象
});

请求数据：$.get()，$.post()

$.get( url [,data] [,callback] [,type])
$.post( url [,data] [,callback] [,type])

url：要请求的页面的地址
data：要发送的相关参数
callback：回调函数
type：指定服务器返回内容的格式 xml html script json text _default

$.get( “test.aspx”, {id:”123″, name:”dier”}, function(data,textStatus){ 
    //回调函数只有当状态是success才触发
    //data : 请求返回的内容
    //textStatus : 请求状态 success error notmodified timeout

    //1、当data是HTML时，直接加载
    $(“#myDiv”).html(data);

    //2、当data是XML时，可筛选 <user id=”123″ name=”dier” age=”27″ />
    var age = $(data).find(“user”).attr(“age”);

    //3、当data是JSON时，可直接点出属性来 {id:”123″, name:”dier”, age:”27″}
    var age = data.age;
});

脚本载入：$.getScript()

$.getScript(url [,callback])方法

//1、动态加载JS脚本
$.getScript(“test.js”);
    
//2、动态加载JS脚本，并使用回调函数
$.getScript(“test.js”, function(){ 
    //do something..
});

getScript()函数可以远程载入js脚本并且执行。（JSONP）。

请求JSON数据：$.getJSON()

$.getJSON(url [,callback])方法

它是设置了JSON参数的 ajax()函数的一个简化版本。也是可以跨域使用的。

$(function(){ 

    //1、动态加载JS脚本
    $.getJSON(“test.js”);

    2、动态加载JS脚本，并使用回调函数
    $.getJSON(“test.js”, function(data){ 
        //do something..
        $.each( data, function(index, item){
            //遍历，相当于foreach
            //index : 索引
            //item : 当前项内容
            //return false; 退出循环
        });
    });
});

请求数据：$.ajax(options)方法

最复杂的请求数据方法ajax。

url : 请求的地址
type : 请求的方式 GET POST 默认为GET
timeout : 请求超时时间(单位：毫秒）
data : 请求时发送的参数（String,Object）
dataType : 预期返回的数据类型 xml html script json jsonp text
bdforeSend : 发送请求前触发事件，如果return false则取消发送 function(XmlHttpRequest){}
complete : 请求完成后触发事件，不管成功与否 function(XmlHttpRequest, textStatus){}
success : 请求完成并且成功时触发事件 function(data, textStatus){}
error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global : 是否为全局请求，默认为true，可使用AjaxStart、AjaxStop控制各种事件

$.ajax({
    url : “test.aspx”,
    type : “POST”,
    timeout : “3000″,
    data : {id:”123″, name:”dier”},
    dataType : “HTML”,
    success : function(data,textStatus){
        $(“#myDiv”).html( data );
    }
    error : function(XmlHttpRequest, textStatus, errThrown){
        $(“#myDiv”).html( “请求失败：” + errThrown );
    }
});

序列化元素

序列化字符串 serialize()

//将form1整个表单中的所有域序列化成提交的参数，支持自动编码
//比如：`name=abc&age=18`
$.get( “test.aspx”, $(“#form1″).serialize(), function(data,textStatus){
    //。。。
});

序列化数组 serializeArray()

//将所有checkbox和radio选中的内容序列化
//比如：`mycheck=1&mycheck=4&myradio=1`
var arr = $(“:checkbox, :radio”).serializeArray();

对象序列化 param()

var obj = {id:”123″, name:”dier”, age:”27″};
var kv = $.param(obj); //id=123&name=dier&age=27

JQuery中的全局Ajax事件

ajaxStart(callback) //请求开始时触发
ajaxStop(callback) //请求结束时触发
ajaxComplete(callback) //请求完成时触发
ajaxSuccess(callback) //请求成功时触发
ajaxError(callback) //请求失败时触发
ajaxSend(callback) //请求发送前触发

$(“#loading”).ajaxStart(function(){
    //当有AJAX请求时显示，完成时隐藏
    $(this).show();
}.ajaxStop(function(){
    $(this).hide();
});

锋利的jQuery笔记2

JQuery中的动画

显隐 show、hide

透明度 fadeIn、fadeOut

收缩 slideUp、slideDown

自定义动画animate

其它动画

jQuery操作表单、表格

表单应用

单行文本框

多行文本框

复选框（实现全选、全不选、反选）

下拉框

表单验证

表格应用

jQuery与Ajax

加载数据：$(selector).load()

请求数据：$.get()，$.post()

脚本载入：$.getScript()

请求JSON数据：$.getJSON()

请求数据：$.ajax(options)方法

序列化元素

序列化字符串 serialize()

序列化数组 serializeArray()

对象序列化 param()

JQuery中的全局Ajax事件

jQuery插件

猜你喜欢

热点阅读

锋利的jQuery笔记2

JQuery中的动画

显隐 show、hide

透明度 fadeIn、fadeOut

收缩 slideUp、slideDown

自定义动画animate

其它动画

jQuery操作表单、表格

表单应用

单行文本框

多行文本框

复选框 （实现全选、全不选、反选）

下拉框

表单验证

表格应用

jQuery与Ajax

加载数据：$(selector).load()

请求数据：$.get()，$.post()

脚本载入：$.getScript()

请求JSON数据：$.getJSON()

请求数据：$.ajax(options)方法

序列化元素

序列化字符串 serialize()

序列化数组 serializeArray()

对象序列化 param()

JQuery中的全局Ajax事件

jQuery插件

猜你喜欢

热点阅读

复选框（实现全选、全不选、反选）