jQuery基础教程

jQuery基础教程

jQuery语法

  • 基础语法:$(selector).action()

    • 美元符号定义jQuery
    • 选择符查询和查找HTML元素
    • jQuery的action执行对元素的操作

jQuery选择器

  • 元素选择器

    • $("p")选择页面上的<p>元素
  • #id选择器

    • $("#test")选择页面上有id="test"属性的元素
  • .class选择器

    • $(".test")选择页面上有class=“test”属性的元素
  • 其他

    • $("*")选择所有元素
    • $(this)选取当前HTML元素
    • $("p.intro")选取class为intro的<p>元素
    • $("p:first")选取第一个<p> 元素
    • &dollar;("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素
    • &dollar;("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素
    • &dollar;("[href]")选取带有 href 属性的元素
    • &dollar;("a[target='blank']")选取所有 target 属性值等于 "blank" 的 <a> 元素
    • &dollar;("a[target!='blank']")选取所有 target 属性值不等于 "blank" 的 <a> 元素
    • &dollar;(":button")选取所有 type="button" 的 <input> 元素 和 <button> 元素
    • &dollar;("tr:even")选取偶数位置的 <tr> 元素
    • &dollar;("tr:odd")选取奇数位置的 <tr> 元素

jQuery事件

  • 鼠标事件

    • click点击

      $("p").click(function(){
          alert("段落被点击了。");
      });
    • dbclick双击

      $("p").dblclick(function(){
          alert("这个段落被双击。");
      });
    • mouseenter鼠标移入

      $("p").mouseenter(function(){
          $("p").css("background-color","yellow");
      });
    • mouseleave鼠标移出

      $("p").mouseleave(function(){
          $("p").css("background-color","gray");
      });
  • 键盘事件

    • keypress按下

      $("input").keypress(function(){
          $("span").text(i+=1);
      });
    • keydown按下的过程

      $("input").keydown(function(){
          $("input").css("background-color","yellow");
      });
    • keyup键盘松开

      $("input").keyup(function(){
          $("input").css("background-color","pink");
      });
    • hover悬停

      $("p").hover(function(){
          $("p").css("background-color","yellow");
      },function(){
          $("p").css("background-color","pink");
      });
  • 表单事件

    • submit提交

      $("form").submit(function(){
          alert("提交");
      });
    • change文本内容变化

      $("input").change(function(){
          alert("文本已被修改");
      });
    • focus获取焦点

      $("input").focus(function(){
          $("span").css("display","inline").fadeOut(2000);
      });
    • blur失去焦点

      $("input").blur(function(){
          alert("输入框失去了焦点");
      });
  • 文档窗口事件

    • load载入(在jQuery1.8中已被废弃)

      $("img").load(function(){
          alert("图片已载入");
      });
    • resize窗口调整大小

      $(window).resize(function(){
          $('span').text(x+=1);
      });
    • scroll滚动指定元素

      $("div").scroll(function(){
          $("span").text(x+=1);
      });
    • unload离开页面、点击某个离开的链接、键入新的URL、使用前进或后退按钮、关闭浏览器窗口、重新加载页面(在jQuery1.8中已被废弃)

      $(window).unload(function(){
          alert("Goodbye!");
      });

jQuery效果

jQuery隐藏/显示

  • hide隐藏

    • $(selector).hide(speed,callback)
    $("#hide").click(function(){
      $("p").hide();
    });
    $("button").click(function(){
      $("p").hide(1000);
    });
  • show显示

    • $(selector).show(speed,callback)
    $("#show").click(function(){
      $("p").show();
    });
  • toogle切换状态

    • $(selector).toggle(speed,callback);
    $("button").click(function(){
      $("p").toggle();
    });

jQuery淡入淡出

  • fadeIn淡入已隐藏的元素

    • $(selector).fadeIn(speed,callback);
    $("button").click(function(){
      $("#div1").fadeIn();
      $("#div2").fadeIn("slow");
      $("#div3").fadeIn(3000);
    });
  • fadeOut淡出可见的元素

    • $(selector).fadeOut(speed,callback);
    $("button").click(function(){
      $("#div1").fadeOut();
      $("#div2").fadeOut("slow");
      $("#div3").fadeOut(3000);
    });
  • fadeToggle切换淡入淡出

    • $(selector).fadeToggle(speed,callback);
    $("button").click(function(){
      $("#div1").fadeToggle();
      $("#div2").fadeToggle("slow");
      $("#div3").fadeToggle(3000);
    });
  • fadeTo允许渐变为给定的不透明度

    • $(selector).fadeTo(speed,opacity,callback);
    $("button").click(function(){
      $("#div1").fadeTo("slow",0.15);
      $("#div2").fadeTo("slow",0.4);
      $("#div3").fadeTo("slow",0.7);
    });

jQuery滑动

  • slideDown向下滑动

    • $(selector).slideDown(speed,callback);
    $("#flip").click(function(){
      $("#panel").slideDown();
    });
  • slideUp向上滑动

    • $(selector).slideUp(speed,callback);
    $("#flip").click(function(){
      $("#panel").slideUp();
    });
  • slideToggle切换滑动效果

    • $(selector).slideToggle(speed,callback);
    $("#flip").click(function(){
      $("#panel").slideToggle();
    });

jQuery动画

  • animate

    • $(selector).animate({params},speed,callback)

      $("button").click(function(){
        $("div").animate({left:'250px'});
      });
    • 操作多个属性

      $("button").click(function(){
        $("div").animate({
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
        });
      });
    • 使用相对值

      $("button").click(function(){
        $("div").animate({
          left:'250px',
          height:'+=150px',
          width:'+=150px'
        });
      });
    • 使用预定义的值

      $("button").click(function(){
        $("div").animate({
          height:'toggle'
        });
      });
    • 使用队列功能

      $("button").click(function(){
        var div=$("div");
        div.animate({height:'300px',opacity:'0.4'},"slow");
        div.animate({width:'300px',opacity:'0.8'},"slow");
        div.animate({height:'100px',opacity:'0.4'},"slow");
        div.animate({width:'100px',opacity:'0.8'},"slow");
      });
      
      $("button").click(function(){
        var div=$("div");
        div.animate({left:'100px'},"slow");
        div.animate({fontSize:'3em'},"slow");
      });

jQuery停止动画

  • stop

    • $(selector).stop(stopAll,goToEnd)

      $("#stop").click(function(){
        $("#panel").stop();
      });

jQuery Callback

$("button").click(function(){
$("p").hide("slow",function(){
  alert("段落现在被隐藏了");
});
});
//以下实例没有回调函数,警告框会在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});

jQuery链

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery捕获

  • text()设置或返回所选元素的文本内容

    $("#btn1").click(function(){
      alert("Text: " + $("#test").text());
    });
  • html()设置或返回所选元素的内容(包括HTML标记)

    $("#btn2").click(function(){
      alert("HTML: " + $("#test").html());
    });
  • val()设置或返回表单字段的值

    $("#btn1").click(function(){
      alert("值为: " + $("#test").val());
    });
  • attr()设置或改变属性值

    $("button").click(function(){
      alert($("#runoob").attr("href"));
    });

jQuery设置

  • text()设置或返回所选元素的文本内容

    $("#btn1").click(function(){
        $("#test1").text("Hello world!");
    });
    
    $("#btn1").click(function(){
        $("#test1").text(function(i,origText){
            return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
        });
    });
  • html()设置或返回所选元素的内容(包括HTML标记)

    $("#btn2").click(function(){
        $("#test2").html("<b>Hello world!</b>");
    });
    
    $("#btn2").click(function(){
        $("#test2").html(function(i,origText){
            return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
        });
    });
  • val()设置或返回表单字段的值

    $("#btn3").click(function(){
        $("#test3").val("RUNOOB");
    });
  • attr()设置或改变属性值

    $("button").click(function(){
      $("#runoob").attr("href","http://www.runoob.com/jquery");
    });
    
    $("button").click(function(){
        $("#runoob").attr({
            "href" : "http://www.runoob.com/jquery",
            "title" : "jQuery 教程"
        });
    });

jQuery添加元素

  • append()在被选元素的结尾插入内容

    $("p").append("追加文本");
  • prepend()在被选元素的开头插入内容

    $("p").prepend("在开头追加文本");
    
    function appendText()
    {
        var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
        var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
        var txt3=document.createElement("p");
        txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
        $("body").append(txt1,txt2,txt3);        // 追加新元素
    }
  • after()在被选元素之后插入内容

    $("img").after("在后面添加文本");
  • before()在被选元素之前插入内容

    $("img").before("在前面添加文本");
    
    function afterText()
    {
        var txt1="<b>I </b>";                    // 使用 HTML 创建元素
        var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
        var txt3=document.createElement("big");  // 使用 DOM 创建元素
        txt3.innerHTML="jQuery!";
        $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
    }

jQuery删除元素

  • remove()删除被选元素及其子元素

    $("#div1").remove();
    
    $("p").remove(".italic");
  • empty()从被选元素中删除子元素

    $("#div1").empty();

jQuery CSS类

  • addClass()向被选元素添加一个或多个类

    $("button").click(function(){
      $("h1,h2,p").addClass("blue");
      $("div").addClass("important");
    });
    
    $("button").click(function(){
      $("body div:first").addClass("important blue");
    });
  • removeClass()从被选元素删除一个或多个类

    $("button").click(function(){
      $("h1,h2,p").removeClass("blue");
    });
  • toggleClass()对被选元素进行添加/删除类的切换操作

    $("button").click(function(){
      $("h1,h2,p").toggleClass("blue");
    });
  • css()设置或返回样式属性

    $("p").css("background-color");

jQuery css()方法

  • 返回CSS属性

    • css("propertyname");

      $("p").css("background-color");
  • 设置CSS属性

    • css("propertyname","value");

      $("p").css("background-color","yellow");
  • 设置多个CSS属性

    • css({"propertyname":"value","propertyname":"value",...});

      $("p").css({"background-color":"yellow","font-size":"200%"});

jQuery尺寸

  • width()设置或返回元素的宽度(不包括内边距、边框或外边距)

    $("button").click(function(){
      var txt="";
      txt+="div 的宽度是: " + $("#div1").width() + "</br>";
      txt+="div 的高度是: " + $("#div1").height();
      $("#div1").html(txt);
    });
  • height()设置或返回元素的高度(不包括内边距、边框或外边距)

    $("button").click(function(){
      var txt="";
      txt+="div 的宽度是: " + $("#div1").width() + "</br>";
      txt+="div 的高度是: " + $("#div1").height();
      $("#div1").html(txt);
    });
  • innerWidth()返回元素的宽度(包括内边距)

    $("button").click(function(){
      var txt="";
      txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
        txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
      $("#div1").html(txt);
    });
  • innerHeight()返回元素的高度(包括内边距)

    $("button").click(function(){
      var txt="";
      txt+="div 宽度,包含内边距: " + $("#div1").innerWidth() + "</br>";
        txt+="div 高度,包含内边距: " + $("#div1").innerHeight();
      $("#div1").html(txt);
    });
  • outerWidth()返回元素的宽度(包括内边距和边框)

    $("button").click(function(){
      var txt="";
      txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
      txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
      $("#div1").html(txt);
    });
  • outerHeight()返回元素的高度(包括内边距和边框)

    $("button").click(function(){
      var txt="";
      txt+="div 宽度,包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
      txt+="div 高度,包含内边距和边框: " + $("#div1").outerHeight();
      $("#div1").html(txt);
    });

jQuery遍历

jQuery祖先

  • parent()被选中元素的直接父元素

    $(document).ready(function(){
      $("span").parent();
    });
  • parents()被选中元素的所有祖先元素

    $(document).ready(function(){
      $("span").parents();
    });
    
    $(document).ready(function(){
      $("span").parents("ul");
    });
  • parentsUntil()介于两个给定元素之间的所有祖先元素

    $(document).ready(function(){
      $("span").parentsUntil("div");
    });

jQuery后代

  • children()被选元素的所有直接子元素

    $(document).ready(function(){
      $("div").children();
    });
    
    $(document).ready(function(){
      $("div").children("p.1");
    });
  • find()被选元素的后台元素,一路向下直到最后一个后代

    $(document).ready(function(){
      $("div").find("span");
    });
    
    $(document).ready(function(){
      $("div").find("*");
    });

jQuery同胞

  • siblings()被选元素的所有同胞元素

    $(document).ready(function(){
      $("h2").siblings();
    });
    
    $(document).ready(function(){
      $("h2").siblings("p");
    });
  • next()被选元素的下一个同胞元素

    $(document).ready(function(){
      $("h2").next();
    });
  • nextAll()被选元素所有跟随的同胞元素

    $(document).ready(function(){
      $("h2").nextAll();
    });
  • nextUntil()介于两个给定参数之间的所有跟随的同胞元素

    $(document).ready(function(){
      $("h2").nextUntil("h6");
    });
  • prev()被选元素的前一个同胞元素

    $(document).ready(function(){
      $("h2").prev();
    });
  • prevAll()被选元素所有前面的同胞元素

    $(document).ready(function(){
      $("h2").prevAll();
    });
  • prevUntil()介于两个给定参数之间的所有前面的同胞元素

    $(document).ready(function(){
      $("h2").prevUntil("h6");
    });

JQuery过滤

  • first()被选元素的首个元素

    $(document).ready(function(){
      $("div p").first();
    });
  • last()被选元素的最后一个元素

    $(document).ready(function(){
      $("div p").last();
    });
  • eq()被选元素中带有指定索引号的元素

    $(document).ready(function(){
      $("p").eq(1);
    });
  • filter()根据给定标准删除不匹配元素,返回匹配元素

    $(document).ready(function(){
      $("p").filter(".url");
    });
  • not()返回不匹配元素

    $(document).ready(function(){
      $("p").not(".url");
    });

jQuery Ajax

  • load()从服务器加载数据,将返回元素放入被选元素中

    • $(selector).load(URL,data,callback);

      $("#div1").load("demo_test.txt");
      
      $("#div1").load("demo_test.txt #p1");
      
      $("button").click(function(){
        $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
          if(statusTxt=="success")
            alert("外部内容加载成功!");
          if(statusTxt=="error")
            alert("Error: "+xhr.status+": "+xhr.statusText);
        });
      });
  • get()

    • $.get(URL,callback);

      $("button").click(function(){
        $.get("demo_test.php",function(data,status){
          alert("数据: " + data + "\n状态: " + status);
        });
      });
  • post()

    • $.post(URL,data,callback);

      $("button").click(function(){
          $.post("/try/ajax/demo_test_post.php",
          {
              name:"菜鸟教程",
              url:"http://www.runoob.com"
          },
              function(data,status){
              alert("数据: \n" + data + "\n状态: " + status);
          });
      });

jQuery其他

  • noConflict()会释放对 $ 标识符的控制,这样其他脚本就可以使用它了

    $.noConflict();
    jQuery(document).ready(function(){
      jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍然在工作!");
      });
    });
    
    var jq = $.noConflict();
    jq(document).ready(function(){
      jq("button").click(function(){
        jq("p").text("jQuery 仍然在工作!");
      });
    });
    
    $.noConflict();
    jQuery(document).ready(function($){
      $("button").click(function(){
        $("p").text("jQuery 仍然在工作!");
      });
    });

相关推荐