整体感知
1 <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
2 <script type="text/javascript">
3 //自己的代码
将页面上的id为box的盒子的背景颜色变为红色。
$（"#box"）.css("background-color","red");
$()暗含了“批量”操作
页面上所有的类名为box的盒子，此时背景颜色都会变为红色
$（".box"）.css("background-color","red");
批量这个事情，for循环隐藏在了$()函数里面，所以下面的语句能够让页面上所有.box的元素都进行动画：
$(".box").animate({"left":900},400);</script>
$()函数
1.size()和length属性.是得到div的个数
var a =$("div").size();
alert (a);
var a =$("div").length();
alert(a);
$("div.box li.xixi #zi").animate({"font-size":400},1000);
我们传进去的是一个字符串，$()函数用正则表达式，去解析我们的字符串，然后撒丫子在页面上寻找符合条件的元素。
jQuery 全面支持css3的选择器
$("span[frank=123]").css("background-color","red");
CSS3的选择器是浏览器兼容问题的，但是jQuery是没有兼容问题的。
$("p")全部
$(“p:first”)第一个
$(“p:last”)最后一个
$(“p:eq(2)”)下标
$(“p:lt(2)”)小于下标2
$(“p:gt(2)”)大于下标2
$(“p:odd”)奇数
$(“p:even”)偶数
$("p").eq(2).css("background-color","red");和
$("p:eq(2)").css("background-color","red");相等
$()函数和jquery()函数等价$("p:eq(2)").css("background-color","red");和
jQuery("p:eq(2)").css("background-color","red");相等
$("")必须有引号只有三个没有
$(window) $(document) $(this)
jQuery中事件的名字，一律没有on。
单击： click()
双击： dblclick()
鼠标进入： mouseenter() 注意这和原生onmouseover不一样，有啥不同，JS进阶课程上讲解
鼠标离开： mouseleave() 注意这和原生onmouseout不一样，有啥不同，JS进阶课程上讲解
文本框得到焦点： focus()
失去焦点： blur()
等等
1 //鼠标进入自己怎么样
2 $("div").mouseenter(function(){
3 $(this).css("background-color","red");
4 });
5
6 //鼠标离开自己怎么样
7 $("div").mouseleave(function(){
8 $(this).css("background-color","orange");
});
1 $("div").mouseenter(function(){
2 $(this).css("background-color","red");
3 }).mouseleave(function(){
4 $(this).css("background-color","orange");
});
off()可以去掉元素的事件监听。
1 $("div").off("click"); //去掉div的click事件监听 |
也可以用bind这个小方法来给元素添加事件监听，bind的好处的就是能够给一个元素添加多个事件名，用空格隔开
$("div").bind("mouseenter mouseleave",function(){
1 num++;
2 //让h1里面显示这个num数字
3 $("h1").html(num);
});
bind也提供JSON形式的API：
1 $("div").bind({ 2 click : function(){ 3 $(this).css("background-color","red"); 4 }, 5 mouseenter : function(){ 6 $(this).css("background-color","pink"); 7 } 8 }); |
也可以用one这个词语添加事件监听，就一次有用，执行完毕之后自动删除监听
1 //给每个元素添加一个“一次性”的事件监听： 2 $("div").one("click",function(){ 3 alert("哈哈"); 4 $(this).css("background-color","#ccc"); 5 }); |
显示隐藏
1 $("div").show();
$("div").hide();
下拉显示和上滑显示
1 $("div").slideUp();
$("div").slideDown();
可以添加动画时间$("div").slideDown(3000);
slideDown()的机理：一个元素是display:none;的，先把高度height设置为0，然后瞬间变为display:block; 然后进行定时器的动画，慢慢变为用户设置的那个height值。
fadeIn()的起点是display:none; fadeOut()终点是display:none;
也就是说，一个东西如果想淡入，一定要给这个元素加上display:none;属性，而不要给他加上opacity:0;的属性。
1 //老图淡出，什么是老图，就是第idx这张图
2 $lis.eq(idx).fadeOut();
3 //信号量变化
4 idx++;
5 if(idx > 4) idx = 0;
6 //新图淡入，此时idx已经发生了变化
$lis.eq(idx).fadeIn();
animate函数
1 $("div").animate(
2 {
3 "left": 800,
4 "top" : 300,
5 "width" : 300
6 }
7 ,2000
);
background-color、background-position不能参与动画！
同一个元素，如果对它下达多个animate命令，将顺序执行。第一个执行完毕了，第二个再执行：
1 $("div").animate({"left" : 600} , 2000);
$("div").animate({"top" : 400} , 2000);
1 $("div").animate(
2 {
3 "left" : 600,
4 "top" : 400
5 }
6 , 2000
);
回调函数
1 $("#box1").animate({"left":1000},2000,function(){
2 console.log("哈哈");
});
在回调函数中,$(this)指的是运动的对象。
匀速运动
1 $("#box1").animate(
2 {
3 "left" : 1000,
4 "top" : 1000
5 }
6 ,1000
7 ,"linear"
8 ,function(){
9 $("#box2").animate();
10 }
);
命令元素停止运动。stop是一定能够停止当前动画的，里面接收两个参数，第一个参数表示是否清空动画队列；第二个参数表示是否瞬间完成当前动画。
立即停止当前动画，马上执行下一个动画，也就是说元素不一定停下：
1 $("div").stop(); |
等价于
$(“div”).stop(false,false);
立即停止当前动画，并且清空动画队列，元素一定停下：
1 $("div").stop(true); |
等价于
$(“div”).stop(true,false);
立即停止当前动画，并且瞬间完成当前动画，并且清空动画队列，元素一定停下：
1 $("div").stop(true,true); |
立即停止当前动画，并且瞬间完成当前动画，马上执行一下个动画，也就是说元素不一定停下：
1 $("div").stop(false,true); |
1 if($("div").is(":animated")){
2 return;
3 }
4
节点关系
1 <div>
2 <p><span></span></p>
3 </div>
4 <ul>
5 <li></li>
6 <li></li>
7 <li></li>
</ul>
$("#box").children().css("background-color","red");
children()里面可以加参数，是选择器，表示又是这个元素的儿子，又能被这个选择器筛选的元素：
$("#box").children().css("background-color","red");
1 <div id="box">
2 <p></p>
3 <p class="teshu"></p>
4 <p class="teshu"></p>
5 <p></p>
6 <h3>h3</h3>
7 <h3>h3</h3>
8 </div>
<p></p>
1 $("div").click(function(){ 2 //$(this)没有引号，表示触发监听的这个元素，这个元素是某一个div 3 $(this).find("li").css("background-color","red"); 4 }); |
1 $("p").click(function(){ 2 $(this).parent().css("background-color","red"); 3 }); |
parents()方法
表示自己的所有祖先，直到<html>标签。
这是一个迭代的过程，这个元素会寻找自己的parent()，然后寻找自己parent()的parent()，然后parent()的parent()的parent()……
1 $("span").click(function(){
2 $(this).parents().css("background-color","red");
})
siblings()
自己的亲兄弟，不包括自己。
1 $("p").click(function(){ 2 $(this).siblings("h3").css("background-color","red"); 3 }); |
next() 后一个亲兄弟
prev() 前一个亲兄弟
nextAll() 后所有亲兄弟
prevAll() 前所有亲兄弟
1 $(this).next().css("background-color","red"); 2 $(this).prev().css("background-color","green"); 3 $(this).nextAll().css("background-color","red"); 4 $(this).prevAll().css("background-color","green"); |
iblings()最常见的用途就是排他操作：
1 $("li").mouseenter(function(){ 2 //自己加上current类，自己的兄弟去掉current类 3 $(this).addClass("current").siblings().removeClass("current"); 4 }); |
1 $("p").click(function(){
2 //自己开心，自己的兄弟们开心。自己的父亲的兄弟（是另外两个div）的儿子们呜呜呜
3 $(this).html("开心").siblings().html("开心").parent().siblings().children().html("呜呜呜");
});
节点序和遍历
index()方法
1 $(".teshu").click(function(){
2 alert($(this).index());
});
点击box1中的P的时候，我们想让box2中对应的p 变红
1 $(".box1 p").click(function(){
2 $(".box2 p").eq($(this).index()).css("background-color","red");
});
each()
1 $("div").each(function(){
3 $(this).children().eq(2).css("background-color","red");
});
delay 延迟1 $().delay(600).animate();
2 $().delay(600).fadeOut();
$().delay(600).show(400);
append就是英语追加的意思，A.append(B)表示在A的内部追加B。
1 $("input").click(function(){
2 $("ul").append("<li>哈哈</li>");
});
$("ul").append($("<li>哈哈</li>"));
$("span").append("<b>哈哈</b>");
appendTo就是被动写法，B.appendTo(A)等价于a.append(B);
prepend表示在现有内容之前追加：
$("span").prepend("<b>哈哈</b>");
1 <span> 2 <b>哈哈</b> 3 <b>么么哒</b> 1 </span> |
after表示在后面插入，也就是说，是给自己新增一个兄弟，而不是儿子。
1 <div class="box">我是box</div> |
执行命令：
1 $(".box").after("<div>么么哒</div>"); |
将变为：
1 <div class="box">我是box</div> 2 <div>么么哒</div> |
before是之前插入，
比如现在HTML结构是：
1 <div class="box">我是box</div> |
执行命令：
1 $(".box").before("<div>么么哒</div>"); |
将变为：
1 <div>么么哒</div> 2 <div class="box">我是box</div> |
反面写法：
A.after(B)等价于B.insertAfter(A)
A.before(B)等价于B.insertBefore(A)
before是之前插入，
比如现在HTML结构是：
1 <div class="box">我是box</div> |
执行命令：
1 $(".box").before("<div>么么哒</div>"); |
将变为：
1 <div>么么哒</div> 2 <div class="box">我是box</div> |
反面写法：
A.after(B)等价于B.insertAfter(A)
A.before(B)等价于B.insertBefore(A)
改变节点位置
当你把页面上1个现有节点，append()、prepend()到了新的父结点中去，那么原来的这个结点将消失。即将原来的节点，移动到了现有位置去。
比如HTML结构：
1 <div id="box1"> 2 <p class="xiaoming">我是小明</p> 3 </div> 4 <div id="box2"> 5 6 </div> |
现在执行命令：
1 $("#box2").append($(".xiaoming")); |
则HTML页面将变为：
1 <div id="box1"> 2 3 </div> 4 <div id="box2"> 5 <p class="xiaoming">我是小明</p> 1 </div> |
改变节点位置，没有change()等等这种方法，就是用append()这个方法。
3.4 包裹wrap()
给自己增加父亲。这个方法基本上没啥用。
1 <p>哈哈</p> |
施加命令：
1 $("p").wrap("<div></div>"); |
变为：
1 <div><p>哈哈</p></div> |
3.5 替换replace()
比如HTML结构：
1 <p>Hello</p><p>cruel</p><p>World</p> |
施加命令：
1 $("p").replaceWith("<b>Paragraph. </b>"); |
变为：
1 <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> |
3.6 删除节点empty()、remove()
1 $("p").empty(); |
等价于
1 $("p").html(""); |
表示将这个p里面的所有内容清空。
remove()就表示移除自己
1 $(“p”).remove(); |
3.7 克隆clone()
A.clone()出来的节点没有自己的位置，要通过append()追加。所以基本上就是：
1 $().clone().appendTo(); |
或者
1 $().append($().clone()); |
扫一扫
1025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
