jQuery学习笔记

最新推荐文章于 2024-08-19 21:21:31 发布

猿球崛起3

最新推荐文章于 2024-08-19 21:21:31 发布

阅读量419

点赞数

分类专栏：前端学习文章标签： jquery

本文链接：https://blog.csdn.net/chen_jl168/article/details/78565255

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery的优势：
1.轻量级(70k左右)
2.强大的选择器
3.出色的DOM操作封装
4.完善的事件和事件对象兼容机制
5.完善的ajax
6.不污染全局变量($可随时交出控制权)
7.出色的浏览器兼容
8.方便的链式操作
9.隐式迭代(一般情况下不需要for循环遍历dom对象)
10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明)
11.丰富的插件
jQuery的不足：
1.不能向下兼容
2.插件兼容
3.插件之间冲突
4.在大型框架中，特别是在开发后台UI框架的时候，jQuery对于动画来说不太给力，需要引用jQuery UI来进行弥补

jQuery选择器的优势：
1.完全支持css1.0~css2.0选择器，支持部分css3选择器，学习曲线平缓，可以快速上手
2.完美的容错机制，即使页面上没有该元素，jQuery也不会报错

第1节课demo1

<!doctype html>
<html lang="en">
 <head>
  <title>第一节课demo1——演示jQuery的优势之——方便的链式操作</title>
 </head>
 <body>
  <a href="#">aaaaa</a>
  <script>
    var a = document.getElementsByTagName("a")[0];
    a.style.color = "red";
    a.onclick=function() {
        this.style.border = "10px solid #f90";
    };
  </script>
 </body>
</html>

第1节课demo2

<!doctype html>
<html lang="en">
 <head>
    <title>第一节课demo2——演示jQuery的优势之——方便的链式操作</title>
    <script src = "jquery.min.js"></script>
 </head>
 <body>
  <a href = "#">aaa</a>
  <script>
    var a = $("a");
    a.css("color","red").click(function(){
        $(this).css("border","10px solid #9aa9aa");
    })
  </script>
 </body>
</html>

第1节课demo3

<!doctype html>
<html lang="en">
 <head>
  <title>第一节课demo3——演示jQuery的优势之——隐式迭代</title>
 </head>
 <body>
    <p>我是第1个标签</p>
    <p>我是第2个标签</p>
    <p>我是第3个标签</p>
    <script>
        var p = document.getElementsByTagName("p");
        for (var i = 0; i < p.length; i++) {
            p[i].onclick=function() {
                alert(this.innerHTML);
            };
        }
    </script>
 </body>
</html>

第1节课demo4

<!doctype html>
<html lang="en">
 <head>
  <title>第一节课demo4——演示jQuery的优势之——隐式迭代</title>
  <script src = "jquery.min.js"></script>
 </head>
 <body>
    <p>我是第1个标签</p>
    <p>我是第2个标签</p>
    <p>我是第3个标签</p>
    <script>
        var p = $('p');
        p.click(function() {
            alert($(this).html());
        });
    </script>
 </body>
</html>

第1节课demo5

<!doctype html>
<html lang="en">
 <head>
  <title>第一节课demo5</title>
  <script src ="jquery.min.js"></script>
  <script>
    window.onload = function() {
        alert(1);
    };
    window.onload = function() {
        alert(2);
    };
    window.onload = function() {
        alert(3);
    };
  </script>
 </head>
 <body>
    <p>
    1.轻量级(70k左右)
    2.强大的选择器
    3.出色的DOM操作封装
    4.完善的事件和事件对象兼容机制
    5.完善的ajax
    6.不污染全局变量($可随时交出控制权)
    7.出色的浏览器兼容
    8.方便的链式操作
    9.隐式迭代(一般情况下不需要for循环遍历dom对象)
    10.完善的文档(官方文档相当完备，官方blog每次更新都会有详细说明)
    11.丰富的插件
    </p>
 </body>
</html>

第2节课demo1

<!doctype html>
<html lang="en">
 <head>
  <title>第二节课demo1——DOM对象和jQuery对象的区别</title>
  <script src = "jquery.min.js"></script>
 </head>
 <body>
    <p id = "textp">dom对象和jQuery对象的区别</p>
    <script>
        // var p = $('#textp');
        // alert(p.html());
        var p = document.getElementById('textp');
        alert(p.innerHTML);
    </script>
 </body>
</html>

第2节课demo2

<!doctype html>
<html lang="en">
 <head>
  <title>第二节课demo2——jQuery对象和DOM对象之间的相互转化</title>
  <script src = "jquery.min.js"></script>
 </head>
 <body>
    <input type = "text" id = "test" value = "123"></input>
    <script>
        // var test = $('#test');
        // alert(test.val());
        // 1.DOM对象转为jQuery对象——使用index
        // alert(test[0].value);
        // 2.DOM对象转为jQuery对象——使用get方法
        // alert(test.get(0).value);
        var test = document.getElementById('test');
        // alert(test.value);
        // jQuery对象转为DOM对象——只需要加上$()即可
        alert($(test).val());
    </script>
 </body>
</html>

第2节课demo3

<!doctype html>
<html lang="en">
 <head>
  <title>第二节课demo3——解决jQuery库和其它库的共存</title>
  <script src = "jquery.min.js"></script>
  <script src = "prototype.js"></script>
 </head>
 <body>
    <input type = "text" id = "a" value = "aaa"></input>
    <script>
        jQuery.noConflict()
        // var sowhat = jQuery.noConflict()
        alert($F('a'));
        alert(jQuery('#a').val());
    </script>
 </body>
</html>

第3节课demo1

<!doctype html>
<html lang="en">
 <head>
  <title>第三节课demo1——演示jQuery之出色的浏览器兼容</title>
  <script src = "jquery.min.js"></script>
  // 在IE6中不能正常显示
  <style>
    div>a{color:red;}
  </style>
  <script>
    // 在IE6中能正常显示
    $(function(){
        $('div>a').css('color',red);
    });
  </script>
 </head>
 <body>
    <div>
        <a>123</a>
        <p><a>12345678</a></p>
    </div>
 </body>
</html>

第3节课demo2

