jQuery

目录

一、jQuery简介

二、jQuery对象和DOM对象

三、选择器

四、筛选和查找方法

五、属性

六、CSS、位置和尺寸

七、文档处理

八、扩展方法

九、实例

一、jQuery简介

1、简介

　　jQuery是继Prototype之后又一个优秀的JavaScript库，是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI和插件等开发人员以及推广和网站设计维护人员。

　　jQuery凭借简介的语法和跨浏览器的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。其独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。总之，无论是网页设计师、后台开发者、还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。

2、特点

　　jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery的特点：

• 功能强大，强调的理念是写的少，做得多

• 封装了大量常用的DOM操作

• 灵活的事件处理机制

• 拥有完善的AJAX功能

• 扩展性强、插件丰富

• 易学易用

• 多浏览器支持（支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+，在2.0.0中取消了对Internet Explorer6,7,8的支持）、兼容性好；

3、下载jQuery

　　jQuery不需要安装，把下载的jQuery库放到网站的一个公共位置，想要在某个页面上使用jQuery时，只需要在相关的HTML文档中引入该库文件即可；可以使用压缩和未压缩的jQuery文件副本，未压缩的文件最好在开发或调试期间使用; 压缩文件可以节省带宽并提高生产性能，要在本地下载这些文件，请右键单击该链接，然后从菜单中选择“另存为...”。获得jQuery相关资源的网站地址如下：

官网： http://jquery.com/

jQuery API 中文文档：http://jquery.cuishifeng.cn/

二、jQuery对象和DOM对象

1、jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。 jQuery对象是对DOM元素封装过后的数组，也称为包装集。无论选择器匹配了多个或者零个元素，jQuery对象都不再是null。

2、DOM转换成jQuery对象

• 转换方法一：jQuery(DOM对象)，如jQuery(document.getElementById("foo"))，

• 转换方法二：jQuery("#foo")，也可以写成$("#foo")，$是jQuery的别名形式；

3、jQuery对象转换成DOM对象

DOM对象是jQuery对象的组成部分，jQuery对象是对DOM对象的包装升级，将jQuery对象转换成DOM对象方法如下：

• 方法一：jQuery对象[下标]

• 方法二：jQuery对象.get(下标)

三、选择器

1、基本选择器

• #id：ID选择器，$("#i1"),使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\，例如：id="foo[bar]，#foo\[bar\]；

• element：标签元素选择器,$("div")；

• .class：类选择器，$(".myClass")；

• selector1,selector2,selectorN：组合选择器，$("div,span,p.myClass")；

 2、层级选择器

• $("form input")找到表单中所有的 input 元素；

• $("form > input")匹配表单中所有的子级input元素，不包括孙子级；

• $("label + input")匹配所有跟在 label 后面的 input 元素；

• $("form ~ input")找到所有与表单同辈的 input 元素；

3、基本筛选器

• :first：获取匹配的第一个元素，$('li:first');

• :not(selector)：去除所有与给定选择器匹配的元素，$("input:not(:checked)")，查找所有未选中的 input 元素；

• :even：匹配所有索引值为偶数的元素，从 0 开始计数；

• :odd：匹配所有索引值为奇数的元素，从 0 开始计数；

• :gt(index)：匹配所有大于给定索引值的元素； 

• :eq(index)：匹配一个给定索引值的元素，从 0 开始计数；

• :last()：获取匹配的最后一个元素；

• ;last-child：匹配最后一个子元素，$("ul li:last-child")

• :header：匹配如 h1, h2, h3之类的标题元素，例如：$(":header").css("background", "#EEE")，给页面内所有标题加上背景色；

4、属性选择器

• $("div[id]")：查找所有含有 id 属性的 div 元素；

• $("input[name='news']")：查找所有name属性是news的input元素；

• $("input[name!='news']")：查找所有name属性不是news的input元素；

• $("input[name^='news']")：查找所有 name 以 'news' 开始的 input 元素；

• $("input[name$='news']")：查找所有 name 以 'news' 结尾的 input 元素；

