jQuery 学习笔记

本文存下来作为备忘。
1,更改css样式四种情况：
A，$(“p”).(“background-color”,”red”);
B，var nome = {
background:’red’,
margin:’10px 0 0’
};
$(“p”).css(nome);
C，$(“p”).css(red);(此情况仅为具体的颜色)
D，$(“p”).css({“background”:”red”,”color”:”white”})
2，css若写在head部分：
<script type=”text/javascript”>
$(function{
…
})
</script>
3,jquery替代$符号
Var jq = jQuery.noConflict();
jq(focument).ready(function(){
…
})
4,fadeTo淡出：
$(“p“).fadeTo(“slow”,0.6);
5,animate:
$(“p”).animate({height:”70%”,weight:100,marginLeft:”0.6in”},”slow”)
6,输出属性：
${“button”}.click(function(){
$(“p”).text($(this).css(“background-color”));
})
7,页面加载完毕即运行：
$(function(){
Function div(){
$(“p”).animate({width:100},”slow”);
$(“p”).animate({width:300},”slow”);
};
Div();
})
8所有带*属性的选择
$(“[id]”).css(“red”);选区所有有id属性的
$(“[id=main]”).css(“red”);选取id为main的
9,选取文件夹为file属性
10 注意空格
$(“div#demo”)选取id为demo的div
$(“div#demo”)选区div下id为demo的
11 bind 绑定格式
$(“p”).bind(“click”,function(){
});
$(“p”).bind(
{clcik:function(){…}},
{clcik:function(){…}},
)
12,设置并触发
$(“input”).focus(function(){
$(“input”).css(“background-color”,”#fff”);
$(“btn”).click(function(){
$(“input”).focus();
})
})
13,change事件仅适用于text textarea select中
14，$(“button”).click(function(){
$(“p”).slideToggle();
});
$(“p”).dbclick(function(){
$(“button”).click();
})
15,delegate
$(“div”).delegate(“button”,”click”,function(){
$(“p”).slideToggle();
});
16,图片未加载-error
$(“img”).error(function(){
$(“img”).replaceWith(“<p>图片未加载</p>”)
})
17，阻止链接打开——preventDefault
$(“a”).click(function(event){
Event.preventDefault();
Alert(“Defaultprevent:” + event.isDefaultPrevented ());
})
效果是 a无法打开，并且弹出消息框 Default prevent：true;
18,输出鼠标指针位置
$(document).mouseover(function(e){
$(“span”).text(“X:”+e.pageX+”,Y:”+e.pageY);
})
19,event.target.nodeName为获得当前触发元素
20，输出为自1970年1月1日至今的毫秒数
$(“btn”).click(function(e){
$(“p”).text(e.timeStamp);
})
21,event.type表示事件类型
$(“p”).bind(‘clickdbclick mouseover’,function(event){
$(“div”).text(“事件:”+event.type);
}) 当鼠标经过时 会出现结果事件：mouseover
22，键盘值
$(“input”).keydown(function(event){
$(“div”).text(“Key:”+event.which)
})
23,区分mouseover与mouseenter事件对应于
无论鼠标指针是经过被选元素还是其子元素都会触发mouseover事件 mouseout同
只有鼠标指针经过被选元素时才会触发mouseenter mouseleave同；
Varx = 0;
$(“p”).mouseover(function(){
$(“div”).text(x+=1);
});结果为不断累加
$(“p”).click(function(){
$(this).(fontSize:”+=6px”);字体不断增大6px；
}}
24，ready()函数不与body onload=“”一起使用；
25，resize 调整窗口大触发；
26，阻止表单提交
$(“button”).submit(function(e){
e.preventDaulted();
})
27,$(button).toggle(
Function(){$(“p”).css(“red”)},
Function(){$(“p”).css(“red”)},

Function(){$(“p”).css(“red”)}
);
27,$(“p”).toggle(true),元素一直显示；若为false则为隐藏
28，trigger(“select”)触发select事件
它能匹配所有元素 而triggerHandler只会影响第一个匹配元素；
29,循环两次结束：
$(function(){
Varx = 0;
$(“p”).click(function(e){
$(“p”).animate({fontSize:”+=6px”});
x++;
If(x>2){
$(this).unbind(e);
}
});
})
30,取消绑定特定函数
Function alertMe(){
Alert(“123”)
};
$(function(){
$(“p”).click(alertMe);
$(“button”).click(function(){
$(“p”).unblind(“click”,alertMe);
});
});
31，addClass 返回函数
$(“p”).addClass(function(n){
Return‘par’ + n;
});
添加两个类
$(“p”).addClass(“class1class2”)
32,宽度减去50
$(“img”).attr(“width”,function(n,v){
Returnv – 50;
})
V为属性值()width的，n为index；
33，clone
$(“p”).append($(“p”).clone());
$(“p”).append($(“p”).clone(true));表示事件处理器也被同样复制；
34，$(“p”).deatch();删除p元素；(并不是彻底删除)

Varx;
$(“btn1”).click(function(){
X=$(“p”).deatch();
});删除p
$(“btn2”).click(function(){
$(body).append(x);
});添加p；

Empty()是指移除内容；
35，hasClass()指被选元素是否包括*元素
$(“button”).click(function(){
Alert($(“p”).hasClass(“into”));
});输出结果为true或者false;
36,html()返回结果为()内容；
37，document.createElement(“div”)表示新创建div
38，toggleClass()对类 进行切换
39,css增加div宽度
$(“div”).css(“width”,function(index,value){returnparseFloat(value)*1.2;})
40,stop()只适用于动画，而clearQueue适用于任何排队函数。
41，$(“#stop”).click(function(){
$(“#box”).stop(true);
});动画依然能完成；
$(“#stop”).click(function(){
$(“#box”).stop(true，true);
});动画不能完成；
42，toggle(),进行显示和消失的切换，toggle(true)，只能显示，不能消失；
43,$(“p”).height(50),或者height(“20%”)；
44,$(“p”).size();元素个数=”.length”;
45,每次增加10px宽度；
$(“p”).height(function(n,c){
Returnc+10；
})；
46，offset表示文档相对位置；
X=$(“p”).offset();position也可以这样用；
x.left表示距离左边的距离；
$(“p”).offset({top:100,left:0});重新设置距离

$(“p”).offset(function(n,c){
newPos=newObject();
newPos.left= c.left+100;
returnnewPos;
});

NewPos= new Object();
newPos.left=100;
$(function(){
$(“button”).click(function(){
$(“p”).offset(newPos);
});
});

$(“p”).offset($(“img”).offset())
47，$(“P”).scrollLeft(100),把滚动条的位置设置为100px；
48，closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。
Addself包括当前元素；
end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。
49var item1 =$('li.item-1')[0];{_?
50,$(“p”).has(“li”).length? “Yes”:”No” 判断P元素是否含有li元素，有则返回Yes;
51,.is(“p”)判断是否含有P；
52，$(“ul”).click(function(event){

Var$target=$(event.target);
If($target.is(“li”)){
$(“target”).css(“background”,”red”);
}
});点击一个列表，若含有li则当前点击列表变为红色；

53，$(“li”).click(function(){
Var$li=$(this),
isWithTwo=$li.is(function(){
return$(“strong”,this).length===2;
});
If(isWithTwo){
$li.css(“background”,”green”)
}else{
$li.css(“background”,”red”)
};
})若当前li元素内有两个“strong”元素时，点击则为绿色；

54，map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象
$(“p”).append(
$(“:checkbox”).map(function(){
Returnthis.id;
});
);输出选框的id；

55，$(“ul”).nextUntil(“li”) ul下的所有元素知道li；
56，offsetParent()获得被定位的最近祖先元素。
57，$(“p”).parentsUntil(“span”,”.yes”)选择p的类名为”.yes”父级元素知道“span”
58.$(“p”).slice(0,2)选取的为第2个；
59, $(selector).data(name,value)向name添加数据；
60;function runIt(){
$(“div”).show(1000);
$(“div”).hide(1000);
};
runIt();循环播放；
61，dequeue()方法为匹配元素执行序列中的下一个函数。
ShowIt()表示一直显示，setTimeOut(showIt,100)表示没100毫秒更新次；
62，get()方法获得由选择器指定的 DOM 元素。
$(“button”).click(function(){
X = $(“p”).get(0);
$(“div”).text(x.nodeName+”:”+x.interHtml)
}); 表示P p的内容；
63，$(“span”,this)等于$(this).find(“span”)