前端技巧小结
2016-05-30 17:23
459 查看
一、 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
2.有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个jquery对象
其次，text属性中有两个方法，一个有参，一个无参
1. 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
2.有参text（val）：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).返回一个jquery对象
最后，val（）属性中也有两个方法，一个有参，一个无参。
1.无参val（）：获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
返回的是一个String、 array
结果:[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]
2.有参val（val）：设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为check,select,radio元件赋值,返回一个jquery对象
三、关于angular问题
当你的页面出现不能通过ng-click、ng-model等方法从后台获取到数据并且更新到view层时，可以在你所对应的函数中添加$scope.apply()，该方法会实时监听你的view层数据变化，并将数据渲染到view层，缺点是捕获所有的异常并且不会再抛出来，下面是最近根据百度地图api做的关键字检索功能例子，其中切换本地地址如果不用$scope.apply()就前台就不会实时刷新界面；
三、css中calc()的使用：
calc()语法非常简单，就像我们小时候学加 （+）、减（-）、乘（*）、除（/）一样，使用数学表达式来表示：
使用“+”、“-”、“*” 和 “/”四则运算；
可以使用百分比、px、em、rem等单位；
可以混合使用各种单位进行计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
calc()只能用于css中的width和height属性，并不能用于position来定位，当然如果有一天能用calc()来改变定位中的top、left等等，那将会是更大的惊喜！
四、再记一下css中文字超出用省略号显示的样式设置：
五、sort方法：
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 |
| html页面代码：<div></div> jquery代码：$("div").html("<p>Nice to meet you</p>"); 结果：[ <div><p> Nice to meet you</p></div> ] |
1. 无参text（）：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个String
| 例子： html页面代码：<p><b>Hello</b> fine</p> <p>Thank you!</p> jquery代码：$("p").text(); 结果：HellofineThankyou! |
| html页面代码：<p>Test Paragraph.</p> jquery代码：$("p").text("<b>Some</b> new text."); 结果:[ <p><b>Some</b> new text.</p> ] |
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(", ")); |
| html页面代码： <input type="text"/> jquery代码：$("input").val("hello world!"); 结果：hello world! |
当你的页面出现不能通过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之前
}
};
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery筛选选择器之内容筛选
- bootstrap如何把表单select input button弄在一行
- javascript 规范
- 《剑指offer》字符串中的字符替换
- Window下开发React-Native Android步骤
- html5默认情况下图片底部会有3-5px边距解决办法
- jquery中的cookie使用
- js 闭包的理解
- React Native 环境搭建
- JSON 被转义的字符引发BUG问题
- 移动端jQuery修正Web页面滑动时div问题的两则实例
- JS学习20（高级技巧）
- JQuery中的基本筛选选择器
- 再谈json
- 【JavaScript】跨源资源共享CORS和其他跨域技术（Comet、JSONP、SSE、Web Sockets）
- JS中Null与Undefined的区别
- 编译caffe的dll库
- css position属性
- JSON.parse()和JSON.stringify()使用介绍
- JSON工具类总结