1，JavaScript split() 方法

语法
stringObject.split(separator,howmany)

定义和用法
split() 方法用于把一个字符串分割成字符串数组。

参数

separator：必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。

howmany：可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。

返回值

一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。

但是，如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

提示：

注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。

<script type="text/javascript">var str="How are you doing today?"document.write(str.split(" ") + "<br />")
document.write(str.split("") + "<br />")
document.write(str.split(" ",3))</script>输出：How,are,you,doing,today?
H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
How,are,you"2:3:4:5".split(":") //将返回["2", "3", "4", "5"]
"|a|b|c".split("|") //将返回["", "a", "b", "c"]

使用下面的代码，可以把句子分割成单词：

var words = sentence.split(' ')

或者使用正则表达式作为 separator：

var words = sentence.split(/\s+/)

2，前端分页实现及多条件查询开发思路

A，多条件查询实现

医院列表   js+数组数据

var data= [

{

name:'北京AAA医院'，

level：'一级医院'，

position：‘东城区’，

time：‘9:30’，

phone：‘东宛咨询台：010-...’,

address：‘北京市东城区...’

}

//....]

通过条件把数据遍历出来，筛选符合条件的数据 + （拿到数据以后）根据前端模板字符串去拼接，拼出来。

B，前端分页实现

1）多条件查询，得到符合条件的数组result，以及关键参数：数组长度

2）设定分页参数：每页显示条目数

3）计算分页关键参数：

总页数（ceil每页显示条数/数组长度）

当前页（默认为第0（index第0页）页，也就是第一页）

4）获取符合条件的数组中当前页数据

result.slice(当前页*每页显示条目数，（当前页+1）*每页显示条目数)（从下标为几开始取，取多少条）

C，分页的界面和行为

界面      行为（1，首页，回到第1页面，尾页回到最后一页；2，prev/next分别上一页下一页，到头后灰色不可点；3，item点击或者输入到N页后GO，会跳转到指定页）

3,前端对于多条件查询原理和分页原理（怎么实现）

1）筛选

2）分页

3）数据列表

A，条件筛选                                 B，分页                                            C，数据列表

A+B+C（条件）---15(count)--- 10个1页，当前第一页   --- 显示0-10条 ---  呈现

10个1页，当前第二页    --- 显示10-15条 ---  呈现

X+Y+Z(条件改变) --100(count)-- 10个1页，当前第一页   --- 显示0-10条 --- 呈现

多条件筛选的规律：

1，条件筛选是最初生成数据的地方，即使所有条件为【全部】，也是做了一次筛选。

2，条件筛选出来的数据（是无法直接呈现到数据列表的），（而是）每次都要经过分页，每次是第一页（基础设定多少页，第一页呈现出来）

3，条件筛选变动、页码变动会导致【重新呈现数据】

前端分页实现（上面第二点B项）

前端模版原理

//某个具体的数据

var data = {

'area':d[0], 'level':d[1], 'type':d[2],

'name':d[3], 'address':d[4], 'phone':d[5],

'imgUrl':d[6], 'time':d[7]

}

//字符串模板

var html = template;

//真正的html字符串模板
<script type="text/javascript" id="datalist_template"><div class="item"><div class="name">{name}<span class="level">{level}</span></div></div>
</script>

for(k in data){

var v = data[k];

html = html.replace({'+k+'},v);  //特殊字符串替代数据

}

datallist . append(html);

前端模版原理

数据（数组） +  模板（字符） +  （js）replace

最后再把它查到我们到html里面去

4，javascript replace（）与split（）方法

1）replace（）语法：

string.replace(searchvalue,newvalue)

定义与用法：

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

该方法不会改变原始字符串。

参数：

searchvalue：规定子字符串或要替换的模式的 RegExp 对象（要被替换的元素）。

newvalue：一个字符串值。规定了替换文本或生成替换文本的函数（要跟换成的新值）。

返回值：

一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。

实例

var str="Visit Microsoft!";

var n=str.replace("Microsoft","Runoob");

console.log(n);   //Visit Runoob

执行一个全局替换: 

var str="Mr Blue has a blue house and a blue car";

var n=str.replace(/blue/g,"red");

console.log(n);  //Mr Blue has a red house and a red car

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>单击按钮将段落中的“blue”替换成“red”。</p>
<p id="demo">Mr Blue has a blue house and a blue car.</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var str=document.getElementById("demo").innerHTML; var n=str.replace(/blue/g,"red");document.getElementById("demo").innerHTML=n;
}
</script></body>
</html>输出结果：Mr Blue has a red house and a red car

