web前端基础——jQuery编程进阶

1 jQuery本质

jQuery不是一门独立的语言，它是JavaScript的一个类库或框架。jQuery的核心思想就是：选取元素，对其操作。很多时候写jQuery代码的关键就是怎样设计合适的选择器选中需要的元素。

jQuery主要分为以下几部分：
      查找：
           选择器
           筛选
      操作：
           标签属性
           CSS属性
           文档  
      其它：
           事件
           Ajax
           JSON
           ...

2 选择器

jQuery的选择器无比强大，这里主要总结一下常用的元素查找方法

//基本选择器：
$("#myElement");    //选择id='myElement'的标签，在一个HTML文档中，id值不能重复(id值是唯一的)
$("div");           //选择所有的div标签，返回div标签数组(参数为标签名)
$(".myClass");      //选择CSS为class='myClass'类的所有标签
$(".myClass,a");    //联合选择(逗号的作用)：选择class='myClass'标签和a标签
$("*");             //选择文档中所有的标签，也可以运用多种选择方式进行联合选择：例如$("#myElement,div,.myclass")
 
//层叠选择器：
$("#myElement p");  //组合选择(空格的作用)：选择id='myElement'标签下的p标签
$("form input");    //选择所有的form表单中的input标签
$("#main > *");     //选择id值为main的所有的子标签(注意：只包括子标签，不包括孙子标签)
$("label + input"); //匹配跟在label标签后面的所有input标签
$("#prev ~ div");   //同胞选择器，找到与id='prev'的标签同辈的div标签(兄弟标签)
 
//基本过滤选择器：
$("tr:first");      //选择所有tr标签中的第1个tr标签
$("tr:last");       //选择所有tr标签中的最后1个tr标签
$("input:not(:checked) + span"); //匹配跟在非checked属性的input标签后面的所有span标签   
$("tr:even");       //选择所有tr标签中的第0，2，4...2n个标签，即选择第奇数个标签(注意序号是从0开始的，实际对应第1,3,5..标签)  
$("tr:odd");        //选择所有tr标签中的第1，3，5...2n+1个标签，即选择第偶数个标签(注意序号是从0开始的，实际对应第2,4,6..标签)
$("td:eq(2)");      //选择所有td标签中序号为2的那个td标签(注意：这里从0开始计数)
$("td:gt(4)");      //选择所有td标签中序号大于4的td标签(注意：这里从0开始计数)
$("td:ll(4)");      //选择所有td元素中序号小于4的td标签，即选择序号为0 1 2 3的td标签
$(":header");       //选择所有的标题，即h1 h2 h3 h4 ...标题
$("div:animated");  //匹配所有正在执行动画效果的div标签

//内容过滤选择器：  
$("div:contains('John')"); //选择所有含有John文本的div标签
$("td:empty");             //查找所有不包含子标签或者文本的空标签
$("div:has(p)");           //选择所有含有p标签的div元素
$("td:parent");            //查找所有含有子标签或者文本的td元素

//可视化过滤选择器：
$("div:hidden");       //匹配所有不可见的div标签(display:none属性)，或者type为hidden的div标签
$("div:visible");      //匹配所有可见的div标签

//属性过滤选择器：
$("div[id]");                   //选择所有含有id属性的div标签
$("input[name='newsletter']");  //选择所有的name属性等于'newsletter'的input标签
$("input[name!='newsletter']"); //选择所有的name属性不等于'newsletter'的input标签
$("input[name^='news']");       //选择所有的name属性以'news'开头的input标签
$("input[name$='news']");       //选择所有的name属性以'news'结尾的input标签
$("input[name*='man']");        //选择所有的name属性包含'news'的input标签
$("input[id][name$='man']");    //联合选择，选择所有含id属性且name属性以man结尾的标签
 
//子元素过滤选择器：
$("ul li:nth-child(2)");       //在ul标签下查找第2个li标签(序号从1开始)
$("div span:first-child");     //在div标签下查找第1个span标签
$("div span:last-child");      //在div标签下查找最后1个span标签
$("div button:only-child");    //在div标签下查找只有唯一1个子标签的button标签
 
