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({100},”slow”);
$(“p”).animate({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”)

原文地址:https://www.cnblogs.com/leixiaohua1020/p/3901950.html