D17——C语言基础学PYTHON

时间：2022-10-30 06:08:11

C语言基础学习PYTHON——基础学习D17

20181014内容纲要：

　　1、jQuery介绍

　　2、jQuery功能介绍

　　　　（1）jQuery的引入方式

　　　　（2）选择器

　　　　（3）筛选

　　　　（4）文本操作

　　　　（5）样式操作

　　　　（6）属性操作

　　　　（7）文本处理

　　　　（8）css处理

　　　　（9）位置

　　　　（10）事件

　　　　（11）jQuery扩展

　　3、实例展示

　　4、小结

　　5、推荐

1 jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

官方网站列出了下列支持jQuery的浏览器：

　　FirefoX 2．0+

　　Internet Explorer 6+

　　Safari 3+

　　Opera 10．6+

　　Chrome 8+

2 jQuery功能介绍

（1）jQuery的引入方式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <!--css的两种引入方式-->

     <link rel="stylesheet" href="csswenjian">

     <style>

     </style>

 </head>

 <body>

     <div id="i1">123</div>

        <!--jQuery的两种引入方式-->

     <script src="jquery-1.12.4.js"></script>

     <script>

         $("#i1")

     </script>

 </body>

 </html>

js的两种引入方式

（2）选择器

1. id

                $('#id')

            2. class

                <div class='c1'></div>

                $(".c1")

            3. 标签

                <div id='i10' class='c1'>

                    <a>f</a>

                    <a>f</a>

                </div>

                <div class='c1'>

                    <a>f</a>

                </div>

                <div class='c1'>

                    <div class='c2'> </div>

                </div>

                $('a')

            4. 组合a

                <div id='i10' class='c1'>

                    <a>f</a>

                    <a>f</a>

                </div>

                <div class='c1'>

                    <a>f</a>

                </div>

                <div class='c1'>

                    <div class='c2'> </div>

                </div>

                $('a')

                $('.c2')

                $('a,.c2,#i10')

            5. 层级

                $('#i10 a') 子子孙孙

                $('#i10>a') 儿子

            6. 基本

                :first

                :last

                :eq()

            7. 属性

                $('[alex]')       具有alex属性的所有标签

                $('[alex="123"]') alex属性等于123的标签

                <input type='text'/>

                <input type='text'/>

                <input type='file'/>

                <input type='password'/>

                $("input[type='text']")

                $(':text')
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input type="button" value="全选" onclick="checkAll();">

     <input type="button" value="反选" onclick="reverseAll();">

     <input type="button" value="取消" onclick="cancelAll();">

     <table border="1">

         <thead>

             <tr>

                 <th>选项</th>

                 <th>IP</th>

                 <th>端口</th>

             </tr>

         </thead>

         <tbody class="tb">

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

         </tbody>

     </table>

     <script src="jquery-1.11.3.js"></script>

     <script>

         function checkAll() {

             $(":checkbox").prop('checked',true);

         }

         function cancelAll() {

             $(':checkbox').prop('checked',false);

         }

         function reverseAll() {

             $(":checkbox").each(function (k) {

                 //this 代指当前循环的每一个元素

                 //console.log(k,this)

                 //这是通过Dom实现的反选

                 /*if(this.checked){

                     this.checked = false;

                 }

                 else{

                     this.checked = true;

                 }*/

                 //这是jquery实现的反选

                 /*if($(this).prop('checked')){

                     $(this).prop('checked',false);

                 }else {

                     $(this).prop('checked',true);

                 }*/

                 //三元运算

                 var v = $(this).prop("checked")?false:true;

                 $(this).prop("checked",v)

             })

         }

     </script>

 </body>

 </html>

