• 前端技巧小结


    一、 JSON.parse()和JSON.stringify()的区别:

    1.parse 用于从一个字符串中解析出json 对象。例如

    var str='{"name":"cpf","age":"23"}'

    经 JSON.parse(str) 得到:

    Object: age:"23"

                name:"cpf"

                _proto_:Object

    ps:单引号写在{}外,每个属性都必须双引号,否则会抛出异常

    2.stringify用于从一个对象解析出字符串,例如

    var a={a:1,b:2}

    经 JSON.stringify(a)得到:

    “{“a”:1,"b":2}”

    二、jquery中html()、text()、val()方法的区别:

    1. .html()用为读取和修改元素的HTML标签
    2. .text()用来读取或修改元素的纯文本内容
    3. .val()用来读取或修改表单元素的value值。

    这三个方法功能上的对比

    1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
    2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。
    3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
     

    例子:<div id="div">

        <p>here is a paragram</p>
        <div>here is a big DIV</div>
    </div>

    function showVal()
    {
       var div = $("#div");
        alert("showVal():  "+div.val());
    显示为空
    }
    function showHtml()
    {

       var div = $("#div");
       alert("showHtml():  "+div.html());
    显示为:
    <p>here is a paragram</p>
     <div>here is a big DIV</div>
    }
    function showText()
    {var div = $("#div");
        alert("showText():  "+div.text());
    显示为:
    here is a paragram
    here is a big DIV
        }
    总结:val()---一般 用在input上,而不用在其他元素,用来获取input或者是select的值
    html()和text()可用在多种元素上,但是html()相当于依据源代码返回,也就是在返回的内容中会包含各种tag,而text()则相当于是依据页面显示返回,返回的内容是出去各种tag之间的内容

    html属性中有两个方法,一个有参,一个无参

           1. 无参html():取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档,返回的是一个String

        例子:

              html页面代码:<div><p>Hello</p></div>

               jquery代码:$("div").html();

              结果:Hello

         2.有参html(val):设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象

             html页面代码:<div></div>

            jquery代码:$("div").html("<p>Nice to meet you</p>");

            结果:[ <div><p> Nice to meet you</p></div> ]      

    其次,text属性中有两个方法,一个有参,一个无参

            1. 无参text():取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String

             例子:

                html页面代码:<p><b>Hello</b> fine</p>

                                      <p>Thank you!</p>

               jquery代码:$("p").text();

              结果:HellofineThankyou!

      

             2.有参text(val):设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象

               html页面代码:<p>Test Paragraph.</p>

             jquery代码:$("p").text("<b>Some</b> new text.");

              结果:[ <p><b>Some</b> new text.</p> ]

    最后,val()属性中也有两个方法,一个有参,一个无参。

           1.无参val():获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

         返回的是一个String、 array

           结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

    例子: //多选下拉框,$('#multiple').val()返回数组

    //$("#multiple").val().join(", "))以,连接数组中每个值

    html页面代码 :

    <p></p><br/>
    <select id="single">
      <option>Single</option>
      <option>Single2</option>
    </select>
    <select id="multiple" multiple="multiple">
      <option selected="selected">Multiple</option>
      <option>Multiple2</option>
      <option selected="selected">Multiple3</option>
    </select>

              jquery代码:

    ("p").append( "<b>Single:</b> "   + $("#single").val() + " <b>Multiple:</b> " + $("#multiple").val().join(", "));

              2.有参val(val):设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象   

       html页面代码:

             <input type="text"/>

             jquery代码:$("input").val("hello world!");

              结果:hello world!

    三、关于angular问题

    当你的页面出现不能通过ng-click、ng-model等方法从后台获取到数据并且更新到view层时,可以在你所对应的函数中添加$scope.apply(),该方法会实时监听你的view层数据变化,并将数据渲染到view层,缺点是捕获所有的异常并且不会再抛出来,下面是最近根据百度地图api做的关键字检索功能例子,其中切换本地地址如果不用$scope.apply()就前台就不会实时刷新界面;

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="yes" name="apple-touch-fullscreen" />
        <meta name="format-detection" content="telephone=no,email=no" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="css/ionic.min.css" rel="stylesheet"    />
        <link href="css/baidunew.css" rel="stylesheet"    />
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=FB33d26d18536d1ee0712c4f01bf2123&s=1"></script>
        <title>地址切换</title>
    </head>
    
    <body ng-app="baiduSearch" ng-controller="baiduSearch_Controller">
        <div id="r-result" class="pr">
            <div class="pa imputWrap">
                <input type="text" id="suggestId" size="20" value="" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;请输入关键字" class="searchIpt" />
                <img src="image/icon_search.png" />
            </div>
        </div>
        <div class="currentAddress">
            <div class="AddressT">当前地址</div>
            <div class="row">
                <div class="col col-75 currentAddressD">{{currentAddress}}</div>
                <div class="col col-25 currentAddressGdp" ng-click="resetLocation()"><img src="image/icon_locationg.png" alt="重新定位" />
                    <div id="allmap" style="display:none;"></div>
                </div>
            </div>
        </div>
        <div class="fujinAddress">
            <div class="AddressT">附近地址</div>
            <div class="fujinAddressDetail" ng-click="getAddress($index)" ng-repeat="addressDes in address">
                <p><img src="image/icon_location.png" /><span>{{addressDes.business}}</span></p>
            </div>
        </div>
    </body>
    
    </html>
    <script src="../lib/ionic/js/ionic.bundle.min.js" type="text/javascript"></script>
    <script src="../lib/kui/jquery.min.js" type="text/javascript"></script>
    <script src="../lib/boot-config.js" type="text/javascript"></script>
    <script type="text/javascript" src="../lib/base.service.js"></script>
    <script type="text/javascript">
    angular.module("baiduSearch", ["ionic", "base.service"]).
    controller("baiduSearch_Controller", function($scope, baseService, $ionicLoading) {
        var valueFromNativeAll = {};
        $scope.currentAddress = decodeURIComponent(Request('currentAddress'));
        // $scope.currentAddress = "南京市";
        $scope.$watch('$viewContentLoaded', function() {
            $scope.address = [];
            var ac = new BMap.Autocomplete( //建立一个自动完成的对象
                {
                    "input": "suggestId",
                    "onSearchComplete": function() {
                        var result = ac.getResults();
                        $scope.address = result.wr;
                        $scope.$apply();
                        ac.hide();
                    }
                });
    
    
            baseService.getNativeData().then(function(result) {
                valueFromNativeAll = result; // 得到Native返回的数据,并转换成JSON格式
                // $scope.currentAddress = valueFromNativeAll.address;
            });
    
    
        });
    
        $scope.resetLocation = function() {
            $ionicLoading.show({
                template: '重新定位中...'
            });
    
            setTimeout(function() {
                $ionicLoading.hide();
            }, 3000);
    
            sendAction({
                "action": "startLocation"
            });
        };
    
        window.locationFromNative = function(result) {
            $ionicLoading.hide();
            $scope.currentAddress = result.address;
            setTimeout(function() {
                sendAction({
                    "action": "isRefresh",
                    "isRefreshPageIndexDic": [1]
                });  
            }, 0);
        };
    
        $scope.getAddress = function(index) {
            var keyword = $scope.address[index].city + $scope.address[index].district + $scope.address[index].business;
            console.log(keyword);
            var map = new BMap.Map();
            var localSearch = new BMap.LocalSearch(map);  
            localSearch.setSearchCompleteCallback(function(searchResult) {    
                var poi = searchResult.getPoi(0);
                //console.log(poi);
    
                localStorage.setItem('location', JSON.stringify({
                    'address': keyword,
                    'gps': poi.point.lat + ',' + poi.point.lng,
                }));
    
                sendAction({
                    "action": "isRefresh",
                    "isRefreshPageIndexDic": [1]
                });  
    
                sendAction({
                    "action": "back"
                });  
            });  
            localSearch.search(keyword);
        };
    });
    
    //字体设置
    $(document).ready(function() {
    
        var htmlElm = $('html'),
            width = $(window).width(),
            fontSize = width * 16 / 375;
        if (fontSize == 0) {
            fontSize = 16;
        } else if (fontSize >= 30) {
            fontSize = 30;
        };
        $('html,body').css({
            fontSize: fontSize + 'px'
        });
    
    });
    </script>

     三、css中calc()的使用:

    calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

    .box {
        background: #f60;
        height: 50px;
        padding: 10px;
        border: 5px solid green;
    width: 90%;/*写给不支持calc()的浏览器*/
        width:-moz-calc(100% - (10px + 5px) * 2);
        width:-webkit-calc(100% - (10px + 5px) * 2);
        width: calc(100% - (10px + 5px) * 2);
    }

    calc()的运算规则

    calc()使用通用的数学运算规则,但是也提供更智能的功能:

    1. 使用“+”、“-”、“*” 和 “/”四则运算;
    2. 可以使用百分比、px、em、rem等单位;
    3. 可以混合使用各种单位进行计算;
    4. 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
    5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

     calc()只能用于css中的width和height属性,并不能用于position来定位,当然如果有一天能用calc()来改变定位中的top、left等等,那将会是更大的惊喜!

    四、再记一下css中文字超出用省略号显示的样式设置:

    .aaa{
      width:300px; height:22px;line-height:22px; white-space: nowrap;text-overflow:ellipsis; overflow:hidden;
    }

    五、sort方法:

    schoolList.sort(sortByDistance);//将schoolList根据schoolList中的sortByDistance参数进行数组排序
    var sortByDistance = function (a, b) { 

    if (a.schDistance < b.schDistance) { //判断a小于b
      return -1; //返回小于0的值,则排序后的数组a在b之前
    }
    else if (a.schDistance == b.schDistance) {
      return 0; //等于0,则排序后数组位置不变
    }
    else {
      return 1; //返回大于0的值,则排序后的数组b在a之前
    }
    };
  • 相关阅读:
    几个前端时间插件总结
    微信支付——退款篇
    getTime()方法在苹果系统的bug
    【转载】[JS]让表单提交返回后保持在原来提交的位置上
    【转载】 IE/Firefox每次刷新时自动检查网页更新,无需手动清空缓存的设置方法
    webstorm相关设置
    检测无标题的
    数组去重的方法
    Git 版本比较
    Git 回到过去
  • 原文地址:https://www.cnblogs.com/lxzltg/p/5535392.html
Copyright © 2020-2023  润新知