• jQuery示例

    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="jquery-1.8.2.min.js"></script>
    <!--这里必须优先导入jQuery原生的js，在导入扩展的jQuery-->
    <script type="text/javascript" src="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{
             250px;
            height: 60px;
            position: relative;
        }
        .item input{
             200px;
        }
        .item span{
            position: absolute;
            top: 20px;
            left: 0px;
            font-size: 8px;
            background-color: indianred;
            color: white;
            display: inline-block;
             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="提交" />
        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>
    <script src="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 = /^Javaw*/gm;
      

      var text = "JavaScript is more fun than 
JavaEE 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 = /Javaw*/;
      

          var text = "JavaScript is more fun than Java or JavaBeans!";
      

          result = pattern.exec(text)
      

       
      

          var pattern = /(Java)w*/;
      

          var text = "JavaScript is more fun than Java or JavaBeans!";
      

          result = pattern.exec(text)
      

       
      

      全局模式
      

          需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕
      

          var pattern = /Javaw*/g;
      

          var text = "JavaScript is more fun than Java or JavaBeans!";
      

          result = pattern.exec(text)
      

       
      

          var pattern = /(Java)w*/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{
             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;
             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;
             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;
             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="">
                </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>第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="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
        ==> 以后可以用模版
    

    
    
          
    • 

          
  • 

            相关阅读:
    
            
              BZOJ2337 [HNOI2011]XOR和路径
                
    「学习笔记」3.31代码学习
                
    uva live 12846 A Daisy Puzzle Game
                
    Cannot use ImageField because Pillow is not installed
                
    Android点击Button水波纹效果
                
    hdu 1241 Oil Deposits
                
    c++ 字符输入读取
                
    clutter recoder
                
    C/C++获取数组长度
                
    vector array and normal stanard array
                
                    
          
    • 
          
  • 
            原文地址：https://www.cnblogs.com/Z-style/p/5836126.html
          
    • 

        

      



      
      

        

        

      

    

  


  

  
Copyright © 2020-2023 
  润新知