jQuery是一个java script库，里面拥有很多实用且功能强大的方法。比原生的java script用起来更加简单。通过简单的<script>标签将要使用的jquery文件引入进来即可。也可放在指定的目录下，在<head>内将<script src = “当前jquery的路径，若是同意目录下只写其文件名即可”>。

1.隐藏元素

  • $(this).hide() – 隐藏当前元素

  • $(“p”).hide() – 隐藏所有 <p> 元素

  • $(“p.test”).hide() – 隐藏所有 class=”test” 的 <p> 元素

  • $(“#test”).hide() – 隐藏 id=”test” 的元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>隐藏元素</title>
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
              //document.ready函数表示在完全加载了DOM后才开始执行，为防止在加载DOM之前执行，可以写成$(function(){ });效果相同。
            $(document).ready(function(){
                //$("p.test").hide();//隐藏所有calss="test"的p元素
                //$("p").hide();//隐藏所有p元素
                //$("#tt").hide();//隐藏所有id等于tt的元素
            })
        </script>
        
    </head>
    <body>
       <p class = "test">你好，世界</p>
       <p>hello world</p>
       <a id = "aa">你好啊，我是a元素，id = aa</a>
       <a id = "tt">我是id= tt的a元素</a>
       
    </body>
</html>

2.选择器：jQuery 选择器允许您对 HTML 元素组或单个元素进行操作，基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>选择器测试</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
    
</script>
<script>
    $(function() {
        $("button").click(function() {//当button按钮被点击的时候执行函数。
            //$("*").hide();//选择所有元素
            //$(this).hide();//选择当前的html元素
            //$("p.y").hide();//选择class为y的p标签
            //$("p:first").hide();//选择第一个p标签
            //$("ul li:first").hide();//选择ul 标签中 第一个li标签元素。
            //$("ul li:first-child").hide();//选取每个 <ul> 元素的第一个 <li> 元素
            //$("p").hide();//选择所有p标签
            //$(".y").hide();//选择所有class等y的元素
            //$("#test").hide();//选择id等于test的元素，id是唯一的。
            //$("[href]").hide();//选取带有href属性的元素。
            $("a[target='_blank']").hide();//选取所有 target 属性值等于 "_blank" 的 <a> 元素,或者可将=换为!=。
            //$(":button").hide();//选取所有 type="button" 的 <input> 元素 和 <button> 元素
            //$("tr:even").hide();//选取偶数位置的 <tr> 元素
            //$("tr:odd").hide();//选取奇数位置的 <tr> 元素
        });
    });
</script>
</head>

<body>
    <p>第一个p元素</p>
    <p class="y">class y 的p元素</p>
    <p>纯p元素，最后一个p元素</p>
    <b class="y">class y 的b元素</b>
    <p>
        <abbr id="test">id 等于 test的 abbr元素，id是唯一的</abbr>
    </p>
    <p>
        <a href="http://xxx"> 拥有 href的a元素</a><br/>
        <a target ="_blank"> target属性为_blank的a元素</a>
    </p>
    <table border="1">
        <tr>
            <th>姓名</th>
            <th>号码</th>
        </tr>
        <tr>
            <td>王刚</td>
            <td>1</td>
        </tr>
        <tr>
            <td>孙俪</td>
            <td>2</td>
        </tr>
    </table>
    <ul>
        <li>li 1元素1</li>
        <li>li 1元素2</li>
        <li>li 1元素3</li>
    </ul>
    <ul>
        <li>li 2元素1</li>
        <li>li 2元素2</li>
        <li>li 2元素3</li>
    </ul>
    <button>点击测试</button>
</body>
</html>

3.jQuery事件：页面对不同访问者的响应叫做事件。如鼠标滑动到某个位置，选中了某个复选框…..

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件测试</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
</script>
<script>
    //click事件演示：当点击区域在p标签之内时就会将整个p标签中的所有内容隐藏
    /* $(document).ready(function(){
     $("p").click(function(){
     $(this).hide();
     });
     }); */

    //dblclick事件：双击时就会触发
    $(document).ready(function() {
        $("p").
            //mousedown//鼠标选中元素，按下就会执行
            //mouseup//松开鼠标就会执行
            click//鼠标选中元素，按下松开后才会执行.执行顺序：mousedown -> mouseup -> click
            //dblclick//双击触发事件
            //mouseenter//当鼠标指针穿过元素时，会发生 mouseenter 事件。
            //mouseleave//鼠标指针放在该元素上，然后当鼠标指针离开元素时，会发生 mouseleave 事件。
            (function() {
            //$(this).hide();//hide表示隐藏
        });
        
        //hover当鼠标划入后执行第一个action，划出后执行第二个action.    
        $("#pp").hover(
            function(){
                $(this).css({ "backgroundColor": "#cccccc", "color": "blue" });
            },
            function(){
                $(this).css({ "backgroundColor": "#cccccc", "color": "red" });
            }
        );
        //当获得焦点时就会执行该程序
        $("input").focus(
            function(){
                $(this).css("background-color","#00FF00");//绿色    
            }
        );
        //当失去焦点时会执行
        $("input").blur(
            function(){
                $(this).css("background-color","#FF0000");//红色    
            }
        );
    });
</script>
</head>
<body>

    <p>
        <button>我是p标签中的按钮</button>
    </p>
    <p>
        <input value="我是p标签中的input元素"><br>
    </p>
    <p id = "pp">点我也消失!</p>

</body>
</html>

4.显示，隐藏，显示+隐藏，褪色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 100px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    //$("div").hide(1000)//隐藏p标签中的内容 linear表示隐藏时采用那种方式隐藏， ：jQuery自身提供"linear" 和 "swing"
    $("div").fadeOut(2000)//逐渐淡化消失
    ;
  });
  
  $("#show").click(function(){
    $("div").
    //show(1000)//显示p标签中的内容，1000表示打开显示功能需要1000毫秒，若不设值则表示直接显示。
    fadeIn(2000)//逐渐亮化显示
    ;
  });
  
  $("#hhhh").click(function(){
      $("div").
      //toggle(1000)//点一下隐藏或显示
      fadeToggle(2000)//逐渐淡化消失，亮化显示
      ;
  });
  
  $(".fading").click(function(){
      $("div").fadeTo("slow", 0.5);//div会褪色到0.5
  });
  
});
</script>
</head>
<body>
<div>
    <p>如果你点击“隐藏” 按钮，我将会消失。</p>