• $("input[name*='man']")：查找所有 name 包含 'man' 的 input 元素；

• $("input[id][name$='man']")：找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的；

 5、表单选择器

• $(":input")：匹配所有 input, textarea, select 和 button 元素；

• $(":text")：匹配所有的单行文本框，type="text"；

• $(":password")：匹配所有密码框；

• $(":radio")：匹配所有单选按钮；

• $(":checkbox")：匹配所有复选框；

• $(":submit")：匹配所有提交按钮；理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。

四、筛选和查找方法

1、过滤

• eq(index|-index)：获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个；$("p").eq(1)，获取匹配的第二个元素；

• $('li').first()：获取匹配的第一个元素；

• $('li').last()：获取匹配的最后个元素；

• hasClass(class)：检查当前的元素是否含有某个特定的类，如果有，则返回true。

2、查找

• $("div").children()：查找DIV中的每个子元素；

• $("p").find("span")：搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法。

• $("p").next()：找到每个段落的后面紧邻的同辈元素；

• $("p").next(".selected")：找到每个段落的后面紧邻的同辈元素中类名为selected的元素；

• nextAll()：查找当前元素之后所有的同辈元素，可以用表达式过滤；例如：$("div:first").nextAll().addClass("after")，给第一个div之后的所有元素加个类；

• $('#term-2').nextUntil('dt')：查找#term-2后面直到dt前的元素；

• offsetParent()：返回第一个匹配元素用于定位的父节点，这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

• $("p").parent()：查找每个段落的父元素；

• $("span").parents()：找到每个span元素的所有祖先元素。

• parentsUntil()：查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

• $("p").prev()：找到每个段落紧邻的前一个同辈元素；

• $("p").prevAll()：查找每个段落之前所有的同辈元素；

• prevUntil()：查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。

• $("div").siblings()：找到每个div的所有同辈元素。

五、属性

1、属性

• $("img").attr("src")：返回文档中所有图像的src属性值；

• $("img").attr("src","test.jpg")：为所有图像设置src属性；

• $("img").removeAttr("src")：将文档中图像的src属性删除；

• prop()：获取在匹配的元素集中的第一个元素的属性值；

//获取复选框的状态，选中复选框为true，没选中为false
$("input[type='checkbox']").prop("checked");
//禁用页面上的所有复选框
$("input[type='checkbox']").prop({
  disabled: true
});
//禁用和选中所有页面上的复选框
$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

• removeProp(name)：用来删除由.prop()方法设置的属性集，

2、CSS类

• addClass()：为每个匹配的元素添加指定的类名，一个或多个要添加到元素中的CSS类名，请用空格分开；

• removeClass()：从所有匹配的元素中删除全部或者指定的类，多个用空格分开；

• toggleClass()：如果存在（不存在）就删除（添加）一个类；

3、HTML代码/文本/值

• $("p").html()：取得第一个匹配元素的html内容，这个函数不能用于XML文档，但可以用于XHTML文档；$("p").html("Hello")，设置所有 p 元素的内容；

• $('p').text()：返回p元素的文本内容；$("p").text("Hello world!")，设置所有 p 元素的文本内容；

• $("input").val()：获得文本框的当前值；$("input").val("hello world!")，设定文本框的值；

六、CSS、位置和尺寸

1、CSS

• $("p").css("color")：取得第一个段落的color样式属性的值；

• $("p").css("color","red")，将所有段落字体设为红色；

• $("p").css({ "color": "#ff0011", "background": "blue" })，将所有段落的字体颜色设为红色并且背景为蓝色；

2、位置

• offset()：获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left，以像素计，此方法只对可见元素有效；$(this).offset().top，表示当前标签距离顶部的距离；

• position()：获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位，此方法只对可见元素有效。

• scrollTop()：获取匹配元素相对滚动条顶部的偏移，此方法对可见和隐藏元素均有效。

• scrollLeft()：获取匹配元素相对滚动条左侧的偏移，此方法对可见和隐藏元素均有效。

• $(window).scrollTop()：滚动条滚动的高度；

• $(this).height()：当前标签的自身高度；