<!doctype html>
<html lang="en">
 <head>
  <title>第三节课demo2——jQuery完美的容错机制</title>
  <script src = "jquery.min.js"></script>
 </head>
 <script>
    window.onload=function() {
        var p1 = document.getElementById("test2");
        p1.style.color = "red";
    }
    /**$(function() {
        var p1 = $("#test2");
        p1.css('color','red');
    });**/
 </script>
 <body>
    <input id = "test" type = "text" value = "1234"/>
 </body>
</html>

第3节课demo3

<!doctype html>
<html lang="en">
 <head>
  <title>第三节课demo3——jQuery选择器种类</title>

 </head>
<style>
  /**
  一、基本选择器
    #id 选择ID的元素
    .class  类名选择器
    element 标签选择器
    *   选择所有元素
    E1,E2,E3,E4...,En多重选择器
二、层次选择器
    E F 选择E元素所有的后代元素
    E>F选择E元素的子元素，子选择器
    E+next选择E元素后面紧邻的兄弟元素，等价于.next()
    E~siblings,选择E元素后的所有兄弟元素，等价于.nextAll()

  **/
    /**#test{color:red;}**/
</style>
<script src = "jquery.min.js"></script>
<script>
    $(function() {
        /**$('#test').css('color','green');**/
        /**$('body>*').css('border','5px solid blue');**/
        /**$('#test,#test2').css('color','red');**/
        /**$('div p').css('color','red');**/
        /**$('div+p').css('color','red');**/
        /**$('div').next().css('color','red');**/
        $('div~p').css('color','red');
    })
</script>
 <body>
 <div><p id = 'test0'>1234567</p></div>
    <p id = 'test'>1234</p>
    <p id = 'test2'>12345</p>
    <p id = 'test3'>123456</p>
    <div><p id = 'test4'>1234567</p></div>
 </body>
</html>

第4节课demo1

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第四节课demo1——基本过滤选择器</title>
<!--
    :first 选取第一个元素
    :last 选取最后一个元素
    :not(E)除了E元素之外的所有元素
    :even偶数选择器
    :odd奇数选择器
    :eq()选取指定索引的元素
    :gt()选取大于指定索引的元素
    :lt()选取小于指定索引的元素
    :header选取h1,h2,h3,h4,h5,h6标签
    :animated选取正在执行动画的元素
    :lang()语言代码选择器，1.9版本新增，没什么用，基本用不到，坑爹
    :root根元素选择器，1.9版本新增，没什么用，坑爹
    :target选择由文档URI格式化识别码表示的目标元素，没用，1.9新增，坑爹
-->
<style>
    #go{
        width:100px;
        height:100px;
        background:green;
        position:absolute;
        left:0;
        top:0;
        }
</style>
 </head>
 <body>
    <p><span>我是</span>第1个<em>标签</em></p>
    <p>我是第2个标签</p>
    <p class = "a">我是第3个标签</p>
    <p>我是第4个标签</p>
    <p>我是第5个标签</p>
    <p>我是第6个标签</p>

    <h1>我是h1标签</h1>
    <h2>我是h2标签</h2>
    <h3>我是h3标签</h3>
    <h4>我是h4标签</h4>
    <h5>我是h5标签</h5>
    <h6>我是h6标签</h6>
    <div id = "go"></div>
    <script>
        // $('p:first').css('background','red');
        // $('p:last').css('background','blue');
        // $("p:not('.a')").css('background','blue');
        // $('p:not(\'.a\')').css('background','blue');
        // $('p:even').css('background','blue');
        // $('p:eq(0)').css('background','blue');
        // $('p:gt(1)').css('background','blue');
        // $('p:lt(1)').css('background','blue');
        // $('h1').css('background','blue');
        // $('h6').css('background','yellow');
        $('#go').animate({'left':'500'},1000);
        // 选中所有的动画元素将其背景色变为黄色
        $(':animated').css("background","yellow");
    </script>
 </body>
</html>

第4节课demo2

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第四节课demo1——内容过滤选择器</title>
<!--
    1.:contains()选取含有文本内容的元素
    2.:has()选择指定元素的元素
    3.:empty选择不包含子元素或文本空元素
    4.:parent选取含有子元素或者文本的元素
-->
<style>
    p{height:30px;line-height:30px;}
</style>
 </head>
 <body>
  <p>1.选取含有文<strong>本内容</strong>的元素</p>
  <p>2.:has()选择指<strong>本内容</strong>定元素的元素</p>
  <p>3.:empty选择不包含子元素或文本空元素</p>
  <p></p>
  <p><a href="###"></a></p>
  <p>4.:选取含有子元素或者文本的元素</p>
  <script>
    // $('p:contains(\'has()选择指定元\')').css('background','yellow').show().siblings().hide();
    // $('p:has(strong)').css('background','red');
    // empty要求没有文本，而且没有子元素
    // $('p:empty').css('background','blue');
    $('p:parent').css('background','orange');
  </script>
 </body>
</html>

第4节课demo3

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第四节课demo3——可见性选择器</title>
  <!-- 
    1.:hidden选取所有不可见元素
    2.:visible选取所有可见元素
    -->
    <style>
        /* .hide{opacity:0.2} */
        .hide{display:none}
    </style>
 </head>
 <body>
    <div class="hide">我是个不可见的DIV</div>
    <div>我是个可见的DIV</div>
    <script>
        // alert($('div:hidden').html());
        alert($('div:visible').html());
    </script>
 </body>
</html>

