初学javascript所记的笔记

          JavaScript语言本身和java语言没有任何关系
        JavaScript实现
JavaScript的核心ECMAscript描述了该语言的语法和基本对象。
DOM描述了处理网页内容的方法和接口。
BOM描述了与浏览器进行交互的方法和接口。
   一个完整的javascript实现是由 ECMAScript DOM BOM  3个不同部分组成的
 
               JavaScript重要的学习五点
   1、基础语法  ECMAScript
   2、数组,函数,对象
   3、DOM    动态的改变文本流
   4、BOM
   5、AJAX
 
          javascript构成简说
ecmascript描述了以下内容:语法,类型,语句,关键字,保留字,运算符,对象


    DOM描述以下内容:对文档的操作
DOM 视图-描述跟踪文档的各种视图(即css样式化之前和css样式化之后的文档)
DOM 事件-描述事件的接口
DOM 样式-描述处理基于CSS样式的接口
DOM 遍历和范围-描述遍历和操作文档树的接口


BOM大概描述一下内容:  对浏览器的操作
BOM主要处理浏览器窗口和框架,不过通常浏览器特定的javascript扩展都被看做BOM的一部分。这些扩展包括:
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供web浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对cookie的支持
ie扩展了BOM,加入了ActiveXObject类,可以通过javascript实例化ActiveX对象


          javascript特性


脚本编写      基于对象       简单  安全   动态   跨平台
   
           javascript优缺点
1、javascript可以方便地操纵各种浏览器的对象,可以使用
2、javascript来




         javascript注释方法//单行注释   /**/中间为多行注释


          javascript代码  嵌入式 链接式 导入式   document.wirte()




        嵌入式
<html>
    <head>
    <script language="javascript" type="text/javascript">
   alert('HELLO')
</script>
  </head>
<body>


</body>
</html>
 
         链接式
<script type="text/javascript" src="js/1.js"></script>  js支持改名的,只要把type写上,写成1.ttt都没问题


         javascript常见提示框
1警告框
alert(内容)


2、确认框
confirm(内容)有确定 取消两个按键 


3、会话框
prompt(内,容)内对应的是标题,容对应的框里面的默认值
         
            javascript常用的转移字符
 
       符号                  代表意
       \'                       '
       \"                       "
       \n                       换行
       \\                        \
 
            javascript变量申明
区别大小写,var 申明时赋值 定义 才可以弹出内容
1、在变量申明的时候无需指定类型
2、在申明变量的时候通过var 关键字
3、变量名字区分大小写
4、经常使用注释
var 变量名 = 变量值;


            javascript变量命名规范
1、必须以字母、下划线和$开头
2、变量名命名要有意义,一般采用驼峰发
3、余下的字符可以是下划线、美元符号或任何的字母、数字
4、最长为255个字符
5、不能有空格,大小写敏感
6、不能使用javascript中的关键字或保留字命名
                javascript变量类型
 undefined-未定义类型 未被赋值的变量,值为undefined
null-空类型         值为null,尚不存在的对象
string-字符串类型    值用引号括起来
Boolean-布尔类型     值为true/false
number-数字类型        任何数字(数字类型包含nan,int,float,且所有数字类型均用64位浮点数格式表示,数组索引采用32位整数)
可以使用   typeof(object)来获取object的类型


               javascript变量显式转换
类型转换     
         javascript是弱类型语言,变量的类型对应于其值得类型,可以对不同类型的变量执行运算,解释器强制转换数据类型,然后进行处理如:
               运算                      结果
     数值与字符串相加                 将数值强制转换为字符串
    布尔值与字符串相加                将布尔值强制转换为字符串   (true或者false转成字符串)
    数值与布尔值相加                   将布尔值强制转换为数值   (布尔值当中的true转成1,false转成0)
NaN,null,undefined,‘’,0,‘false’在判定时自动转成false  上面6个值,null=undefined,NaN永远不和任何值相等,在数字或者字符串前面加上2个!!可转换成布尔值


 强制转换方式  强转数字Number() 强转字符串String() 强转Boolean()转不对会显示NaN
 
             javascript自定义函数
js函数介绍
(1)函数也是一段js代码,它自定义一次,单可能不执行或者调用任意次;
(2)函数可以有0个或者多个参数(形参和实参),同时支持一个返回值;
(3)函数即对象
(4)可以将函数赋值给变量,或者作为参数传递给其他函数,可以设置它们的属性,可以调用它们的方法;
            
               函数定义
