jQuery学习笔记（二）
二、管理jQuery包装集
1.创建新的元素
使用HTML DOM 创建元素
var select=document.createElement("select");
select.option[0]=new Option("加载项","value1");
select.option[1]=new Option("加载项","value2");
select.size="2";
var object=testDiv.appendChild(select);
2.使用jQuery创建元素
jQuery内部使用document.createElement创建元素：
$("<div/>").css("border","solid 1px #ff0000").html("动态创建的div").appendTo(testDiv);
jQuery内部使用innerHTML创建元素：
$("<div style=\"border:solid 1px #ff0000\">动态创建的div</div>").appendTo(testDiv);
3.将元素添加到对象上
$( function(){testDiv.innerHTML+="<div style=\"border:solid 1px #ff0000\">使用$(function)方法</div>";});
4.管理jQuery包装集元素
过滤
eq(index) 获取匹配的第二个元素：$("p").eq(1)
filter(expr) 保留带有select类的元素：$("p").filter(".selected")
filter(fn) 保留子元素中不含有ol的元素：{$("div").filter(function(index){retrun$("ol",this).size()==0;});
is(expr) 由于input元素的父元素是一个表单元素，所以返回true：$("input[type='checkbox']").parent().is("form")
slice(start,end) 选择第一个p元素：$("p").slice(0,1);
not(expr) 从p元素中删除带有select的ID的元素：$("p").not($("selected")[0])
查找
add(expr) 动态生成一个元素并添加至匹配的元素中：$("p").add("<span>Again</span>")
children([expr]) 查找IDV中的每个子元素：$("div").children()
closest([expr]) 为事件源最近的父类li对象更换样式：$(document).bind("click",function(e){
$(e.target).closest("li").toggleClass("hilight");});
contents() 查找素有文本节点并加粗：$("p").contents().not('[nodeType=1]").wrap("<b/>");
find(expr) 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同：$("p").find("span")
串联 Chaining
andSelf() 选取所有div移机内部的p，并加上border类：$("div").find("p").andSelf().addClass("border");
end() 选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素：$("p").find("span").end()
四、使用jQuery操作元素的属性与样式
区分DOM属性和元素属性：浏览器将元素的“元素属性”存储为“DOM属性”。
操作元素属性：
attr(name) 返回文档中第一个图像的src属性值：$("img").attr("src");
attr(properties) 为所有图像设置src和alt属性：$("img").attr({src:"test.jpg",alt:"Test Image"});
attr(key,value) 把src属性的值设置为title属性的值：$("img").attr("title",function(){return this.src});
removeAttr(name) 将文档中图像的src属性删除：$("img").removeAttr("src");
修改CSS类
addClass(classes) 为匹配的元素加上'select'类：$("p").addClass("selected");
hasClass([classes]) 从匹配的元素中删除'selected'类：$("p").removeClass("selected");
toggleClass(class) 为匹配的元素切换'selected'类：$("p").toggleClass("selected");
toggleClass(class,switch) 每三次点击切换高亮样式：var count=0; $("p").click(funtion(){$(this).toggleClass("highlight",count==%3==0);});
修改CSS样式
css(name) 取得第一个段落的color样式属性的值：$("p").css("color");
css(properties) 将所有段落的字体颜色设为红色并且背景为蓝色：$("p").css({color:"#ff0011",background:"blue"});
css(name,value) 讲所有段落字体设置为红色：$("p").css("color",red");
修改位置
offset() 获取第二段的偏移：var p =$("p:last"); var offset=p.offset(); p.html("left:"+offset.left+",top:"+offset.top);
position() 获取匹配元素相对父元素的偏移。获取第一段的偏移：var p=$("p:first"); var position=p.position();$("p:last").html("left:"+position.left+",top:"+position.top);
scrollTop() 获取第一段相对滚动条顶部的偏移：var p=$("p:first"); $("p:last").text("scrollTop:"+p.scrollTop());
scrollTop(val) 设定垂直滚动条值：$("div.demo").scrollTop(300);
scrollLeft() 获取第一段相对滚动条左侧的偏移：var p=$("p:first"); $("p:last").text("scrollLeft:"+p.scrollLeft());
scrollLeft(val) 设置相对滚动条左侧的偏移：$("div.demo").scrollLeft(300);
五、事件处理
jQuery中的事件
bind (type,[data],fn) 当每个段落被点击的时候，弹出其文本：$("p").bind("click",function(){alert($(this).text());});
one(type,[data],fn) 当所有段落被第一次点击的时候，现实所有其文本：$("p").one("click",function(){alert($(this.text());});
trigger(event,[data]) 给一个时间传递参数：$("p").click(function(event,a,b){}).trigger("click",["foo","bar"]);
triggerHandler(event,[data])这个特别的方法会触发指定时间类型上所有绑定的处理函数，不会执行浏览器默认动作。
unbind(type,fn) 把所有段落的所有事件取消绑定：$("p").unbind()
使用自定义元素存储数据：
<div id="testDiv5" customer="customer data 1">获取自定义数据-1</div>
$("#testDiv5").bind("click",function(event){alert($(event.target).attr("customer"));});
<div id="testDiv6">获取自定义数据-2</div>
$("#testDiv6").bind("click",{customer:"customer data 2"},function(event){alert(event.data.customer)});
使用jQuery事件对象
type $("a").click(function(event{alert(event.type);});
target $("a[href=http://google.com ]").click(function(event){alert(event.target.href);});
data $("a").each(function(i){$(this).bind('click', {index:i},function(e){alert('my index is '+e.data.index);});});
ralatedTarget 对于鼠标事件，标示触发事件时离开或者进入的DOM元素
currentTarget 冒泡前的当前触发事件的DOM对象，等同于this
page x/y 鼠标事件中，事件相对于页面原点的水平/垂直坐标
result 上一个时间处理函数返回的值
timeStamp 事件发生时的时间戳
事件对象函数列
preventDefault() 取消可能引起任何语义操作的事件
stopPropagation() 取消事件冒泡
stopImmediatePropagation() 取消执行其他的事件处理函数并取消事件冒泡