第5节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第五节课demo1——其它选择器</title>
  <!--
    一、属性选择器
        1.[attr]选择拥有此属性的选择器
        2.[attr=value]指定属性值的选择器
        3.[attr1][attr2][attr3]复合属性选择器
        4.略坑爹属性选择器（手册上过一遍）
    二、子元素过滤选择器
        1.:first-child选择父元素第一个子元素
        2.:last-child选择父元素最后一个子元素
        3.:only-child选择元素中只包含一个元素的元素
        4.:nth-child(表达式)选取父元素中的第X个元素，X由表达式决定
        5.first-of-type选取所有相同元素的第一个兄弟元素 1.9新增
        6.last-of-type选取所有相同元素的最后一个兄弟元素 1.9新增
        7.:nth-last-child(表达式)选择所有他们父元素的第n个子元素。计算从最后一个元素开始到第一个 1.9+
        8.:only-of-type     :nth-of-type(表达式)   :nth-last-of-type(表达式)
    三、表单元素选择器
        1.
    四、表单属性选择器
        1.:enabled选择所有可用元素
        2.:disabled选择所有不可用元素
        3.:checked选择可有选中元素
        4.:selected选择所有被选中的选项元素
        5.:focus选择当前获取焦点的元素
    -->
    <style>
        #test{display:none;/**apacity:0;visibility:hidden;**/}
    </style>
 </head>
 <body>
  <!--
  <p title ="js" myattr = "testattr">这段代码即是css代码中加的注释说明</p>
  <p title ="js" myattr = "yours">for my love</p>
  <div title = "language">浏览器不会解释也不会被直接呈现给浏览者</div>
  -->
  <div>
  <input type = "text" value = "我是文本"/>
  <input type = "text" value = "我是不能修改的文本" disabled = "disabled"/>
  <input type = "submit" value = "我是提交按钮"/>
  <input type = "button" value = "我是按钮"/>
  <input type = "password" value = "我是密码框"/>
  <input type = "file" value = "我是文件"/>
  <input type = "radio" value = "我是单选按钮"/>
  <input type = "image" value = "我是图片选择按钮"/>
  <input type = "reset" value = "我是重置按钮"/>
  <input type = "checkbox" value = "我是复选按钮"/>
  <input type = "hidden" value = "我是隐藏文本"/>
  <select>
    <option value = "选择一"></option>
    <option value = "选择二">选择二</option>
    <option value = "选择三" selected = "selected">选择三</option>
  </select>
  <textarea value = "我是文本框" id = "test"></textarea>  
</div>
  <script>
    // $('p[myattr="testattr"]').css('background','red');
    // $('p[myattr="testattr"][title]').css('background','red');
    // $('p[title]').css('background','red');
    // alert($(':input').length);
    // alert($(':text').length);
    // alert($(':text').length);
    // $(':text').css('background','red');
    // alert($(':image').val());
    // alert($('input[type=checkbox]').val());
    // alert($('div:visible').html());
    // alert($('div:hidden').val());
    alert($('select[selected=selected]').val());
  </script>
 </body>
</html>

第6节课demo1

<!doctype html>
<html lang="en">
 <head>
  <title>第六节课demo1——jQuery筛选</title>
  <script src = "jquery.min.js"></script>
<!-- 
    jQuery的筛选 
    1.eq()选择指定索引的元素
    2.filter(表达式)筛选指定表达式的元素
    3.first()选择第一个元素
    4.last()选择最后一个元素
    5.is()检测元素是否返回布尔值
    6.has()保留包含指定后代的元素，去掉那些不含有指定后代的元素
    7.not()从匹配的元素集合中移除指定的元素
    8.map()将一组元素转换成其它数组
    9.slice()根据指定的下标范围，选取匹配的元素集合
-->
 </head>
 <body>
    <p class="first">我是第个1元素</p>
    <p id="second">我是第个2元素</p>
    <p>我是第个3元素</p>
    <p>我是第个4元素</p>
    <p>我是第个5元素</p>
    <p>我是第个6元素</p>
    <!--<form>
        <input type = "text"  value="111"/>
        <input type = "text" value="222"/>
        <input type = "text" value="333"/>
        <input type = "text" value="444"/>
    </form>
    <p></p>-->
    <script>
        // $("p").eq(0).css("background","red");
        // $("p").filter(':odd').css("background","red");
        // $("p").filter(':even').css("background","red");
        // $("p").filter('.first').css("background","red");
        // $("p").filter('#second').css("background","red");
        // $("p").first().css("background","red");
        // $("p").last().css("background","red");
        // alert($("p").is());
        /**$('p').click(function(){
            if ($(this).is(".first")){
                $(this).css("background","red");
            }
        });**/
        // $("p").not(".first").css("background","red");
        /**var arr = $('input').map(function(){
            return $(this).val();
        }).get().join(',');
        alert(typeof arr);
        $('p').html(arr);**/
        // $('p').slice(0,1).css("background","red");
        $('p').slice(-2,-1).css("background","red");
    </script>
 </body>
</html>

第6节课demo2

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第六节课demo1——jQuery遍历</title>
  <!-- 
    1.children()选取子元素
    2.parent()选取父元素
    3.parents()选取祖先元素
    4.parentsUntil()所有的父辈元素，知道遇到匹配的那个元素为止
    5.offsetParent()返回父元素中第一个其position设为relative或者absolute的元素，仅对可见元素有效
    6.next()选择后面紧临的兄弟元素
    7.nextAll()查找当前元素之后所有的同辈元素
    8.nextUntil()所有的同辈元素，知道遇到匹配的那个元素为止
    9.prev()前一个兄弟元素
    10.preAll()前面所有的兄弟元素
    11.prevUtil()所有的兄弟元素，知道遇到匹配的那个元素为止
    12.siblings()前后所有的兄弟元素
    13.closest()从元素本身开始，在DOM树上逐级向上级元素匹配，并返回最先匹配的祖先元素
    14.contents文字的子元素，包括文字和注释节点
    15.end()终止在当前链的最新过滤操作，并返回匹配元素的以前状态
    16.andself1.8版本中已废弃
    17.addBack()添加堆栈中元素集合到当前元素，一个选择性的过滤选择器
    18.each()遍历一个jQuery对象，为每个匹配元素执行一个函数
  -->
 </head>
 <body>
    <!-- <div id = "outer">
        outer:
        <div id = "wrap">
            wrap:
            <p id = "p1">我是第1个wrap的孩子</p>
            <p id = "p2">我是第2个wrap的孩子</p>
            <p>我是<span>第3个wrap</span>的孩子</p>
            <p id = "p4">我是第4个wrap的孩子</p>
            <div>我是div标签</div>
        </div>
    </div> -->
    <form>
        <input type="text" name="" value="我是第1个input值"></input>
        <input type="text" name="" value="我是第2个input值"></input>
        <input type="text" name="" value="我是第3个input值"></input>
        <input type="text" name="" value="我是第4个input值"></input>
        <input type="text" name="" value="我是第5个input值"></input>
    </form>
    <script>
        // $("#wrap").children('p').css("background","red");
        // $("#wrap").parents().css("background","red");
        // $("#wrap").parents('#outer').css("background","red");
        // $("#p1").nextAll().css("background","red");
        // $("#p1").nextAll('p').css("background","red");
        // $("#p2").prev().css("background","yellow");
        // $("#p4").prevAll().css("background","yellow");
        // $("#p4").prevAll('#p1').css("background","yellow");
        // $('span').parent().css("background","red").end().css("background","yellow");
        // $('#p1').nextAll().addBack().css("background","red");
        $('input').each(function(){
            alert($(this).val());
        });
    </script>
 </body>