(1)使用单独定义
         function 函数名(arg1,arg2,arg3......){
       code
}
(2)  使用变量赋值
     var fun=function(arg1,arg2,arg3......){
      code
}
(3)   使用构造函数
      var fun=New Function(arg1,arg2,arg3.....,code....)
同一种方式申明的函数如果重名后面会覆盖函数;
如果不同方式申明函数同名,则变量定义的方式优先;


      javascript函数嵌套
function textFun(a,b){
        function 函数名(a){return a*a;};
          return 函数名(a)+函数名(b);
}
1,调用函数只需要使用 变量名();或者函数名();即可
2,使用函数嵌套必须要注意,在函数体内的函数(也就是嵌套函数),只能在父级函数内调用,不能在全局调用和其他函数中调用;
 ruturn语句在同方法当中后面的语句都不会执行;把值当作当前方法的结果
   document.write(“文本内容”)




     javascript函数递归
function fact(num){
         if(num<=1){
  return 1;
} else{
  return num*fact(num-1)
}
}
       (fact(5)意思为5*4*3*2*1)
  
       javascript全局变量和局部变量
1、全局变量,在函数体外申明就是全局变量,在函数内部可以使用
2、局部变量,在函数内部用var申明的变量就叫做局部变量;


var i=‘全局变量’
function test(){
    var i=‘局部变量’;
    alert(i);//输出局部变量
}


alert(i);输出全局变量


         arguments 对象
arguments对象主要用于获取函数形参相关的信息,比如可以直接或许形参的值,获取形参的长度。获取当前函数
主要特性:
arguments[]
数组只在函数体内定义。在函数体内,arguments引用该函数的arguments对象。该对象有带编号的属性,并作为一个存放传递给函数的所有参数的数组。标识符arguments本质上是一个局部变量,在每个函数中都会被自动申明并初始化。它值在函数体重才能引用arguments对象,在全局代码中没有定义。
arguments.callee 单签正在运行的函数 调自己整个的
arguments.callee.length;函数自身参数个数(形参)
arguments.length 传递给函数的参数的个数(实参)外面的运行函数参数下午 2:27


     javascript数组介绍
(1)数组(array)是数据的结合,在js中,数组是一种基本的数据类型,该数据类型是复合型,一个数组可以包含多个元素,且每个元素都可以是任何数据类型
(2)在js中数据并不支持多维数组,以及关联数组,但缺可以实现多维数组和关联数组的功能,这其实使用对象模拟来实现的;


delete 删除某一下标的值,键不会被删除


设置速度的长度,比如某个数据长度为两个值,设置length为1,则将第二个的值和键一起删除


删除 splice  Array.splice(起始的下标,结束的下标) 删除下标为1的键和值(1,1,)返回数组


toString() 将数组转成字符串 返回字符串 对原数组无影响


join 自定义转字符串 可以修改分隔符 Array.join("-") 通过-分割 对原数组无影响
返回值不会分割二维的数组


数组链接 concat   Array.concat(多个数组逗号隔开) 对原数组无影响,返回值为新组合数组


Array.pop()删除数组最后一个元素,并返回删除后的值


Array.shift() 删除数组的第一个元素,并返回删除后的值


Array.unshift()在数据的最前头添加一个值,并影响数值,返回修改后的值得个数


Array.push()和 unshift 一样,在最后增加值


Array.reverse()颠倒顺序 返回颠倒的数组,并对原数组影响


Array.sort() 排序 默认顺序:数字 》 字母 》汉字》undefined


Array.slice(开始,结束) 提取数组里面的值 包含起始位置的值,但不包括结束位置的值


Array.splice(起始的位置,结束的位置,替换的值)






     运算符语句




+ 运算符  同类型直接运算, 不同则是链接符的作用


- * / %(取模) 强行将字符串转换成数字类型,进行运算,无法运算结果显示NaN


++


++i var a=i+1;


i++ var a=i; a+1;


例子 var a=10; a = i++ + i--; a的值为21;因为++ -- 的优先级比+ - 高


+= -= *= /=   i+=1;意思为 i=i+1;


== 比较符  两边的值是否相等 返回布尔型


=== 比的是类型 再加上值;


>= <= >或者=  <或者= 


字符串比较 是比较的长度 字符串和数字比较 字符串转换成数字比较 无法相比较返回false


|| or 或      && and  并
 
var yy = 123;
var xx = 'xxx';
var ss = yy || xx;


如果第一个值转换为boolean 为true 则ss = yy;反之 则ss = xx;如果都是false;那应该就没值了吧


