jQuery快速学习

JQuery
第二节 基础选择器 + ~ > . # 符号意思
$("#my_id")
$(".my_class")
$("button")
$("button,label")
$("div label") //里面所有
$("div label").css("border","solid 5px red")
$("parent > child")//层级关系 不包括孙子辈
$("prev + next") prev任何有效的选择器 next为另一个选择器 +表示一种上下的层级关系
$("p + lable").css("background-color","red");//p紧邻的一个元素label
$("p~label").css("border", "solid 1px red");
  //p下面全部相邻元素         
$("p~label").html("我们都是p先生的粉丝");
第三节 过滤选择器
:first
:last
$("li:last").css("background-color", "red");
$("li:eq(2)").css("background-color", "#60F");
$("li:contains('jQuery')").css("background", "green");
$("li:has('label')").css("background-color", "blue");//$("div:has(span) > span")
var $strHTML = $("input:hidden").val();
        
$("div").html($strHTML);//将iput里面的隐藏内容显示到div中
$("li:visible").css("background-color","blue");//获取全部可见的元素
$("li[title='蔬菜']").css("background-color", "green");//[attribute=value]属性选择器
$("li[title!='蔬菜']").css("background-color", "green");//[attribute!=value]属性选择器
$("li[title*='果']").css("background-color", "green");//[attribute*=value]
$("li:first-child").css("background-color", "green");//:first过滤选择器可以获取指定父元素中的首个子元素，但该选择器返回的只有一个元素，并不是一个集合，而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素，
它是一个集合，常用多个集合数据的选择处理。
$("li:last-child").css("background-color", "blue");//假如有多个集合含有li元素，则last则是最后一个;last-child则是包含每个集合的li最后元素


第四节 jQuery表单选择器注意空格
$("#frmTest :input").addClass("bg_blue");//:input表单选择器
$("#frmTest :text").addClass("bg_blue");//:text表单文本选择器
$("#frmTest :password").addClass("bg_red");//:password表单密码选择器
$("#frmTest :radio").attr("disabled","true");//:radio单选按钮选择器
$("#frmTest :checkbox").attr("disabled","true");//:checkbox复选框选择器
$("#frmTest input:submit").addClass("bg_red");//:submit提交按钮选择器
$("#frmTest :image").addClass("bg_red");//:image图像域选择器
$("#frmTest :button").addClass("bg_blue");//:button表单按钮选择器
$("#frmTest :checked").attr("disabled", true);//:checked选中状态选择器
var $txtOpt = $("#frmTest :selected").text();
    
$("#tip").html("选中内容为:" + $txtOpt);//:selected选中状态选择器


第五节 jQuery操作DOM元素
$("#a1").attr("href" , "www.imooc.com");
//使用attr()方法控制元素的属性
var $url = $("#a1").attr("href");


$("#tip").html($url);
var $content = "<b>唉，我又变胖了！</b>";
//操作元素的内容
 $("#html").html($content);
            
$("#text").text($content);
$("#content").css("background-color","red");//操作元素的内容
$("#content").css({"background-color":"red","color":"white"});//操作元素的样式
$("#content").removeClass();//移除属性和样式
function rethtml() {
var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
                return $html;
            } 
$("body").append(rethtml());//使用append()方法向元素内追加内容
var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");//使用appendTo()方法向被选元素内插入内容
$("span").after($html);//使用before() 和 after() 在元素前后插入内容
$("span").before($html);
$("body").append($("span").clone());//使用clone()方法复制元素
$($html).replaceAll(".green");//使用replaceAll()方法替换内容
replaceWith()方法替换类别名为“green”的<span>元素
$(".red").wrapInner("<i></i>");//使用wrap() 和wrapInner()方法包裹元素和内容
$("span").each(function (index) {
                if (index == 1) {
                    $(this).attr("class", "red");
                }
            });//使用each()方法遍历元素
$("span").empty("");
$("span").remove(".red");//使用remove()方法和empty()方法删除元素