</html>

第6节课demo3

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第六节课demo3——特殊符号的处理：使用转义符</title>
 </head>
 <body>
    <form>
        <input type="checkbox" name="gender[]" value = "男">男</input>
        <input type="checkbox" name="gender[]" value = "女">女</input>
        <input type="checkbox" name="gender[]" value = "保密">保密</input>
        <input type="submit" name="gender">提交</input>
        <input type="reset" name="gender">重写</input>
    </form>
    <script>
        $("input[name='gender\\[\\]']").click(function() {
            alert($(this).val());
        });
    </script>
 </body>
</html>

第7节课demo1

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第七节课demo1——表格隔行变色</title>
  <style>
    #mytable{
        width:500px;
        border:1px solid red;
        border-collapse:collapse;
    }
    #mytable td{
        border:1px solid red;
    }
  </style>
 </head>
 <body>
    <table id="mytable">
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>bbbbb</td>
            <td>ccccc</td>
            <td>ddddd</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>bbbbb</td>
            <td>ccccc</td>
            <td>ddddd</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>bbbbb</td>
            <td>ccccc</td>
            <td>ddddd</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>bbbbb</td>
            <td>ccccc</td>
            <td>ddddd</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>bbbbb</td>
            <td>ccccc</td>
            <td>ddddd</td>
        </tr>
    </table>
    <script>
        /*var trs = $('#mytable tr');
        for (var i = 0; i < trs.length; i++) {
            if (i%2 == 0) {
                // trs[i].style.background="#fedcba";
                $(trs[i]).css("background","#fedcba");
            } else {
                // trs[i].style.background="#abcdef";
                $(trs[i]).css("background","#abcdef");
            }
        }*/
        /*$('#mytable tr:even').css("background","#abcdef");
        $('#mytable tr:odd').css("background","#fedcba");*/
        $('#mytable tr').filter(':even').css("background","#abcdef").end().filter(':odd').css("background","#fedcba");
    </script>
 </body>
</html>

第8节课demo1

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第八节课demo1——原生js的tab标签页</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style-type: none;
    }
    body{
      margin: 50px;
    }
    #ul{
      height: 30px;
      margin-bottom: 10px;
    }
    #ul li{
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      border: 1px solid #abcdef;
      float: left;
      margin-right: 3px;
      cursor: pointer;
    }
    #ul li.current{
      background: #abcdef;
    }
    #content div{
      width: 300px;
      height: 200px;
      border: 1px solid #abcdef;
      display: none;
    }
    #content div.show{
      display: block;
    }
  </style>
 </head>
 <body>
    <ul id = "ul">
      <li class="current">java</li>
      <li>ruby</li>
      <li>python</li>
    </ul>
    <div id = "content">
      <div class="show">java的介绍</div>
      <div>ruby的介绍</div>
      <div>python的介绍</div>
    </div>
    <script>
      var ul = document.getElementById("ul");
      var li = ul.getElementsByTagName("li");
      var content = document.getElementById("content");
      var div = content.getElementsByTagName("div");

      for (var i = 0; i < li.length; i++) {
        li[i].index=i;
        li[i].onclick=function() {
          for (var i = 0; i < li.length; i++) {
            li[i].className="";
            div[i].style.display="none";
          }
          div[this.index].style.display="block";
          this.className="current";
        }
      }
    </script>
 </body>
</html>

第8节课demo2

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第八节课demo1——jQuery的tab标签页</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    ul{
      list-style-type: none;
    }
    body{
      margin: 50px;
    }
    #ul{
      height: 30px;
      margin-bottom: 10px;
    }
    #ul li{
      height: 30px;
      line-height: 30px;
      padding: 0 15px;
      border: 1px solid #abcdef;
      float: left;
      margin-right: 3px;
      cursor: pointer;
    }
    #ul li.current{
      background: #abcdef;
    }
    #content div{
      width: 300px;
      height: 200px;
      border: 1px solid #abcdef;
      display: none;
    }
    #content div.show{
      display: block;
    }
  </style>
 </head>
 <body>
    <ul id = "ul">
      <li class="current">java</li>
      <li>ruby</li>
      <li>python</li>
    </ul>
    <div id = "content">
      <div class="show">java的介绍</div>
      <div>ruby的介绍</div>
      <div>python的介绍</div>
    </div>
    <script>
      $("#ul li").click(function() {
        /*$(this).addClass("current").siblings().removeClass("current");
        $("#content>div").eq($(this).index()).show().siblings().hide();*/
        $(this).addClass("current").siblings().removeClass("current")
        .parent().next().children("div")
        .eq($(this).index()).show().siblings().hide();
      });
    </script>
 </body>
</html>

第9节课demo1

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <title>第九节课demo1——</title>
  <!-- 
    1.创建节点：用$()来创建节点；用字符串来创建节点
    2.插入节点：
      内部插入：append;appendTo;prepend;prependTo;
      外部插入：after();insertAfter();before();insertBefore();
    3.包裹节点：
      wrap()将所有匹配元素单独包裹；
      wrapAll()将所有匹配元素用一个元素包裹；
      wrapInner()将所有匹配的元素的子内容用其它标签包裹；
    4.删除节点：
      remove()删除节点
      empty()清空节点
      unwrap()删除元素的父元素1.4+
      detach()删除节点，但保留jQuery对象
    5.复制节点
      clone(bool)克隆节点
    6.替换节点
      replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素
      replaceAll()用指定的元素替换掉所有选择到匹配到的元素
    7.操作DOM节点属性
      attr(key,value)获取添加属性值
      removeAttr()删除属性值
      prop()同attr()
      removeProp同removeAttr()
   -->
   <style>
     .a{
      background: red;
     }
     .aa{
      color: #fff;
     }
     .b{
      background: #abcdef;
     }
   </style>
 </head>
 <body>
    <!-- <p>111111</p> -->
    <!-- <p>我是第一个P标签</p>
    <p>我是第二个P标签</p> -->
    <!-- <a href="#">点击</a> -->
    <!-- <p>我是P标签</p> -->
    <p title="js" class="a aa">11111</p>
    <script>
      // var newElement = $('<div>div标签</div>');
      // $('body').append(newElement);
      // var newElement = "<div>我是用字符串方法创建的标签</div>";
      // $('body').append(newElement);
      // var strong = $('<strong>我是被插入的新节点</strong>');
      // $('p').append(strong);
      // strong.appendTo($('p'));
      // $('p').prepend(strong);
      // strong.prependTo($('p'));
      // $('p').after(strong);
      // $('p').before(strong);
      // $('p').wrap('<div></div>');
      // $('p').wrapAll('<div></div>');
      // $('p').wrapInner('<div>111</div>');
      /*$('a').click(function() {
        alert(1111);
      });
      var newA = $('a').clone(true);  // 默认false
      $('body').append(newA);*/
      // $('p').replaceWith('<strong>我是strong标签</strong>');
      // $('<strong>我是strong标签</strong>').replaceAll($('p'));
      // $('p').attr('title','livescript');
      // $('p').attr('class','b');
     //  $('p').removeAttr('class');
    </script>
 </body>