三维运算 Boolean ?运算一:运算二;如果Boolean为true 执行运算一,反之执行运算二


对比if  if(boolean){运算一}else{运算二}


循环语句 for(var i=0;i<9;i++){运算语句}


while(boolean){运算语句}循环  如果Boolean成立 一直循环


do{运算语句}while(Boolean);按顺序,至少会执行一次运算语句,如果Boolean成立继续执行


switch(变量名){
case 1;
运算语句
break;

case 2;
运算语句
break;

case 2;
运算语句
continue;

default:
运算语句;

变量名为1时,执行第一条语句,continue为只是跳出本次循环,以后的还会循环;break为跳出循环,不写会继续往下循环,没有匹配到,则执行default;


for(var 变量 in Array){
运算语句
}
遍历,将数组的循环赋值给变量,直到循环到数组的最后一个值


delete 对象   删除成功返回 true;通过var 申明的对象无法删除


in    检查数组或者对象的下标或键是否存在


1 in Array 意为 Array中是否含有下标为1 的值;存在返回true;左边的操作数必须为一个可以成功转成字符串类型的值,右边必须为数组或者对象




javascript 对象
对象的概念
1、对象是一种复合型数据类型,可以讲很多数据集中在一个单元中,对象通过属性来获取数据集中的数据,也可以通过方法来实现数据的某些功能;
2、对象通常会使用很多变量来描述一些实物的属性,例如一个名为COLOR的变量,该变量有可能会用来描述一个东西的颜色,比如说笔的颜色,水桶的颜色等,如果一个程序里有多个实物,那么久有可能要用多个变量来描述这些实物的颜色;那么对象就是把这些看上去杂乱无序的变量按逻辑进行分类;
3、对象的值可以是任何类型;
4、对象是可以被继承;


创建对象


var obj = new Object();创建一个对象
var obj = {};json方式创建一个空对象
var obj = new Object('类型') 创建一个基于类型的对象
var arr = new Array();穿件一个数组对象
var str = new String();创建一个字符串对象
var bol = new boolean();创建一个布尔类型对象


var obj = {name:"muzhi",age:18,arr:[1,2,3],fun:function(){alert("xxx")}};


var obj = new test();//构造函数  申明时会自动触发


对象的废除和属性删除


删除对象属性 delete obj.name 


清空整个对象 obj = null;




  对象中的this的用法
this 谁调用谁this就是谁
call(对象,a,b,c)第一个必须是对象,而且是调用


常用对象


字符串常用对象


搜索字符串当中指定的字符串出现的位置
str.indexOf() 里面填写字符串,返回值为字符串所在的上一个位置,不存在返回-1


str.lastIndexOf() 是找到最后一个能和字符串里面的匹配的字符串的位置


str.search() 搜索 但是可以使用正则


str.replace() 第一个填写需要替换的内容,第二个填写换成的内容,返回替换后的字符串,如果不存在返回原字符串


str.match() 搜索到返回搜索的结果,搜索不到返回null 原字符串不变,前面的都不变


str.slice(3,4) 截取 第一个写开始但截取不包括的位置,第二个写结束位置,返回截取字符串,结束的位置字符串没这么长,截取到最后对原字符串无影响


str.substr() 截取 第一个写开始的但不包括位置, 第二个写截取的长度


str.substring()于slice相同


str.toString() 转换成字符串


str.contact() 字符串链接,括号内写链接的字符串,返回链接后的字符串,对原字符串无影响


str.length   返回字符串的长度


str.charAt() 括号内写一个数字 返回这个数字位置的字符


str.charCodeAt() 返回这个数字的编码


str.toLowerCase() 将字符串转换成小写


str.toUpperCase() 将字符串转化成大写


str..split("")  分割方法  按括号内的符号,将字符串分割成数组


判断a是否是数组 a  instanceof Array 如果是 返回true




match 对象常用方法


Math.ceil(num) 有小数点 取整时 个位数加一位


math.floor(num) 取整 直接把小数点以后去除


如果是负数,它两个相反


Math.min(1,2,3) 取里面最小的数


Math.max(1,2,3) 取里面最大的数


Math.round(num) 四舍五入


Math.abs(num) 返回相反数


Number.MAX_VALUE 最大数值


Number.MIN_VALUE最小数值


Number.POSITIVE_INFINITY        正无穷大


Number.NEGATIVE_INFINITY        负无穷大


Number.toString() 将数字转换成字符串


时间


Js获取当前日期时间及其它操作


var myDate = new Date();
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( );        //获取日期与时间




js DOM 操作


一个对象   4种获取  7种关系


1、对元素的添删改查(标签)
2、对元素的属性的添删改查(html属性,css属性)
3、对元素所包含的内容的添删改查


节点
根据DOM,HTML文档中的每个成分都是一个节点


DOM是这样规定的:


整个文档是一个文档节点
每个HTML标签是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点


节点信息分类


每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)


