jQuery技术学习总结

一、jQuery简介

• jQuery是一个JavaScript库，它能够简化JavaScript编程。
• jQuery是目前最流行的JS框架。
• jQuery能够兼容于目前所有主流的浏览器，包括IE6。
• jQuery能够对HTML元素进行选取和修改、实现JavaScript动画、选取操作dom对象、绑定事件、CSS操作、Ajax请求等。

二、第一个jQuery实例

/*
    $(document)：$是jQuery中的函数名称，document作为函数的参数
    作用是将document对象转化为jQuery库能用的对象

    ready 是jQuery中的函数 dom加载成功后会执行ready函数中的内容

    function是自定义函数，在onLoad之后执行
*/
$(document).ready(function () {
    alert("Hello jQuery")
})

//与上述代码功能相同（是其简化写法）
$(function(){
    alert("Hello jQuery")
})

三、dom对象与jQuery对象的相互转换

• dom对象转换为jQuery对象

/*
    dom对象：使用js创建的对象
    jQuery对象：使用jQuery语法创建的对象，jQuery对象是一个数组
    
    dom对象可以与jQuery对象相互转换

    dom对象转换为jQuery对象之后才可使用jQuery的函数
*/
function change() { 
    //将dom对象转换为jQuery对象
    var obj = document.getElementById("id");
    //使用dom的value属性性获取值
    alert(obj.value);
    //转换
    var jObj = $(obj);
    //显示结果
    alert(jObj.val());	//val()是jQuery中的函数，下文中有详细说明
}

• jQuery对象转换为dom对象

function change() {  
    //使用jQuery语法获取页面中的dom对象
    var obj = $("#id").get(0);     //通过数组下标获取dom对象
    var n = obj.value;
    obj.value = n * n;			//更新dom中value的值
}

四、jQuery选择器

• 基本选择器：id、class、标签、混合选择器等

function func1() { 
    var obj = $("#one");				//id选择器
    obj.css("background","red");		//更新css
}

function func2() { 
    var obj = $(".two");				//class选择器
    obj.css("background","red");		//更新css
}

function func3() { 
    var obj = $("span");				//标签选择器
    obj.css("background","red");		//更新css
}

function func4() { 
    var obj = $("*");					//全局选择
    obj.css("background","red");		//更新css
}

function func5() { 
    var obj = $("#one,.two");			//混合选择器
    obj.css("background","red");		//更新css
}

• 表单选择器：根据type属性值定位
  语法：$(":表单类型")

function func1() {
    var obj = $(":text");			//文本框
    alert(obj.val());
}

function func2() { 
    var obj = $(":radio");			//单选按钮
    for (var i=0; i < obj.length; i++){
        var dom = obj[i];
        alert(dom.value);
    }  
}

function func3() { 
    var obj = $(":checkbox");			//复选框
    for (var i=0; i<obj.length; i++){
        var dom = obj[i];
        var jobj = $(dom);
        alert(jobj.val());
    }
}

五、jQuery过滤器

• 基本过滤器：

    1.选择第一个first，保留数组中第一个dom对象     $("选择器:first") 
    2.选择最后一个last，保留数组中最后一个dom对象   $("选择器:last")
    3.选择数组中指定对象        		           $("选择器:eq(索引)")
    4.选择数组中小于索引的全部dom对象       		   $("选择器:lt(索引)")
    5.选择数组中大于索引的全部dom对象       		   $("选择器:gt(索引)")
  

//基本过滤器：
$(function(){
    $("#btn1").click(function(){
        var obj = $("div:first");			//获取所有div中第一个dom对象
        obj.css("background","red");
    })

    $("#btn2").click(function(){
        var obj = $("div:last");			//获取所有div中最后一个dom对象
        obj.css("background","red");
    })

    $("#btn3").click(function(){
        var obj = $("div:eq(2)");			//获取所有div中下标等于2的dom对象
        obj.css("background","red");
    })

    $("#btn4").click(function(){
        var obj = $("div:lt(2)");			//获取所有div中下标小于2的所有dom对象
        obj.css("background","red");
    })

    $("#btn5").click(function(){
        var obj = $("div:gt(2)");			//获取所有div中下标大于2的所有dom对象
        obj.css("background","red");
    })
})

• 表单属性过滤器：

/*
    表单属性过滤器
*/
$(function(){
    $("#btn1").click(function(){
        var obj = $(":text:enabled");			//获取所有文本框中可编辑的
        obj.val("hello");						//设置文本框的值
    })

    $("#btn2").click(function(){
        var obj = $(":checkbox:checked");			//获取所有复选框中被选中的
        for(var i=0; i<obj.length; i++){				//输出获取的值
            alert(obj[i].value);
        }
    })

    $("#btn3").click(function(){
        var obj = $("select>option:selected");			//获取所有下拉列表框中被选中的
        for(var i=0; i<obj.length; i++){				//输出获取的值
            alert(obj[i].value);
        }
    })
})

六、jQuery常用事件

$(function(){
	//1.鼠标单击事件
    $("#btn").click(function () {  
    	//添加新的按钮
        $("div").append("<input type='button' id='newBtn' value='新增按钮'/>")
        //为新增按钮添加监听事件
        $("#newBtn").on("click",function () {  
            alert("新增的按钮被单击了");
        })
    })
    
	//2.鼠标双击事件
	$("div").dblclick(function () {  
	    $("div").hide();
	})
	
	//3.表单事件
	$(":text").change(function(){
	    alert("表单已被修改")
	})
})