</html>

第10节课demo1

<!doctype html>
<html lang="en">
 <head>
 <script src = "jquery.min.js"></script>
  <!-- 
    操作样式
      1.addClass()
      2.removeClass()
      3.toggleClass()切换样式
      4.hasClass()判断是否有样式
      5.css()设置匹配元素的css样式
      6.height()获取高度
      7.innerHeight()获取padding的高度，不包括border
      8.outerHeight(bool)参数为true时获取内外边距和border的高度
      9.width()获取宽度
      10.innerWidth()获取包括padding的高度，不包括border
      11.outerWidth()参数为true时获取内外边距和border的宽度
      12.offset()获取元素的位置
      13.offsetParent()离匹配元素最近的有position属性的元素
      14.position()相对于offsetParent()的坐标
      15.scrollTop()纵向滚动条的位置
      16.scrollLeft()横向滚动条的位置
   -->
  <title>第10节课demo1——</title>
  <style type="text/css">
    /*.bgred{
      background: red;
    }
    .white{
      color:#fff;
    }
    p{
      height: 30px;border:10px solid red;padding:10px;margin:10px;
    }
    *{
      margin:0;
    }
    p{
      margin:50px;
    }*/
    /*div{
      position: relative;
      left: 20px;
      top: 20px;
      width: 200px;
      height: 200px;
      background: red;
    }
    p{
      position: absolute;
      left: 50px;
      top:100px;
      width: 50px;
      height: 50px;
      background: yellow;
    }*/
    input{
      position: fixed;
      top: 50px;
    }
  </style>
 </head>
 <body style="height:8000px">
   <!-- <p>我是p标签</p> -->
   <!-- <div><p>1111</p></div> -->
   <input type="button" name="" value="滚动条"/>
   <script type="text/javascript">
     // $('p').addClass('bgred').addClass('white');
     //$('p').addClass('bgred white');
     /*$('p').click(function() {
        $('p').toggleClass('bgred white');
     });*/
     // $('p').css('background','red').css('color','white');
     /*$('p').css({
      'background':'red',
      'color':'white',
      'border':'10px solid #abcdef',
     });*/
     // alert($('p').innerHeight());
     // innerHeight()方法获得到的高度不把border和margin计算进去，但会把padding值计算进去
     // outerHeight()方法如果参数不写，为默认值false，不会把margin值计算进去，如果参数为true，会把border，margin，padding都计算进去
     /*alert('我是outerHeight获得到的高度：'+$('p').outerHeight());
     alert('我是innerHeight获得到的高度：'+$('p').innerHeight());*/
     /*var a = $('p').offset();
     alert(a.left);*/
     /*var a = $('p').position();
     var b = $('p').offset();
     alert(a.left);
     alert(b.left);*/
     $('input').click(function() {
      alert($(window).scrollTop());
     });
   </script>
 </body>
</html>

第11节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第11节课demo1——设置和获取节点内的html和文本</title>
  <!--
    text()获取匹配元素的文本节点
    html()获取匹配元素的dom节点或者文本节点
  -->
 </head>
 <body>
   <p>111<strong style="background: red">22</strong>111</p>
   <script type="text/javascript">
     // text()有参数时修改标签的值，没有参数时返回标签的值
     // 如果里面有子标签，则只能通过html获得到子标签的内容
     // alert($('p').html());
     // alert($('p').text());
     // $('p').text('22222');
   </script>
 </body>
</html>

第12节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第12节课demo1——实例</title>
  <!--
    a.查看、修改、删除
    b.滚动公告
  -->
  <style type="text/css">
    table{
      width: 600px;
      border: 1px solid #abcdef;
      border-collapse: collapse;
    }
    tr{
      height: 30px;
    }
    th{
      border: 1px solid #abcdef;
    }
    td{
      border: 1px solid #abcdef;text-align: center;
    }
    td a{
      margin-right: 5px;color: #f00;
    }
    .popDiv{
     width: 500px;
     border: 1px solid red;
     padding: 10px;
     position: absolute;
     left: 50%;
     margin-left: -250px;
     top: 100px;
     background: #fff;
     display: none;
    }
    .popDiv p{
      border-bottom: 1px solid red;
    }
  </style>
 </head>
 <body>
   <table id = "table">
     <tr>
       <th>姓名</th>
       <th>年龄</th>
       <th>身高</th>
       <th>工资</th>
       <th>操作</th>
     </tr>

     <tr>
       <td>张三</td>
       <td>26</td>
       <td>176</td>
       <td>12000</td>
       <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td>
     </tr>

     <tr>
       <td>李四</td>
       <td>25</td>
       <td>167</td>
       <td>10000</td>
       <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td>
     </tr>

     <tr>
       <td>王五</td>
       <td>30</td>
       <td>170</td>
       <td>15000</td>
       <td><a href="#" class='view'>查看</a><a href="#">修改</a><a href="#" class='del'>删除</a></td>
     </tr>
   </table>
   <div class = 'popDiv'>
     <p><strong>姓名：</strong><span></span></p>
     <p><strong>年龄：</strong><span></span></p>
     <p><strong>身高：</strong><span></span></p>
     <p><strong>工资：</strong><span></span></p>
     <a href="#" class = 'close'>关闭</a>
   </div>
   <script>
     $('.view').click(function() {
      // $('.popDiv').show();
      var maskHeight = $(document).height();
      var maskWidth = $(document).width();
      // 添加遮罩测层
      $('<div class = "mask"></div>').appendTo($('body'));
      $('div.mask').css({
        'opacity': 0.4,
        'background': '#000',
        'position': 'absolute',
        'left': 0,
        'top': 0,
        'width': maskWidth,
        'height': maskHeight,
        'z-index': 2
      });
      var arr = [];
      $(this).parent().siblings().each(function(){
        arr.push($(this).text());
        // alert($(this).text());
      });
      // alert(arr);
      $('.popDiv').show().children().each(function(i){
        $(this).children('span').text(arr[i]);
      });
      $('.close').click(function(){
        $(this).parent().hide();
        $('.mask').remove();
      });
     });
     $('.del').click(function(){
      $(this).parents('tr').remove();
     });
   </script>
 </body>