元素节点的nodeName 是标签名称
属性节点的nodeName 是属性名称
文本节点的nodeName 永远是#text
文档节点的nodeName 永远是#document


注释:nodeName 所包含的xml 元素的标签名称永远是大写的


节点标示符
nodeValue
对于文本节点,nodeValue属性包含文本。
对于属性节点,nodeValue属性包含属性值。
nodeValue属性对于文档节点和元素节点是不可用的。


nodeType
nodeType属性可返回节点的类型


最重要的节点类型是:


元素类型 节点类型
标签 1
属性 2
文本 3
注释 8
文档 9


空格 换行 也算一个节点
四项获取


1、getElementById(); 
获取Id为什么的节点;(Id 中的一种选择器,有且为一)获取一个对象
document.getElementById("id名");


在script标签中加入defer=“defer” 等同于把标签放在了html底部


在火狐谷歌里面用obj.textContent来获取元素节点的内容




2、document.getElementsByTagName("");
通过标签名字来获取,注意是个复数。访问哪一个需要按数组的形式访问,即使只有一个,也要用复数形式
如:document.getElementsByTagName("p")[0];或者赋值变量 obj[0]


3、document.getElementsByName();
用法同第二个,但是这个是获取含有name的元素节点


3、document.getElementsByClassName();
也是复数,用法同第二个,通过class获取,ie的9以上支持


创建节点
1、第一种方法,先把节点放到内存,然后通过变量使用
var 变量名 = document.createElement("div");//创建标签 内容为<div></div>
var 变量名 = document.createTextNode("创建文本节点,这里写文本内容");


2、添加节点


父节点.appendChild(变量名);在某个节点中添加一个节点,返回新节点引用
父节点.insertBefore(变量名,位置);默认最后面添加 比append多了一个功能,选择位置,节点名.firstChild 是第一个子元素前面,返回新节点引用
克隆 var 变量名 = 节点名.cloneNode(); 括号里面加true 为复制标签内所有内容全部复制 不加只复制标签
光克隆没有意义,只是放到内存里面,然后还需要把变量添加到某个地方


节点获取
引用子节点  elementName(节点名)
elementName.childNodes
elementName 节点下所有子节点数组
elementName.firstChild
elementName下的第一个节点
elementName.lastChild
elementName下的最后一个子节点
引用父节点
elementName.parentNode  elementName节点的父节点
elementName.parentElement elementName节点的父元素(IE)


因为 空格 换行 也算一个子节点,怎么获取父节点下面是标签的子节点?
var li = ul[0].childNodes;//申明一个无序列表变量
 for(var eee in li){//遍历整个列表
if(li[eee].nodeType==1){//如果节点属性为1,则为标签
alert(li[eee].nodeName);//依次弹出标签名字
}
}
获取节点信息
节点.nodeName  节点的名称
节点.nodeType
节点的节点类型 1 element 2 attribute 3 text
节点.nodeValue   节点的文本内容  


获取兄弟标签
节点名.nextSibling.innerText  获取下一个兄弟标签 innerText为节点内容
节点名.previousSibling  获取上一个兄弟标签


节点值得获取
innerText 起始和结束标签内的文本(火狐不管用 火狐为textContent)
innerHTMl  起始和结束标签内的HTML(IE)()
outerHTML  起始和结束标签内的HTML(包含标签本身 全部兼容)


节点值得赋值
节点.innerHTMl = "内容"; //直接赋值


节点值获取的兼容性设置
利用只有IE可辨别的document.all
if(document.all){
alert(节点.innerText);//IE 
}else{
alert(节点.textContent)//火狐辨识和谷歌都可以辨识
}




设置属性节点                 
elementNode.setAttribute(attributeName,attributeValue)
举例 设置一个a节点的class值
a.setAttribute('class','lianjie');


attributeName 属性的名字 如href name value class
attributeValue 属性的值用冒号括起来
elementNode.getAttribute(arributeName) 获取节点属性
举例 弹出一个a标签的href
alert(a.getAttribute("href"));