//表单元素选择器(特殊标签的简写)：
$(":input");             //选择所有的表单输入标签，包括所有的input/textarea/select/button元素
$(":text");              //选择所有input标签中属性type='text'的input标签，这是$('input[type="text"]')的简写
$(":password");          //选择所有input标签中属性type='password'的input标签
$(":radio");             //选择所有input标签中属性type='radio'的input标签
$(":checkbox");          //选择所有input标签中属性type='checkbox'的input标签
$(":submit");            //选择所有input标签中属性type='submit'的input标签
$(":image");             //选择所有input标签中属性type='image'的input标签
$(":reset");             //选择所有input标签中属性type='reset'(重置)的input标签
$(":button");            //选择所有input标签中属性type='button'的input标签
$(":file");              //选择所有input标签中属性type='file'的input标签
$(":hidden");            //匹配所有不可见元素，或者type='hidden'的标签
 
//表单元素过滤选择器：
$(":enabled");               //选择所有可操作的表单input标签
$(":disabled");              //选择所有不可操作的表单input标签
$(":checked");               //匹配所有选中(checked)的被选中元素(复选框、单选框等，不包括select中的option)
$("select option:selected"); //匹配所有选中(selected)的option标签

3 筛选器

//过滤
eq(1);    //获取匹配的第2个元素，序号从0算起
eq(-2);   //倒数，获取匹配的第2个元素，序号从1算起
first();  //获取匹配的第1个元素
last();   //获取匹配的最后1个元素
hasClass("myClass");      //检查当前的元素是否含有样式类myClass，如果有则返回true
filter(expr|obj|ele|fn);  //筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
map(callback);    //将一组元素转换成其他数组(不论是否是元素数组)，详细用法见实例
has(expr|ele);    //保留包含特定后代的元素，去掉那些不含有指定后代的元素
not(expr|ele|fn); //删除与指定表达式匹配的元素
slice(start,[end]);  //选取一个匹配的子集

//查找
children([expr]);    //取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
find(expr|obj|ele);  //搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法
next([expr]);        //取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
nextAll([expr]);     //查找当前元素之后所有的同辈元素
nextUntil([exp|ele][,fil]);  //查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent();     //返回第一个匹配元素用于定位的父节点
parent([expr]);     //取得一个包含着所有匹配元素的唯一父元素的元素集合
parents([expr]);    //取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
parentsUntil([exp|ele][,fil]);  //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
prev([expr]);     //取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
prevAll([expr]);  //查找当前元素之前所有的同辈元素
prevUntil([exp|ele][,fil]); //查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
siblings([expr]); //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

//串联
add(expr|ele|html|obj[,con]); //把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集
andSelf();   //把先前所选的元素加入到当前元素中
contents();  //查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
end();       //回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态

jQuery选择器eq()方法与jQuery筛选器eq()方法的区别：

//例子1：可以直接传参数
innp = raw_input()
$('p').eq(innp)
 
//例子2：不可以直接传参数，参数要拼接成字符串的形式
innp = raw_input()
content = "p:eq(" + innp + ")"
$("p:eq(content)")
 
//注：jQuery的筛选器相当于对其选择器进行了封装。

eq()方法的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
 
<body>
   <table>
        <thead></thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td onclick="GetPrev(this)">编辑</td>
            </tr>
        </tbody>
   </table>
 
<script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
      function get_prev(arg){
//        注意map函数，相当于循环每一个(映射)标签，同时都执行map中的函数
//        并获取返回值，把所有的返回值封装成一个数组(列表)，并返回列表。
          var list = $(arg).siblings().map(function(){
//            this表示当前循环的标签
              return $(this).text();
          });
          console.log(list[0],list[1],list[2]);
        }
</script>
</body>
</html>

map()方法实例

4 属性

//属性

//属性
attr(name|properties|key,value|fn); //设置或返回被选元素的属性值。
removeAttr(name); //从每一个匹配的元素中删除一个属性
prop(name|properties|key,value|fn); //获取在匹配的元素集中的第一个元素的属性值
removeProp(name); //用来删除由.prop()方法设置的属性集

