前端技巧小结

一、 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()方法的区别：

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

这三个方法功能上的对比

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的HTML内容（包括其Html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
.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页面代码：

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()使用通用的数学运算规则，但是也提供更智能的功能：

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

　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之前
} 
};