第六节 jQuery事件与应用
ready() 与onLoad()事件 比较
ready()事件类似于onLoad(）事件，但前者只要页面的DOM结构加载后便出发，
而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。此外
下列写法是相等的：
$(document).ready(function(){}) 等价于 $(function(){});


$(function( {
                $("#btntest").bind("click", function () {
                    $("#tip").html("我被点击了！");
                });
 $(function () {
                $(#btntest).bind("click mouseout"), function () {
                    $(this).attr("disabled", "true");
                })
            });//bind(方法绑定元素的事件) 绑定click事件和mouseout事件
//使用hover(over,out)方法切换事件   第一个function是over  第二个function是out
$(function () {
                $("div").hover(
                function () {
                    $(this).addClass("orange");
                },
                function () {
                    $(this).removeClass("orange")
                })
            });
//toggle()方法绑定多个函数，当每次点击的时候函数是按顺序执行的，当执行的最后的时候再头开始


//使用unbind()方法移除元素绑定的事件
 $(function () {
                $("div").bind("click",
                function () {
                    $(this).removeClass("backcolor").addClass("color");
                }).bind("dblclick", function () {
                    $(this).removeClass("color").addClass("backcolor");
                })
                $("#btntest").bind("click", function () {
                    $("div").unbind("click").unbind("dblclick");
                    $(this).attr("disabled", "true");
                });
 });


//使用one()方法绑定元素的一次性事件
 $(function () {
                var intI = 0;
                $("div").one("click", function () {
                    intI++;
                    $(this).css("font-size", intI + "px");
                })
 });
//调用trigger(方法手动触发指定的事件)
 $(function () {
                $("div").bind("change-color", function () {
                    $(this).addClass("color");
                });
                $("div").trigger("change-color");
            });
//文本框的focus和blur事件
$(function () {
                $("input")
                .bind("focus", function () {
                    $("div").html("请输入您的姓名！");
                })
                .bind("blur", function () {
                    if ($(this).val().length == 0)
                        $("div").html("你的名称不能为空！");
                })
            });
//下拉列表框change的事件
$(function () {
                $("select").bind("change", function () {
                    if ($(this).val() == "苹果")
                        $(this).css("background-color", "red");
                    else
                        $(this).css("background-color", "green");
                })
            });
//用live()方法绑定元素的事件,与bind()方法相同，live()方法还可以绑定动态元素，即使用代码添加
元素事件
$(selector).live(event,[data],fun)
 $(function () {
                $("#btntest").live("click mouseout", function () {
                    $(this).attr("disabled", "true");
                })
                $("body").append("<input id='btntest' type='button' value='点击或移出就不可用了' />");
            });


第七节 jQuery动画特效
1.调用show() 和 hide()方法显示和隐藏元素
<input id="hidval" type="hidden" value="0"/>
$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show();
                        $("#hidval").val(1);
                    } else {
                        $("ul").hide();
                        $("#hidval").val(0);
                    }
                });
            });
2.动画效果的show() 和 hide()
$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").show("fast",function(){
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").hide(1000,function(){
                            $("#hidval").val(0);
                        })
                    }
                })
            });
3.调用toggle()方法实现动画切换效果
$(selector).toggle(speed,[callback])
<script type="text/javascript">
            $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").toggle("fast",function(){
                     $spn.html() == "隐藏" ? $spn.html("显示") : $spn.html("隐藏");
                    })
                });
            });
4.使用slideUp() 和 slideDown()方法的滑动效果
$(selector).slideUp(speed,[callback])和$(selector).slideDown(speed,[callback])
slideDown()仅适用于被隐藏的元素；slideup()则相反。
$(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").slideDown("low",function() {
                            $("#hidval").val(1);
                        })
                    } else {
                        $("ul").slideUp("slow",function(){
                            $("#hidval").val(0);
                        })
                    }
                })
    });