执行一个全局替换, 忽略大小写:

var str="Mr Blue has a blue house and a blue car";

var n=str.replace(/blue/gi, "red");

console.log(n);  //Mr red has a red house and a red car

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>单击按钮将段落中的“blue”替换成“red”。</p>
<p id="demo">Mr Blue has a blue house and a blue car.</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){var str=document.getElementById("demo").innerHTML; var n=str.replace(/blue/gi,"red");document.getElementById("demo").innerHTML=n;
}
</script></body>
</html>输出结果：Mr red has a red house and a red car

下面我们通过 prototype 为 JavaScript 的 String 对象添加方法，来实现将所有 "Microsoft" 替换为 "Runoob"：

String.prototype.replaceAll = function(search, replacement) {

var target = this;

return target.replace(new RegExp(search, 'g'), replacement);

};

输出结果为：Visit Runoob!Visit Runoob!Visit Runoob!

<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>单击按钮将段落中所有“Microsoft”替换成“Runoob”：</p>
<p id="demo">Visit Microsoft!Visit Microsoft!Visit Microsoft!</p>
<button onclick="myFunction()">点我</button>
<script>
String.prototype.replaceAll = function(search, replacement) {var target = this;return target.replace(new RegExp(search, 'g'), replacement);
};
function myFunction() {var str=document.getElementById("demo").innerHTML;var n=str.replaceAll("Microsoft","Runoob");document.getElementById("demo").innerHTML=n;
}
</script></body>
</html>输出结果：Visit Runoob!Visit Runoob!Visit Runoob!

2）split（）语法：

stringObject.split（separator）

功能：把一个字符串分割成字符串数组

返回值：Array

说明：

separator：必需，分隔符

//使用split将str转换为数组var str = 'welcome-to-beijing';
var arr = str.split("-");
console.log(arr);  //["welcome","to","beijing"]var date = '2016/05/05';
var dateArr = date.split("/");
console.log(dateArr);  //["2016","05","05"];

5，JavaScript对象之string(字符串的位置和截取方法)

charAt()与charCodeAt()

语法：stringObject.charAt(index)

功能：返回stringObject中index位置的字符

说明：

ECMAScript5中可使用“方括号加字符索引”来访问字符串中特定的字符，但是IE7及更早的浏览器会返回undefined.（方括号加字符索引的方式在ie7及更早的浏览器中存在兼容问题，在这种情况下就用charAt(index)，charAt()加索引）

var str = 'hello world';
console.log(str.charAt(4));  //输出：o；charAt()括号里跟index，索引从0开始，索引4输出的字母4为o

indexOf（）

语法：stringObject.indexOf("o")

功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。(从左开始搜索)

返回值：数值。

说明：如果没有找到该子字符串，则返回-1.

var email = 'marry@163.com';
//检测@在email中出现的位置
console.log(email.indexOf('@'));  //5，字符在字符串中出现的索引位置为5
console.log(email.indexOf('z'));  //-1,没有这个字符，返回-1
console.log(email.indexOf('m'));  //0，字符在字符串中出现的索引位置为0，在字符串的第一位
console.log(email.indexOf('rr'));  //2 检测两项或两项以上的字符，检测第一个字母出现的位置
console.log(email.indexOf('163'));  //6

lastIndexOf（）

语法：stringObject.lastIndexOf("o")

功能：从一个字符串中搜索给定的子字符串，返回子字符串的位置。(从右开始搜索)

返回值：数值。

说明：如果没有找到该子字符串，则返回-1.

var email = 'marry.mail@sohu.com';
//检测.在email中出现的位置
console.log(email.lastIndexOf('.'));  //从右往左开始，第一个点出现的位置是在字符串的位置是：15

