近期的js笔记,就是为了可以多看看以前不懂的地方

Posted my-susie

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了近期的js笔记,就是为了可以多看看以前不懂的地方相关的知识,希望对你有一定的参考价值。

1、
//js实现保留两位小数
function returnFloat(value) {
var value = Math.round(parseFloat(value) * 100) / 100;
var xsb = value.toString().split(".");
if (xsb.length == 1) {
value = value.toString() + ".00";
return value;
}
if (value.length > 1) {
if (xsb[1].length < 2) {
value = value.toString() + "0";
}
return value;
}
}
2、
//获取工程的全部工作的进度
function AllProjectList() {
var xhr = new XMLHttpRequest();;
var url = ‘http://10.122.84.35:8080/imp4sep/project/schedule/all?projectId=‘ + projectId + ‘&&stage=‘ + stageNumber;
xhr.open("GET", url, false);//同步方式请求
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var AllProject = xhr.responseText;
//alert(AllProject);
AllProjectInfo(AllProject);
}
};
//xmlHttp.open("GET", url, true);第三个参数为true为异步方式

3、
//js正则获取url参数值
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

4、
//封装函数记得需要return 该值;
//可设置为全局应用一个变量var tt = "";放到全局那里

5、
//js设置cookie

//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}

//获取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//js设置cookie end

6、
//js设置导航栏切换高亮
function MySelct(id) {
if (ID != id) { //点击当前id的li无变化,点击其他id的li时启动if语句
var PreSect = document.getElementById(‘Sect‘ + ID); //不是id的的为非高亮,定义非高亮的上一个id
PreSect.className = "factive"; //赋予非高亮的class
var NowSect = document.getElementById(‘Sect‘ + id); //当前id的为高亮,定义当前id
NowSect.className = "active"; //赋予高亮的class
ID = id; //把当前id赋值给ID
}
}
html代码
<ul>
<li id=‘Sect0‘ class=‘active‘ onclick=‘MySelct(0)‘>核岛</li>
<li id=‘Sect1‘ onclick=‘MySelct(1)‘ >常规岛</li>
<li id=‘Sect2‘ onclick=‘MySelct(2)‘ >冷却塔</li>
<li id=‘Sect3‘ onclick=‘MySelct(3)‘ >泵房</li>
<li id=‘Sect4‘ onclick=‘MySelct(4)‘ >BOP</li>
<li id=‘Sect5‘ onclick=‘MySelct(5)‘ >管线</li>
</ul>

7、
//去除数组里重复的元素
function unique(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) { //循环数组
if (result.indexOf(arr[i]) == -1) { //搜索是否有相同的匹配项
result.push(arr[i]); //把不相同的匹配项输进另一个数组里
}
}
return result;
}

8、toggle作用的点击效果
出错:
function SelectToggle(num) {
document.getElementById(‘SelectDirectorOption‘ + num).onclick = function () {
if (document.getElementById(‘DirectorManage‘ + num).style.display == ‘none‘) {
document.getElementById(‘DirectorManage‘ + num).style.display = ‘block‘;
} else {
document.getElementById(‘DirectorManage‘ + num).style.display = ‘none‘;
}
}
}
(出现第一次点击没效果,之后的点击可以起作用)原因:文本首先对句子做判断,样式的(display:none)不一定起作用(行内样式才是js的样式)所以第一次的判断为错的,然后返回(dispaly:none)
修改:
function SelectToggle(num) {
document.getElementById(‘SelectDirectorOption‘ + num).onclick = function () {
if (document.getElementById(‘DirectorManage‘ + num).style.display == ‘block‘) {
document.getElementById(‘DirectorManage‘ + num).style.display = ‘none‘;
} else {
document.getElementById(‘DirectorManage‘ + num).style.display = ‘block‘;
}
}
}

9、数组里多个对象
//正确
function SelectTestMultiple(count) {
var SelectMultiple = [];
for (var i = 0; i < 3; i++) {
var SelectObj = {};(正确方式)
SelectObj.userid = MultipleVal1[i];
SelectObj.name = MultipleArr1[i];
SelectObj.flag = count;
SelectMultiple.push(SelectObj);
}
return SelectMultiple;
}
//错误
function SelectTestMultiple(count) {
var SelectMultiple = [];
var SelectObj = {};(错误方式)
for (var i = 0; i < 3; i++) {
SelectObj.userid = MultipleVal1[i];
SelectObj.name = MultipleArr1[i];
SelectObj.flag = count;
SelectMultiple.push(SelectObj);
}
return SelectMultiple;
}

