jquery

  • jquery的尺寸

1.width()和height()

1
2
3
4
5
6
7
8
width()方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height()方法设置或返回元素的高度（不包括内边距、边框或外边距）。
$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

2.innerWidth()和innerHeight()

1
2
3
4
5
6
7
8
innerWidth()方法返回元素的宽度（包括内边距）。
innerHeight()方法返回元素的高度（包括内边距）。
$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

3.outerWidth()和outerHeight()

1
2
3
4
5
6
7
8
outerWidth()方法返回元素的宽度（包括内边距和边框）。
outerHeight()方法返回元素的高度（包括内边距和边框）。
$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});
  • jquery的遍历-祖先

1.parent()

1
2
3
4
返回被选元素的直接父元素。
$(document).ready(function(){
  $("span").parent();
});

2.parents()

1
2
3
4
5
6
7
8
9
返回被选元素的所有祖先元素，它一路向上直到文档的根元素(<html>)。
$(document).ready(function(){
  $("span").parents();
});

返回所有<span>元素的所有祖先，并且它是<ul>元素：
$(document).ready(function(){
  $("span").parents("ul");
});

3.parentsUntil()

1
2
3
4
5
6
返回介于两个给定元素之间的所有祖先元素。
如：
返回介于<span>与<div>元素之间的所有祖先元素。
$(document).ready(function(){
  $("span").parentsUntil("div");
});
  • jquery的遍历-后代

1.children()

1
2
3
4
返回被选元素的所有直接子元素。
$(document).ready(function(){
  $("div").children();
});

2.find()

1
2
3
4
5
6
7
8
9
10
返回被选元素的后代元素，一路向下直到最后一个后代。
返回属于<div>后代的所有<span>元素：
$(document).ready(function(){
  $("div").find("span");
});

返回<div>的所有后代：
$(document).ready(function(){
  $("div").find("*");
});
  • jquery的遍历-同胞

1.siblings()

1
2
3
4
返回被选元素的所有同胞元素。
$(document).ready(function(){
  $("h2").siblings();
});

2.next()

1
2
3
4
返回被选元素的下一个同胞元素。该方法只返回一个元素。
$(document).ready(function(){
  $("h2").next();
});

2.nextAll()

1
2
3
4
返回被选元素的所有下面的同胞元素。
$(document).ready(function(){
  $("h2").nextAll();
});

3.nextUntil()

1
2
3
4
返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function(){
  $("h2").nextUntil("h6");
});

4.prev(),prevAll()&prevUntil()方法

1
prev(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在DOM树中沿着同胞之前元素遍历，而不是之后元素遍历）。
  • jquery的遍历-过滤

1.first()

1
2
3
4
返回被选元素的首个元素。如，选取首个<div>元素内部的第一个<p>元素：
$(document).ready(function(){
  $("div p").first();
});

2.last()

1
2
3
4
返回被选元素的最后一个元素。如选择最后一个<div>元素中的最后一个 <p> 元素：
$(document).ready(function(){
  $("div p").last();
});

3.filter()

1
2
3
4
不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。如，返回带有类名 "url" 的所有 <p> 元素：
 $(document).ready(function(){
   $("p").filter(".url");
 });

4.not()

1
2
3
4
5
返回不匹配标准的所有元素。not()方法与filter()相反。
如，返回不带有类名"url"的所有<p>元素：
$(document).ready(function(){
  $("p").not(".url");
});