• $(document).height()：文档总高度；

• $(window).height()：当前窗口的高度；

3、尺寸

• height()：取得匹配元素当前计算的高度值（px）；

• width()：取得第一个匹配元素当前计算的宽度值（px）；

• innerHeight()：获取第一个匹配元素内部区域高度（包括补白、不包括边框）；

• innerWidth()：获取第一个匹配元素内部区域宽度（包括补白、不包括边框）；

• outerHeight([options])：获取第一个匹配元素外部高度（默认包括补白和边框），此方法对可见和隐藏元素均有效。options默认值:'false'，设置为 true 时，计算边距在内。

• outerWidth([options])：获取第一个匹配元素外部宽度（默认包括补白和边框），此方法对可见和隐藏元素均有效。

七、文档处理

1、内部插入

• append()：向每个匹配的元素内部的尾部追加内容，$("p").append("<b>Hello</b>");

• appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中，$("p").appendTo("div")，把所有段落追加到div元素内部的尾部；

• prepend()：向每个匹配的元素内部的开始处插入内容；$(A).prepend(B)，在A的内部开始处添加B；

• prependTo()：把所有匹配的元素前置到另一个指定的元素集合中；$(A).prependTo(B)，把A添加到B的内部开始处；

2、外部插入

• after()：在每个匹配的元素之后插入内容；$("p").after("<b>Hello</b>")，在所有段落之后插入一些HTML标记代码。

• before()：在每个匹配的元素之前插入内容；

• insertAfter()：把所有匹配的元素插入到另一个、指定的元素元素集合的后面，这个方法是颠倒了常规的$(A).after(B)的操作；

• insertBefore()：把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

3、包裹

• wrap()：把所有匹配的元素用其他元素的结构化标记包裹起来，当HTML标记代码中的元素包含文本时无法使用这个函数。因此，如果要添加文本应该在包裹完成之后再行添加；$("p").wrap("<div class='wrap'></div>")，把所有的段落用一个新创建的div包裹起来，<div class='wrap'><p></p></div>；

• unwrap()：取消包裹，这个方法将移出元素的父元素，这能快速取消 .wrap()方法的效果，匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素；

• wrapAll()：将所有匹配的元素用单个元素包裹起来，'.wrap()'为每一个匹配的元素都包裹一次；

• wrapInner()：将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来，$("p").wrapInner("<b></b>")，把所有段落内的每个子内容加粗；

4、替换

• replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素；$("p").replaceWith("<b>Paragraph. </b>")，把所有的段落标记替换成加粗的标记。

• replaceAll(selector)：用匹配的元素替换掉所有 selector匹配到的元素，$("<b>Paragraph. </b>").replaceAll("p")，把所有的段落标记替换成加粗标记；

5、删除

• empty()：删除匹配的元素集合中所有的子节点，$("p").empty()，把所有段落的子元素（包括文本节点）删除；

• remove()：从DOM中删除所有匹配的元素，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素，但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

//从DOM中把所有段落删除
<p>Hello</p> how are <p>you?</p>
$("p").remove();
//结果
how are

//从DOM中把带有hello类的段落删除
<p class="hello">Hello</p> how are <p>you?</p>
$("p").remove(".hello");
//结果
how are <p>you?</p>

• detach()：从DOM中删除所有匹配的元素，这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。$("p").detach()，从DOM中把所有段落删除。

6、复制

• clone()：克隆匹配的DOM元素并且选中这些克隆的副本，

//克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p");

//结果
<b>Hello</b><p><b>Hello</b>, how are you?</p>

八、扩展方法

1、扩展方法

<script>
        //依赖jQuery扩展方法一
        $.extend({
            'func':function(arg) {
                console.log(arg);
            }
        });
        //调用函数
        $.func('123');
        //依赖jQuery扩展方法二
        $.fn.extend({
            'fun':function (arg) {
                console.log(arg);
            }
        });
        //需要调用选择器时，用这种方法
        $('form').fun('123');
</script>