5.slideToggle()方法实现图片"变脸"效果
$(selector).slideToggle(speed,[callback])
 $(function () {
                var $spn = $("#spnTip");
                $("h4").bind("click", function () {
                    $("ul").slideToggle("slow",function() {
               $spn.html() == "向下滑" ? $spn.html("向上滑") : $spn.html("向下滑");
                    })
                })
            });


6.使用fadeIn() 与fadeOut()方法实现淡入淡出效果
$(selector).fadeIn(speed,[callback])和$(selector).fadeOut(speed,[callback])
 $(function () {
                $("h4").bind("click", function () {
                    if ($("#hidval").val() == 0) {
                        $("ul").fadeIn(1000,function() {
                            $("#hidval").val(1);
                        })
                    } else {
                         $("ul").fadeOut(1000,function() {
                            $("#hidval").val(0);
                        })
                    }
                })
});
7.使用fadeTo()方法设置淡入淡出效果的不透明度
$(selector).fadeTo(speed,opacity,[callback])


 $(function () {
                $("span").each(function (index) {
                    switch (index) {
                        case 0:
                            $(this).fadeTo(3000,0.1);
                            break;
                        case 1:
                            $(this).fadeTo(3000,0.4);
                            break;
                        case 2:
                            $(this).fadeTo(3000,0.6);
                            break;
                    }
                });
 });
8.调用animate()方法制作简单的动画效果
$(selector).animate({params},speed,[callback])
其中，params参数为制作动画效果的CSS属性名与值，
speed参数为动画的效果的速度，单位为毫秒，
可选项callback参数为动画完成时执行的回调函数名。


$(function () {
                $("span").animate({
                    width: "80px",
                    height: "80px"
                },
                3000, function () {
                    $("#tip").html("执行完成!");
                });
});
9.调用animate()方法制作移动位置的动画
在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，
否则，该元素移动不了。
$(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
});


10.调用stop()方法停止当前所有动画效果
$(selector).stop([clearQueue],[goToEnd])
两个可选项参数clearQueue和goToEnd都是布尔类型值，前者表示是否停止正在执行的动画，
后者表示是否完成正在执行的动画，默认为false。
 $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                   $("span").stop();
                    $("#tip").html("执行停止!");
                });
});
11.调用delay()方法延时执行动画效果
$(selector).delay(duration)
$(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $(this).animate({
                        height: '+=60px',
                        width: '+=60px'
                    }, 3000, function () {
                        $("#tip").html("执行完成!");
                    });
                });
                $("#btnStop").bind("click", function () {
                    $("span").delay(10000);
                    $("#tip").html("正在延时!");
                });
            });
13.编程练习
$(function(){
                $("#GoLeft").click(function(){
                    $("div").animate(
                        {left: "-=50px"},
                        1000,
                        function(){
                         $("#tip").html("左移完成");   
                        });
                });
                $("#GoRight").bind("click",function(){
                    $("div").animate(
                        {left: "+=50px"},
                        1000,
                        function(){
                            $("#tip").html("左移完成");  
                        }
                        );
                });
            });


第八节 jQuery实现Ajax应用
1.使用load()方法异步请求数据
load(url,[data],[callback])
  $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $("ul")
                    .html("<img src='Images/Loading.gif' alt=''/>")
                    .load("http://www.imooc.com/data/fruit_part.html",function() {
                        $this.attr("disabled", "true");
                    });
                })
            });
2.使用getJSON()方法异步加载JSON格式数据
jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
 $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getJSON("http://www.imooc.com/data/sport.json",function(data){
                        $this.attr("disabled", "true");
                        $.each(data, function (index, sport) {
     $("ul").append("<li>"+sport["name"]+"</li>");
                            if(index==3)
                            $("ul").append("<li>" + sport["name"] + "</li>");
                        });
    
                    });
                })
            });
3.使用getScript()方法异步加载并执行js文件
jQuery.getScript(url,[callback])或$.getScript(url,[callback])
 $(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.getScript("http://www.imooc.com/data/sport_f.js",function() {
                        $this.attr("disabled", "true");
                    });
                })
  });
