首页 > 代码库 > jQuery示例

jQuery示例

2024-08-11 20:38:53   218人阅读

jQuery扩展

1、什么是jQuery的扩展

首先要了解下，python中给咱们提供和很多现成的模块，但是他的模块够用吗？不够用那怎么办？导入第三方的模块，使用现成的模块操作快捷 方便！

http://www.php100.com/manual/jquery/，中有一个叫做“插件机制”：

jQuery.fn.extend(object)

jQuery.extend(object)

 

2、jQuery.extend(object)

html代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>shuaige</title></head><body>    <script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>    <!--这里必须优先导入jQuery原生的js，在导入扩展的jQuery-->    <script type="text/javascript" src="http://www.mamicode.com/extends.js"></script>    <script>        console.log($.luotianshuai())    </script></body></html>

jQuery代码如下：

/** * Created by luotim on 16/2/28. *///扩展使用自执行函数来写,逼格比较高点(function (arg) {    arg.extend({        ‘luotianshuai‘:function (){            return 123;        },        ‘login‘:function(){}  //他的代码是以字典形式存储的扩展jQuery    })})(jQuery);//jQuery为传进去的函数他的方程式:(function (arg) {})();第一个括号为函数,第二个括号内存储参数

3、jQuery.fn.extend(object)

jQuery.fn.extend(object) 这个方法和jQuery.extend(object)的区别就是，jQuery.fn.extend(object)可以传入搜索参数

jQuery.fn.extend({  check: function() {    return this.each(function() { this.checked = true; });  },  uncheck: function() {    return this.each(function() { this.checked = false; });  }});

结果：

$("input[type=checkbox]").check();$("input[type=radio]").uncheck();

表单验证

代码如下：

