jQuery学习记录，基本内容

选择器

1. 元素选择器：$("p")
2. id 选择器：$("#test")
3. class 选择器：$(".test")
4. 选择实例
   
   
   
   选择器转自 菜鸟教程jQuery教程选择器

---

效果

隐藏和显示

所用方法：
hide(speed,callback)：
隐藏函数，speed可以为slow、fast和毫秒，callback是 hide函数执行完后所执行的函数名称，会在当前动画或者效果完成100%后执行。
show(speed，callback)：同hide

---

toggle(speed,callback)：让隐藏的元素显示，显示的元素隐藏。

<p>我爱你</p>
<input type="button" value="显示" id="show">
<input type="button" value="隐藏" class="hide">
<input type="button" value="显示/隐藏" id="toggle">

<script>
        $(document).ready(function(){
            $("#show").click(function(){
                $("p").show(500);
            });
            $(".hide").click(function(){
                $("p").hide(1000,"linear",function(){
                    alert("成功隐藏！");
                });
            });
            $("#toggle").click(function(){
                $("p").toggle(500);
            });
        });
 </script>

---

淡入和淡出

淡入和淡出主要是用fade的一些方法。

fadeIn(speed,callback)：淡入隐藏的元素
fadeOut(speed,callback)：淡出可见的元素
fadeToggle(speed,callback)：淡入淡出切换
fadeTo(speed,opacity,callback)：渐变为给定的不透明度，speed和opacity必有

<div style="margin-top: 10px;" id="div">
        <input type="button" value="淡入" id="fadein">
        <input type="button" value="淡出" class="fadeout">
        <input type="button" value="淡入/淡出" class="fadetoggle">
        <input type="button" value="渐变" id="fadeto">
        <div style="background-color: red;width: 50px;height: 50px;"></div>
        <div style="background-color: blue;width: 50px;height: 50px;margin-top: 10px;"></div>
</div>

<script>
        $(document).ready(function(){
            $("#fadein").click(function(){
                $("#div div").fadeIn("slow");
            });
            $(".fadeout").click(function(){
                $("#div div").fadeOut("fast");
            });
            $(".fadetoggle").click(function(){
                $("#div div").fadeToggle(1000);
            });
            $("#fadeto").click(function(){
                $("#div div").fadeTo("slow",0.5);
            });
        });
</script>

---

滑动

滑动使用的是slide方法。

• slideDown(speed,callback)：下滑
• slideUp(speed,callback)：上滑
• slideToggle(speed,callback)：切换上滑和下滑

<div>
        <div id="slidedown" class="slide">点我下滑面板</div>
        <div id="slideup" class="slide">点我收起面板</div>
        <div id="slidetoggle" class="slide">点我下滑/收起面板</div>
        <div id="panel">我是面板！</div>
</div>

#panel,.slide{
            width: 150px;
            text-align: center;
            background-color: skyblue;
            border: 1px solid tomato;
            float: left;
}
#panel{
            clear: both;
            width: 354px;
            padding: 50px;
}

<script>
        $(document).ready(function(){
            $("#slidedown").click(function(){
                $("#panel").slideDown("slow");
            });
            $("#slideup").click(function(){
                $("#panel").slideUp("fast");
            });
            $("#slidetoggle").click(function(){
                $("#panel").slideToggle(1000,function(){
                    $("#panel").text("成功执行！");
                });
            });
        });
</script>

停止滑动：stop();

---

动画

开始动画

动画使用的是animate方法，类似于css中的animation，可以自己定义动画。

animate({动画属性},speed,callback)

注意：对某个元素的位置使用animate方法时，必须设置position属性！！

一个元素可以使用多个animate方法，形成队列，会逐一调用

<div>
        <input type="button" value="动画" id="ani">
        <div id="div0"></div>
</div>

#div0{
            width: 100px;
            height: 100px;
            background-color: steelblue;
            position: relative;
}

<script>
        $(document).ready(function(){
            $("#ani").click(function(){
                $("#div0").animate({
                    left:"100px",
                });
                $("#div0").animate({
                    marginTop:"10px",
                });
                var div=$("#div0");
                div.animate({
                    opacity:0.5,
                    width:"+=20px",
                    height:"-=20px",
                },500);
            });
        });
</script>

问题：

• 为什么当第二次点击动画时，只有 width 和height 改变了？按理说每点击一次，就要把 animate 从头到尾执行一次？

位置的改变应该是相对于自身原来的位置，当第一次位置改变后，再去执行第二次，此时位置相对于自身来说已经达到了所要求的，所以不会在改变。其他的属性用的都是绝对值，比如 left:“100px”,opacity:0.5,当达到这个要求的时候，就不会再改变，但width:"+=20px",height:"-=20px",是相对值，意思是相对于当前值，所以第二次点击会改变。不管点击动画多少次，只会有 width 和height 的变化。

---

如果我们把定位去了会怎样？