10.下面的代码将输出什么到控制台,为什么:
var hero = {
_name: ‘John Doe‘,
getSecretIdentity: function (){
return this._name;
}
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());
代码有什么问题,以及应该如何修复。

代码将输出:
undefined John Doe
第一个 console.log之所以输出 undefined,是因为我们正在从 hero对象提取方法,
所以调用了全局上下文中(即窗口对象)的 stoleSecretIdentity(),而在此全局上下文中, _name属性不存在。

11.时间格式转换成yyyy-MM-dd
//yyyy-MM-dd的时间格式转换
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

var date = new Date().Format("yyyy-MM-dd");\\\\

12.JS按回车键实现登录的方法
<body onkeydown = "on_return();"></body>
function on_return (){
if(window.event.keyCode == 13){
document.all(‘login_btn‘).click();
}
}

13.内嵌和并列的bug
//初可研厂址内容块
function ScgeduleAdress(address, InfoArrSchedule) {
var Html = "";
Html += "<div class=‘project_group schedule_echart clearfix‘>"
Html += "<div class=‘form_group fl‘><span class=‘item_info_name‘>厂址:</span><span class=‘item_info MaxLen_limit‘>" + address + "</span></div>";
Html += "<div class=‘form_group fl‘>";
Html += "<span class=‘item_info fl‘>工作进度</span><span class=‘item_info progress_value fl‘>" + InfoArrSchedule + "%</span><div class=‘fl loader loader4 duration-2s-after leader_schedule_left‘><a href=‘javascript:;‘>" + InfoArrSchedule + "%</a></div> ";
Html += "</div>(这里就是少了个</div>所以内容没包住,生成新的内容块不断的内嵌,而不是并列的关系,加个</div>即可解决问题)";
return Html;
}

14.闭包函数
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;

     };
    }
};
alert(object.getNameFunc()()); //The Window
注意:1.子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立
2.在nAdd前面没有使用var关键字,因此 nAdd是一个全局变量,而不是局部变量。其次,nAdd的值是一个匿名函数(anonymous function),而这个

匿名函数本身也是一个闭包,所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。

15.设置checked="checked"无效,radio未选中!
<div class="form_group radio_leader_h fl">
<label for="" class="label_name"><input type="radio" value="" class="number_radio" name="visible1" id="twoProgramsEditChecked1" checked="">正在编制</label>
<label for="" class="label_name"><input type="radio" value="" class="number_radio" name="visible1" id="twoProgramsEditChecked2" checked="">完成编制</label>
</div>

js代码: document.getElementById(‘twoProgramsEditChecked1‘).checked = true;(bug:有时候不起作用)
错误的原因:是name设置的问题,与页面中部分radio出现重复,修改换成name=""不出现重复即可。

16.id的引号引起的bug
surveyHtml += "<input type=‘text‘ class=‘choose_company " + Name + "‘ value=‘" + workType + "‘ placeholder=‘‘ readonly name= ‘" + typeNumber + "‘;‘ onclick=‘SelectOtherToggle(AllDir" + IDCName + ");‘>"; (X)两种方式都会出错
surveyHtml += "<input type=‘text‘ class=‘choose_company " + Name + "‘ value=‘" + workType + "‘ placeholder=‘‘ readonly name= ‘" + typeNumber + "‘;‘ onclick=‘SelectOtherToggle(‘AllDir" + IDCName + "‘ );‘>"; (X)

