Jq自用学习笔记（一）选择器语法 $(this).hide() 隐藏当前元素 $("p").hide() 隐藏所有 <p

选择器语法

$(this).hide() 隐藏当前元素
$("p").hide() 隐藏所有 <p> 元素
$("p.test").hide() 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() 隐藏 id="test" 的元素

$(document).ready(function(){ 
   $("button").click(function(){ 
      $("#test").hide(); 
   }); 
});

.class

$(document).ready(function(){ 
   $("button").click(function(){ 
      $(".test").hide(); 
   }); 
});

#id

$("#p1").mouseenter(function(){ 
  alert('您的鼠标移到了 id="p1" 的元素上!'); 
});

jQuery 事件

click
keypress
dblclick
submit
.......

jQ效果

显示隐藏

$("#hide").click(function(){ 
  $("p").hide(); 
}); 
$("#show").click(function(){ 
  $("p").show(); 
});

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(document).ready(function(){
 $("button").click(function(){
   $("p").toggle();
 });
});

淡入淡出

jQuery Fading 方法

fadeIn() 淡入已隐藏的元素

$("button").click(function(){ 
  $("#div1").fadeIn(); 
  $("#div2").fadeIn("slow"); 
  $("#div3").fadeIn(3000);
});

fadeOut() 淡出可见元素

$("button").click(function(){ 
  $("#div1").fadeOut(); 
  $("#div2").fadeOut("slow"); 
  $("#div3").fadeOut(3000); 
});

fadeToggle() 方法可以在fadeIn()与fadeOut()方法之间进行切换

$("button").click(function(){ 
  $("#div1").fadeToggle();      
  $("#div2").fadeToggle("slow"); 
  $("#div3").fadeToggle(3000); 
});

fadeTo() 允许渐变为给定的不透明度

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

滑动

slideDown() 向下滑动元素

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

slideUp() 向上滑动元素

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

slideToggle()

<script> 
$(document).ready(function(){
 $("#flip").click(function(){
   $("#panel").slideToggle("slow");
 });
});
</script>
<style type="text/css"> 
#panel,#flip
{
   padding:5px;
   text-align:center;
   background-color:#e5eecc;
   border:solid 1px #c3c3c3;
}
#panel
{
   padding:50px;
   display:none;
}
</style>

<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

动画

animate() 方法用于创建自定义动画

$("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' 
    }); 
});

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"

$(document).ready(function(){
 $("button").click(function(){
   $("div").animate({
     height:'toggle'
   });
 });
});

jQuery 提供针对动画的队列功能

$(document).ready(function(){
 $("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");
 });
});

停止动画

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>

<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

方法链接

链接的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});

JQHTML

JQ捕获

获得内容text() html() val()

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

$("#btn1").click(function(){
  alert("Text: " + $("#test").text()); 
}); 

$("#btn2").click(function(){ 
  alert("HTML: " + $("#test").html());
});

$("#btn1").click(function(){ 
  alert("值为: " + $("#test").val()); 
});

获得属性attr()

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

JQ设置

设置内容 text() html() val()

$("#btn1").click(function(){ 
  $("#test1").text("Hello world!"); 
}); 

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

$("#btn3").click(function(){ 
  $("#test3").val("RUNOOB"); 
});

设置属性attr()

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

JQ添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本"); 
$("img").before("在前面添加文本");

JQ删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

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

JQ操作css

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("button").click(function(){ 
  $("h1,h2,p").addClass("blue"); 
  $("h1,h2,p").removeClass("blue");
  $("h1,h2,p").toggleClass("blue");
});
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("p").css("background-color"));
  });
});

JQ尺寸处理

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

$("button").click(function(){ 
var txt="";
txt+="div 的宽度是: " + $("#div1").width() + "</br>"; 
txt+="div 的高度是: " + $("#div1").height(); 
$("#div1").html(txt); 
});

jQ遍历

祖先

parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

$(document).ready(function(){ 
  $("span").parents(); 
  $("span").parents("ul");   
  //返回所有<span>元素的所有ul祖先
  $("span").parentsUntil("div"); 
  //返回介于 <span> 与 <div> 元素之间的所有祖先元素
});

后代

children() 选元素的所有直接子元素
find() 回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready(function(){ 
 $("div").children("p.1"); 
});
$(document).ready(function(){ 
 $("div").find("span"); 
});

同胞

siblings() 返回被选元素的所有同胞元素
next() 返回被选元素的下一个同胞元素
nextAll() 返回被选元素的所有跟随的同胞元素
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
prev() 返回被选元素的上一个同胞元素
prevAll() 返回被选元素的所有上边的同胞元素
prevUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){ 
  $("h2").siblings(); 
});
$(document).ready(function(){ 
  $("h2").next(); 
});
$(document).ready(function(){ 
  $("h2").nextAll(); 
});
$(document).ready(function(){ 
  $("h2").nextUntil("h6"); 
});

过滤

first() 返回被选元素的首个元素
last() 返回被选元素的最后一个元素
eq() 返回被选元素中带有指定索引号的元素
filter() 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素

$(document).ready(function(){ 
  $("div p").first(); 
});
$(document).ready(function(){ 
  $("div p").last(); 
});
$(document).ready(function(){ 
  $("p").eq(1); 
});
$(document).ready(function(){ 
  $("p").filter(".url"); //返回带有类名 "url" 的所有 <p> 元素
});
$(document).ready(function(){ 
  $("p").not(".url");   //返回不带有类名 "url" 的所有 <p> 元素
});

JQ Ajax

jq load() 方法是简单但强大的 AJAX 方法

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

//（"demo_test.txt"）
<p id="p1">这是段落的一些文本。</p>
//"demo_test.txt" 的内容加载到指定的 <div> 元素中：
$("#div1").load("demo_test.txt");

回调函数:

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

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

get/post

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

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

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