</html>

第13节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第13节课demo1——滚动公告</title>
  <!--

  -->
  <style type="text/css">
    *{
      padding:0;
      margin:0;
    }
    body{
      margin:50px;
    }
    ul{
      list-style-type: none;
    }
    li{
      height: 30px;line-height: 30px;
    }
  </style>
 </head>
 <body>
   <ul>
     <li>我是第1条滚动公告</li>
     <li>我是第2条滚动公告</li>
     <li>我是第3条滚动公告</li>
     <li>我是第4条滚动公告</li>
     <li>我是第5条滚动公告</li>
     <li>我是第6条滚动公告</li>
     <li>我是第7条滚动公告</li>
     <li>我是第8条滚动公告</li>
     <li>我是第9条滚动公告</li>
   </ul>
   <script>
     setInterval(function(){
      var li = $('ul>:first').clone();
      $('ul>:first').remove();
      $('ul').append(li);
     },2000);
   </script>
 </body>
</html>

第14节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第13节课demo1——滚动公告</title>
  <!--
    jquery中的事件和事件对象
      1.加载文档事件
        a.ready()略
        b.$.holdReady(bool)暂停或恢复ready事件 //类似$.方法名叫做jquery的工具函数
        c.load(),unload()1.8中移除
      2.鼠标事件
        a.click()单击左键事件
        b.dblclick()双击左键事件
        c.focusin()获得焦点事件，可作用于父级
        d.focusout()失去焦点事件，可作用于父级
        e.mousedown()鼠标按下事件，和click()有区别
        f.mouseup()鼠标抬起事件
        g.mousemove()鼠标移动事件
        h.mouseover()鼠标进入事件
        i.mouseout()鼠标离开事件
        j.mouseenter()鼠标进入事件
        k.mouseleave()鼠标离开事件
        - hover()同时绑定mouseenter()和mouseleave()事件
      3.键盘事件
        a.keydown()
        b.keyup()
        c.keypress()
      4.表单事件
        a.focus()获得焦点事件
        b.blur()失去焦点事件
        c.change()表单值改变事件
        d.select()表单元素被选中时的事件,只能用于Input[text]和textarea
        e.submit()表单提交事件
      5.浏览器事件
        a.resize()浏览器窗口改变大小事件
        b.scroll()浏览器滚动条移动时发生的事情
        c.error()1.8中废弃
      6.事件对象
        event.pageX获取鼠标相对于文档的x轴坐标
        event.pageY获取鼠标相对于文档的y轴坐标
        event.preventDefault()阻止浏览器默认行为
        event.stopPropagation()阻止冒泡
        event.which监听键盘输入和鼠标操作
        其它略
      7.绑定事件的方法
        a.bind();绑定事件
        b.unbind()移除事件
        c.on()绑定事件
        d.off()移除事件
        e.one()执行一次事件，然后销毁事件
        f.delegate()虽然未被废弃，但官方推荐使用on()代替
        g.undelegate()用off代替
      8.移除事件的方法
      9.事件冒泡（略）
      10.事件命名空间
  -->
  <style>
    *{
      padding: 0;
    }
    ul{
      list-style-type: none;
    }
    body{
      margin: 50px;
    }
    div{
      width: 200px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border: 1px solid #ccc;
    }
    ul{
      width: 200px;
      border: 1px solid #ccc;
      display: none;
    }
    ul li{
      height: 24px;
      line-height: 24px;
    }
    ul li:hover{
      background: #cfcfcf;
    }
  </style>
 </head>
 <body style='height:3000px;width: 3000px'>
   <p>这是一个P标签</p>
   <!-- <input value='123'></input> -->
   <!-- <input type='select' name='' id='' value="123"></input> -->
   <!-- <input type='password' name='' id=''></input> -->
   <!-- <input type='file' name='' id=''></input> -->
   <!-- <span style='display: none'>asdfdsad</span> -->
   <!-- <form id = 'form1' action="www.baidu.com">
     <input type="text" name=""/>
     <input type="password" name=""/>
     <input type="submit" name="" value='提交'/>
   </form> -->
   <!-- <input id = "input"></input> -->
   <!-- <div>
     <input type="text" value ="123456"/><span style="display: none">获得焦点后显示</span>
     <p><input type="text" value ="654321"/></p>
   </div> -->
   <!-- <input type="text" name="" style='position: fixed;top: 10px;left: 10px'/> -->
   <!-- <div>请选择城市</div>
   <ul>
     <li>北京</li>
     <li>天津</li>
     <li>上海</li>
     <li>重庆</li>
   </ul>
   <a href="http://pan.baidu.com/share/link?shareid=543954&uk=4211285463">jquery实例视频教程</a> -->
   <script>
     /*$('p').click(function(){
      alert($(this).text());
     });*/
     /*$('p').dblclick(function(){
      alert($(this).text());
     });*/
     /*$('div').focusin(function(){
      $('div>span').show();
     });
     $('div').focusout(function(){
      $('div>span').hide();
     });*/
     /*$('p').mousedown(function(){
      alert(123);
     });*/
     /*$(document).mousemove(function(e){
      // console.info('x轴坐标：'+e.pageX+'y轴坐标：'+e.pageY);
      $('#input').val('x:'+e.pageX+'y:'+e.pageY);
     });*/
     /*$('p').mouseover(function(){
      $(this).css('background','red');
     });*/
     /*$('p').mouseout(function(){
      $(this).css('background','none');
     });*/
     /*$(document).mouseover(function(){
      $('p').css('background','none');
     });*/
    /*$(document).mouseenter(function(){
      $('p').css('background','red');
     });
    $(document).mouseleave(function(){
      $('p').css('background','none');
     });*/
     /*$('input').keydown(function(){
      alert($(this).val());
     });*/
     /*$('input').keyup(function(){
      alert($(this).val());
     });*/
     /*$('input').keypress(function(){
      alert($(this).val());
     });*/
     /*$('input').focus(function(){
      $('span').show();
     }).blur(function(){
      $('span').hide();
     });*/
     /*$('input').change(function(){
      $('span').show();
     });*/
     /*$('input[type=file]').change(function(){
      $('span').show();
     });*/
     /*$('input').select(function(){
      $('span').show();
     });*/
     /*$("input[type=password]").select(function(){
      $('span').show();
     });*/
     /*$('#form1').submit(function(e){
      // alert('提交成功！！！！');
      // e.preventDefault();
     });*/
     /*$(window).resize(function(){
      alert('浏览器窗口大小已改变！！！');
     });*/
     /*$(window).scroll(function(){
      console.info('滚动条正在滚动！！！');
     });*/
     /*$(document).click(function(e){
        var x = e.pageX;
        var y = e.pageY;
        $('input').val(x+','+y);
     });*/
     /*$('div').click(function(e){
      $('ul').show();
      e.stopPropagation();
     });
     $(document).click(function(){
      $('ul').hide();
     });*/
     /*$('p').bind('click',function(){
      alert($(this).text());
     });
     $('p').mouseover(function(){
      $(this).css('background','red');
     });
     // $('p').unbind('click');
     $('p').unbind('click mouseover');*/
     /*$('p').one('click',function(){
      alert($(this).text());
     });*/
     /*$('body').delegate('p','click',function(){
      $(this).append('<p>这是新增的p标签</p>');
     });*/
     /*$('p').bind('click',function(){
      $('body').append('<p>这是新增的p标签</p>');
     });*/
     /*$('body').on('click','p',function(){
      $('body').append('<p>这是新增的p标签</p>');
     });*/
     // 命名空间
     $('p').bind('click.background',function(){
      $(this).css('background','red');
     });
     $('p').bind('click.color',function(){
      $(this).css('color','white');
     });
     $('p').unbind('click.color');
   </script>
 </body>