实例（全选取消反选）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .header{

             background-color: black;

             color: wheat;

         }

         .content{

             min-height: 50px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div style="height: 400px;width: 200px;border: 1px solid #dddddd">

         <div class="item">

             <div class="header">标题1</div>

             <div class="content">内容1</div>

         </div>

         <div class="item">

             <div class="header">标题2</div>

             <div class="content hide">内容2</div>

         </div>

         <div class="item">

             <div class="header">标题3</div>

             <div class="content hide">内容3</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $(".header").click(function () {

             //console.log(this);

             //获取当前标签 $(this)

             //获取某个标签的下一个标签

             //获取某个标签的父标签

             //获取所有的兄弟标签

             //添加、移除样式

             //链式编程

              //$(this).next().removeClass('hide');

              //$(this).parent().siblings().find('.content').addClass('hide');

             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');

         })

     </script>

 </body>

 </html>

实例（展开折叠）

（3）筛选

筛选

                $('#i1').next()

                $('#i1').nextAll()

                $('#i1').nextUntil('#ii1')

                <div>

                    <a>asdf</a>

                    <a>asdf</a>

                    <a id='i1'>asdf</a>

                    <a>asdf</a>

                    <a id='ii1'>asdf</a>

                    <a>asdf</a>

                </div>

                $('#i1').prev()

                $('#i1').prevAll()

                $('#i1').prevUntil('#ii1')

                $('#i1').parent()

                $('#i1').parents()

                $('#i1').parentsUntil()

                $('#i1').children()

                $('#i1').siblings()

                $('#i1').find()

                $('li:eq(1)')

                $('li').eq(1)

                first()

                last()

                hasClass(class)

（4）文本操作

文本操作：

                $(..).text()           # 获取文本内容

                $(..).text(“<a>1</a>”) # 设置文本内容

                $(..).html()

                $(..).html("<a>1</a>")

                $(..).val()

                $(..).val(..)

（5）样式操作

样式操作：

                addClass

                removeClass

                toggleClass

（6）属性操作

属性操作：

                # 专门用于做自定义属性

                $(..).attr('n')

                $(..).attr('n','v')

                $(..).removeAttr('n')

                <input type='checkbox' id='i1'  />

                # 专门用于chekbox,radio

                $(..).prop('checked')

                $(..).prop('checked', true)

                PS:

                    index 获取索引位置

（7）文本处理

文档处理：

                append

                prepend

                after

                before

                remove

                empty

                clone

（8）css处理

css处理

            $('t1').css('样式名称', '样式值')

            点赞：

                 - $('t1').append()

                 - $('t1').remove()

                 - setInterval

                 - 透明度 1 》 0

                 - position

                 - 字体大小，位置

（9）位置

位置：

            $(window).scrollTop()  获取

            $(window).scrollTop(0) 设置

            scrollLeft([val])

            offset().left                 指定标签在html中的坐标

            offset().top                  指定标签在html中的坐标

            position()                       指定标签相对父标签(relative)标签的坐标

            <div style='relative'>

                <div>

                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>

                </div>

            </div>

            $('i1').height()           # 获取标签的高度 纯高度

            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？

            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？

            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？

            # 纯高度，边框，外边距，内边距

（10）事件

DOM： 三种绑定方式

                jQuery：

                    $('.c1').click()

                    $('.c1').....

                    $('.c1').bind('click',function(){

                    })

                    $('.c1').unbind('click',function(){

                    })

                    *******************

                    $('.c').delegate('a', 'click', function(){

                    })

                    $('.c').undelegate('a', 'click', function(){

                    })

                    $('.c1').on('click', function(){

                    })

                    $('.c1').off('click', function(){

                    })

                阻止事件发生

                    return false

                # 当页面框架加载完成之后，自动执行

                $(function(){

                    $(...)

                })

（11）jQuery扩展

jQuery扩展：

            - $.extend        $.方法

            - $.fn.extend     $(..).方法

            (function(){

                var status = 1;

                // 封装变量

            })(jQuery)

3 实例展示

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .model{

             position: fixed;

             top: 50%;

             left: 50%;

             width: 500px;

             height: 400px;

             margin-left: -250px;

             margin-top: -250px;

             background-color: #eeeeee;

             z-index: 10;

         }

         .shadow{

             position: fixed;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             opacity: 0.6;

             background-color: black;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <a onclick="addElement();">添加</a>

     <table border="1" class="tb">

         <div class="model hide">

             <div>

                 <input name="hostname" type="text"/>

                 <input name="port" type="text"/>

             </div>

             <div>

                 <input type="button" value="取消" onclick="cancelModel();"/>

                 <input type="button" value="确定" onclick="confirmModel();"/>

             </div>

         </div>

         <div class="shadow hide"></div>

         <tr>

             <td>1.1.1.1</td>

             <td>80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td>1.1.1.2</td>

             <td>80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td>1.1.1.3</td>

             <td>80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td>1.1.1.4</td>

             <td>80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

     </table>

     <script src="jquery-1.12.4.js"></script>

     <script>

         function addElement() {

 //            $(".model").removeClass('hide');

 //            $(".shadow").removeClass('hide');

             $(".model,.shadow").removeClass('hide');

         }

         function cancelModel() {

             $(".model,.shadow").addClass('hide');

             $('.model input[type="text"]').val('');

         }

         function confirmModel() {

             var trs = [];

             $('.nodel input[type="text"]').each(function () {

                 var td = document.createElement('td');

                 td.innerHTML = "用户输入的值"；

             })

         }

         $('.edit').click(function () {

              $(".model,.shadow").removeClass('hide');

              var tds = $(this).parent().prevAll();

              //console.log(tds[0]);

              //console.log(tds[1]);

              var port = $(tds[0]).text();

              var host = $(tds[1]).text();

              $('.model input[name="hostname"]').val(host);

              $('.model input[name="port"]').val(port);

         })

         $('.del').click(function () {

             $(this).parent().parent().remove();

         })

     </script>

 </body>

 </html>

模态框1

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <input id="i1" type="button" value="开关"/>

     <div class="c1 hide">我爱学习</div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('#i1').click(function () {

 //            if($('.c1').hasClass('hide')){

 //                $('.c1').removeClass('hide');

 //            }else {

 //                $('.c1').addClass('hide');

 //            }

             //jquery也提供了实现这样功能的函数

             $('.c1').toggleClass('hide');

         })

     </script>

 </body>

 </html>

开关功能

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .model{

             position: fixed;

             top: 50%;

             left: 50%;

             width: 500px;

             height: 400px;

             margin-left: -250px;

             margin-top: -250px;

             background-color: #eeeeee;

             z-index: 10;

         }

         .shadow{

             position: fixed;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             opacity: 0.6;

             background-color: black;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <a onclick="addElement();">添加</a>

     <table border="1">

         <div class="model hide">

             <div>

                 <input name="hostname" type="text"/>

                 <input name="port" type="text"/>

             </div>

             <div>

                 <input type="button" value="取消" onclick="cancelModel();"/>

             </div>

         </div>

         <div class="shadow hide"></div>

         <tr>

             <td target="hostname">1.1.1.1</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.1</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.1</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.1</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

     </table>

     <script src="jquery-1.12.4.js"></script>

     <script>

         function addElement() {

 //            $(".model").removeClass('hide');

 //            $(".shadow").removeClass('hide');

             $(".model,.shadow").removeClass('hide');

         }

         function cancelModel() {

             $(".model,.shadow").addClass('hide');

             $('.model input[type="text"]').val('');

         }

         $('.edit').click(function () {

              $(".model,.shadow").removeClass('hide');

              var tds = $(this).parent().prevAll();

              tds.each(function () {

                //this   代指每个td

                  //获取td的属性值

                  var n = $(this).attr('target');

                  //获取td中的内容

                  var text = $(this).text();

                  var a1 = '.model input[name="';

                  var a2 = '"]';

                  var temp = a1 + n + a2;

                 $(temp).val(text);

              })

              //console.log(tds[0]);

              //console.log(tds[1]);

 //             var port = $(tds[0]).text();

 //             var host = $(tds[1]).text();

 //             $('.model input[name="hostname"]').val(host);

 //             $('.model input[name="port"]').val(port);

         })

     </script>

 </body>

 </html>

模态框2

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .menu{

             height: 38px;

             background-color: #eeeeee;

             line-height: 38px;

         }

         .active{

             background-color: brown;

         }

         .menu-item{

             float: left;

             border: 1px solid red;

             padding: 0 5px;

             cursor: pointer;

         }

         .content{

             min-height: 100px;

             border: 1px solid #eeeeee;

         }

     </style>

 </head>

 <body>

     <div style="width: 700px;margin: 0 auto">

         <div class="menu">

             <div class="menu-item active" a="1">菜单一</div>

             <div class="menu-item" a="2">菜单二</div>

             <div class="menu-item" a="3">菜单三</div>

         </div>

         <div class="content">

             <div b="1">内容一</div>

             <div class="hide" b="2">内容二</div>

             <div class="hide" b="3">内容三</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.menu-item').click(function () {

             $(this).addClass('active').siblings().removeClass('active');

             var target = $(this).attr('a');

             $('.content').children("[b='" + target + "']").removeClass('hide').siblings().addClass('hide');

         })

     </script>

 </body>

 </html>

页面切换

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .menu{

             height: 38px;

             background-color: #eeeeee;

             line-height: 38px;

         }

         .active{

             background-color: brown;

         }

         .menu-item{

             float: left;

             border: 1px solid red;

             padding: 0 5px;

             cursor: pointer;

         }

         .content{

             min-height: 100px;

             border: 1px solid #eeeeee;

         }

     </style>

 </head>

 <body>

     <div style="width: 700px;margin: 0 auto">

         <div class="menu">

             <div class="menu-item active">菜单一</div>

             <div class="menu-item">菜单二</div>

             <div class="menu-item">菜单三</div>

         </div>

         <div class="content">

             <div >内容一</div>

             <div class="hide">内容二</div>

             <div class="hide">内容三</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.menu-item').click(function () {

             $(this).addClass('active').siblings().removeClass('active');

             var v = $(this).index();

             $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');

         })

     </script>

 </body>

 </html>

