js中一切皆为对象
方法=函数 其实也是内建对象
函数都可以用,包括数组,函数
都可以获取
核心dom编程
--
dom
d document文档
o 对象
1用户自定义对象,
2内建对象 如Array Math和Data
3宿主对象 浏览器提供的对象
m 模型 节点树
1,内嵌式可以放在任何位置(因为浏览器是上而下的顺序进行解析。)
{要先出现对象,才可以操作。比如先有body,才能操作body
document.body.bgcolor.bgColor="#ff0000";所以有时候要放在后面。
最好的方法是,放在</div>之前。为了方便,可以放在相对应的后面
2,外链式
3,行内式<img src="" style="cur" onclick="javascript:alert('啊啊啊啊')"
print_r() var_dump()的区别
--------------------------------------
核心dom-------
document.firstChild 第一个就是 <html>
.lastChild
.nextSibling 下一个兄弟姐妹
.parentNote 父节点
父对象.createElenment("标签名"); 创建
父对象.appendChild. 增加
父对象.appendChild. 增加
父对象.removeChild. 删除
table对象
tbodies
rows
cells
属性getAttribute("属性名")
html dom---------
document.getElementById("id值"); id=”“
document.getElementsByTagName("标签名"); name=“”
getElementsByClassName 返回是数组 class=“”
一类:用户参与
事件
1、通用事件:
onblur: 当输入框失去推动焦点
onfocus: 当输入框获得焦点时
onchange:当内容改变时触发
onselect: 当内容被选中时触发
onsubmit 当表单提交时触发
onreset: 当表单重置时触发
onresize: 当元素大小改变时触发
阻止默认行为 主要是应用在a标签的点击和form表单的提交
取消表单的默认行为: <form onsubmit=”return check()”/>
取消a链接的默认行为:<a href=”http://www.234.com” onclick=”return conform(‘是否真的删除’)”>删除</a>
2、鼠标事件:
onclick 当在一个对象上点击鼠标时触发
onmouseover 当鼠标移动到对象上时触发
onmouseout 当鼠标移出一个对象时触发
onmousemove 当鼠标在一个对象上移动时触发
ondbclick 当鼠标在一个对象上双击触发
3、键盘事件
onkeydown 当键盘某个键被按下时触发
onkeypress 介于onkeydown与onkeyup之间触发
onkeyup 当键盘某个键被按下后抬起时触发
event对象:此对象记录了事件发生现场的相关信息
event.clientX 记录了鼠标与当前窗口横坐标
event.clientY 记录了鼠标与当前窗口纵坐标
event.keyCode 记录了键盘被按下的键的unicode码
二类:无需用户参与
onload事件:当页面全部加载完毕时触发 属于body标签
事件绑定-
-----------------------------
第一种 静态绑定
事件的程序写在html标签的事件属性中 要传this
onclick=“func1(this)”
第二种,动态绑定
使用DOM方法获取对象,并为对象指定事件处理程序
可以直接this
----------------------------------------
每次输出document.write 都会调用资源,所以尽量使用
var str="";
str+="";
document.write(str);
-------------------------
高内聚低耦合
函数里面的功能尽量不要依赖外面的变化
给形参
function show(a1){
}
--------------------------------
alert(""); 警告框
document.write(""); 显示文本 只是用于测试(会删除输出流,重新开始)
window.confirm(""); 弹出一个确认对话框
window.prompt("");弹出一个可输入框接收
var v1=window.prompt("请输入第一个数字");
var v2=window.prompt("请输入第二个数字");
var con=window.confirm("您是否需要转账");//确定时,返回true,取消返回flase
//所有可以用if(con)来判断
if(con){
alert("您的500万转账成功");
}else{
alert("您未进行转账");
}
----------------------------------
基本数据类型与复合数据类型的对比
var n1=30;
var str=”zhangsan”;
var b1=true;
基本数据类型,一个数据对应一个对应一个变量名
数组 :
var arr=[20,30,true,”zhangsan”];
多个数据对应一个对象,多个数据共同拥有一个名字
对象:
var person1={name:'zhangsan',age:29,marraiaged:true};
多个数据对就一个对象,多个数据又各自有各自的名字
---------------------------对象----
var person=new Object(); 空对象
person.weight=200;
person.height=180;
person.dance function(){
alert("haha");
}
alert(person.dance);
alert(person.weight);
复合型数据地址在栈区,数据在堆区.堆区速度相对慢
简单型数据都在栈区
func1() func1栈区 地址 ——指向 func1()堆区 代码
js中的两种数据传递方式
传值和传址
全局作用域,局部作用域
var str= new String("hello word");
var str= new String(123)
----------------------------------------------------
字符串也有下标,var str=javascript
str[0]=j
str[1]=a
同时也可以遍历
一、String对象 字符串 ----------------
.lenght 字符个数
.charAt(0) 第几个位置出现的值;
.indexOf(substr);返回子字符串在原字符首次出现的位置(从左往右),如果找得 到则返回其下标。反之返回-1;
.lastIndexOf();
返回子字符串在原字符最后一次出现的位置,如果找得到则返回其下标。 反之返回-1;
.substr(startIndex,[length]); //[]是可选的意思
从原字符串中截取子字符串,startIndex,从哪里截取下标。length长度 ,如果没有,默认是到结尾
.substring(starIndex,[endIndex]);也是从原字符串中截取子字符串
startIndex,从哪里截取下标。[endIndex]);到哪里下标的前一位,如果 没有,默认是到结尾
.toLowerCase();将字符串转换为小写
.toUpperCase()将字符串转换为大写
.split(sep);指定的分割法,将字符串分割为数组split(",");如果为""则每一个字符都为一个下标;
localeCompare():将汉字进行排序
二、Math对象 数学计算方法
Math.abs(n);绝对值
Math.ceil(n);天花板,向上取整
Math.floor(n);地板,向下取整
Math.round(n);四舍五入
Math.max(3,2,100,200);取出最大值
Math.min(3,2,100,200);取出最小值
Math.random()返回0到1之间的随机数,包含0不包含1
Math.ceil(Math.random()*(max-min)+min);
Math.floor(Math.random()*(max-min+1)+min);包含max和min
三、Number对象
toFixed(n)进行四舍五入后保留n位小数
num=138.383838 num.toFixed(3) //138.3834
四、Array数组对象
.length 数组长度
.shift()删除数组的第一个元素;并且把第一个位置也删了
.unshift()向数组开头添加一个元素并将新数组元素的长度返回;
.pop()删除数组中最后一个元素并将它返回
.push()向数组的末尾添加一个或者多个元素;
.join([sep])将一个数组合并为一个字符串,sep不写的话,则默认是逗号
.reverse();数组倒序,颠倒
.sort([sortby]) 默认是按字符编码排序的
对数组元素进行排序
.sort(sortby)是可选参数,
function sortby(a,b){
return a-b;
}倒序就b-a
//这个是字符串的比较
.sort(sortby)是可选参数,
function sortby(a,b){
return a.localeCompare.b;
}倒序就b.localeCompare.a
五、Date对象 日期
var today=new Data();
六、window对象 (顶级对象)
alert(""); 警告框
document.write(""); 显示文本
window.confirm(""); 弹出一个确认对话框
window.prompt("");弹出一个可输入框接收
-----------------函数-----------------------
function 函数名(形参1,形参2,形参3...){
//函数体
[return值]
}
return 当函数遇到此语句就会立即停止
调用 函数名(实参1,实参2,实参3...)//参数可以不定义
var n1=30;
var n2=90;
function func2(p1,p2){
var min=p1>p2?p2:p1;
return min;
}
var result=func2(n1,n2);
alert(result);
--------------匿名函数-----------------------
1.就是把其赋给一个变量。那样就可以不要函数名字,这个变量也就是一个函数,就是i是一个函数
i=function(){}
i();
2.自调用:它的作用:就是写完后,立即执行里面的代码;可以自传参数
(function(){})();
(function(name,age){
document.write("他的名字:"+name+"他的年龄:"+age);})("钟汉良","38");
return 2个作用
1.向函数调用者返回数据
2,结束当前函数体;
1,要定义一个变量来接收。return
function func(){
return "hello";
}
var str=func();
document.write(func());
2,直接输出它
function func(){
return "hello";
}
alert (func());
document.write (func());
高内聚,低耦合
内聚性强:定义函数时,函数的功能要专一,比如定义一个函数是增加功能;那么整个函数是围绕增加功能添加新的;
-----------------------------------arguments形如一个数组,把传进来的参数储存
function func1(){
alert("我接收了"+arguments.length+"个参数");
alert(arguments[0]);
}
func1(10,20,30,40,50);
在参数不确定时------
function total(){
var he=0;
for(var i=0;i<arguments.length;i++){
he+=arguments[i];
}
return he;
}
alert(total(10,20,30,40,50));
return一般返回是用来判断使用的;
function func(){
if(){
return true;
}else{
return false;
}
//语句
}
var obj=new Object();
obj.name="钟汉良";
obj.age="25";
obj.job="歌手";
obj.fun=function(){
document.write("他的名字:"+obj.name+"他的年龄:"+obj.age+"他的工作:"+obj.job);}
obj.fun();
--------------数组---------------------
第一种:使用new关键字和Array()构造函数和 var一个变量是一样的
a var arrA=new Array();
arrA=[10,20,30];
b var arrB=new Array(5) 数组长度
var arrB=new Array('5') 定义数组第一个元素赋值
var arrC=new Array(10,20,30);
第二种:直接量
var arrA=[10,20,30,40];
第三种
var arrA=new Array(3);
arrA[0]="10";
arrA[1]="20";
arrA[2]="30";
二维数组
arrA=[ [10,23,2,5,6,45,],2,3,8,8,[213,453] ];
var arrA=[10,20,'ah',true,null]
var arrB=[5];
var arrC=new Array();
arrA[5]数组的值 1个
new Array(5)整个数组 5个
new Array('5') 1个
数组名[行小标][列下标]
arra.length
数组的操作(CRUD)
访问一个数组元素
数组名[元素下标];
对数组元素的更改
var arrA=[10,20,'ah',true,null];
//修改
arrA[2]="lisi";
//增加一个元素
arrA[6]="低调的小男孩";
//删除delete仅是删除元素的值,它所占的位置还是存在。存的是undifind,算是个漏洞。
delete(arrA[2]);
//查一个元5素
arrY[1]=
------------json对象-----------------------------
var person={'username':'二师兄',
'sex':true,
'show':function(){}
}
javascriptObject 结构
person.show();调用方法;
//w3c内置对象。
遍历,就是for循环
for in循环结构----------------------------------------
语法结构
注意,把arrA.length先定义,这样减少for里面length又一次浪费重新取长度
也就是先把
var arrA_length=arrA,length
以前的
for(var i=0;i<arrA_length;i++){
alert(arrA[i]);
}
现在的
for(index in arrA){ \index是一个变量(可以随便起),此变量在循环开始时会被自动声明,此index变量中存放的就是数组元素的下标
document.write(arrA[index]);
}
for(j in window){
document.write(window[j]+"</br>");
}
------------------------------三目------------------
var vl=20;
var str=vl>30?"表达式成立":"表达式不成立";
alert(str);
表达式?表达式true取这个:表达式flase取这个;
--------------------------------------
ECMAScript 中可用的 3 种强制类型转换如下:
Boolean(value) - 把给定的值转换成 Boolean 型;
Number(value) - 把给定的值转换成数字(可以是整数或浮点数);
String(value) - 把给定的值转换成字符串;
parseInt 从一个字符串中提取整型数值,从左往右,直到第一个不是数字的字符停止
parseFloat 从一个字符串中提取浮点型数据,从左往右,直到第一个不是数字的字符停止
isNaN 判断一个数据是否为非数字
--------------------------强制类型转换-------------------------
typeof判断其类型typeof(width)
强制类型转换
Number 强制将其他数据类型转换为数值型
String 强制将其他数据类型转换为字符型
Boolean 强制将其他数据类型转换为布尔型
一般都不是真实存的都会转换为false
parseInt 从字符串中提取整型数据 从左向右提取,直遇到第一个不为数字的字符(包含小数点)
parseFloat 从字符串中提出浮点数 从左向右提取,直遇到第一个不为数字的字符
isNaN 判断一个字符串是否是纯数字字符串,如果不是一个纯数字字符串返回true
流程控制
分支结构
if(条件表达式){
//语句体
}
if(条件表达式){
//语句体1
}else{
//缺省语句体
}
if(条件表达式1){
//语句体1
}else if(条件表达式2){
//语句体2
} else if(条件表达式3){
//语句体3
} else if(条件表达式4){
//语句体4
}else{
//缺省语句体
}
当if(){
中间没有判断语句时,可以把2个if合起来写 ,&&||
if(){
}
}
switch结构
switch(变量){
case 变量值1:
//语句体1
break;
case 值2:
//语句体2
break;
case 值3:
//语句体3
break;
default:
//缺省语句体
}
if结构与switch结构区别
if结构的条件表达式一般判断的是一个范围
switch结构判断的具体的某个值
循环结构
for(循环控制变量初始化;循环条件;循环控制变量更改){
//循环体
}
执行过程:
1、循环控制变量初始化,只执行一次
2、判断循环条件是否成立,成立则执行循环体,不成立则直接退出
3、对循环控制变量进行更改,
4、使用更改后的循环控制变量的值再判断循环条件是否成立
while循环结构
while(条件表达式){
//循环体
}
do{
}while(条件表达式)
while与do… while的区别
while是先判断条件表达式,再根据条件表达式的结果去执行循环体
do…while是先执行循环体,再判断条件表达式是否成立,(无论条件表达式成立与否,循环体至少会执行一次,)
for结构与while结构的区别
for一般用于已知循环次数或循环次数可能通过某种方式确定,while循环一般用于,循环次未知。
作业讲解:
break; 中止当前循环结构
continue; 中止当前的本次循环,继续下一次循环
---------------------------------------------------
var v1=window.prompt("请输入第一个数字");
var v2=window.prompt("请输入第二个数字");
var v3=Number(v1)+Number(v2);
alert(v3);
var v1=window.prompt("请输入第一个数字");
if(isNaN(v1)){
alert("您输入的是一个数");
}
if(){
}else if{
}else{
}
-----------------------------------------------------------
var v1=window.prompt("请输入您的年龄");
if(!isNaN(age)){
age=Number(age);
switch(age){
case :
alert();
break;
case :
alert();
break;
default:
alert();
}else{
alert();
}
continue; 结束本次循环
break;结束整个循环
break 2;
--------------------------------------------
var v1=window.prompt("请输入您的分数");
//对用户输入的数据进行判断
if(!isNaN(score)){
//当用户输入的数据合法进行操作
score=parseInt(Number(sore)/10);
//90/10=9 91/10=9.1 92/10=9.2
var n=10;
score=Number(age);
switch(age){
case :9 //用户输入的90-100之间的数执行此case语句
alert("成绩优秀");
break;
case :8
alert("成绩优良");
break;
default:
alert();
}else{
alert();
}
var v1=window.prompt("请输入第一个数字");
var score=parseInt(Number(v1)/10);
if(score>=9){
alert(v1+"分成绩很优秀");
}else if(score>=8){
alert(v1+"分成绩良好");
}else if(score>=7){
alert(v1+"分成绩还行");
}else{
alert("成绩一般般");
}
if结构与switch结构区别
if结构的条件表达式一般判断的是一个范围
switch结构判断的具体的某个值
所以if(score=9)这样是赋值,为true。会影响判断,必须score>=9 或者>8或者==9 这样才对不能取=应该是==
if(score==9)才对
-------------------------------------------------
--------------------------------------------------
“”+(i+1)+“”;
-------------
while(条件表达式){
循环体}
do{循环体}while(条件表达式)
---------------------
鸡兔共35 脚94,求
var ji=1;
while(ji<35){
tu=35-ji;
if(ji*2+tu*4==94){
document.write("鸡的数量"+ji+""+"兔的数量"+tu);
}
ji++;
}
---------
for(ji=1;ji<35;ji++){
tu=35-ji;
if(ji*2+tu*4==94){
document.write("鸡的数量"+ji+""+"兔的数量"+tu);
}
}
-------------------------------------------------------
1-100能被3整除
for(i=1;i<100;i++){
if(i%3==0){document.write("</br>"+i);}
}
----------------------------------------------------------
3个数的大小
<script type="text/javascript">
var a=20; var b=10; var c=30;
var min=a>b?(b<c?b:c):(a<c?a:c);
alert (min);
</script>
-------------------------
100能被3整除 又是偶数的数
var v1=0;
for(i=1;i<1000;i++){
if(i%6==0){v1+=1;document.write("</br>"+i);}
}document.write(v1);
--------------------------------------------------
九九乘法口诀
在于b<=a
<script>
for( var a = 1; a < 10; a++ )//这个循环语句决定外层循环
{
for( var b = 1; b <= a; b++ )//这个决定内层循环,关键在于,外层循环的a ,当a=1时,b循环一次,当a=2时,b循环2次。。。。。控制着,所以b<=a
{
document.write( b + "x" + a + "=" + a*b );
document.write( " " );
}
document.write( "<br />" );
}
</script>
------------------------------
.倒三角
<script type="text/javascript">
for(var row=1;row<=10;row++){//控制外层多少层
for(var space=1;space<10-row;space++){//控制左边倒三角空space<10-row
document.write(" ");
}
for(var cols=1;cols<=row;cols++){//控制里层的*多少cols<=row;
document.write("*"+"");//控制右边的倒三角空
}
document.write("</br>");
}
</script>
for(var row=1;row<=10;row++){//控制外层多少层10
for(var space=1;space<10-row;space++){//控制左边倒三角空10-row
document.write(" ");
}
for(var colsp=1;colsp<=2*row-1;colsp++){//控制里层的*多少2*row-1;
document.write("*");
}
document.write("</br>");
}
for(var row=1;row<=10;row++){//控制外层多少层10
for(var space=1;space<=row;space++){//控制左边倒三角空10-row
document.write(" ");
}
for(var colsp=1;colsp<=2*(10-row)-1;colsp++){//控制里层的*多少2*row-1;
document.write("*");
}
document.write("</br>");
DOM和BOM
//作用域链 两链一包,原型链,闭包
window对象,当前窗口,顶级对象,所有的对象都是以属性的方式添加在window对象下面,一般可以省略不写
document对象 代表当前文档HTML文件
history对象 历史对象
location 地址栏对象
navigator 浏览器对象
screen 屏幕对象
BOM
***************************************************************
1。window//--------------------------------------------------
window.innerWidth:窗口的内宽
window.innerHeight:窗口的内高
window.outerWidth:窗口的外宽
window.outerHeight:窗口的外高
2.window对象的方法------------------------------------------
window.alert()弹出警示窗口
window.prompt()输入框
window.confirm();确定框
window.close()关闭当前窗口
window.open(url,name,option)打开窗口,
window.setTimeout(code,Millisec)//延时器
window.clearTimeout(timer);//清除延时器
window.setInterval(code,Millisec)//定时器。按指定的毫秒周期循环
window.clearInterval(timer);//清除定时器
3.screen对象-----------------------------------------------
screen.width获取屏幕的宽度
screen.height获取屏幕的高度
screen.availWidth获取屏幕的有效宽度
screen.colorDepth 屏幕的色深
4.location对象---------------------------------------------
location.href:主要是用于实现网页跳转
location.reload()相当于浏览器的刷新按钮
5.history--------------------------------------------------
history.go():主要的功能是用来显示浏览器的历史记录;
history.go(-1):相当于后退
history.go(0):相当于刷新
history.go(1):相当于前进
onclick="history.go(1)"
6.navigator------------------------------------------------
navigator.appName获取到浏览器的名称(判断什么是ie浏览器,什么是w3c浏览器)
navigator.appVersion 获取浏览器的版本
navigator.cpuClass 获取cpu,只有IE能支持
.DOM
*************************************************************
主要用来操作HTML文档中的各标记的属性和方法(也可以操作XML,XHTML等)
ie 的js在本地,所有老是有提示是否开启
学习DOM操作首先要明确两点:
**DOm把HTML中的每个标记都看做一个对象
**HTML标记中所拥有的属性,这个对象也同时拥有,
核心DOM
-----------------------------------------------------
主要的功能是操作HTML和XHML
注意,在写代码时,我们经常会换行,空格,但是DOM会把这些当做一个文本节点。
所以,有时获取节点时,会取错,最后的方法是把空格去点,网上有专门的压缩工具
就是
<table>
<tr></tr>
</table>
改为<table><tr></tr></table>
firstChild:第一个子节点
lastChild:最后一个子节点
nodeValue:节点值
parentNode:父节点
childNodes:子节点列表,它是一个数组,就算只有一个子节点,也是一个数组
object.setAttribute(属性名,属性值)增加属性,修改属性
object.getAttribute(属性名) 查找
object.removeAttribute(属性名) 删除
document.createElement("创建的标签名")
创建的标签不带尖括号
创建好的标签名它是存放在内存中,暂时没有任何作用
追加节点
父对象.appendChild(创建的标签名的返回值)
删除节点
父对象.removeChild(创建的标签名的返回值)
HTML DOM
-----------------------------------------------------
主要是用于操作HTML文档
为什么会有HTML DOM 因为随着HTML的文档层次越深,那么核心DOM
操作HTML文档会更加繁琐,所以才有了HTML DOM操作HTML
document.getElementById(id)这个方法只有document对象才拥有
父对象.getElementsByTagName(标签名)就是获取到的只有一个元素,它也是一个数组
父对象.getElementsByTagName(标签名)就是获取到的只有一个元素,它也是一个数组
父对象.getElementsByName(获取类名)。如果添加class要写为clssName
HTML DOM标签属性的操作
标签对象.属性 获取属性的值
标签对象.属性="赋值" 修改属性值
标签对象.属性="" 删 置空有一些赋值为0或者null
以上操作均不包含对clss属性的操作。如果需要对clss属性操作,需要将clss属
性名更改为className
对标签属性的操作,
有核心DOM
HTML DOM
CSS DOM
zencodi插件
3,XML DOM 主要拥有操作XML文档
51.4,CSS DOM
----------------------------------------------------------------------
主要拥有操作标签的style属性
每一个HTML标签都拥有一个style属性,那么这个style属性其实也是一个对象
css样式其实都是这个style对象的属性
标签对象.style.CSS样式属性="CSS值"
和核心DOM的标签属性一样,但是css DOM更方便
5,event DOM ----------------------------------------
用户的一些行为如鼠标点击,鼠标经过等事件
它主要操作even
在js中,当事件发生时,有一些相关的信息会保存在
even中,比如键盘按下时。会将键盘的keyCode码保存在event事件中,
当鼠标在图片上点击时,获取到点击的位置坐标
event事件的相关属性
clientX离窗口左边多远
clientY离窗口上边多远
pageX:离网页左边多远
pageY:离网页上面多远
还有键盘的keyCode码
function(event){
var eve=event||window.event;//兼容
alert(event)
console.log(event)
eve.clientX
eve.pageX
}
------------
可以先判断
if(event){}
最好是 var eve=event||window.event;
----
ie中
function(event){
alert(event)
console.log(event)
要加window
window.event.clientX
window.event.X
}
------------
console.log();
事件绑定:1行内绑定 将事件处理程序写在HTML标签中
2动态绑定 通过JS程序获取到HTML标签对象然后再给它绑定事件处理程序,实现行为,样式,结构分离
onkeypress
onload页面加载完
onclick鼠标点击时
onblur当失去焦点时(这2个主要配合input。用来用户名,默认名)
onfocus当得到焦点时
onsubmit当表单提交时。它是给form标签绑定的
怎样来阻止表单提交。
1:当onsubmit是行内绑定时 return false; 绑定的事件也要加个return
2 当onsubmit是动态绑定时 直接return false即可
onchange//内容改变时。
onkeydown当键盘按下时
rgb只能用sty background-color 标签的bgcolor不支持RGB
select与option对象的相关属性
select对象.length:可以设置或者是获取到option的个数
select对象.options:它返回所有的option它是一个数组
select对象.selectedIndex:返回默认选中的下标
value:它是给option设置value值
text:它是向option标记中书写内容
this------------------------------------------------------
行内绑定 this 指向自己
动态绑定 也是自己,如果没有自己,指向window
表格的专用属性
先获取table
要给其加tbody
表格对象.tBodies【0】
tbody对象.rows
行对象。cells
tobody对象