去掉定位：

//改变如下
<script>
        $(document).ready(function(){
            $("#ani").click(function(){
                $("#div0").animate({
                    left:"+=100px",
                });
                $("#div0").animate({
                    marginTop:"+=10px",
                });
                var div=$("#div0");
                div.animate({
                    opacity:0.7,
                    width:"+=20px",
                    height:"-=20px",
                },500);
            });
        });
</script>

我们发现 left 没有变化，哪怕已经改成了相对值。所以这就是为什么要加定位的原因，之前讲position和margin的区别时，我们知道只有加了定位 left top 这些才是可以用的，否则调位置只能用 margin 。所以当没有加定位时， left 是没用的，margin-top 才有用。

---

停止动画

使用的是stop(stopAll,goToEnd)方法。

---

stopAll：是否清除动画队列
goToEnd：是否立即完成当前动画

<div style="margin-top: 20px;">
        <input type="button" value="开始动画" class="start">
        <input type="button" value="停止" class="stop">
        <input type="button" value="停止所有" class="stop_all">
        <input type="button" value="停止动画，但完成动作" class="stop_but_finish">
        <div id="div0">开始动画</div>
</div>

<script>
        $(document).ready(function(){
            var div=$("#div0");
            $(".start").click(function(){
                $("#div0").animate({
                    left:"+=100px",
                },5000);
                $("#div0").animate({
                    marginTop:"+=10px",
                },5000);
                div.animate({
                    width:"+=50px",
                    height:"+=50px",
                },500);
            });
            $(".stop").click(function(){
                div.stop();
                div.text("停止当前激活的动画，但之后点击开始可以在动画队列中再次激活。");
            });
            $(".stop_all").click(function(){
                div.stop(true);
                div.text("停止当前动画，并清除动画队列，所以元素的所有动画都会停止");
            });
            $(".stop_but_finish").click(function(){
                div.stop(true,true);
                div.text("快速完成动作，并停止它");
            });
        });
</script>

---

链

我们之前写的代码都是在同一个元素上做了很多操作，链(chaining)可以把这些操作串成一行，不用每次都写相同的元素。

以滑动效果为例：

之前我们想要div有上滑、下滑的切换效果时，用的是slideToggle方法，那么我们也可以用链来达到这个效果。

<div style="margin-top: 20px;">
        <div class="slide">点我下滑/收起面板</div>
        <div id="panel">我是面板！</div>
</div>

slideToggle

<script>
        $(function(){
            $(".slide").click(function(){
                var div=$("#panel");
                //div.slideDown(500).slideUp(500);
                div.slideToggle(500);
            })
        });
</script>

链

<script>
        $(function(){
            $(".slide").click(function(){
                var div=$("#panel");
                div.slideDown(500).slideUp(500);
                //div.slideToggle(500);
            })
        });
</script>

区别：
slideToggle 点击后才会切换效果，但 链的话，点击一次，就会完成先下滑再收起的操作，再下滑后紧着着收起，不会等待下一次点击。

---

对HTML的操作

内容和属性

获得内容

• text()：设置或返回所选元素的文本内容
• html()：设置或返回所选元素的内容（包括 HTML 标记）
• val()：设置或返回表单字段的值

<p>hello!<span>我<b>爱</b>你</span></p>
<input type="button" value="显示文本" id="btn1">
<input type="button" value="显示内容" id="btn2">
<input type="text" value="" id="test">

<script>
        $(function(){
            $("#btn1").click(function(){
                $("p").text("Text:"+$("p").text());
            });
            $("#btn2").click(function(){
                $("p").text($("p").html());
            });
            $("#test").change(function(){
                $("p").text($("#test").val());
            });
        });
</script>

---

设置内容

内容的设置很容易，只需要在 text("") html("") val("")中写入相应的字符串 .

需要注意的是，不仅仅可以写入字符串，也可以写入回调函数：

$("#test1").text(function(i,origText){
  return "旧文本: "+origText+"新文本: Hello world! (index: "+i+ ")"; 
});

i 为被选元素列表中当前元素的下标，origText 为原始值，return 返回新值。

---

获得属性

• attr(属性)：获取属性值

$("#btn2").click(function(){
     $("p").text($("#btn2").attr("id"));
});

---

设置属性

• 单个设置：attr("属性")
• 多个设置：attr({"属性":"值",})
• 回调函数：和设置内容的回调函数参数意义一样

.attr("属性",function(i,origValue){
  return ..;
})

---

元素

添加元素

• append() ：在被选元素的结尾插入内容
• prepend() ： 在被选元素的开头插入内容
• after() ： 在被选元素之后插入内容
• before() ： 在被选元素之前插入内容

向HTML中添加文本的几种方法：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

注意：append 和 prepend 是在元素内部添加，after 和 before 是在元素外部追加。

---

删除元素