</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id = "hhhh">隐藏/显示</button>
<button class = "fading">褪色</button>
</body>
</html>

5.滑动：滑上，滑下，滑上滑下。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){$("#panel").slideDown("slow")});//滑下
  $("#flip2").click(function(){$("#panel2").slideUp("slow")});//滑上
  $("#flip3").click(function(){$("#panel3").slideToggle("slow")});//滑下滑上
});
</script>
 
<style type="text/css"> 
#panel, #flip, #panel2, #flip2, #panel3, #flip3
{
    padding:10px;/** 边框中间填充的像素值 */
    text-align:center;/** 水平对其中间 */
    background-color:#e5eecc;/*背景颜色*/
    border:solid 10px #FF6100;/*solid 框的边距10px, 边距的颜色*/
    
}

#flip{
    margin-right:1px;/** 距离右边边距 */
    margin-left:70%;/** 距离左边边距 */
}
#panel
{
    padding:50px;
    display:none;/*初始时隐藏*/
    margin-right:1px;/** 距离右边边距 */
    margin-left:70%;/** 距离左边边距 */
}
#flip2{
    margin-right:31%;/** 距离右边边距 */
    margin-left:40%;/** 距离左边边距 */
}
#panel2
{
    padding:50px;
    margin-right:31%;/** 距离右边边距 */
    margin-left:40%;/** 距离左边边距 */
}
#flip3{
    margin-right:62%;/** 距离右边边距 */
    margin-left:1%;/** 距离左边边距 */
}
#panel3
{
    padding:50px;
    display:none;/*初始时隐藏*/
    margin-right:62%;/** 距离右边边距 */
    margin-left:1%;/** 距离左边边距 */
}
</style>
</head>
<body>
 
<div id="flip">往下滑动</div>
<div id="panel">Hello world!</div>
<div id="flip2">往上滑动</div>
<div id="panel2">Hello world!</div>
<div id="flip3">上下滑动</div>
<div id="panel3">Hello world!</div>
</body>
</html>

 6.动画，播放滑动，自定义动画。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){//有俩div的动画他们会由上而下执行。内部是将他们按顺序加入到一个先进先出的队列中，一个一个取出操作。
    var div=$("div");
    //$(selector).animate({params},speed,callback); 
    //第一个参数：css属性，第二个：动画效果时长，可取"slow"、"fast" 或毫秒。第三个事回调函数
    div.animate({left:'+=150px'},3000);//相对位置，距离左边150px的位置，动画时间：3000毫秒，每次触发都是相对当前移动。
    div.animate({
        fontSize:'3em',//字体变到3em
        opacity:"0.5",//透明度调到0.5
        height:'250px',//整体高变为150Px
        width:'250px',//整体宽变为150px
        },"slow");//此处可填写动画时间或"show"、"fast"等值。
    div.animate({height:'toggle'});//滑动，点一下滑下，在点一下滑上。参数："show"、"hide" 或 "toggle"等值
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<!-- html默认位置是固定的，想要移动需要将position属性设置为：relative, fixed, 或 absolute! -->
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

7.停止动画。当动画正在运行时可用stop函数将其停止。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle(5000);//可用：slideDown()下，slideUp()上，slideToggle()上下。
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;/*内部填充5个像素*/
    text-align:center;/*水平对齐 */
    background-color:#e5eecc;/* 背景颜色*/
    border:solid 10px #c3c3c3;/** 固定边界 */
}
#panel
{
    padding:50px;
    display:none;
}
</style>
</head>
<body>