2、扩展方法放在单独的js文件中，使用时需要导入，为避免和其他人的冲突，需要注意两点：

//闭包：扩展方法要放在单独的作用域（函数）中
//放在自执行函数中
(function (jq) {
    jq.extend({
        'func':function(arg) {
            console.log(arg);
        }
    });
    function f1(arg) {
        console.log(arg);
    }
})($);

3、实例：用扩展方法验证表单

将扩展方法放在单独的js文件中，内容需满足两个条件：

• 闭包：扩展方法要放在单独的作用域（函数）中
• 放在自执行函数中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width: 250px;
            height: 50px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            color: white;
            background-color: darkred;
            display: inline-block;
            width: 204px;
            position: absolute;
            top: 24px;
            left: 0;
            font-size: 10px ;
        }
    </style>
</head>
<body>
    <div>
        <form id="form1">
            <div class="item">
                <!--设置一个属性，验证是否允许为空，最少6个字符-->
                <input class="c1" type="text" name = '用户名' require="true" min-len="6"/>
            </div>
            <div class="item">
                <!--密码没有require属性，不进行验证，直接提交-->
                <input class="c1" type="password" name = '密码'/>
            </div>
            <div class="item">
                <!--设置一个属性，验证手机号格式是否正确-->
                <input class="c1" type="text" name = '手机号' require="true" phone="true"/>
            </div>
            <div class="item">
                <input type="submit" value = '提交'>
            </div>
        </form>
        <form class="form2">
            <div class="item">
                <input class="c1" type="text" name = '用户名'/>
            </div>
            <div class="item">
                <input type="submit" value = '提交'>
            </div>
        </form>
    </div>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script src="extend.js"></script>
    <script>
        $(function () {
            //通过参数选择绑定哪一个表单，直接调用扩展方法验证表单
            $.valid('#form1');
        })
    </script>
</body>
</html>

(function (jq) {
    //错误提示函数
    function ErrorMessage(inp,msg){
        var tag = document.createElement('span');
        tag.innerText = msg;
        inp.after(tag);
    }
    jq.extend({
        //js里边写字典，key可不加引号,valid为函数名
        valid:function (form) {
            jq(form).find(':submit').click(function () {
                var flag = true;
                jq(form).find('.item span').remove();
                jq(form).find(':text,:password').each(function () {
                    var require = jq(this).attr('require');
                    var val = $(this).val();
                    //如果require为真，表示不可以为空，再开始验证
                    if(require){
                        //先判断是否为空
                        if(val.length == 0){
                            var name = $(this).attr('name');
                            ErrorMessage($(this),name + '不能为空');
                            flag = false;
                            return false;
                        }
                        var minLen = $(this).attr('min-len');
                        //如果有min-len属性，再开始验证字符长度
                        if(minLen){
                            var minLenInt = parseInt(minLen);
                            if(val.length < minLenInt){
                                var name = $(this).attr('name');
                                ErrorMessage($(this),name + '长度不能小于' + minLen);
                                flag = false;
                                return false;
                            }
                        }
                        //先判断用户输入内容是否是手机格式
                        var phone = $(this).attr('phone');
                        if(phone){
                            //定义正则表达式
                            var phoneReg = /^1[3|5|8]d{9}$/;
                            //验证
                            if(!phoneReg.test(val)){
                                var name = $(this).attr('name');
                                ErrorMessage($(this),name + '格式错误');
                                flag = false;
                                return false;
                            }
                        }
                    }
                });
                return flag;
            });
        }
    });
})(jQuery);

4、前端插件

使用插件之前，首先要引入jQuery

easyui:http://www.jeasyui.net/

jqueryui:http://www.jqueryui.org.cn/

bootstrap:https://v3.bootcss.com/

bxslider:https://bxslider.com/

九、实例