function SelectOtherToggle(NameList) {
//alert(document.getElementById(NameList));
if (document.getElementById(NameList).style.display == ‘block‘) {
document.getElementById(NameList).style.display = ‘none‘;
} else {
document.getElementById(NameList).style.display = ‘block‘;
}
}
显示出错,alert(document.getElementById(NameList));弹出为null;获取不到id
bug解答:document.getElementById(NameList)里面的NameList的值是需要加引号的,不然获取不到该id值(类似于document.getElementById(‘name’))所以文档里的应该加转义字符双引号(\\"),单单加双引号是会出错的,所以修改成
surveyHtml += "<input type=‘text‘ class=‘choose_company " + Name + "‘ value=‘" + workType + "‘ placeholder=‘‘ readonly name= ‘" + typeNumber + "‘;‘ onclick=‘SelectOtherToggle(\\"AllDir" + IDCName + "\\" );‘>";

17.js中function的参数是数组,要怎么传参
bug解答:直接传参会出错,显示SelectDirectorId(1, "SetNameEngSurvey", 收资,地形测量(面),地形测量(线),钻孔放样,断面测量, "-", this);就变成了一个个变量参数;
正确传参应该是SelectDirectorId(1, "SetNameEngSurvey", ["收资","地形测量(面)","地形测量(线)","钻孔放样","断面测量"], "-", this);
所以:
1.第一张方法不能直接传呀,需要传fun([[1,2,3]]),如果直接传[1,2,3]的话,对于js来说就相当于直接将arguments数组赋值成了[1,2,3],那么传递的就不是一个数组了,就是单独的三个参数
2.把menu= ["收资","地形测量(面)","地形测量(线)","钻孔放样","断面测量"];变成json数据再传进去
var engineerMenuJson = JSON.stringfy(menu);
surveyHtml += "<li value=‘" + (k + 1) + "‘ onclick = ‘SelectDirectorId(" + count + ", \\"" + Name + "\\", " + engineerMenuJson + ", \\"" + units + "\\", this);‘>" + engineerMenu[k] + "</li>";

18.判断input的type=“radio”
js判断checked是否选中时,用id.checked = true/false;来判断
HTML内的checked是否选中用去掉“checked”和加上“checked”来判断;

19.进行ajax数据交互时,提交的json格式的数据没有错时还返回415时可以考虑一下是不是 xhr.setRequestHeader("Content-type", " application/x-www-form-urlencoded");是否为json格式的xhr.setRequestHeader("Content-type", "application/json");

链接(https://www.cnblogs.com/SamWeb/p/6211134.html)

json格式的数据为
var EditStageAllDate = {}; //创建一个对象
EditStageAllDate.nuclearPlantsId = NuclearPlantsCount; //核电站id
EditStageAllDate.stageNumber = CreatestageCount; //所处阶段
EditStageAllDate.projectName = CreateProjectName; //工程名字
EditStageAllDate.projectNumber = CreateprojectNumber; //工程编号
EditStageAllDate.commencementDate = commencementDate; //开工时间
EditStageAllDate.actualizationDept = actualizationDept; //实施单位
var EditStageAllDateJson = JSON.stringify(EditStageAllDate);
alert(EditStageAllDateJson);
xhr.send(EditStageAllDateJson);


20.ajax提交数据被截断的问题
最近做一个博客发布程序,使用ajax向后台提交数据,发现数据总是被截断,网上搜了些资料,罪魁祸首是特殊字符转义后的&惹的祸,现将解决办法记录下,以备后查

获取数据:

var data=ckeditor.getData();

方式一、用encodeURIComponent编码

data=encodeURIComponent(data);
方式二、ajax form验证

data=$("#from").serialize();
ajax提交如下

复制代码
data="param="+data;
$.ajax({
type:"POST",
url:"test",
data:data,////如果包含&字符的字符串会出现错误
success:function(str){
......
}
});
复制代码
方式三,使用{"":""}组合数据

复制代码
$.ajax({
type:"POST",
url:"test",
data:{"param":data},//使用此方式提交可避免字符串中特殊字符带来的数据截断的问题
success:function(str){
......
}
});
复制代码

21.关于javascript中的call方法,网上查了一些资料总是不得详解。总结网上的观点,call有两个妙用:

1: 继承。(不太喜欢这种继承方式。)

2: 修改函数运行时的this指针。

var func1 = function(arg1, arg2) {};
通过 func1.call(this, arg1, arg2);
或者 func1.apply(this, [arg1, arg2]); 来调用

call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。
JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,
当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去.

22.<iframe>标签可以在一个页面的div中嵌入另一个页面,如:

<iframe src="http://baidu.com" width="500px" height="500px"></iframe>;

<object>标签主要用来包含对象,比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash,

同时在标签内有个属性data,可以连接到URL,可以替代<iframe>标签在页面中嵌入一个子页面,如:

<object data="http://www.baidu.com" width="500px" height="500px"></object>

23.箭头函数简写

传统函数编写方法很容易让人理解和编写,但是当嵌套在另一个函数中,则这些优势就荡然无存。

function sayHello(name) {  console.log(‘Hello‘, name); }
setTimeout(function() {  console.log(‘Loaded‘) }, 2000);
list.forEach(function(item) {  console.log(item); });
简写:
sayHello = name => console.log(‘Hello‘, name);
setTimeout(() => console.log(‘Loaded‘), 2000);
list.forEach(item => console.log(item));













































































































































































































以上是关于近期的js笔记,就是为了可以多看看以前不懂的地方的主要内容,如果未能解决你的问题,请参考以下文章

gulp学习笔记1

搞笑如何写出别人看不懂自己也看不懂的代码

js异步处理

刘玉莲3

5.11 sql注入天书第二天

对while((pid = waitpid(-1, &stat, WNOHANG)) > 0)不懂的地方,现在懂了