//CSS类
addClass(class|fn); //为每个匹配的元素添加指定的样式类
removeClass([class|fn); //从所有匹配的元素中删除全部或者指定的样式类
toggleClass(class|fn[,sw]); //如果存在(不存在)就删除(添加)一个样式类——切换

//HTML代码/文本/值
html([val|fn]); //获取或设置第一个匹配元素的html内容
text([val|fn]); //获取或设置所有匹配元素的内容
val([val|fn|arr]); //获取或设置匹配元素的当前值

5 CSS

//CSS

//CSS
css(name|pro|[,val|fn]);  //获取或设置匹配元素的样式属性(当设置多个属性时，参数为字典)

//位置
offset([coordinates]);  //获取匹配元素在当前视口的相对偏移
position();  //获取匹配元素相对父元素的偏移
scrollTop([val]);  //获取或设置匹配元素相对滚动条顶部的偏移
scrollLeft([val]); //获取匹配元素相对滚动条左侧的偏移

//尺寸
height([val|fn]); //取得匹配元素当前计算的高度值(px)
width([val|fn]); //取得第一个匹配元素当前计算的宽度值(px)
innerHeight();  //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
innerWidth(); //获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
outerHeight([options]); //获取第一个匹配元素外部高度（默认包括补白和边框）
IntegerouterWidth([options]); //获取第一个匹配元素外部宽度（默认包括补白和边框）

6 文档处理

    HTML文档的层次关系是树型的，每个标签可视为树的各个节点。若操作jQuery对象，使得HTML文档的结构发生了改变，就叫做文档处理。下面就是一些常用方法，格式为$(selector).方法，其中$(selector)即当前选定元素：

//文档处理就是在dom元素中添加html内容
$("p").append("<a href='www.baidu.com'>baidu</a>") ;  //追加内容到p标签内部
$("p").appendTo("div") ;  //把所有的p标签追加到div标签中
$("p").prepend("<b>Hello</b>");  //增加所有的b标签到p标签前
$("p").prependTo("#foo");   //把p标签前置添加到id='foo'标签中
$("p").after($("b") );  //将p标签添加到b标签的后面
$("p").before("<b>Hello</b>"); //在所有p标签之前插入"<b>Hello</b>"  
$("p").insertAfter("#foo");  //将p标签插入到id='foo'的后面

//操作相同，把所有的p标签插入到id='foo'的标签之前
$("p").insertBefore("#foo");  
$("#foo").before("p");

$("p").wrap("<div class='wrap'></div>");   //把所有的p标签用div标签包装起来  
$("p").unwrap();    //移除p标签的父标签
$("p").wrapAll(document.createElement("div"));  //用div标签包装所有的p标签
$("<b>Paragraph. </b>").replaceAll("p");    //用"<b>Paragraph.</b>"替换所有的p标签
$("p").empty();   //删除p标签中所有的子标签
$("p").remove();  //移除所有的p标签
$("p").detach(".hello");   //从DOM树中把class='hello'样式类的p标签删除
$("b").clone().prependTo("p");   //复制b标签并前置添加到p标签中

7 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定的3种方法</title>
</head>
 
<body>
    <a onclick="func(this);">第1种绑定事件方法</a>
    <p id="u">第2种绑定事件方法</p>
    <h6 class="t">第3种绑定事件方法</h6>
 
    <script type="text/javascript" src="jQuery-1.11.3.js"></script>
    <script type="text/javascript">
//      第1种方法中绑定的事件函数
        function func(ths){
            alert($(ths).text());
        }
 
        $(function(){
//          第2种绑定事件方法
            $('#u').click(function(){
                alert($(this).text());
            });
//          第3种绑定事件方法
            $('.t').bind('click',function(){
                alert($(this).text());
            });
        });
    </script>
</body>
</html>

更多事件内容请参考http://www.php100.com/manual/jquery/

8  其它

(1)each(callback);  //以每一个匹配的元素作为上下文来执行一个函数
(2)jQuery.each(object, [callback]); //通用遍历方法，可用于遍历对象和数组，通常写成$.each(object, [callback])
(3)jQuery.fn.extend(object); //扩展jQuery元素集来提供新的方法（通常用来制作插件）
(4)jQuery.extend(object); //扩展jQuery对象本身
(5)jQuery.map(arr|obj,callback); //将一个数组中的元素转换到另一个数组中，通常写成$.map(arr|obj,callback)
(6)ready(fn);  //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
   $(document).ready(function(){
        //这里写要执行的函数
   });
    使用简写：$(function(){
        //这里写要执行的函数，可以认为$是jQuery的别名
   });
   注意$(function(){...})与window.load(function(){...})和body.onload()的区别，后面两者在一个页面中只能存在1个，否则后续的不执行
   同时，$(function(){...})不能写在后面两者的后面，否则不执行
(7)$.ajax() //通过HTTP请求加载远程数据

注：each()函数中如果存在return语句时，那么return语句只会跳出each()函数本身

jQuery的扩展实例

<!--HTML文件，js文件为extend.js-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--jQuery的扩展，注意3个script的顺序-->
    <script type="text/javascript" src="jquery-1.8.2.js"></script>
    <script type="text/javascript" src="extend.js"></script>
    <script type="text/javascript">
        var t= $.ttt();
        console.log(t);
 
        var tt=$.aaa();
        console.log(tt);
    </script>
</body>
</html>

//js文件
//jQuery的扩展：自执行函数
//注意arg.extend({...})中是字典形式，可以定义多个函数(多组键值对)
(function(arg){
    arg.extend({
        "ttt":function(){
            return 123;
        },
        'aaa':function(){
            return 456;
        }
    });
})(jQuery);

9 实例

实例1：左侧菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        .hide{
            display: none;
        }
 
        .content{
            color: red;
        }
    </style>
</head>
 
<!--基本版本-->
<body>
   <div>
       <div>
           <div  id="menu_1" onclick="change(1)">菜单一</div>
           <div class="hide">
               <div>1</div>
               <div>2</div>
               <div>3</div>
           </div>
       </div>
 
       <div>
           <div id="menu_2" onclick="change(2)">菜单二</div>
           <div>
               <div>11</div>
               <div>22</div>
               <div>33</div>
           </div>
       </div>
 
       <div>
           <div id="menu_3" onclick="change(3)">菜单三</div>
           <div>
               <div>111</div>
               <div>222</div>
               <div>333</div>
           </div>
       </div>
   </div>
 
<script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function change(arg){
        if(arg==1){
            var menu=$("#menu_1");
        }else if(arg==2){
            var menu=$("#menu_2");
        }else{
            var menu=$("#menu_3");
        }
        console.log(menu.text());
    }
</script>
</body>
</html>

基本代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        .hide{
            display: none;
        }
 
        .content{
            color: red;
        }
    </style>
</head>
 
<body>
   <div>
       <div>
           <div onclick="change(this);">菜单一</div>
           <div class="content hide">
               <div>1</div>
               <div>2</div>
               <div>3</div>
           </div>
       </div>
 
       <div>
           <div onclick="change(this);">菜单二</div>
           <div class="content">
               <div>11</div>
               <div>22</div>
               <div>33</div>
           </div>
       </div>
 
       <div>
           <div onclick="change(this);">菜单三</div>
           <div class="content">
               <div>111</div>
               <div>222</div>
               <div>333</div>
           </div>
       </div>
   </div>
 
<script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    function change(arg){
//     显示当前点击的标签，$(arg)相当于把arg封装成了jQuery方法
//     找到当前标签紧邻的下一个兄弟标签，并移除它的hide属性
       $(arg).next().removeClass('hide');
//     隐藏除当前标签的其它标签
//     找到当前标签的父标签的兄弟标签，并在这些标签下找class='content'的标签，并加上hide属性
       $(arg).parent().siblings().find('.content').addClass('hide');
    }
</script>
</body>
</html>

优化代码

实例2：表单+模态对话框(修改提交数据)

<script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
  <script type="text/javascript">
      function loop(arg){
//    jQuery中数组的循环
//    在jQuery中$.each()是用来循环的,我们把数组a传进去，然后在括号内增加function，数组中的每个元素就会执行function
//    这里item就是索引
      var a = [11,22,33,44];
      $.each(a,function(item){
          console.log(a[item]);
      });
 
//    jQuery中数组(字典)的循环
      var d = {'k1':'v1','k2':'v2'};
      $.each(d,function(key,value){
      console.log(key,value);
      });

jQuery中的each循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 
    <style>
        <!--弹出框的CSS样式-->
        .modal{
            /*弹出框在屏幕中的位置是固定的*/
            position:fixed;
            /*左上顶点(left,top)在屏幕的正中间(各占50%，其实对话没在正中间)*/
            left:50%;
            top:50%;
            /*对话框的宽和高*/
            width:400px;
            height:300px;
            background-color:#ddd;
            /*为了把对话框移动到正中间，设置左外边距和上外边距*/
            margin-left:-200px;
            margin-top:-150px;
        }
        /*隐藏属性*/
        .hide{
            display:none;
        }
    </style>
 
</head>
 
<body>
  <table border="1">
      <!--表格头部-->
      <thead></thead>
      <!--表格体-->
      <tbody>
      <!--tr表示每一行-->
        <tr>
            <!--td表示每一列-->
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <!--添加编辑事件-->
            <td onclick="GetPrev(this);">编辑</td>
        </tr>
 
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
            <td onclick="GetPrev(this);">编辑</td>
        </tr>
 
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
            <td onclick="GetPrev(this);">编辑</td>
        </tr>
      </tbody>
  </table>
 
  <!--对话框-->
  <div id="dialog" class="modal hide">
      <!--form表单-->
      <form action="" method="get">
         <p>主机名：<input type="text" id="hostname" value="value"/></p>
         <p>IP:<input type="text" id="ip"/></p>
         <p>端口:<input type="text" id="port"/></p>
         <!--submit只能用于提交表单，submit默认就注册了提交的事件，在此处为了实现验证提交内容(检测是否为空)-->
         <!--如果为空，则不能提交，为了实现此功能，在这里又注册了一个onclick事件，注意此处的return，容易忽视-->
         <input type="submit" value="提交" onclick="return submitForm();"/>
          <!--取消按钮-->
         <input type="button" value="取消" onclick="cancel();"/>
      </form>
  </div>
 
  <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
  <script type="text/javascript">
      function GetPrev(ths){
//    $(ths).prevAll() 当前标签之前的所有兄弟标签
//    定义空数组
      var list=[];
//    此处的循环使用:each的用法
      $.each($(ths).prevAll(),function(i){
//        获取所有数据中的第i项
          var item=$(ths).prevAll()[i];
//        获取元素的内容，注意$(item)的使用，不容易理解，这里加上$符号，相当于封装了jQuery方法
          var text=$(item).text();
//        把文本值放入数组
          list.push(text);
      });
//        数组值翻转
          var new_list=list.reverse();
//        在弹出框中设置值，注意下面的方法，如果val中不带参数，表示获取该标签的值
//        如果带参数，则表示设置新值
          $('#hostname').val(new_list[0]);
          $('#ip').val(new_list[1]);
          $('#port').val(new_list[2]);
//        移除hide属性
          $('#dialog').removeClass('hide');
      }
 
//    取消事件函数
      function cancel(){
          $('#dialog').addClass('hide');
      }
 
//    验证提交内容是否为空事件
      function submitForm(){
//    获取Form表单中的input值
//    判断值是否为空
          var ret = true;
//    遍历所有的input值，只要为空值，就将ret设置为false
//    $('input[type="text"]')，与下面的表示等价
          $(':text').each(function(){
//        $(this)相当于每个要循环的元素
              var value=$(this).val();
              if(value.trim().length==0){
                  $(this).css('border-color','red');
                  ret=false;
              }else{
                  $(this).css('border-color','green');
              }
          });
          return ret;
      }
  </script>
</body>
</html>

模态对话框修改表单

注:在input标签中需要注册另外1个事件，如果事件绑定函数返回的是false，则submit注册的事件将不会被触发

实例3：全选/反选/取消

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
 
<body>
  <input type="button" onclick="CheckAll();" value="全选"/>
  <input type="button" onclick="CheckReverse();" value="反选"/>
  <input type="button" onclick="CheckCancel();" value="取消"/>
 
  <table border="1">
      <thead></thead>
      <tbody id="tb1">
        <tr>
            <td><input type="checkbox"/></td>
            <td>11</td>
        </tr>
 
         <tr>
            <td><input type="checkbox"/></td>
            <td>22</td>
        </tr>
 
         <tr>
            <td><input type="checkbox"/></td>
            <td>33</td>
        </tr>
      </tbody>
  </table>
 
  <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
  <script type="text/javascript">
//    全选绑定的事件函数
      function CheckAll(){
//        第1种方法
//        $('#tb1').find(':checkbox').attr('checked','checked');
//        第2种方法(推荐)
          $('#tb1').find(':checkbox').prop('checked',true);
      }
 
//    反选绑定的事件函数
      function CheckReverse(){
//        each()循环函数
          $('#tb1').find(':checkbox').each(function(){
//        $(this)等价于每一个复选框
//        $(this).prop如果选中true，否则false
//        attr如果选中，即checked=checked，这里没法实现反选
              if($(this).prop('checked')){
                  $(this).prop('checked',false);
              }else{
                  $(this).prop('checked',true);
              }
          });
 
      }
//    取消绑定的事件函数，也有两种方法
      function CheckCancel(){
//        $('#tb1').find(':checkbox').removeAttr('checked');
          $('#tb1').find(':checkbox').prop('checked',false);
      }
  </script>
</body>
</html>

全选/反选/取消

实例4：滚动条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="GoTop()" value="返回顶部" />
    <!--overflow参数表示内容超过当前浏览器窗口大小时，自动出现滚动条-->
    <!--这个是浏览器内部的滚动条-->
    <div id="content" style="height: 300px;width: 500px; overflow: auto;">
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
        <p>df</p>
    </div>
 
    <script src="../static/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function GoTop(){
//          表示返回当前匹配标签(id='content')的顶部
            $('#content').scrollTop(0);
//          表示返回当前浏览器窗口可见部分的顶部
            $(window).scroll(0)
        }
    </script>
</body>
</html>

滚动条实例

实例5：章节滚动条实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动章节实例</title>
</head>
<body>
    <div>
        <!--右上角显示区域-->
        <div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div>
        <div>
            <div class="chapter" style="height: 500px;">
                <h1>第1章</h1>
            </div>
 
            <div class="chapter" style="height: 1500px;">
                <h1>第2章</h1>
            </div>
 
            <div class="chapter" style="height: 30px;">
                <h1>第3章</h1>
            </div>
        </div>
    </div>
 
    <script src="../static/js/jquery-1.8.2.js" type="text/javascript"></script>
    <script type="text/javascript">
//        获取标签离顶部的偏移
//        var top1 = $('.chapter').offset().top;
//        console.log(top1);
//      $(function(){})等价于$(document).ready(function(){})
        $(function(){
//          注册窗口滚动条事件
            $(window).scroll(function(){
//              scrollTop()：设置或返回匹配元素相对滚动条顶部的偏移
//              $(window).scrollTop()表示浏览器滚动条离HTML文档顶部的偏移
                var scroll_top = $(window).scrollTop();
                console.log(scroll_top);
                var list = [];
//              循环每个class='chapter'的标签，执行function函数
                $.each($('.chapter'), function(i){
//              $($('.chapter')[i]).offset()计算当前标签相对HTML文档的位置，主要包括离左边，顶部的距离
//                  获取当前标签相对HTML文档顶部的偏移
                    var current_height = $($('.chapter')[i]).offset().top;
//                  把当前标签离顶部的偏移放入数组
                    list.push(current_height);
                });
//              循环数组list，执行function函数
                $.each(list,function(i){
//                  $(window).height()表示浏览器当前能看到部分的高度，这个跟显示器尺寸、页面放大缩小有关，这个高度是变化的
//                  $(document).height()表示当前HTML文档的高度，这个高度是一定的
//                  如果条件满足，表示HTML文档到达了底部
                    if (scroll_top+$(window).height() == $(document).height()){
//                      把最后1个标签的text设置到currentPosition位置
                        $('#currentPosition').text($('.chapter').last().text());
                        return;
                    }
//                  如果滚动条离HTML文档顶部的偏移(scroll_top)大于当前标签相对HTML文档顶部的偏移(list[i])，那么
//                  表示还是当前的标签
                    if (scroll_top>list[i]){
                        $('#currentPosition').text($($('.chapter')[i]).text());
                        return;
                    }
                })
            })
        })
    </script>
</body>
</html>

章节滚动条

实例6：文档处理及简单搜索框实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
 
    <div id="i1">
        <a>文档处理测试</a>
    </div>
 
    <div id="i2" style="background-color: red;"></div>
 
    <!--搜索框标签-->
    <div id="search_conditions">
        <div class="condition">
            <!--符号"+"，并且绑定事件，注意事件函数传递的参数，this表示当前标签，'#search_conditions'表示id-->
            <a onclick="AddCondition(this, '#search_conditions')"> + </a>
            <!--input输入框-->
            <input/>
        </div>
    </div>
 
    <script type="text/javascript" src="jQuery-1.11.3.js"></script>
    <script type="text/javascript">
        //"+"绑定的事件函数
        function AddCondition(ths, container){
            //拷贝class='condition'的div标签，即当前标签的父标签
            var cp = $(ths).parent().clone();
            //再把拷贝的div标签追加到id='search_conditions'的标签下面
            //$('#search_conditions').append(cp);
            //然后把拷贝的a标签的文本内容设置成"-"，同时设置属性值(绑定事件)，这里利用Javascript的链式调用
            cp.children(':first').text('-').attr('onclick', "RemoveCondition(this, '#search_conditions')");
            //把改造后的a标签追加到id='search_conditions'的标签中
            cp.appendTo('#search_conditions');
        }
        //移除标签的事件函数
        function RemoveCondition(ths, container){
             $(ths).parent().remove();
        }
 
        //$('#i1').append('<div>aaaa</div>')
        //$('#i1').prepend('<div>aaaa</div>')
        //$('#i1').appendTo('#i2');
        //$('#i1').before('<h1>alex</h1>')
    </script>
</body>
</html>

文档处理及搜索框实例

实例7：ajax本地请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button"  onclick="AjaxRequest();"/>
 
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //ajax本地请求
        function AjaxRequest(){
            $.ajax({
                //请求的url
                url: '/home/test',
                //请求类型
                type: 'GET',
                //数据类型
                data: {'k1': 'v1', 'k2': 'v2'},
                success: function(data){
                    //当请求成功，从远程获取返回值
                    console.log(data);
                },
                //当请求失败，返回失败信息
                error: function(){
                }
            })
        }
    </script>
</body>
</html>

Ajax本地请求

实例8：ajax跨域请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="AjaxRequest()" value="跨域Ajax" />
    <div id="container"></div>
 
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //Ajax跨域请求
        function AjaxRequest() {
            $.ajax({
                //请求的地址
                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
                //请求类型
                type: 'GET',
                //请求的数据类型
                dataType: 'jsonp',
                jsonp: 'callback',
                jsonpCallback: 'list',
                //成功时返回函数
                success: function (data) {
                    $.each(data.data,function(i){
                        var item = data.data[i];
                        var str = "<p>"+ item.week +"</p>";
                        $('#container').append(str);
                        $.each(item.list,function(j){
                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
                            $('#container').append(temp);
                        });
                        $('#container').append("<hr/>");
                    })
 
                }
            });
        }
</script>
</body>
</html>

Ajax跨域请求

实例9：登陆

实例10：注册

实例11：Form表单验证

参考资料：

http://www.php100.com/manual/jquery/

http://www.cnblogs.com/wupeiqi/articles/4457274.html