前端技巧小结
一、 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">
<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=" 请输入关键字" 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之前
}
};