删除一个属性
a.removeAttribute("值得名称");


删除节点
节点.removeNode(true); 括号内加true 为全部删除,不加只删除标签,不删除内容(IE适用)
w3c标准删除
节点.parentNode.removeChild(节点);




表单操作


insertRow(0) 插入一行 tr  table.insertRow(0).innerText="这是添加一行列表,这里是添加的文本内容"
insertCell(0) 插入一列 td 必须在tr中加 tr.insertCell(0).innerText="这是添加的第一个td,第二个括号内写1"
rows[0] 获取在表格第几行 括号内写第几行
cells[0] 获取表格中第几行的 第几列的节点
deleteRow(0)  删除一行 括号里写删除第几个
deleteCell(0)  删除一列
createCaption  创建表格标题




获取高度宽度
节点.clientHeight   padding+content 的高度
节点.clientWidth   padding+content 的宽度
两个都不包括边框和超出部分


offsetHeight  offsetWidth  padding+content+border 的高度和宽度


offsetTop offsetLeft 节点border距离定位的父元素的距离 


clientTop clientLeft 节点的content距离定位的父元素的距离 


scrollWidth/scrollHeight
可以返回整个网页或某个元素的可视内容的宽度或者高度以后,加上滚动条可以滚动的内容距离值,也就是超出可视区域后额外的那些距离的高宽度;即使是空白的内容也会有效,就是 它们会返回的正确的值,注意该属性不包括边框和垂直滚动条的高宽度值


scrollLeft属性与scrollTop属性的作用相同,获取滚动条被拉动  移动的距离数值;
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript核心技术 简介: 《JavaScript核心技术》对于各种浏览器、浏览器版本、JavaScript版本、DOM版本的介绍,有助于我们理解所遇到的各种新旧代码,使我们能够对这些代码做出正确的取舍。《JavaScript核心技术》还提供了一些使用JavaScript的最佳实践。无论是新手还是老手,这些如何正确使用JavaScript的经验都能帮助他们养成良好的编程习惯。《JavaScript核心技术》还介绍了一些调试和开发JavaScript的工具,这些工具无疑能够提高我们的开发效率。 《JavaScript核心技术》最后对于Ajax和几个流行的JavaScript库的介绍,无疑会开阔我们在JavaScript使用上的思路。 《JavaScript核心技术》是一本真正意义上的“新书”,不仅介绍了最新的JavaScript知识和方向,还完全覆盖了当今Web开发中关于JavaScript的所有重要话题,它使用了大量实例代码,图文并茂地讲解了使用JavaScript的各个层次和领域的内容。它不是一本参考手册,但却是一本值得拥有的教程。 JavaScript核心技术 目录: 前言 第1章JavaScript初探 1.1规范和实现相互交织的历史 1.2跨浏览器的不兼容性和其他常见的JavaScript传说 1.3你能用JavaScript来做什么 1.4JavaScript初探:“HelloWorld!” 1.5JavaScript沙箱 1.6可访问性和JavaScript的最佳实践 第2章JavaScript数据类型与变量 2.1变量的标识 2.2作用域 2.3简单类型 2.4常量:有名称但不改变 2.5习题 第3章运算符和语句 3.1JavaScript语句的格式 3.2简单语句 3.3条件语句和程序流 3.4条件运算符 3.5逻辑运算符 3.6高级语句:循环语句 3.7习题 第4章JavaScript对象 4.1对象构造函数 4.2Number对象 4.3String对象 4.4正则表达式与RegExp 4.5有专门用途的对象:Date和Math 4.6JavaScript数组 4.7关联数组:不是数组的数组 4.8习题 第5章函数 5.1定义函数:细数所有方式 5.2回调函数 5.3函数和递归 5.4嵌套函数、函数闭包和内存泄漏 5.5作为对象的函数 5.6习题 第6章捕捉事件 6.1O级DOM上的事件句柄 6.22级DOM上的事件句柄 6.3产生事件 6.4习题 第7章表单与即时验证 7.1访问表单 7.2把事件附加在表单上:不同的方法 7.3选择列表 7.4单选按钮和复选框 7.5输入字段和JiT正则表达式 7.6习题 第8章沙箱及之上的cookie、连通性和隐私 第9章基础浏览器对象 第10章DOM:文档对象模型 第11章创建定制的JavaScript对象 第12章构建动态网页:在脚本中加入样式 第13章使用Ajax 第14章好消息:生动的程序库!令人惊异的Web服务!有趣的API! 附录习题答案

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值