前端开发平时笔记记录

程序员文章站 2022-03-03 07:53:41

...

在前端开发过程中，要善于观察和抽象。尤其是在项目前期，不要着急写代码，一定观察项目的原型图或者设计稿，想想哪些部分是可以拆分成可以复用的公共组件的。这样做能让你后面的工作，事半功倍。

37、jQuery暂停计时函数

<script type="text/javascript">
        $(function () {
            //iCount获取setInterval句柄
            var iCount = setInterval(GetBack, 3000);
            function GetBack() {
                alert("aa");               
            }
            //id为cOk绑定点击事件
            $("#cOk").click(function (e) {
                //清除setInterval
                clearInterval(iCount);
            });
 
        });
    </script>

36、jquery动效网站：jquery之家，插件库

35、输入框监听

// 输入框监听
            $("#keyWords").on('input propertychange',function (e) {
                var inputStrs = $(this).val();
                /* $("#appendTagList") */
            });

34、div背景色切换

$(function(){
        $(".box").click(function(){
            $(this).toggleClass('red');
        })
})

33、Html Table 合并单元格

32、jquery-读取form表单中的所有数据列表

var d = {};
    var t = $('form').serializeArray();
    $.each(t, function() {
      d[this.name] = this.value;
    });
    alert(JSON.stringify(d));

31、jQuery中国省市区地址三级联动插件Distpicker
30、刮刮乐插件

29、js对日期加减指定天、时、分、秒
28、无限滚动
27、Clipboard.js : 移动端浏览器实现网页内容复制

26、选中移除事件监听

$('a').mouseover(function(){$('div').hide();}).mouseout(function(){$('div').hide()});

25、方方正正正方形

.personalcenter .head .avatorBox {
    position: relative;
    width: 20%;
    height: 0;
    padding-top: 20%;
    border-radius: 50%;
    border: 2px solid #CFD0D1;
}

.personalcenter .head .avatorBox .avatorImg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
}

24、进度条斜线斜线斜线样式

width: 0;
  height: 100%;
  border-radius:22px;
  background-image:-webkit-linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-image:-moz-linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-image:linear-gradient(-45deg, rgb(240, 152, 38), rgb(240, 152, 38) 25%, rgb(251, 194, 100) 25%, rgb(251, 194, 100) 50%, rgb(240, 152, 38) 50%, rgb(240, 152, 38) 75%, rgb(251, 194, 100) 75%, rgb(251, 194, 100));
background-size:20px 20px;

23、HTML/CSS 自定义开关按钮控件(switch)样式
22、给页面布局完成之后添加的控件添加点击事件的方法：

 $("body").on("click", "deleteBtn", function(){
          // 点击需要处理的事件
});

21、函数式编程

// 注意所有函数方法需要在这里调用
$(function(){
        wxObject.init();
        orderInfo.init();
        orderInfo.initListener();
       orderInfo.computerPrice();
});

// 函数方法实现
var orderInfo = {
        init: function(){
                // 初始化需要调用的方法实现写在这里
       };

        initListener：function(){
              // 初始化监听的方法写到这里
        };
        computerPrice: function(){
            // 其他方法写到这里
      };
};

20、拼接html

// 第一种方式
//添加一行
    $('.addbtn').click(function () {
        var table1 = $("#propertyTable");
        var tableBody = $("#propertyTbody")
        var row = $("<tr></tr>");
        var td_1 = $("<td></td>");
        var td_2 = $("<td></td>");
        var td_3 = $("<td></td>");

        td_1.append($("<input type='text' class='propertyText' name='key'/>"));
        td_2.append($("<input  type='text' class='propertyText' name='value'/>"));
        td_3.append($("<button type='button' class='btn btn-default btn-lg adminButton floatr deleteBtn'>删除</button>"));
        row.append(td_1);
        row.append(td_2);
        row.append(td_3);
        table1.append(row);
    });

    <!--删除一行-->
    $("body").on("click",".deleteBtn",function () {
        $(this).parents('tr').remove();
    });

