JavaScript学习笔记（八）—— 补
第九章 最后的补充
一、Jquery简单阐述
JQuery是一个JavaScript库，旨在减少和简化处理DOM和添加视觉效果的JavaScript代码；使用时必须得添加库路径；学习路径：http://jquery.com/
例1：
window.onload=function(){ alert("the page is loaded!"); }
Jqery:
$(document).ready(function(){ //在网页加载完调用的函数
alert("the page is loaded!");
});
进一步简化：
$(function(){
alert("the page is loaded!");
});
例2：id为buynow的元素添加单击事件
$(function(){
$("$buynow").click(function(){
alert("I want to buy now!");
});
});
//要给网页所有a元素添加单击事件就将上述 buynow改成a 即可
二、补充的DOM获取元素的方法
document.getElementsByClassName //返回一个NodeList其中包含所有class指定的元素
document.getElementsByName //返回name特性的所有元素
document.querySelector //将一个选择器作为参数并返回匹配的第一个元素
document.querySelectorAll //选择器为参数，返回NodeList所有元素
如：var li=document.querySelector ("#playlist .song");//先查id为playlist元素再查找第一个class特性为song的元素
三、补充对象window的属性方法
window.innerWidth //浏览器宽度 单位px
window.innerHeight //浏览器高度 单位px
window.close(); //关闭浏览器窗口
window.print(); //使用打印机打印网页
window.confirm(); //提供Okand Cancle
window.history; //浏览器历史记录
window.location; //当前网页的URl，可以设置加载新的网页
四、arguments
在每个函数中都有一个名为arguments的对象可供使用；以数组形式返回函数的所有参数
<script>
function printArgs(){
for(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
}
printArgs("one",1,1+5,"five");
</script>
五、处理异常
网页控制器窗口可以报错，也可以使用try/catch
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show dogs</title>
<script>
window.onload=function(){
try{
var message=document.getElementById("messge");
message.innerHTML="Here's the message!";
}catch(error){
console.log("Erroe! "+error.messsge);
}
};
</script>
</head>
<body>
<div id="message"></div>
</body>
</html>
六、addEventListener添加事件处理程序
给一个事件添加多个处理程序，使用方法addEventListener
例：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>clickme</title>
<script>
window.onload=function(){
var div=document.getElementById("clickme");
if(div.addEventListener){//如果浏览器支持该方法
div.addEventListener("click",handleClick,false);
//参数：事件名称，程序名称，是否向上传递的标志
}else if(div.attachEvent){//浏览器不支持addaddEventListener换方法
div.attachEvent("onclick",hanleClick);//参数稍有不同且以onclick代click
}
};
function handleClick(){
var evt=window.event;//浏览器是否支持e
var target;
if(evt.target){//检查浏览器是否支持
target=evt.target;
}else{
target=evt.srcElement;
}
alert("You Clicked on "+target.id);
}
</script>
</head>
<body>
<div id="clickme">dianwo</div>
</body>
</html>
七、递归
<script>
function fibonacci(n){
if(n==0||n==1){
return 1;
}else{
return (fibonacci(n-1)+fibonacci(n-2));
}
}
for(var i=0;i<10;i++){
console.log("The fibonacci of "+i+" is "+fibonacci(i));
}
</script>
八、JSON
JavaScript不仅是一种Web编程语言，还正在逐渐成为一种常用的对象存储和传输格式，JSON是JavaScript Object Notation的缩写；
例1
var fidoString='{"name":"Fido","breed":"Mixed","weight":38}';//单引号为JSON语句，即对象字符串
var fido=JSON.parse(fidoString);//将字符串转换为对象
例2：
var fido={
name:Fido,
breed:"Mixed",
weight:38
};
var fidoString=JSON.stringify(fido);//将对象转换成字符串
九 、服务器端JavaScript
Node.js是当前流行的一种JavaScript服务器端技术，包含自己的运行环境和库。也是单线程；
学习路径：http://node.js.org/
十、正则表达式
“+”元字符规定其前导字符必须在目标对象中连续出现一次或多次。
“*”元字符规定其前导字符必须在目标对象中出现零次或连续多次。
“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次。
\s：用于匹配单个空格符，包括tab键和换行符；
\S：用于匹配除单个空格符之外的所有字符；
\d：用于匹配从0到9的数字；
\w：用于匹配字母，数字或下划线字符；
\W：用于匹配所有与\w不匹配的字符；
. ：用于匹配除换行符之外的所有字符。
“^”定位符规定匹配模式必须出现在目标字符串的开头
“$”定位符规定匹配模式必须出现在目标对象的结尾
“\b”定位符规定匹配模式必须出现在目标字符串的开头或结尾的两个
“\B”定位符则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内，
即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾。
/[A-Z]/上述正则表达式将会与从A到Z范围内任何一个大写字母相匹配。
/[a-z]/上述正则表达式将会与从a到z范围内任何一个小写字母相匹配。
/[0-9]/ 上述正则表达式将会与从0到9范围内任何一个数字相匹配。
/([a-z][A-Z][0-9])+/上述正则表达式将会与任何由字母和数字组成的字符串，如 “aB0” 等相匹配。
{n} n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,} n 是一个非负整数。至少匹配 n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m} m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
优先级如下：
1. 1．\ 转义符
2. 2．(), (?, (?=), [] 圆括号和方括号
3. 3．*, +, ?, {n}, {n,}, {n,m} 限定符
4. 4．^, $, \anymetacharacter 位置和顺序
5. 5．|“或”操作
JavaScript 1.2中带有一个功能强大的RegExp()对象，可以用来进行正则表达式的匹配操作。其中的test()方法可以检验目标对象中是否包含匹配模式，并相应的返回true或false。
例：
var email = obj.email.value;
var pattern =
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
flag = pattern.test(email);
if(flag)
{
alert(“Your email address is correct!”);
return true;
}
例:
1 在字符串中执行查找
exec 方法：exec(String source)
例如：
function isDigit(s){
var reg = /^[0-9]{1,20}$/;
var result = reg.exec(s);
//如果格式正确，返回原字符串，否则返回null
alert(result);
}
2 在字符串中执行查找
match 方法：match(reg)
例如：
function matchDemo(source){
var reg = /^[a-z]/;
var result = source.match(reg);
alert(result);
}
//注意与exec的区别
3 执行模式判定
test 方法：Boolean test(source)
例如：
function isDigit(s){
var reg = /^[0-9]{1,20}$/;
var flag = reg.test(s);
//如果格式正确，返回true，否则返回false
if(flag){
return true;
}else{
return false;
}
}
4 执行字符串位置查询
search 方法：int search(String reg)
例如：
function seachString(){
var r, re; // 声明变量
var s = "The rain in Spain falls mainly in the plain.";
re = /falls/; // 创建正则表达式模式
r = s.search(re); // 查找字符串
alert(r); // 返回 int 结果表示出现位置
}
5 执行字符串分割
split 方法：String[ ] split(String reg)
例如：
function splitString( ){
var r, reg; // 声明变量
reg = /abc/; // 创建正则表达式模式
var s = “IcansaymyabcIcansaymyabcIcan…";
r = s.split(reg); // 分割字符串
for(var p in r){ // 返回 String 数组
alert(r[p]);
}
}
JavaScript学习笔记（八）—— 补的更多相关文章
- JavaScript学习笔记八
本文依据慕课网课程<JavaScript进阶>学习整理 第8章 浏览器对象 8-1 window对象 window对象是BOM的核心.window对象指当前的浏览器窗体. wind ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记（14——扩大jQuery UI）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- JavaScript学习笔记之数组（二）
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
随机推荐
- linux下如何实现mysql数据库每天自动备份定时备份
版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢. 目录(?)[+] 概述 备份是容灾的基础,是指为防止系统出现操作失误或系统故障导致数 ...
- BZOJ1597:[USACO]土地购买(斜率优化DP)
Description 农夫John准备扩大他的农场,他正在考虑N (1 <= N <= 50,000) 块长方形的土地. 每块土地的长宽满足(1 <= 宽 < = 1,000 ...
- MySQL 更改数据库数据存储目录
MySQL数据库默认的数据库文件位于 /var/lib/mysql 下,有时候由于存储规划等原因,需要更改 MySQL 数据库的数据存储目录. 下文总结整理了实践过程的操作步骤. 1 确认MySQ ...
- Linux centos修改防火墙为iptables
防火墙配置 CentOS 7默认使用的是firewall作为防火墙,这里改为iptables防火墙. firewall操作: # service firewalld status; #查看防火墙状态 ...
- datagrid 完整dom结构
<!-- datagrid的最外层容器,可以使用$(target).datagrid('getPanel')或者$.data(target,'datagrid').panel得到这个DOM对象, ...
- 平台+插件软件设计思想及基于COM的原型实现
引言:我们已经习惯于一个人独立进行软件开发,每个人都使用自己的风格进行程序设计,但随着工程项目变大或者是对时间要求比较紧时,就需要几个人,十几个人,甚至是上百个人协作进行软件开发与设计,这时一个比较棘 ...
- scikit-learn决策树的python实现以及作图
decsion tree(决策树) 其中每个内部结点表示在一个属性上的测试,每个分支代表一个属性的输出,而每个树叶结点代表类或类的分布.树的最顶层是根节点 连续变量要离散化 机器学习中分类方法的一个重 ...
- Angular动态表单生成（四）
ng-dynamic-forms实践篇(下) 我们接着上篇,先把小目标中的所有字段都定义出来 这部分就是苦力活儿了,把KendoUiComponent中的formModel完善即可: formMode ...
- C3P0与DBUtil配合实现DAO层的开发
写在前面:菜鸟拙见,望请纠正 一:为什么需要连接池 普通的JDBC数据库连接使用 DriverManager 来获取,每次向数据库建立连接的时候都要将 Connection 加载到内存中,需要数据库连 ...
- RHEL 7.6 安装 Oracle 18c RAC
RHEL 7.6 安装 Oracle 18c RAC 第一部分 安装规划 虚拟环境 VirtualBox 6.0 OS 版本 Red Hat Enterprise Linux Server relea ...