七、jQuery函数

• 函数：val()；text()；attr()；

  val()：操作dom对象中的value属性，带参数时是给value赋值，不带参数时是取值
  text()：操作数组中所有dom对象的文字显示内容属性
  attr()：对val,text之外的其他属性进行操作
  		$(选择器).attr("属性名")：获取dom对象数组第一个对象的属性值
  		$(选择器).attr("属性名","属性值")：设置数组所有dom对象的指定属性值
  

$(function(){
    $("#btn1").click(function(){
        var obj = $(":text");
        //获取第一个文本框值
        alert(obj.val());
        
        //获取所有文本框值
        for(var i=0; i<obj.length; i++){
             var dom = obj[i];
             alert(dom.value);
        }
    })

    $("#btn2").click(function(){ 
        $(":text").val("三国演义");
    })

    $("#btn3").click(function(){ 
        //text()函数用于获取所有div的文本值，连成一个字符串
        alert($("div").text());
    })

    $("#btn4").click(function(){ 
        //text("参数")函数用于设置所有div的文本值
        $("div").text("hahahahahah");
    })

    $("#btn5").click(function(){ 
        //attr()函数用于获取某标签指定属性的值
        alert($("img").attr("src"));
    })

    $("#btn6").click(function(){ 
        //attr("属性名","值")函数用于设置指定属性的值
        $("img").attr("src","../img/t16.jpg");
    })
})

• 函数：remove(); empty(); append(); html(); each()；

$(function(){
    $("#btn1").click(function(){
        //remove()去除所有父子对象
        $("select").remove();
    })

    $("#btn2").click(function(){
        //empty()只去除所有子对象
        $("select").empty();
    })

    $("#btn3").click(function(){
        //append(参数)为指定dom对象添加元素
        $("div").append("<input type='button' value='新增按钮' />");
        $("div").append("<table style='border:1px solid black;'><tr><td>第一列</td><td>第二列</td></tr></table>")
    })

    $("#btn4").click(function(){
        //html()获取标签内容
        alert($("span").html());
    })

    $("#btn5").click(function(){
        //html(参数)设置指定dom对象的内容
        $("span").html("我是新的<b>元素</b>");
    })

    $("#btn6").click(function(){
        //each()循环普通数组
        var arr = [11,22,33];
        $.each(arr, function (i,n) {  
            alert("i是索引："+i+",n是值："+n);
        })
    })

    $("#btn7").click(function(){
        //each()循环dom对象数组
        var arr = $(":text");
        $.each(arr, function (i,n) {  
            alert("i是索引："+i+",n是值："+n.value);
        })
    })

    $("#btn8").click(function(){
        //each()循环json数组
        var json = {"name":"张安","age":"23"};
        $.each(json, function (i,n) {  
            alert("i是key："+i+",n是值："+n);
        })
    })

    $("#btn9").click(function(){
        //each()循环对象，jquery对象就是包含若干个dom对象的数组
        var obj = $(":text");
        $(":text").each(function (i,n) {  
            alert("i="+i+", n="+n.value);
        })
    })
})

八、jQuery动画

• 隐藏、显示

$(function () {
    //隐藏元素
    $("#hide").click(function () {
        $("#view").hide();
    })

    //显示元素
    $("#show").click(function () {
        $("#view").show();
    })
})

• 淡入、淡出
  语法： $(选择器).fadeIn(speed,callback)
  语法： $(选择器).fadeOut(speed,callback)
  语法： $(选择器).fadeToggle(speed,callback)
  参数speed：淡入淡出的速度，取值slow、空、数字(毫秒)
  参数callback：为淡入淡出后执行的函数。

$(function () {
	//淡入
	$("#in").click(function () {
	    $("#div1").fadeIn();
	    $("#div2").fadeIn("slow");
	    $("#div3").fadeIn(4000);
	})
	
	//淡出
	$("#out").click(function () {
	    $("#div1").fadeOut();
	    $("#div2").fadeOut("slow");
	    $("#div3").fadeOut(4000);
	})
	
	//fadeToggle
	$("#io").click(function () {
	    $("#div1").fadeToggle();
	    $("#div2").fadeToggle("slow");
	    $("#div3").fadeToggle(4000);
	})
})

• 滑动

$(function () {
	//向下滑
	$("#slide1").click(function () {
	    $("#content").slideDown();
	})
	
	//向上滑
	$("#slide2").click(function () {
	    $("#content").slideUp(3000);
	})
	
	//slideToggle
	$("#slide3").click(function () {
	    $("#content").slideToggle("slow");
	})
})

• 动画
  语法：$(选择器).animate({param},speed,callback)
  参数speed：取值slow、空、数字(毫秒)
  参数params： 参数定义形成动画的 CSS 属性
  参数callback：完成动画后执行的函数

$(function () {
    //演示动画
    $("#begin").click(function () {  
        $("#div1").animate({
            left:'200px',
            width:'100px',
            heigth:'100px'
        },4000);
    })

    //停止动画
    $("#stop").click(function (){
        $("#div1").stop();
    })
})

九、jQuery实现Ajax异步请求

• 见往期文章：使用jQuery实现Ajax请求