// 第二种方式
function getOrderHtml(user) {
        var html = [];
        html.push('<li class="clearFix">');

        html.push('<div>');
        if (user.avatar == "") {
            if (user.phone = "") {
                html
                        .push('![用户头像](http://upload-images.jianshu.io/upload_images/1076687-2632fe6ad93e86fc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');
            } else {
                html
                        .push('![用户头像](http://upload-images.jianshu.io/upload_images/1076687-45dca957840b3f30.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');
            }

        } else {
            html.push('[站外图片上传中……(3)]');
        }

        html.push('</div>');

        html.push('<ul>');
        if (user.nickname == "") {
            html.push('<li>客户：【匿名】</li>');
        } else {
            html.push('<li>客户：' + user.nickname + '</li>');
        }

        html.push('<li>&nbsp</li>');
        html.push('<li>手机：' + user.phone + '</li>');
        html.push('<li>访问IP：******</li>');
        html.push('<li>地址：北京市*****</li>');
        html.push('<li>注册时间：' + new Date(user.createTime).format("yyyy-MM-dd")
                + ' </li>');
        html.push('</ul>');

        html.push('</li>');

        return html.join("");
    }

19、控件隐藏显示

jQuery.show();
jQuery.hide();

18、水平垂直居中

 body { 
display: flex; align-items: center; /*定义body的元素垂直居中*/
 justify-content: center; /*定义body的里的元素水平居中*/ 
}

17、高度为0时的解决方案

.article-item:after {   
 content:"";    
display: block;    
clear: both;
}

16、滑动到div滚动条最低端

// 清空输入框$("#inputMessage").val("");// 滚动到最低端$('html, body, #content, #chattingView').animate({    scrollTop: chattingView[0].scrollHeight}, 500);

15、页面复制粘贴属性设置使用 CSS user-select 控制选择范围

-webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;

14、修改控件html内容（jQuery）

$("#registerBtn").html("请检查手机号！");

13、jquery一个div怎么获得焦点和失去焦点

// 获得焦点
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});

// 失去焦点
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});

12、用JS获取方法中包含的所有参数
【JS获取URL中参数值（QueryString）的4种方法分享】

function getArgs(func) {    
// 先用正则匹配,取得符合参数模式的字符串.   
 // 第一个分组是这个: ([^)]*) 非右括号的任意字符   
var args = func.toString().match(/function\s.*?\(([^)]*)\)/)[1];    
// 用逗号来分隔参数(arguments string).    
return args.split(",").map(function(arg) {
        // 去除注释(inline comments)以及空格        
return arg.replace(/\/\*.*\*\//, "").trim();    
}).filter(function(arg) {        
// 确保没有 undefined.        
return arg;   
 });
}

function myCustomFn(arg1, arg2,arg3) {    
// ...
}

// ["arg1", "arg2", "arg3"]
console.log(getArgs(myCustomFn));

11、页面出现之后新增的div添加点击事件

$("body").on("click", ".address", function () {    $("#addressReceiptDiv").children().find(".address").removeClass("radioboxChecked");    
$(this).addClass("radioboxChecked");    
selectAddress = $(this);
});

10、
一、CSS字间距、字与字之间间隔距离 - TOP
使用CSS单词：letter-spacing对应教程：http://www.divcss5.com/rumen/r75.shtml
二、HTML空格代码输入 - TOP
使用HTML代码字符：“ ”对应html空格字符代码输入与实现教程：http://www.divcss5.com/html/h389.shtml
三、CSS段首空格效果 - TOP
使用CSS单词：text-indent段落空格效果真正名字叫，CSS缩进又叫CSS段首文字缩进，缩进的字符多少可以通过CSS设置，可设置2个中文字宽度空格效果，可宽可窄对应教程：http://www.divcss5.com/rumen/r400.shtml

9、获取自定义data-属性

.data( key, value )
.data( obj )
.data( key )
.data()

8、div滑动到顶部、底部

 $(".pop-content-content").scroll(function(event){
        var scrollTop = $(this).scrollTop();
                var ks_area = $(this).innerHeight();
                var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)  
                nScrollHight = $(this)[0].scrollHeight;

                if(scrollTop + ks_area >= nScrollHight-50){
                    console.log("到底了");
                } else if($(this).scrollTop() <=0){
                    console.log("到顶部了");
                }
            });