页面切换2

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input id="t1" type="text" />

     <input id="a1" type="button" value="添加"/>

     <input id="a2" type="button" value="删除"/>

     <input id="a3" type="button" value="复制"/>

     <ul id="u1">

         <li>1</li>

         <li>2</li>

     </ul>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('#a1').click(function () {

             var v = $('#t1').val();

             var temp = "<li>" + v + "</li>";

             $('#u1').append(temp);        //在后面追加

             //$('#u1').prepend(temp);        //在前面追加

             //$('#u1').after(temp);        //在同级后面

             //$('#u1').before(temp);        //在同级前面

         });

         $('#a2').click(function () {

             var index = $('#t1').val();

             $('#u1 li').eq(index).remove();

             //$('#u1 li').eq(index).empty();

         })

         $('#a3').click(function () {

             var index = $('#t1').val();

             var v = $('#u1 li').eq(index).clone();

             $('#u1').append(v);

         })

     </script>

 </body>

 </html>

添加

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .container{

             padding: 80px;

             border: 1px solid #dddddd;

         }

         .item{

             position: relative;

             width: 40px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

      <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.item').click(function () {

             addElement(this);

         });

         function addElement(self) {

             var fontSize = 15;

             var top = 0;

             var right = 0;

             var opacity = 1;

             var tag = document.createElement('span');

             $(tag).text('+1');

             $(tag).css('color','green');

             $(tag).css('position','absolute');

             $(tag).css('fontSize',fontSize + "px");

             $(tag).css('top',top + "px");

             $(tag).css('right',right + "px");

             $(tag).css('opacity',opacity);

             $(self).append(tag);

             var obj = setInterval(function () {

                 fontSize = fontSize + 5;

                 top = top - 5;

                 right = right - 5;

                 opacity = opacity - 0.2;

                 $(tag).css('fontSize',fontSize + "px");

                 $(tag).css('top',top + "px");

                 $(tag).css('right',right + "px");

                 $(tag).css('opacity',opacity);

                 if(opacity<0){

                     clearInterval(obj);

                     $(tag).remove();

                 }

             },100);

         }

     </script>

 </body>

 </html>