1、克隆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div>
        <p>
            <a onclick="Add(this);" style="cursor: pointer;">+</a>
            <input type="text"/>
        </p>
    </div>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script>
        function Add(ths) {
            //克隆当前标签的父标签
            var p = $(ths).parent().clone();
            //将克隆的父标签下的a标签的内容改为“-”
            p.find('a').text('-');
            //将克隆的父标签下的a标签的绑定事件改为Remove函数
            p.find('a').attr('onclick','Remove(this)');
            //将修改后的克隆标签插入到父标签的父标签的后面
            $(ths).parent().parent().append(p);
        }
        function Remove(ths) {
            $(ths).parent().remove();
        }
    </script>
</body>
</html>

2、延迟绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="添加" onclick="Add(this);"/>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*普通绑定，新添加的li不能继承这个事件
            $('li').click(function () {
                alert($(this).text());
            });
            */
            //延迟绑定，一开始都没有绑定，随时点击随时绑定
            $('ul').delegate('li',"click",function () {
                alert($(this).text());
            });
        });
        //点击按钮，添加一个li
        function Add(ths) {
            var tag = document.createElement('li');
            tag.innerText = '666';
            $('ul').append(tag);
        }
    </script>
</body>
</html>

3、当文档树加载完毕，自动执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        $(function () {
            //当文档树加载完毕，自动执行
            ...
        });
    </script>
</body>
</html>

