初学jquery之自学笔记(5)

111.用匹配的元素替换掉所有 selector匹配到的元素。
$("<b>Paragraph. </b>").replaceAll("p");
112.将所有匹配的元素替换成指定的HTML或DOM元素。
$("p").replaceWith("<b>Paragraph. </b>");
113.删除匹配的元素集合中所有的子节点。
$("p").empty();
114.从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
$("p").remove();
$("p").remove(".hello");
115.克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
$("b").clone().prependTo("p");
116.元素以及其所有的事件处理并且选中这些克隆的副本
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
$("button").click(function(){
  $(this).clone(true).insertAfter(this);
});
117.访问第一个匹配元素的样式属性。
$("p").css("color");
118.在所有匹配的元素中，设置一个样式属性的值。数字将自动转化为像素值
$("p").css("color","red");
119.把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
$("p").css({ color: "#ff0011", background: "blue" });
$("p").css({ "margin-left": "10px", "background-color": "blue" });
120.获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
121.取得第一个匹配元素当前计算的高度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
$("p").height();
$(document).height();
122.为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%），使用px。
如果没有明确指定单位（如：em或%），使用px。
$("p").height(20);
123.取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和document 的宽
$("p").width();
$(window).width();
124.为每个匹配的元素设置CSS宽度(width)属性的值。如果没有明确指定单位（如：em或%），使用px。
$("p").width(20);
125.当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){
  // 在这里写你的代码...
});
126.为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$("form").bind("submit", function() { return false; }) ;
$("form").bind("submit", function(event){
  event.preventDefault();
});
$("form").bind("submit", function(event){
  event.stopPropagation();
});
127.为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
$("p").one("click", function(){
  alert( $(this).text() );
});
128.在每一个匹配的元素上触发某类事件。
$("form:first").trigger("submit");
$("p").click( function (event, a, b) {
  // 一个普通的点击事件时，a和b是undefined类型
  // 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

//下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
  alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

//如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){$("<span>Focused!</span>").appendTo("body").fadeOut(1000); });
129.bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
$("p").unbind();
$("p").unbind( "click" );

//删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

$("p").unbind("click", foo); // ... 再也不会被触发 foo 
130.鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
//鼠标悬停的表格加上特定的类
$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);
131.如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。
//对表格的切换一个类
$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

//对列表的切换样式
$("li").toggle(
      function () {
        $(this).css({"list-style-type":"disc", "color":"blue"});
      },
      function () {
        $(this).css({"list-style-type":"disc", "color":"red"});
      },
      function () {
        $(this).css({"list-style-type":"", "color":""});
      }
    );