• remove() ：删除被选元素（及其子元素）
• remove(参数)：对被删元素进行过滤，删除带有参数的元素
• empty() ：删除被选元素的子元素。

$("p").remove(".italic");

---

CSS类

• addClass("类名") ：向被选元素添加一个或多个类
• removeClass("类名") ：从被选元素删除一个或多个类
• toggleClass("类名") ： 对被选元素进行添加/删除类的切换操作
• css("属性名") ： 返回样式属性
• css("属性名","值") ： 设置样式属性

$("h1,h2,p").addClass("blue");//添加blue类
$("body div:first").addClass("important blue");//添加important和blue类

$("h1,h2,p").removeClass("blue");//移除blue类

$("h1,h2,p").toggleClass("blue");//添加、删除blue类的切换

$("p").css("background-color");//返回 p 元素的 background-color属性

$("p").css("background-color","yellow");//p 元素的背景颜色设置为黄色
$("p").css({"background-color":"yellow","font-size":"200%"});
//多属性设置，背景颜色为黄色，字体大小为200%

---

尺寸

返回尺寸值：
width() 、innerWidth() 、outerwidth()以及相应的height

width();
innerWidth()=width()+2*padding;
outerWidth()=width()+2*padding+2*border;
outerWidth(true)=width()+2*padding+2*border+2*margin;

---

遍历

祖先（父亲）

• parent() ：返回被选元素的直接父元素。
• parents() ：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。
• parents(参数) ：过滤，是或者带有参数的祖先元素
• 元素.parentsUntil(元素) ：返回介于两个给定元素之间的所有祖先元素。

$("span").parentsUntil("div");// span 和 div 中间的所有祖先元素

---

后代（孩子）

• children() ：返回被选元素的所有直接子元素。
• children(参数) ：过滤，是或者带有参数的所有直接子元素。
• find(参数) ：返回被选元素的后代元素，一路向下直到最后一个后代。

$("div").find("*");//返回 div 的所有后代
$("div").find("span");//返回 div 的所有 span 后代

---

同胞（兄弟）

• siblings() ：返回被选元素的所有同胞元素。
• siblings(参数) ：过滤对同胞元素的搜索。
• next()：返回被选元素的下一个同胞元素。
• nextAll() ：返回被选元素的所有跟随的同胞元素。
• 元素.nextUntil(元素) ：返回介于两个给定参数之间的所有跟随的同胞元素。
• prev()：返回被选元素的上一个同胞元素。
• prevAll()：返回被选元素的所有上方的同胞元素。
• 元素.prevUntil(元素)：返回介于两个给定参数之间的所有上方的同胞元素。

---

## each

• each(function(index,element)) ：为每个匹配元素规定要运行的函数

过滤

• first() ：返回被选元素内部的首个元素。
• last() ：返回被选元素内部的最后一个元素。
• eq(索引) ：返回被选元素内部带有指定索引号的元素。
• filter(参数) ：允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
• not(参数) ：返回不匹配标准的所有元素。

事件方法

1. dblclick()：双击元素
2. focus()：元素获得焦点
3. focusin()：元素或其任意子元素获得焦点
4. focusout()：元素或任意子元素失去焦点
5. hover(infunction,outfunction)：鼠标移上去和移开，只有一个函数则都执行它。
6. mouse事件：

mousedown()	当鼠标指针移动到元素上方，并按下鼠标左键时
mouseup()	当鼠标指针移动到元素上方，并松开鼠标左键时
mouseenter()	当鼠标指针穿过（进入）被选元素时
mouseleave()	当鼠标指针离开被选元素时
mouseover()	当鼠标指针位于元素上方时,在鼠标指针进入被选元素或任意子元素时都会被触发
mouseout()	鼠标指针离开被选元素,离开被选元素或任意子元素时都会被触发
mousemove()	鼠标指针在指定的元素中移动

7. on("事件 事件",指定的子元素上，传递到函数的额外数据，事件发生时的函数)：
   on()可以绑定到动态控件上

$(".li").on('click', ".deleteon", function(){
    $(this).parent().remove(); 
})

8. off("事件 事件",有on()添加事件的选择器，事件发生时的运行函数，事件映射):

$("body").off("click","p");

9. one("事件 事件",额外数据，事件发生时的运行函数)：每个元素只能运行一次事件处理程序函数
10. resize()：当调整浏览器窗口大小时，发生 resize 事件
11. scroll()：当用户滚动指定的元素时，会发生 scroll 事件
12. select()：当 textarea 或文本类型的 input 元素中的文本被选择（标记）时，会发生 select 事件
13. submit()：当提交表单时，会发生 submit 事件
14. toggle(function)：当在元素上点击时调用第一个指定函数，当再次点击时调用第二个函数，以此类推，造成切换

其他一些方法：
$(selector).each(function(index,element))为每个匹配元素规定要运行的函数。

• index：选择器的 index 位置。
• element：当前的元素（也可使用 “this” 选择器）。