点赞

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="height: 100px; width: 100px;overflow: auto">

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>

     </div>

     <div style="height: 1000px;"></div>

     <script src="jquery-1.12.4.js"></script>

 </body>

 </html>

返回顶部

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input id="t1" type="text" />

     <input id="a1" type="button" value="添加"/>

     <input id="a2" type="button" value="删除"/>

     <input id="a3" type="button" value="复制"/>

     <ul id="u1">

         <li>1</li>

         <li>2</li>

     </ul>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('#a1').click(function () {

             var v = $('#t1').val();

             var temp = "<li>" + v + "</li>";

             $('#u1').append(temp);        //在后面追加

             //$('#u1').prepend(temp);        //在前面追加

             //$('#u1').after(temp);        //在同级后面

             //$('#u1').before(temp);        //在同级前面

         });

         $('#a2').click(function () {

             var index = $('#t1').val();

             $('#u1 li').eq(index).remove();

             //$('#u1 li').eq(index).empty();

         })

         $('#a3').click(function () {

             var index = $('#t1').val();

             var v = $('#u1 li').eq(index).clone();

             $('#u1').append(v);

         })

         $('ul').delegate('li','click',function () {

             var v = $(this).text();

             alert(v);

         })

     </script>

 </body>

 </html>

添加2

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <!--先执行自己绑定的事件，然后跳转-->

     <a onclick="Clickon" href="http://www.baidu.com">百度</a>

     只执行绑定的事件，不跳转

     <a onclick="return Clickon" href="http://www.baidu.com">百度</a>

     <a id="i1" onclick="return Clickon" href="http://www.baidu.com">百度</a>

     <script src="jquery-1.12.4.js"></script>

     <script>

         function Clickon() {

             alert(123);

             return false;

         }

         $('#i1').click(function () {

             alert(456);

             return false;

         })

     </script>

 </body>

 </html>