4、折叠菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 500px;
            width: 200px;
            border: 1px solid #dddddd;
            overflow: auto;
        }
        .menu .item .title{
            height: 35px;
            line-height: 40px;
            background-color: #A3A3A3;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="menu">
        <div class="item">
            <div class="title" onclick="ShowMenus(this);">菜单一</div>
            <div class="body">
                <p>内容一</p>
                <p>内容一</p>
                <p>内容一</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenus(this);">菜单二</div>
            <div class="body hide">
                <p>内容二</p>
                <p>内容二</p>
                <p>内容二</p>
            </div>
        </div>
        <div class="item">
            <div class="title" onclick="ShowMenus(this);">菜单三</div>
            <div class="body hide">
                <p>内容三</p>
                <p>内容三</p>
                <p>内容三</p>
            </div>
        </div>
    </div>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script>
        // 一般的绑定方法
        function ShowMenus(ths) {
            //$(ths) dom对象转换为jQuery对象
            //$(ths)[0] jQuery对象转换为dom对象
            $(ths).next().removeClass('hide');
            $(ths).parent().siblings().find('.body').addClass('hide');
        }
        /*
        //优化的绑定方法click
        $('.item .title').click(function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
        //相同的效果bind
        $('.item .title').bind('click',function () {
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.body').addClass('hide');
        })
        */
    </script>
</body>
</html>

 5、点击进入表格编辑状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" onclick="CheckAll()" value="全选"/>
    <input type="button" onclick="CancelAll()" value="取消"/>
    <input type="button" onclick="ReverseAll()" value="反选"/>
    <input type="button" onclick="IntoEdit(this)" value="进入编辑模式"/>
    <table border="1" style="text-align: center;">
        <thead>
            <tr>
                <th>选择</th>
                <th>主机名</th>
                <th>端口</th>
                <th>状态</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr id="i1">
                <td><input type="checkbox" onclick="Editing(this);"/></td>
                <td>v1</td>
                <td>11</td>
                <td>在线</td>
            </tr>
            <tr id="i2">
                <td><input type="checkbox" onclick="Editing(this);"/></td>
                <td>v2</td>
                <td>22</td>
                <td>在线</td>
            </tr>
            <tr id="i3">
                <td><input type="checkbox" onclick="Editing(this);"/></td>
                <td>v3</td>
                <td>33</td>
                <td>在线</td>
            </tr>
        </tbody>
    </table>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script>
        //全选
        function CheckAll() {
            if($("#tb tr").hasClass('editing')){
                $('#tb :checkbox').prop('checked',true);
                $('#tb :checkbox').each(function () {
                    Editing(this);
                });
            }else{
                $('#tb :checkbox').prop('checked',true);
            }
        }
        //取消
        function CancelAll() {
            $('#tb :checkbox').prop('checked',false);
            $('#tb :checkbox').each(function () {
                if($(this).parent().next().prop('type')=='text'){
                    var current_text = $(this).parent().next().val();
                    $(this).parent().next().replaceWith('<td></td>');
                    $(this).parent().next().text(current_text);
                }else{
                    var new_text = $(this).parent().next().text();
                    $(this).parent().next().replaceWith('<td></td>');
                    $(this).parent().next().text(new_text);
                }
            });
        }
        //反选
        function ReverseAll() {
            // jquery中的循环
            $('#tb :checkbox').each(function () {
                //this当前标签，如果当前标签处于编辑状态
                if($(this).parent().parent().hasClass('editing')){
                    if($(this).prop('checked')){
                        $(this).prop('checked',false);//取消打勾
                        var current_text = $(this).parent().next().val();//获取文本
                        $(this).parent().next().replaceWith('<td></td>');//替换标签
                        $(this).parent().next().text(current_text);//添加文本
                    }else{
                        $(this).prop('checked',true);//打勾
                        var new_text = $(this).parent().next().text();//获取文本
                        $(this).parent().next().replaceWith('<input type="text"/>');//替换标签
                        $(this).parent().next().val(new_text);//添加文本
                    }
                }else{
                    if($(this).prop('checked')){
                        $(this).prop('checked',false);
                    }else{
                        $(this).prop('checked',true);
                    }
                }
            });
        }
        //进入和退出编辑模式,添加和移除类
        function IntoEdit(ths) {
            if($(ths).val() == '进入编辑模式'){
                $("#tb tr").addClass('editing');
                $(ths).css('color','red');//字体改成红色
                $(ths).val('退出编辑模式');//文本改为退出模式
            }else{
                //点击退出，字体变黑，文本变进入模式
                $("#tb tr").removeClass('editing');
                $(ths).css('color','black');
                $(ths).val('进入编辑模式');
                $('#tb :checkbox').prop('checked',false);//取消打勾
                $('#tb :checkbox').each(function () {
                    //如果当前td的下一个td是input标签，表示正在编辑，就获取value，否则获取text
                    if($(this).parent().next().prop('type')=='text'){
                        var current_text = $(this).parent().next().val();
                        //将input标签换回td标签
                        $(this).parent().next().replaceWith('<td></td>');
                        //把当前的文本内容添加到新的td标签中
                        $(this).parent().next().text(current_text);
                    }else{
                        var new_text = $(this).parent().next().text();
                        $(this).parent().next().replaceWith('<td></td>');
                        $(this).parent().next().text(new_text);
                    }
                })
            }
        }
        //单击checkbox时触发函数，其实就是单个的反选
        function Editing(ths) {
            //如果是编辑状态下
            if($(ths).parent().parent().hasClass('editing')){
                //如果当前是input标签，说明正在编辑状态，就换成td标签
                if($(ths).parent().next().prop('type')=='text'){
                    var current_text = $(ths).parent().next().val();//获取内容
                    $(ths).parent().next().replaceWith('<td></td>');//替换标签
                    $(ths).parent().next().text(current_text);//添加内容
                    $(ths).attr('checked',false);//取消对勾
                }else{
                    var new_text = $(ths).parent().next().text();
                    console.log(new_text);
                    $(ths).parent().next().replaceWith('<input type="text"/>');
                    $(ths).parent().next().val(new_text);
                    $(ths).attr('checked',true);
                }
            }else{
                $(ths).attr('checked',true);
            }
        }
    </script>
</body>
</html>

 6、表单验证用户输入不能为空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            width: 250px;
            height: 50px;
            position: relative;
        }
        .item input{
            width: 200px;
        }
        .item span{
            color: white;
            background-color: darkred;
            display: inline-block;
            width: 204px;
            position: absolute;
            top: 24px;
            left: 0;
            font-size: 10px ;
        }
    </style>