slice()语法：

slice（）截取字符串的方法和slice（）截取数组对象元素一样；

arrayObject.slice(start,end) (从哪里开始截取，到结束到地方结束)

1，如没指定end，（切分的数组包含从start到数组结束的所有元素）截取字符串包含从start到数组结束的所有字符。

2，如slice（）方法的参数中有一个负数，（则用数组长度加上该数来确定相应的位置）会将传入的负值与字符串长度相加。

3，截取从start和end（不包含该元素）的元素，即从start和end-1的元素。

substring()

说明：语法及功能同slice（）一样。

区别在于：

1，当参数为负数时，自动将参数转化为0。

//substring
var str = 'hello world';
console.log(str.substring(-7,5)); //hello, sunstring()方法中的参数为负数时，自动将参数转化为0，相当于（0，5）

2，substring（）会将较小的数作为开始的位置，较大的数作为结束位置。

substr（）

语法：stringObject.substr(start,len)

功能：

截取子字符串。

参数说明：

1，start：必需，指定子字符串的开始位置。

2，len：可选，表示截取的字符总数，省略时截取至字符串的末尾。

3，当start为负数时，会将传入的负值与字符串的长度相加。

4，当len为负数时，返回空字符串。

//substr(start,len)
var str = 'hello world';
console.log(str.substr(6,3));  //wor ,从索引为6的字符开始，截取3个单位的字符
console,log(substr(-5,4));  //worl (6,4),当substr(start,len)start为负数时，用字符串总长度加start参数作为截取的起始位置，截取4个单位的字符长度。
console,log(substr(4,-4)); //当substr(start,len)中len为负数时，返回空字符串
//string 方法综合运用//获取扩展名
var url='http://baidu.com/index.txt';
function getFileFormat(url){//获取.在URL中出现的位置var pos = url.lastIndexOf('.');return url.substr(pos);   //return url.substr(pos+1);  //txt / jpg
}
var formatName = getFileFormat(url);
var picFormat = getgetFileFormat('1231434.jpg')
console.log(formatName); //.txt
console.log(picFormat); //.jpg

toUpperCase和toLowerCase方法

//把border-left-color转换为borderLeftColor驼峰命名的方式function camelback(str){//通过-这个分隔符将str拆分成数组var arr=str.split('-');  //['border','lef','lef']//数组第一个元素跳过，从第二个元素开始，将第一个首字母转换为大写字母，并连接剩余字符var newArr = arr[0]; //数组第一个元素跳过，从第二个元素开始，首字母大写for(var i = 1,len=arr.length;i<len;i++){//newArr+=arr[i].charAt('0').toUpperCase; //console.log(newArr);  //L CnewArr+=arr[i].charAt('0').toUpperCase + str.substr(1);}return newArr;
}
var camelFormat=camelback('border-left-color');
console.log(camelFormat);  //borderLeftColor

JS获取日期(年/月/日/时/分/秒)&格式转化

var myDate = new Date();

以下都是在myDate的基础上得到的。

myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

1. 判断闰年  
Date.prototype.isLeapYear = function() {   
    return (0==this.getYear()%4&&((this.getYear()%100!=0)||(this.getYear()%400==0)));   
}

6.window对象

（全局对象）

所有的全局变量和全局方法都被归在window上

var age = 15;   //相当于window.age=15;
function sayAge(){alert('我'+age)；//alert('我'+window.age)；
}
sayAge();//声明一个全局变量
window.username = 'marry';  //相当于var username = 'marry'//声明一个全局方法
window.sayName=function(){alert('我是'+this.username);
}
//调用全局方法
window.sayName();

window对象的方法

语法：window.alert（‘content’）

功能：显示带有一段消息和一个确认按钮的警告框

语法：window.confirm（‘message’）

功能：显示一个带有指定消息和ok及取消按钮的对话框

返回值：如果用户点击确定按钮，则confirm（）返回true

如果用户点击取消按钮，则confirm（）返回false