<!-- margin四周边距:上，右，下，左。这个边距是直接影响到全局的，并不是单个移动，若往下移动那所有的都会被他顶下去。 --> 
<button id="stop" style="margin:2px 4px 3px 800px;">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

8.回调函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#callback").click(function(){
      
    $("p").hide(3000,function(){//回调函数：函数本身执行完再执行回调函数。
      alert("回调函数");
    });
    
  });
  
  $("#nocallback").click(function(){
      
      $("p").hide();//非回调函数：先执行函数内部最后执行函数本身。
      alert("非回调函数");
        
      });
  
});


</script>
</head>
<body>
<button id = "callback">回调函数</button>
<button id = "nocallback">非回调函数</button>

<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

9.jQuery链式调用：允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条，用”.”将各个函数连接起来，可随便调用任何方法。这样既简单明了又省去不停查找的开销。链式调用的执行顺序是从前往后(声明式的函数会优先执行，如用于渲染的css函数)。

此时我们可将上面第6条动画改造为以下方式，此时将会省去2次查询div的开销。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){//有俩div的动画他们会由上而下执行。内部是将他们按顺序加入到一个先进先出的队列中，一个一个取出操作。
    var div=$("div");
    //$(selector).animate({params},speed,callback); 
    //第一个参数：css属性，第二个：动画效果时长，可取"slow"、"fast" 或毫秒。第三个事回调函数
    div.animate({left:'+=150px'},3000)//相对位置，距离左边150px的位置，动画时间：3000毫秒，每次触发都是相对当前移动。
       .animate({
            fontSize:'3em',//字体变到3em
            opacity:"0.5",//透明度调到0.5
            height:'250px',//整体高变为150Px
            width:'250px',//整体宽变为150px
        },"slow")//此处可填写动画时间或"show"、"fast"等值。
       .animate({height:'toggle'})//滑动，点一下滑下，在点一下滑上。参数："show"、"hide" 或 "toggle"等值
       .css("color","red")
       .slideUp(2000)
       .slideDown(2000);
  });
});
</script>
</head>

<body>
    <button>开始动画</button>
    <!-- html默认位置是固定的，想要移动需要将position属性设置为：relative, fixed, 或 absolute! -->
    <div
        style="background: #98bf21; height: 100px; width: 200px; position: absolute;">HELLO</div>
</body>
</html>

10.获取内容和属性，jQuery可以对DOM(Document Object Model（文档对象模型）)进行操作，下面演示获取html文本， text文本，以及用户界面输入的值。

　　10-1获取属性。html, text, val　　

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
  $("#btn3").click(function(){
        alert("值为: " + $("#ttt").val());
   });
  $("#btn4").click(function(){
          //元素本身就带有的固有属性，在处理时，使用 prop 方法。
          //元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。
        alert("值为: " + $("#btn4").attr("hhhh"));
 });
});
</script>
</head>

<body>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<p>名称: <input type="text" id="ttt" value="我是谁"></p>
<button id = "btn3">获取输入框值</button>
<button id = "btn4" hhhh = "hello">获取hhhh(任意属性都行)属性值</button>
</body>
</html>

　　10.2,设置属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    
</script>
<script>
    $(document).ready(function() {
        
        $("#btn1").click(function() {
            $("#test1").text("Hello world!");//设置文本，此函数一旦运行，那么页面上将展示这里设置的内容
        });
        $("#btn2").click(function() {
            $("#test2").html("<b>Hello world!</b>");//设置html内容，将文本左右加上<b>标签的形式，这样页面显示的内容是<b>标签修饰过后的。
        });
        $("#btn3").click(function() {
            $("#test3").val("RUNOOB");//设置输入框的值为RUNOOB,这样即使你在输入框写了值，但只要运行这个函数它又会重新写它自己的。
        });
        
        $("#btn4").click(function(){//使用回调函数的形式去设置值
            $("#test1").text(function(i,origText){//i:改文本在队列中的索引， origText:表示旧的值
                 alert("旧文本："+origText);
                return " 新文本 (index: " + i + ")"; //返回新值，返回的新值会被自动覆盖旧文本。
            });
        });
    });
</script>
</head>

<body>
    <p id="test1">这是一个段落。</p>
    <p id="test2">这是另外一个段落。</p>
    <p>
        输入框: <input type="text" id="test3" value="菜鸟教程">
    </p>
    <button id="btn1">设置文本</button>
    <button id="btn2">设置 HTML</button>
    <button id="btn3">设置值</button>
    <button id="btn4">回调函数设置新文本</button>
</body>
</html>

11.