</head>
<body>
    <div>
        <form>
            <div class="item">
                <input class="c1" type="text" name = '用户名'/>
                <!--<span>不能为空</span>-->
            </div>
            <div class="item">
                <input class="c1" type="password" name = '密码'/>
            </div>
            <div class="item">
                <!--DOM的事件绑定方法onclick-->
                <!--<input type="submit" value = '提交' onclick="return CheckValid();"/>-->
                <input type="submit" value = '提交'>
            </div>
        </form>
    </div>
    <script src="plugins/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            //页面框架加载完成之后，自动执行
            BindCheckValid();
        });
        function BindCheckValid(){
         //JavaScript的绑定方法click
            $('form :submit').click(function () {
                var flag = true;
                //每次验证内容之前，先移除span标签，不然你输入正确之后标签还在
                $('form .item span').remove();
                $('form .c1').each(function () {
                    if($(this).val().length == 0){
                        var name = $(this).attr('name');
                        var tag = document.createElement('span');
                        tag.innerText = name + '不能为空';
                        $(this).after(tag);
                        flag = false;
                        return false;//验证第一个不合格，就不再往下验证，一个一个来
                    }
                });
                return flag;//click绑定的函数返回false，不再继续执行；
            });
        }
        //相同的效果bind
        //$('form :submit').bind('click',function(){})
    </script>
</body>
</html>

 7、滚动菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            margin: 0;
        }
        img {
            border: 0;
        }
        /*去掉ul标签的所有特征*/
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        /*头部logo和标题都飘起来了，需要加上这个，让背景色显示出来*/
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        /*头部用来显示logo和标题的框架*/
        .wrap{
            width: 980px;
            margin: 0 auto;
        }
        /*头部的背景色和阴影*/
        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        /*用来放置logo的框架*/
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0;
        }
        /*logo图片的高和宽，还有上下居中*/
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        /*头部标题上下居中，高度等于logo高度加上logo padding的高度*/
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        /*左侧菜单的框架*/
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0;
        }
        /*左侧菜单框架加上class=fixed时*/
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }
        /*catalog下的item处于活动状态时*/
        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }
        /*显示主要内容的框架*/
        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        /*显示每一章内容的框架*/
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="1.jpg">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第一章</a></div>
                <div class="catalog-item" auto-to="function2"><a>第二章</a></div>
                <div class="catalog-item" auto-to="function3"><a>第三章</a></div>
            </div>
            <div class="content">
                <div menu="function1" class="section" style='background-color:green;'>
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section" style='background-color:yellow;'>
                    <h1>第二章</h1>
                </div>
                <div id="i1" menu="function3" class="section" style='background-color:red;'>
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="plugins/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 自动执行
            Init();
        });
        function Init(){
            $(window).scroll(function() {
                // 监听窗口滚动事件
                // 获取滚动条高度
                var scrollTop = $(window).scrollTop();
                // 当滚动到50像素时，左侧带菜单固定
                if(scrollTop > 50){
                    $('.catalog').addClass('fixed');
                }else{
                    $('.catalog').children().removeClass('active');
                    $('.catalog').removeClass('fixed');
                }
                // 循环所有的内容
                $('.content').children().each(function(){
                    // 当前标签距离顶部高度
                    var offSet = $(this).offset(); 
                    // offSet.top
                    // offSet.left
                    // 自身高度
                    var height = $(this).height();
                    //offSet < 滚动高度 < offSet+height
                    // 当前滚动条所处位置位于用户阅览区
                    if(scrollTop > offSet.top && scrollTop < offSet.top + height){
                        var docHeight = $(document).height();//文档总高度
                        var winHeight = $(window).height(); //窗口高度
                        // 如果，滚轮到达底部，则显示最后一个菜单
                        if(docHeight == winHeight + scrollTop)
                        {
                            $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
                        }else{
                            var target = $(this).attr('menu');
                            $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
                        }
                        return false;
                    }
                });
            });
        }
    </script>
</body>
</html>

 8、补充

//js什么都不做
<a href="javascript:void(0);" onclick="removeStudent(this);">Ajax删除</a>

//同时添加class和移除其他兄弟的class，字符串+变量的格式化输出
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');

 9、获取选中状态下的option的文本信息

<select id="c1">
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3">广州</option>
    </select>

// dom对象   
t = $('#c1')[0]
//获取选中option的文本信息
text = t.selectedOptions[0].innerHTML