4.使用get()方法以GET方式从服务器获取数据
$.get(url,[callback])
$(function () {
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.get("http://www.imooc.com/data/info_f.php",function(data) {
                        $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                    }, "json");
                })
});
5.使用post()方法以POST方式从服务器发送数据
$.post(url,[data],[callback])
 $(function () {
                $("#btnCheck").bind("click", function () {
                    $.post("http://www.imooc.com/data/check_f.php",{
                        num: $("#txtNumber").val()
                    }
                    ,
                    function (data) {
                        $("ul").append("<li>你输入的<b>  "
                        + $("#txtNumber").val() + " </b>是<b> "
                        + data + " </b></li>");
                    });
                })
            });
6.使用serialize()方法序列化表单元素值
$(selector).serialize()
$(function () {
                $("#btnAction").bind("click", function () {
                    $("#litest").html($("form").serialize());
                })
            })
7.使用ajax()方法加载服务器数据
jQuery.ajax([settings])或$.ajax([settings])
$(function () {
                $("#btnCheck").bind("click", function () {
                    $.ajax({
                        url:"http://www.imooc.com/data/check.php",
                        data: { num: $("#txtNumber").val() },
                        type:"post",
                        success: function (data) {
                            $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                        }
                    });
                })
            });
8.使用ajaxSetup()方法设置全局Ajax默认选项
jQuery.ajaxSetup([options])或$.ajaxSetup([options])
$(function () {
                $.ajaxSetup({
                    dataType:"text",
                    data:$("#txtNumber").val(),
                    type:"post",
                    success:function(data){
                        $("ul").append("<li>你输入的<b>  "
                            + $("#txtNumber").val() + " </b>是<b> "
                            + data + " </b></li>");
                    }
                });
                $("#btnShow_1").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.imooc.com/data/check.php"
                    });
                })
                $("#btnShow_2").bind("click", function () {
                    $.ajax({
                        data: { num: $("#txtNumber").val() },
                        url: "http://www.imooc.com/data/check_f.php"
                    });
                })
            });
9.使用ajaxStart()和ajaxStop()方法
$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
 $(function () {
                $("#divload").ajaxStart(function(){
                    $(this).html("正在请求数据...");
                });
                $("#divload").ajaxStop(function(){
                    $(this).html("数据请求完成！");
                });
                $("#btnShow").bind("click", function () {
                    var $this = $(this);
                    $.ajax({
                        url: "http://www.imooc.com/data/info_f.php",
                        dataType: "json",
                        success: function (data) {
                            $this.attr("disabled", "true");
                        $("ul").append("<li>我的名字叫：" + data.name + "</li>");
                        $("ul").append("<li>男朋友对我说：" + data.say + "</li>");
                        }
                    });
                })
            });
11.通过$.each()工具函数，获取数组中各元素的名称与内容，显示在页面中
            var jsonStu=[
                {name:"小忆",score:"80"},
                {name:"小二",score:"85"},
                {name:"小三",score:"90"},
                {name:"小四",score:"95"},
                {name:"小五",score:"87"},
                {name:"小六",score:"97"}];
            $(function(){
                var $btm = $("#btnShow");
               $("#btnShow").bind("click",function(){
                   $.each(jsonStu,function(index){
                       $("div").append("<span><h4>"+jsonStu[index].name+"<h4></span>");
                   })
                  $btm.attr("disabled","false");
               });
            });
第九节 jQuery常用插件
1.表单验证插件——validate
$(form).validate({options})
$(function () {
                $("#frmV").validate(
                  {
                      /*自定义验证规则*/
                      rules: {
                            email:{
                            required:true,
                            email:true
                          }
                      },
                      /*错误提示位置*/
                      errorPlacement: function (error, element) {
                          error.appendTo(".tip");
                      }
                  }
                );
            });
