jQuery教程~精简版

格式：
$(document).ready(function(){
});
$(function(){

});
事件：
$(document).ready(function(){
$("p")(function(){
$(this).hide;//隐藏
  $("p").show();//显示
$("p").hide(1000);//隐藏延时
  $("p").toggle();//隐藏/显示
});
});
click:单机、dblclick:双击、mouseenter:鼠标悬浮、mouseleave:鼠标离开、mousemove:移动时
mousedown:指定按下、mouseup：指定松开
$(selector).hover(handlerIn, handlerOut)切换

$(document).ready(function(){
  $("input").focus(function(){//获得焦点
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){//失去焦点
    $(this).css("background-color","#ffffff");
  });
});
-------------------------------------------------------------------------
隐藏/显示
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");//show/toggle
  });
});
<div class="ex">
<button class="hide">点我隐藏</button>
<p>站点名: Google</p>
</div>

淡入淡出：display:none;
$("#div3").fadeIn(3000/"slow");//淡入
$("#div3").fadeOut(3000/"slow");//淡出
$("#div3").fadeToggle(3000/"slow");//淡入/淡出
$("#div3").fadeTo(3000/slow",0.1);//颜色变淡

滑动：
下滑
$("#flip").click(function(){
 $("#panel").slideDown("slow");});
拉起
$("#flip").click(function(){
 $("#panel").slideUp("slow");});
下滑/拉起
$("#flip").click(function(){
 $("#panel").slideToggle("slow");});

动画：
平移
$("button").click(function(){
$("div").animate({
left/top:'250px'
 opacity:'0.1'/'show',//透明度
 height:'300px',
 width:'300px'
});});
*height/width的值:show/hide/toggle;
队列：
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");


停止动画：
$("#panel").stop();
----------------------------------------------------------------------
$("#test").text()
$("#test").html()
$("#test").val()输入框的值
$("#runoob").attr("href")获得属性的值
$("#runoob").attr("href","http://www.runoob.com/jquery");修改属性的值
添加
$("p").append(" <b>追加文本</b>。");
$("p").prepend("<b>在开头追加文本</b>。 ");
$("img").before("<b>之前</b>");/$("img").after("<i>之后</i>");
删除
$("#div1").remove();移除div元素
$("#div1").empty();清空div元素
$("p").remove(".italic");移除所有class="italic"的 p 元素
$("p").remove(":contains('3')") //找到所有p元素中，包含了3的元素

CSS类
$("h1,h2,p").addClass("blue");//bule是css类选择器，可用多个类选择器用空格分开
$("h1,h2,p").removeClass("blue");删除样式
$("h1,h2,p").toggleClass("blue");切换样式
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});
-----------------------------------------------------------------------------------------
遍历
$("span").parent().css();父类
$("span").parents().css();所有上级
$("span").parents("div").css({);指定上级
$("span").parentsUntil("div").css();span-div之间的上级
$("div").children().css();子类
$("div").find("p").css();指定下级//"*":所有下级
$("h2").siblings().css();同级
$('.item-2').next(':first').css()//找到所有class=item-3的li
，然后筛选出第一个li，加上蓝色的边
      

$('.item-2').prev(':last').css('border', '1px solid blue')//找到所有class=item-2的li，然后筛选出最后一个，加上蓝色的边。

————————————————————————————————————————————————————————————————————————————————————————————————————————

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 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()); });

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

设置内容 - text()、html() 以及 val()

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#btn1").click(function(){

    $("#test1").text("Hello world!");});

$("#btn2").click(function(){

    $("#test2").html("<b>Hello world!</b>");});

$("#btn3").click(function(){

    $("#test3").val("RUNOOB");});      

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

jQuery - 添加元素

添加新的 HTML 内容

• append() - 在被选元素的结尾插入内容          
• 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("在前面添加文本");

  》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》Notice: append/prepend&after/before 区别？？？

append

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").append('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
  <span class="s2">s2</span>
</p>

after

<p>
  <span class="s1">s1</span>
</p>
<script>
$("p").after('<span class="s2">s2</span>');
</script>

结果是这样的:

<p>
  <span class="s1">s1</span>
</p>
<span class="s2">s2</span>

总结：

append/prepend 是在选择元素内部嵌入。

after/before 是在元素外面追加。