</html>

第15节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第15节课demo1——事件补充</title>
  <!--
    1.hover()用法
    2.trigger()
    3.triggerHandler()阻止事件冒泡
  -->
  <style>
    p{
      background-color: #f00;padding: 20px;
    }
    a{
      background-color: #abc;padding: 20px;
    }
  </style>
 </head>
 <body>
   <!-- <p>这是一个p标签</p> -->
   <p><a href="#">点击</a></p>
   <script>
     /*$('p').hover(function(){
      $(this).css('background','red');
     },function(){
      $(this).css('background','none');
     });*/
     $('a').click(function(){
        alert('我是a，我被点击了！！！');
     });
     /*$('a').trigger('click');*/
     $('p').click(function(){
      alert('我是p，我被点击了！');
     });
     // $('a').trigger('click');
     $('a').triggerHandler('click');
   </script>
 </body>
</html>

第16节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第16节课demo1——</title>
  <!--
    1.基础动画
      show()显示
      hide()隐藏
      toggle()切换显示和隐藏
    2.渐变动画
      fadeln()
      fadeOut()
      fadeTo()
      fadeToggle()
    3.滑动动画
      slideDown()
      slideUp()
      slideToggle()
    4.自定义动画
      animate()
    5.动画队列
      stop()
      dequeue()
      finish()
      delay()
      jQuery.fx.interval()，设置运行的时间，不推荐
  -->
  <style>
    p{
      padding: 10px;
      border: 1px solid #aef;
      width: 300px;
      display: none;
    }
    a{
      color: red;
      padding: 50px;
      margin: 10px;
    }
    div{
      width: 100px;
      height: 100px;
      background-color: #abcdef;
      position: absolute;
      left: 0;
      top: 30px;
    }
  </style>
 </head>
 <body>
   <!-- <a href="###">点击</a>
   <p>1.hover()用法
    2.trigger()
    3.triggerHandler()阻止事件冒泡</p> -->
    <input type='button' id = "run" value='运行'></input>
    <input type='button' id = "stop" value='stop'></input>
    <input type='button' id = "dequeue" value='dequeue'></input>
    <input type='button' id = "finish" value='finish'></input>
    <input type='button' id = "delay" value='delay'></input>
    <div></div>
    <script>
      /*$('a').click(function(){
        // $('p').hide(10000); // 10000代表毫秒数
        $('p').hide('slow');  // fast、slow、normal
      });*/
      /*$('a').click(function(){
        $('p').show('slow');  // fast、slow、normal
      });*/
      /*$('a').click(function(){
        $('p').toggle('slow');  // fast、slow、normal
      });*/
      /*$('a').click(function(){
        if($('p').is(':visible')){
          $('p').hide(500);
        } else {
          $('p').show(500);
        }
      });*/
      /*$('a').click(function(){
        if($('p').is(':visible')){
          $('p').fadeOut(500);
        } else {
          $('p').fadeIn(500);
        }
      });*/
      /*$('a').click(function(){
        $('p').fadeTo(500,0.3);
      });*/
      /*$('a').click(function(){
        $('p').fadeTo(500,0.3,function(){
          alert('fadeTo方法执行完成');
        });
      });*/
      /*$('input').click(function(){
        $('div').animate({
         'left':'800px'
        });
      });*/
      /*$('input').click(function(){
        $('div').animate({
         'left':'800px',
         'top':'400px',
         'opacity':'0.2'
        },3000,function(){
          $(this).css('background-color','#f90');
        });
      });*/
      /*$('input').hover(function(){
        $('div').stop().slideDown(500);
      },function(){
        $('div').stop().slideUp(500);
      });*/
      /*$('input').hover(function(){
        $('div').stop(false,true).slideDown(500);
      },function(){
        $('div').stop(false,true).slideUp(500);
      });*/

      /*$('input').click(function(){
        $('div').animate({'top':'500px'},6000)
                .animate({'left':'800px'},6000)
                .animate({'top':'30px'},6000)
                .animate({'left':'0px'},6000);
      });*/
      jQuery.fx.interval=3000;
      $('#stop').click(function(){
        $('div').stop(true,false);
      });
      $('#dequeue').click(function(){
        $('div').dequeue();
      });
      $('#finish').click(function(){
        $('div').finish();
      });
      $('#delay').click(function(){
        $('div').slideUp(500).delay(1000).fadeIn(500);
      });

    </script>
 </body>