事件提交顺序

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .error{

             color: red;

         }

     </style>

 </head>

 <body>

     <form id="f1" action="s5开关功能.html" method="POST">

         <div><input name="n1" type="text" /></div>

         <div><input name="n2" type="password" /></div>

         <div><input name="n3" type="text" /></div>

         <div><input name="n4" type="text" /></div>

         <div><input name="n5" type="text" /></div>

         <input type="submit" value="提交" />

     </form>

     <script src="jquery-1.12.4.js"></script>

     <script>

         //当页面框架加载完成后自动执行

         $(function () {});

         //当页面所有元素完全加载完毕后执行

         $(':submit').click(function () {

             var flag = true;

             $('.error').remove();

             $('f1').find('input[type="text"],input[type="password"]').each(function () {

                 var v = $(this).val();

                 if(v.length <= 0){

                     flag = false;

                     var tag = document.createElement('span');

                     tag.className = "error";

                     tag.innerHTML = "必填";

                     $(this).after(tag);

                     //return false;

                 }

             })

             /*这是对于表单中只含有一个input标签时

             var v = $(this).prev().val();

             if(v.length > 0){

                 return true;

             }else{

                 alert("请输入内容");

                 return false;

             }*/

         })

     </script>

 </body>

 </html>

表单验证

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <script src="jquery-1.12.4.js"></script>

     <script>

         //第一种扩展方式

         $.extend({

             'kanghui':function(){

                 return 'shuaige';

             }

         });

         var v = $.kanghui();

         alert(v);

         //第二种扩展方式

         $.fn.extend({

             'kanghui':function () {

                 return 'shuaige'

             }

         });

         var v = $('#i1').kanghui();

         alert(v);

     </script>

 </body>

 </html>

jQuery扩展

4 小结

一入前端深似海，不过确实挺好玩，也不算难。但是想和做事两码事。

很多事情不是想象的那么简单还是要做好计划，按部就班，有条不紊。

调节好自己吧~不能一蹶不振!

5 推荐

推荐1：https://www.cnblogs.com/hq-blog/p/8590275.html

推荐2：https://www.cnblogs.com/WSX1994/p/9115048.html

写博客其实并非易事！

我是尾巴~

本次推荐：http://jquery.cuishifeng.cn/index.html

详细请看这里！

虽不才，才要坚持~

相关文章