2.表单插件——form
$(form). ajaxForm ({options})
  $(function () {
                var options = {
                    url: "http://www.imooc.com/data/form_f.php", 
                    target: ".tip"
                }
                $("#frmV").ajaxForm(options);
            });
3.图片灯箱插件——lightBox
$(linkimage).lightBox({options})
$(function () {
                $(".divPics").lightBox({
                    overlayBgColor: "#666", //图片浏览时的背景色
                    overlayOpacity: 0.5, //背景色的透明度
                    containerResizeSpeed: 600 //图片切换时的速度
                })
            });
4.图片放大镜插件——jqzoom
$(linkimage).jqzoom({options})
 $(function () {
                $(".content a").jqzoom(function( //绑定图片放大插件jqzoom
                    zoomWidth: 123, //小图片所选区域的宽
                    zoomHeight: 123, //小图片所选区域的高
                    zoomType: 'reverse' //设置放大镜的类型
                });
            });
5.cookie插件——cookie
保存：$.cookie(key，value)；读取：$.cookie(key)，删除：$.cookie(key，null)
  $(function () {
                if ($.cookie("email")) {
                    $("#email").val(?);
                }
                $("#btnSet").bind("click", function () {
                    if ($("#chksave").is(":checked")) {
                        $.cookie("email", $("#email").val(),{
                            path: "/", expires: 1111111
                        })
                     }
                    else {
                        $.cookie("email",null, {
                            path: "/"
                        })
                    }
                });
            });
6.搜索插件——autocomplete
$(textbox).autocomplete(urlData,[options]);
 $(function () {
                var arrUserName = ["王五", "刘明", "李小四", "刘促明", "李渊", "张小三", "王小明"];
                $("#txtSearch").autocomplete(arrUserName,{
                    minChars: 0, //双击空白文本框时显示全部提示数据
                    formatItem: function (data, i, total) {
                        return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
                    },
                    formatMatch: function (data, i, total) {
                        return data[0];
                    },
                    formatResult: function (data) {
                        return data[0];
                    }
                }).result(SearchCallback); 
                function SearchCallback(event, data, formatted) {
                    $(".tip").show().html("您的选择是：" + (!data ? "空" : formatted));
                }
            });
7.右键菜单插件——contextmenu
$(selector).contextMenu(menuId,{options});
 <div class="contextMenu" id="sysMenu">
                <ul>
                    <li id="Li3"><img src="http://img.mukewang.com/52e4b34b0001bb6d00160016.jpg" alt="" />保存</li>
                    <li id="Li4"><img src="http://img.mukewang.com/52e4b3680001424900160016.jpg" alt="" />退出</li>
                </ul>
 </div>


  $(function () {
                $(".title").contextMenu("sysMenu",
                  { bindings:
                     {
                         'Li3': function (Item) {
                             $(".tip").show().html("您点击了“保存”项");
                         },
                         'Li4': function (Item) {
                             $(".tip").show().html("您点击了“退出”项");
                         }
                     }
                  });
            });
8.自定义对象级插件——lifocuscolor插件
$(Id).focusColor(color)
  $(function () {
                $("ul").focusColor("#ccc"); //调用自定义的插件
            })
9.自定义类级别插件—— twoaddresult
$.addNum(p1,p2) 和 $.subNum(p1,p2)
 $(function () {
                $("#btnCount").bind("click", function () {
                    $("#Text3").val(
                        $.subNum(
                            $("#Text1").val(),
                            $("#Text2").val())
        );
                });
});
第十节 jQuery UI型插件
1.拖曳插件——draggable
$(selector). draggable({options})
 $(function () {
                $(".drag").draggable({containment: "parent"})
            });
2.放置插件——droppable
$(selector).droppable({options})
 $(".drag").draggable();
                $(".cart").droppable({
                    drop: function () {
                            $(this)
                            .addClass('focus').
                            find('#tip').html('有产品了');
                    }
                })
            });