jquery读书笔记

一、jQuery选择器
1. $ = jQuery

2. 将属性前置一个@，并放在一对方括号中。eg：$("a[@title]") 选择有title属性的a
此外，[]在XPath语法中还有另一种用途：在不加@的情况下可以用来表示包含另一个元素的元素。eg：$("div[ol]")
即选择包含一个ol元素的所有div元素。

3. 借用正则表达式的概念：^表示字符串开头，$表示字符串结尾。
eg：a[@href$='.pdf'] 选择href属性以.pdf结尾的a标签
    a[@href^='mailto:'] 选择href属性以mailto:开头的a标签

用*表示字符串中的任意位置。eg：a[@href*='mysite'] mysite可以出现在href属性的任意位置

4. $("div.abc:eq(1)") 表示类=abc的div集合中取第二个。
从0开始记录行数
jQuery("tr:odd").addClass("odd"); 为所有tr的奇数行添加样式odd
jQuery("tr:even").addClass("even"); 为所有tr的偶数行添加样式even
jQuery("tr").removeClass(); 删除所有tr的样式
jQuery("td:contains('abc')").addClass("highlight"); 将含有abc的td加上样式highlight

5. jQuery返回js对象：$("#abc").get(0) = $("#abc")[0]

二、事件
1. jQuery对象.bind("事件类型(eg:click)", function);
2. 在事件的处理程序(function)中可以传入被jQuery规范了的Event参数。eg：
$("#normal").bind("click mouseover mouseout", {msg: '这是bind()方法传来的参数，可以用function中的event对象.data.属性名来访问'}, function(e,msg1,msg2){
  //alert(e.target.id)
  if("button" == this.className) {
   if(msg1 != null && msg2 != null) {
    alert(msg1 + msg2)    
   }

   //alert(e.data.msg)
   //this.className = "button2";
   $("#normal").removeClass();
   $("#normal").addClass("button2");
  } else {
   //this.className = "button";
   $("#normal").removeClass();
   $("#normal").addClass("button")
  }
 });

3. 在事件对象上调用stopPropagation(): 防止事件冒泡
4. 在事件对象上调用preventDefault(): 阻止执行与事件关联的默认动作。例如点击超链接打开页面，点击提交按钮执行提交动作。

三、效果
1. jQuery对象.animate({left:500, height:50},1000)
用1秒时间将该对象移动到距左边500的地方，并且该对象的height渐变成50。
在这里应该知道css对我们要改变的元素所施加的限制。如：如果元素的position属性没有设置
成relative或absolute,默认是static，则上面的设置left属性是无效的。
static的含义是保持对象静止不动。

2. $("p").css({color: "#ff0011", background: "blue"});
用map的形式可以一次修改多个属性。

四、DOM
1. $()是工厂函数，可以在其内添加html代码。即创建(但不是显示)所写的html元素。eg：
$("<a name='top'></a>").prependTo("body");就是创建一个锚点并将其添加显示在body下面。

2. 插入/移动元素：
prependTo: 将id为content的元素插入到id为div1的元素内的最上面:
$("#content").prependTo("#div1");

appendTo: 将id为content的元素插入到id为div1的元素内的最下面:
$("#content").appendTo("#div1");

prepend: 将id为content的元素插入到id为div1的元素内的最上面:
$("#div1").prepend($("#content"));

append: 将id为content的元素插入到id为div1的元素内的最下面:
$("#div1").append($("#content"));

3. 包裹元素
$("p").wrap("<div class='wrap'></div>");将所有的p用div来包裹。

4. 复制元素
jQuery对象.clone(): 复制对象但不显示。不复制通过bind获得的事件处理程序
jQuery对象.clone(true): 复制对象但不显示。复制通过bind获得的事件处理程序

五、Ajax
1. jQuery对象.ajaxStart()：AJAX 请求开始时执行函数
jQuery对象.ajaxStop()： AJAX 请求结束时执行函数
它们可以添加给任何的jQuery对象。
eg：
//当执行ajax请求前将id为loading的div显示
$("#loading").ajaxStart(function(){
 $(this).show();
});
//当执行ajax请求后将id为loading的div隐藏
$("#loading").ajaxStop(function(){
 $(this).hide();
});

2. load()和get()、post()
//将从e.php请求回来的内容加载到id为dic的dom元素中
$.post("e.php", {"term": "abc"},function(data){
 $("#dic").html(data);
});
//load()可以实现相同的功能
$("#dic").load("e.php", {"term": "abc"});