7、input输入框text限制输入字符串长度

function len(s){
  s=String(s);
  return s.length+(s.match(/[^\x00-\xff]/g) || "").length;
}
function limit(obj,limit){
  var val=obj.value;
  if(len(val)>limit){
    val=val.substring(0,limit);
    while (len(val)>limit){
      val=val.substring(0,val.length-1);
    };
    obj.value=val;
  }
}
$(document).ready(function(){
  $("#txt").keyup(function(){
    limit(this,10);
  })
})

$(window).on('scroll',function(){
             if(scrollTop() + windowHeight() >= (documentHeight() - 50/*滚动响应区域高度取50px*/)){
                console.log("滚动到页面底部啊啊啊啊啊啊啊啊啊啊啊啊啊啊");
             }
            });
        // 获取页面顶部被卷起来的高度
        function scrollTop(){
         return Math.max(
          //chrome
          document.body.scrollTop,
          //firefox/IE
          document.documentElement.scrollTop);
        }
        // 获取页面文档的总高度
        function documentHeight(){
         //现代浏览器（IE9+和其他浏览器）和IE8的document.body.scrollHeight和document.documentElement.scrollHeight都可以
         return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        }
        // 获取页面浏览器视口的高度
        function windowHeight(){
             return (document.compatMode == "CSS1Compat")?
             document.documentElement.clientHeight:
             document.body.clientHeight;
            }

5、滚动到底部加载更多

// 监听滚动条
        $("body").scroll(BottomJumpPage);

        $("body").load(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            /* 判断页面初始时是否有数据 */
            var customListHeight = $("#orderContentList").height();
            if (customListHeight == 0 || customListHeight < windowHeight-120) {
                $(".page__bd").hide();
            }
        });
        // 判断是否到达底部
        function BottomJumpPage() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            console.dir("scrollTop" + scrollTop);
            console.dir(scrollHeight);
            console.dir(windowHeight);
            if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
                console.dir("我到底部了"); 

                var pageIndex = parseInt($("#pageIndex").val()) + 1;
                
                /* for(var i=0; i<10; i++) {
                    var html = getOrderHtml();
                    $("#orderContentList_table").append(html);
                } */
                 var url=window.location.search;
                    if(url ==""){
                            url = "/admin/order/customer/list?pageIndex="+pageIndex;
                    }else{
                         if(url.indexOf("pageIndex")!=-1){
                             var a = url.split("pageIndex");
                                url  = "/admin/order/customer/list"+a[0]+"pageIndex="+pageIndex;
                            
                        }else{
                            url = "/admin/order/customer/list"+url+"&pageIndex="+pageIndex;
                        }
                    }
                 $.getJSON(url,function(data) {
                            /* if (data.list.length < 15) {
                                $(".page__bd").hide();
                            } else {
                                $(".page__bd").show();
                            } */
                            $.each(data.data.models, function(index, user) {
/*                              alert(data.data.pageIndex);
 */                             console.log("第几次加载"+pageIndex);
                                $("#pageIndex").val(data.data.pageIndex);
                                var html = getOrderHtml(user);
                                $("#orderContentList_table").append(html);
                            });
                        });
            }

4.时间戳与时间字符串互转

3.webpack使用优化（基本篇）

设置div对齐方式

vertical-align: top   // 顶部对齐

消除span直接的空白间隙
设置父试图的font-size:0 再依次设置子元素的font-size

上一篇： pyqt在Pycharm中配置

下一篇：解决pycharm在debug console中输入中文UnicodeEncodeError的问题

前端开发平时笔记记录

记录python面向对象开发笔记

webpack4.x笔记-配置基本的前端开发环境（一）

[笔记]记录原开发工作在base命名空间下扩展的属性与方法

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

[书籍精读]《移动WEB前端高级开发实践》精读笔记分享

个人项目开发记录---前端（vue3.0+elementui）之项目搭建及推送远程库

Java学习笔记-全栈-web开发-22-后端程序员用的前端框架——layUI

Spring前端开发笔记(HTML+jQuery+Ajax)【一】

大前端【2-1笔记】开发脚手架及封装自动化构建工作流