一 ，jQuery选择器

jQuery选择器的基本语法大概如下

 $(" 元素标签 / #id /.class")

元素选择器

jQuery 元素选择器基于元素名选取元素。
例如：获取页面中p元素，然后点击按钮便将其隐藏

<script>
        $(document).ready(function(){
          $("button").click(function(){
            $("p").hide();
          });
        });

</script>

id选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

<script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>

class选择器

jQuery 类选择器可以通过指定的 class 查找元素

<script>
        $(document).ready(function(){
          $("button").click(function(){
            $(".test").hide();
          });
        });
        </script>

除此之外还有很多实例用法，参考菜鸟教程

$("*")                选取所有元素  
$(this)               选取当前 HTML 元素  
$("p.intro")            选取 class 为 intro 的 <p> 元素 
$("p:first")            选取第一个 <p> 元素  
$("ul li:first")          选取第一个 <ul> 元素的第一个 <li> 元素 
$("ul li:first-child")        选取每个 <ul> 元素的第一个 <li> 元素  
$("[href]")             选取带有 href 属性的元素 
$("a[target='_blank']")       选取所有 target 属性值等于 "_blank" 的 <a> 元素 
$("a[target!='_blank']")      选取所有 target 属性值不等于 "_blank" 的 <a> 元素  
$(":button")            选取所有 type="button" 的 <input> 元素 和 <button> 元素 
$("tr:even")            选取偶数位置的 <tr> 元素 
$("tr:odd")             选取奇数位置的 <tr> 元素

二 ，jQuery事件

jQuery 是为事件处理特别设计的。

基本语法：
$("选择元素").事件函数(function(){
                //dosomething.......
            });

jQuery（一）_选择器

效果

隐藏与显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法:

$(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    
     <script> 
            $(document).ready(function(){
                    $("button").click(function(){    
                        $("p").hide(1000,function(){
                            alert("方法执行完毕")
                        });
                    });
            });
           </script>
        <!--hide()有两个可选参数，第一个是时间，第二个是回调方法名或方法，当hide()执行完后执行-->
           <script>
                $(document).ready(function(){
                    $("#btn_1").click(function(){
                    $("p").show();
                    });
                });
           </script>

##### 淡入淡出
通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法，跟hide（）方法类似

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

     <script>
                $(document).ready(function(){
                    $("#btn_3").click(function(){
                        $("#div1").fadeIn(1000,function(){
                            alert("第一张图片加载完毕");
                        });
                        $("#div2").fadeIn(1000);
                        $("#div3").fadeIn(1000);
                    });
                });
            </script>
滑动

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

<script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown("slow");
      });
    });
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideDown("slow");
      });
    });
    </script>
    <script> 
    $(document).ready(function(){
      $("#flip").click(function(){
        $("#panel").slideUp("slow");
      });
    });

</script>
动画和停止动画

jQuery animate() 方法允许您创建自定义的动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法:

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。