login.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        .item{            width: 250px;            height: 60px;            position: relative;        }        .item input{            width: 200px;        }        .item span{            position: absolute;            top: 20px;            left: 0px;            font-size: 8px;            background-color: indianred;            color: white;            display: inline-block;            width: 200px;        }    </style></head><body>    <div>        <form id="form1">            <div class="item">                <!--min-len 代表你输入的长度不能小于6-->                <!--require=true  代表只有require=true才进行判断，否则可以为空-->                <a>用户<input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/></a>            </div>            <div class="item">                <a>密码<input  class="c1" type="password" name="pwd" label="密码"/></a>            </div>            <div class="item">                <a>手机</a>                <input  class="c1" type="text" name="phone" label="手机" require="true" phone="true"/>            </div>            <input type="submit" value="http://www.mamicode.com/提交" />        </form>    </div>    <script src="http://www.mamicode.com/jquery-1.12.4.js"></script>    <script src="http://www.mamicode.com/guize.js"></script>    <script>        $(function(){            $.valid(‘#form1‘);        });    </script></body></html>
 extend.js
/** * Created by alex on 2016/8/28. */(function(jq){    function ErrorMessage(inp,message){        var tag = document.createElement(‘span‘);        tag.innerText = message;        inp.after(tag);    }    jq.extend({        valid:function(form){            // #form1 $(‘#form1‘)            jq(form).find(‘:submit‘).click(function(){                jq(form).find(‘.item span‘).remove();                var flag = true;                jq(form).find(‘:text,:password‘).each(function(){                    var require = $(this).attr(‘require‘);                    if(require){                        var val = $(this).val();                        if(val.length<=0){                            var label = $(this).attr(‘label‘);                            ErrorMessage($(this),label + "不能为空");                            flag = false;                            return false;                        }                        var minLen = $(this).attr(‘min-len‘);                        if(minLen){                            var minLenInt = parseInt(minLen);                            if(val.length<minLenInt){                                var label = $(this).attr(‘label‘);                                ErrorMessage($(this),label + "长度最小为"+ minLen);                                flag = false;                                return false;                            }                            //json.stringify()                            //JSON.parse()                        }                        var phone = $(this).attr(‘phone‘);                        if(phone){                            // 用户输入内容是否是手机格式                            var phoneReg = /^1[3|5|8]\d{9}$/;                            if(!phoneReg.test(val)){                                var label = $(this).attr(‘label‘);                                ErrorMessage($(this),label + "格式错误");                                flag = false;                                return false;                            }                        }                        // 1、html自定义标签属性                        // 增加验证规则+错误提示                    }                    // 每一个元素执行次匿名函数                    // this                    //console.log(this,$(this));                    /*                    var val = $(this).val();                    if(val.length<=0){                        var label = $(this).attr(‘label‘);                        var tag = document.createElement(‘span‘);                        tag.innerText = label + "不能为空";                        $(this).after(tag);                        flag = false;                        return false;                    }                    */                });                return flag;            });        }    });})(jQuery);
 效果图：
技术分享
正则表达式
1、定义正则表达式
  • /.../  用于定义正则表达式
  • /.../g 表示全局匹配
  • /.../i 表示不区分大小写
  • /.../m 表示多行匹配
    JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
    1
    2
    3
    4
    5
    var pattern = /^Java\w*/gm;
    var text = "JavaScript is more fun than \nJavaEE or JavaBeans!";
    result = pattern.exec(text)
    result = pattern.exec(text)
    result = pattern.exec(text)
注：定义正则表达式也可以  reg= new RegExp()
2、匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
  • test(string)     检查字符串中是否和正则匹配
    1
    2
    3
    4
    5
    n = ‘uui99sdf‘
    reg = /\d+/
    reg.test(n)  ---> true
     
    # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
  • exec(string)    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
     
    非全局模式
        获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配）
        var pattern = /\bJava\w*\b/;
        var text = "JavaScript is more fun than Java or JavaBeans!";
        result = pattern.exec(text)
     
        var pattern = /\b(Java)\w*\b/;
        var text = "JavaScript is more fun than Java or JavaBeans!";
        result = pattern.exec(text)
     
    全局模式
        需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
        var pattern = /\bJava\w*\b/g;
        var text = "JavaScript is more fun than Java or JavaBeans!";
        result = pattern.exec(text)
     
        var pattern = /\b(Java)\w*\b/g;
        var text = "JavaScript is more fun than Java or JavaBeans!";
        result = pattern.exec(text)
3、字符串中相关方法
1
2
3
4
5
6
7
8
obj.search(regexp)                   获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效)
obj.match(regexp)                    获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部
obj.replace(regexp, replacement)     替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                        $数字：匹配的第n个组内容；
                                          $&：当前匹配的内容；
                                          $`：位于匹配子串左侧的文本；
                                          $‘：位于匹配子串右侧的文本
                                          $$：直接量$符号
示例二：滚动菜单
代码：
home.html
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        body{            margin: 0px;        }        img {            border: 0;        }        ul{            padding: 0;            margin: 0;            list-style: none;        }        .clearfix:after {            content: ".";            display: block;            height: 0;            clear: both;            visibility: hidden;        }        .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);        }        .pg-header .logo{            float: left;            padding:5px 10px 5px 0px;        }        .pg-header .logo img{            vertical-align: middle;            width: 110px;            height: 40px;        }        .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{        }        .pg-body .catalog{            position: absolute;            top:60px;            width: 200px;            background-color: #fafafa;            bottom: 0px;        }        .pg-body .catalog.fixed{            position: fixed;            top:10px;        }        .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="http://www.mamicode.com/#">                    <img src="">                </a>            </div>            <div class="nav">                <ul>                    <li>                        <a  href="http://www.mamicode.com/#">首页</a>                    </li>                    <li>                        <a  href="http://www.mamicode.com/#">功能一</a>                    </li>                    <li>                        <a  href="http://www.mamicode.com/#">功能二</a>                    </li>                </ul>            </div>        </div>    </div>    	<div class="pg-body">        <div class="wrap">            <div class="catalog">                <div class="catalog-item" auto-to="function1"><a>第1张</a></div>                <div class="catalog-item" auto-to="function2"><a>第2张</a></div>                <div class="catalog-item" auto-to="function3"><a>第3张</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 menu="function3" class="section" style=‘background-color:red;‘>                    <h1>第三章</h1>                </div>            </div>        </div>    </div>    <script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.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){						// $(this) 当前内容标签						/*						var target = $(this).attr(‘menu‘);						$(‘.catalog‘).find(‘div[auto-to="‘+target+‘"]‘).addClass(‘active‘).siblings().removeClass(‘active‘);						return false;						*/						                        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>
 效果图：
技术分享   
前端插件：
    fontawsome
    
    easyui    
    jqueryui
    bootstrap
    -- 引入css
    
    -- 引入jQuery（2.x，1.12）
    -- 引入js
    -- bootstrap模版

    bxslider
    jquery.lazyload
    ==> 以后可以用模版
jQuery示例






























        

            
                
                  
                
                

                    联系

                    我们