<div id="box"><span>iphone6s</span><input type="button" value="删除" id="btn">
</div>//confirm()
var btn = document.getElementById('btn');
btn.onclick=function(){//弹出确认对话框//var result = confirm('您确定要删除吗？');var result = window.confirm('您确定要删除吗？删除之后该信息将不可恢复');if(result){document.getElementById('box').style.display='none';}
}

语法：window.prompt('text,defaultText')

参数说明：

text：要在对话框中显示的纯文本（而不是HTML格式的文本）

defaultText：默认的输入文本

返回值：如果用户单击提示框的取消按钮，则返回null

如果用户单击提示框的确认按钮，则返回输入字段当前显示的文本

//弹出输入框
var message = prompt('请输入您的星座','天蝎座')
console.log(message);

语法：window.open(pageURL,name,parameters)

功能：打开一个新的浏览器窗口或查找一个已命名的窗口

参数说明：

pageURL：子窗口路径

name：子窗口句柄（name声明了新窗口的名称，方便后期通过name对子窗口进行引用）

parameters：窗口参数（各参数用逗号分隔）

window.onload = function(){//打开子窗口，显示newwindow.html(这里指定已建立好的newwindow.html窗口或窗口网址)window.open('newwindow.html','newwindow','windth=400,height=200,left=0,top=0,toolbar=no,menubar=no, scrollbars=no,location=no,status=no')
}

语法：window.close（）；

功能：关闭浏览器窗口

<input type='button' valie='退出' id='quit'/>
<script>window.onload = function(){//打开子窗口，显示newwindow.html(这里指定已建立好的newwindow.html窗口或窗口网址)window.open('newwindow.html','newwindow','windth=400,height=200,left=0,top=0,toolbar=no,menubar=no, scrollbars=no,location=no,status=no')var quit= document.getElementById('quit');//点击关闭当前窗口quit.onclick = function(){window.close();}
}
</script>

7.location对象属性

location对象常用属性

语法：location.href

功能：返回当前加载页面的完整url

说明：location.href与window.location.href等价

语法：location.hash

功能：返回url中的hash（#号后跟零或多个字符），如果不包含则返回空字符串

//利用锚点返回顶部的方法
<div class='box1' id='top'></div>
<div class='box2'></div>
<input type='button' id='btn' value='返回顶部'/>
<script>//console.log(location.href);  //获取网页网址所有的东西//conbsole.log(location.hash);  //获取网页中的锚点var btn = document.getElementById('btn');btn.onclick=function(){loaction.hash='#top';  //用给loaction.hash负值的方式，返回顶部}
</script>

location对象方法

（位置操作）

改变浏览器位置的方法：

location.href属性

location对象其他属性也可以改变URL：

location.hash

location.search

//这两种方法都会在历史记录中生成新的记录
setTimeout(function(){location.href='index6.html';//window.loaction = 'index6.html';
},10000)

location.replace()

语法：location.replace(url)

功能：重新定向url

说明：使用location.replace不会在历史记录中生成新记录

setTimeout(function(){//location.href='index6.html';//window.loaction = 'index6.html'; //location.replace('index6.html');
},10000)

location.reload()

语法：location.reload()

功能：重新加载当前显示页面。

说明：

location.reload()（没有放任何参数的情况下）有可能从缓存中（重新）加载

location.reload(true)从服务器（强制）重新加载

注意：location.reload()刷新，建议放在页面最后

转载于:https://my.oschina.net/u/3719399/blog/1794160