</html>

第17节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第17节课demo1——jQuery中动画算法的插件</title>
  <style>
    div{
      width: 20px;
      height: 20px;
      background: #abcdef;
      padding: 20px;
      left: 0;
      top: 30px;
      position: absolute;
    }
  </style>
 </head>
 <body>
  <input type="button" value="点击"></input>
  <div></div>
  <script>
   $('input').click(function(){
      $('div').animate({
        'left':'+=200px'
      },2000);
    });
    /*$('input').click(function(){
      $('div').animate({'top':'500px'},6000)
              .animate({'left':'800px'},6000)
              .animate({'top':'30px'},6000)
              .animate({'left':'0px'},6000);
    });*/
  </script>
 </body>
</html>

第18节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第18节课demo1——表单选择框实例</title>
 </head>
 <body>
  <div id="checkbox">
    <input type="checkbox" name="" checked="checked" />吃
    <input type="checkbox" name=""/>喝
    <input type="checkbox" name=""/>嫖
    <input type="checkbox" name=""/>赌
  </div>
  <div>
    <input type="button" name="" id="checkAll" value="全选"/>
    <input type="button" name="" id="checkReverse" value="反选"/>
    <input type="button" name="" id="checkNone" value="全不选"/>
  <div>
  <script>
    $('#checkAll').click(function(){
      $('#checkbox>:checkbox').attr('checked',true);
    });
    $('#checkNone').click(function(){
      $('#checkbox>:checkbox').attr('checked',false);
    });
    $('#checkReverse').click(function(){
      $('#checkbox>:checkbox').each(function(){
        $(this).attr('checked',!$(this).attr('checked'));
      });
    });

  </script>
 </body>
</html>

第19节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第19节课demo1——页面搜索实例</title>
  <style>
    table{
      width: 500px;
      border: 1px solid #abcdef;
      border-collapse: collapse;
    }
    tr{
      height: 20px;
      border: 1px solid #abcdef;
    }
    th,td{
      border: 1px solid #abcdef;
      text-align: center;
    }
  </style>
 </head>
 <body>
  <table>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>电话</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>30</td>
      <td>74874874888</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>男</td>
      <td>32</td>
      <td>16816816888</td>
    </tr>
    <tr>
      <td>移动客服</td>
      <td>女</td>
      <td>21</td>
      <td>10086</td>
    </tr>
    <tr>
      <td>移动充值</td>
      <td>女</td>
      <td>21</td>
      <td>13816681978</td>
    </tr>
  </table>
  <input type="text" name=""/>
  <input type="button" value="搜索"/>
  <script>
    $('input[type=button]').click(function(){
      var text = $('input[type=text]').val();
      $('table tr:not(":first")').hide().filter(':contains("'+text+'")').show();
    });

  </script>
 </body>
</html>

第20节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <title>第20节课demo1——</title>
 </head>
 <body>
  <textarea style="height: 200px;width: 200px"></textarea>
  <span>你还可以输入<strong style="color: red">140</strong>个字</span>
  <script>
    var maxLength=140;
    $("textarea").keyup(function(){
      var l = $(this).val().length;
      $('strong').text(maxLength-l);
      /*if($('strong').text()<0){
        alert("不能超过140个字");
      }*/
      if(parseInt($('strong').text())<0){
        $('strong').text(0);
        var val = $(this).val().substring(0,140);
        $(this).val(val);
      }
    });
  </script>
 </body>
</html>

第21节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
   <script src = "demo21.js"></script>
  <title>第21节课demo1——eval、jquery插件编写</title>
  <!--
    eval:可以将字符串解析成js代码
    编写插件的两种方式：
      类级别开发
      对象级别开发（常用，99%都是这种）
  -->
  <style>
    div{
      height: 100px;
      width: 100px;
      background-color: #f90
    }
  </style>

 </head>
 <body>
  <div></div>
 </body>
 <script>
  // $.zixueit.myAlert("我是通过调用插件弹出的警告框");
  // $.myAlert2();
   /*var a = '[1,2,3,4]';
   var b = eval(a);
   alert(typeof b);
   alert(b[0]);*/
   /*$.zixueit.centerDiv($('div'));*/
   $.zixueit.centerDiv($('div')).css('background-color','red');
 </script>
</html>

第22节课demo1

<!doctype html>
<html lang="en">
 <head>
  <script src = "jquery.min.js"></script>
  <script src = "jQuery-table1.0.js"></script>
  <title>第22节课demo1——eval、jquery插件编写</title>
  <style>
    table{
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #abcdef;
    }
    th,td{
      height: 36px;
      border: 1px solid #abcdef;
      text-align: center;
    }
    .evenRow{background-color: #f90;}
    .oddRow{background-color: #a30;}
    .currentRow{background-color: #asd;}
  </style>
 </head>
 <body>
  <!-- 开发一个需求奇数行颜色是#abcdef，偶数行颜色是#f90，当鼠标移动到对应行的时候，该行颜色变为#a23，离开时又变回原来的颜色 -->
  <table id = 'mytable'>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>工资</th>
    </tr>
    <tr>
      <td>小张</td>
      <td>男</td>
      <td>26</td>
      <td>12000</td>
    </tr>
    <tr>
      <td>小陈</td>
      <td>男</td>
      <td>25</td>
      <td>13000</td>
    </tr>
    <tr>
      <td>TOM</td>
      <td>男</td>
      <td>30</td>
      <td>20000</td>
    </tr>
    <tr>
      <td>小丽</td>
      <td>女</td>
      <td>22</td>
      <td>25000</td>
    </tr>
    <tr>
      <td>小美</td>
      <td>女</td>
      <td>25</td>
      <td>26000</td>
    </tr>
  </table>
  <script type="text/javascript">
    $('#mytable').table();
  </script>
 </body>
</html>