开发中遇到的问题及基础知识点（1）相关推荐

  1. 湖北省计算机专业基础知识,2012年湖北省中职对口高考计算机应用基础知识点...

    简要介绍资料的主要内容,以获得更多的关注 2012年湖北省中职对口高考计算机应用基础知识点 第一部分 计算机基础知识 1．计算机的发展和应用领域 了解计算机技术的发展过程及趋势,掌握并能列举各阶段发展 ...

  2. SOMv3.3.3二次开发中LUA脚本对机基础操作指南

    前言 先感谢亲爱的学长,没有他们,我一个人根本无法完成这篇博客 顿首,顿首,再顿首!!! 本篇博客属于实验记录,由于LUA脚本较为简单,所以本博客不多做深入探讨,基本上是把官方的用法更为详细地记录一下 ...

  3. Uni-app开发微信小程序的一些基础知识点包括开发工具的安装和项目的初始配置运行（边学边更新）

    文章目录 1.开发工具 1.1 HBuilder X 安装 1.2 微信开发者工具 安装 1.3 HbuilderX 文档 2.创建初始项目运行 2.1 创建Uni-app项目 2.2 运行 2.2. ...

  4. Android开发中目前流行控件和知识点总结

    1.SlidingMenu 滑动菜单 应用案例:Facebook . Path 2.0 .人人.网易新闻 下载地址: https://github.com/jfeinstein10/SlidingMe ...

  5. java vector编程_Java编程开发中向量(Vector)及其应用

    要学习Java编程开发中向量及其应用方面的知识就要先了解什么是向量,向量是如何声明及初始化的,下面就让IT培训网专家来给大家详细介绍下如何认识向量及其使用方法吧! 关于向量的介绍: 向量 vector ...

  6. 嵌入式开发中的C语言知识点

    嵌入式开发中的C语言知识点 1.关键字 2.数据类型 3.内存管理和存储架构 4.指针和数组 5.结构类型和对齐 6.预处理机制 1.关键字 几乎每一门语言中都有关键字,具有特殊功能,C语言也不例外, ...

  7. Android学习笔记：Android基础知识点（不断更新中）

    1.Android学习笔记:OkHttp 2.Android学习笔记:更新UI的方法(UI线程和非UI线程) 3.Android学习笔记:Volley 4.Android学习笔记:Handler 5. ...

  8. 中职计算机基础知识点笔记2

    中职计算机基础知识点笔记1 文章目录 1.3数字化信息编码与数据表示 1.3.1进制计数制 1.3.2进制转换 1.3.3原码.反码.补码 1.3.4常用信息编码 1.4计算机安全防护知识 1.4.1 ...

  9. 中专计算机应用基础知识点归纳,中职学校《计算机应用基础》的教学

    [摘要]计算机技术更新速度快和注重操作与自学能力等特点既是学生积极参与教学的动力,也成为了制约学生全面掌握计算机知识系统的瓶颈.特别是在中职学校的<计算机应用基础>课程中,学生普遍呈现出基 ...

最新文章

  1. python pandas dataframe 列 转换为离散值
  2. BigDecimal.setScale 处理java小数点
  3. 华南农业大学计算机专业学硕20,2020年华南农业大学计算机应用技术考研经验分享...
  4. Spyder kernel died 错误
  5. 快速锁屏电脑快捷键_电脑小技巧
  6. border-box和CSS3 calc()解决盒模型加边框或边距后尺寸变大的问题
  7. Win11怎么查看设备管理器？Win11设备管理器在哪里打开？
  8. gitlab ssh key
  9. linux aria2 离线,使用aria2做离线下载
  10. 找到一个电信代理服务器~
  11. oracle 实用记录
  12. 【Unity Shader】新书封面 — Low Polygon风格的渲染
  13. Docker MSSQL 添加读取 MDF 文件
  14. 什么是SSL协议，浅谈SSL协议。
  15. 《图解经济学》读后感
  16. c语言标准化考试系统课程设计,c语言标准化考试系统课程设计
  17. 智能座舱仪表自动化测试的实现原理
  18. 郑重推荐使用WPS 2010
  19. 基于ASP.NET C#的服装商城管理系统
  20. 2011 IT大趋势

热门文章

  1. 共模电感听过很多次，但是什么原理你们真的懂吗？
  2. 压缩感知算法matlab,压缩感知算法matlab
  3. 居中元素的 scrollleft 的计算方法
  4. 声网 agora php sdk,快速了解声网Agora SDK 3.0
  5. selenium控制tor浏览器
  6. 0基础如何学习软件测试？一文从2方面带你系统学习
  7. MySQL 教程（基础篇）第04话：mysqld 和 mysql 命令的区别
  8. veeambackup安装
  9. [第十六篇]——Docker 安装 CentOS之Spring Cloud直播商城 b2b2c电子商务技术总结
  10. 【日常练习python】之MaShang