现在的位置: 首页 > 综合 > 正文

JavaScript初、中、高学习,直接/简介引用节点,处理属性节点

2013年03月15日 ⁄ 综合 ⁄ 共 5234字 ⁄ 字号 评论关闭

                            
1.查找对象(主要)
2.操作对象
1.java 与JavaScript本质上没有什么区别
2.javaScript的引用方式:
a)直接在head的<script type="text/javascript">中进行书写
b)引入外部的js文件:
注意:js文件的<script>必须与页面中进行书写代码的<script>的标签一定要区分开来,
即引用仅仅是引用,不可以在作为引用的<script>中书写代码。

3)

javaScript基础:
 1注意:
  javascript严格区分大小写。
变量没有数据类型,变量的数据类型是有其所付的值所决定的。
变量要先声明后使用,不能使用为未声明的变量。
javaScript中元素中间不可以带有-,eg:background-Color应改为backgroundColor

 2javascript常用的六种数据类型:
undefined类型: var first;
null类型: var second=null;
Boolean类型: var thrid=true;
字符串类型: var fourth="大家好"
数值类型: var person=153.25;
类: var person={
username:'张三',password:'654321',sex:0
};
注意:不能使用未经声明的变量。


 3数组进行遍历:用var,数组名:strs。
if(strs.length>0){
(方法1) for(var i=0; i<strs.length;i++){
alert(strs[i]);
}
  (方法2)for(var str in strs){
 
alert(strs[str])
 
}
}else{
 }
 
 4javascript中“=”的含义:
“=”是赋值,
“==”是判断相等,不严格意义上的相等,值判断值是否相等,不关注类型。
“===”也是判断相等的,是严格意义上的判断,判断大小和类型。

 5函数:
javascript中的函数相当于Java中的方法:
典型的javascript函数定义如下:
function 函数名称(参数表){
函数执行部分;
}
return语句:
return 返回函数的返回值并结束函数运行。
return 表达式;
当使用return语句的时候,要得到函数的返回值,只要利用函数名对一个变量赋值就行了

函数可以有返回值。直接在函数的最后加上return及其值即可。

使用eval(String str)来执行javascript代码
eval参数字符串是和eval函数上下文相关的
parseInt(String str),parseFloat(String str);

 6事件机制:
ondblclick : 被双击;
onkeydown:键盘移动;
onfocus 成为焦点;
onblur 对象失去焦点;
onchange 选中对象值发生改变
onload 页面装载
onunload 页面卸载

 7javascript中常用对象:
1)时间对象:
使用前必须选声明:var dat=new Date();
getyear,getmonth,setyear,setmonth,toLocalstring(),
2)数学对象:Math.数学函数(参数)
求随机数的方法:
Math.random(),产生【0,1)随机数
3)字符串对象:
charAt(idx):返回指定位置处的字符
i
indexOf(Chr):返回指定子字符串的位置,从左到右。找不到返回-1
s
ubstr(m,n):返回给定字符串中从m位置开始,取n个字符,如果参数n省略,则意味着取到字符串末尾。 
s
ubstring(m,n):返回给定字符串中从m位置开始,到n位置结束,如果参数n省略,则意味着取到字符串末尾。 
t
toLowerCase():将字符串中的字符全部转化成小写。
toUpperCase():将字符串中的字符全部转化成大写。
length: 属性,不是方法,返回字符串的长度。

 8javascript的对话框:
警告框:alert, 常用。
询问框:prompt("请输入密码","password")返回提示框中的值。
确认框:Confirm(“确定删除???”)返回true/false.

 9两个标签:

<div>制动换行(在表单的下面)
<span>不制动换行(和表单在同一行)

alert(aaa);输出aaa这个变量。

 11form对象常用的属性:
1)action 返回或者设置action属性 
    2)elements 获取一个数组,包括该表单中所有的表单域 
    3)length 返回表单的表单域的数量
4)method 返回或设置表单的method属性 
5)name 返回或设置表单的name属性 


 12对象的方法:
  submit():相当于单击submit按钮,表示表单提交到指定的页面。
  reset():相当于reset按钮,表示所有所有表单域到初始值。
 
 13form对象的事件:
  onsubmit:在表单提交之前出发
  onreset:在表单被重置之前出发。
   
 14引用表单域的四种方法:
  form.name;              
  form.elements[i];
  form.elements[name];   
  document.getElementById(id);
 
  dissabled :使表单域不能接受用户的操作,变为只读 
  name :获取或设置表单域的名称
  form:获取该表单域所属的表单
  value:获取或设置表单域的值
  type :判断表单域的类型
  focus():使表单域获得焦点
  blur():使表单域失去焦点
 
 15文本域 (text, password, textarea )
  利用value属性获取和设置文本域内容
  利用defaultValue获得文本域的默认值。
  reset方法就是调用该属性。
 
 16单选按钮组常用操作
  通过checked属性获得选中和未选中的状态。 
  获得单选按钮组的值:通过遍历单选按钮来获取被选中的值
  复选框的处理类似单选按钮
 
 17警告框:alert(变量.属性)常用。
完成表单的整体验证的三种方式:
1)利用button按钮和表单的submit()函数来完成整体验证


2)利用submit按钮和表单的onsubmit事件来完成整体验证(实例见testsubmit.html页面)
 但是在onsubmit事件中要加上return 函数 并且该函数必须返回true或者false返回
 true表单提交 false表单不提交
 
3)利用submit按钮和按钮的onclick事件来完成整体验证(实例见testhaosumit.html页面)
但是在onclick事件也要加上return 函数,并且该函数必须返回true或者false,返回true
表单提交 false表单不提交。

 18表单整体验证(校验)三种方式:
目的:为了防止对服务器的不必要的访问  减轻服务器的压力
1)第一种: 
利用button按钮和表单的submit()函数来完成整体验证
2)第二种:
利用submit按钮和表单的onsubmit事件来完成整体验证(实例见testsubmit.html页面)
但是在onsubmit事件中要加上return 函数 并且该函数必须返回true或者false  
返回true表单提交 false表单不提交

3)第三种:
   利用submit按钮和按钮的onclick事件来完成整体验证(实例见testhaosumit.html页面)

单个验证的目的:提高用户的体验效果。


 10获取表单的五种方式:
1.首先通过document.forms得到的是当前页面所有form表单元素组成的数组, 
 然后通过要获取表单出现的索引位置来获取指定的表单对象
document.form[i]  //得到页面中的第i个表单。
document.forms[formName] //得到页面中相应name的表单。
 
2.首先通过document.forms得到的是当前页面所有form表单元素组成的数组,  
 然后通过要获取表单的name属性值得到指定表单
  docuemnt.forms[i]  //得到页面第i个表单。
  document.forms[forms[formName] //得到页面中相应的表单
 
3.第三种:直接通过document.要获取表单的name属性值 得到指定表单(推荐使用的)
document.formName;
4.直接通过表单的name属性值得到指定表单

5.通过该表单的id属性值获取指定的表单对象:
document.getElementById("id")获取(推荐使用)


 19常用window对象的方法
  open(URL,windowName,parameterList):
  open方法创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址
  close():close方法关闭一个浏览器窗口
 
 20对象:
  history:含有以前访问过的网页的URL地址。
  navigator:获取浏览器信息。
  location对象是当前网页的URL地址,我们可以使用Location对象来让浏览器打开某页
  具体:window.location.href=“xxxx” 这里的xxxx可以是一页也可以是一个网站的IP地址。

ie浏览器不支持type属性,而火狐浏览器支持。
display两个属性:none
javascript 的优点和缺点都在于它的灵活性。

 21节点的引用:
 
  1)直接引用结点:
   使用document.getElementById()引用指定id的结点 
   使用document.getElementsByTagName(“a”),将所有<a>元素结点放到一个数组中返回。
   使用document.getElementsByName(“abc”),将所有name属性为”abc”的元素结点放
   到一个数组中返回。
   
  2)间接引用节点:
   a.引用子结点:
  每个结点都有一个childNodes集合属性,类型是数组对象,表示该结点的所有子结点
  的集合。
 
  这些子结点按照它在文档中出现的顺序排列,因此可以通过索引来依次访问各个子结点.
  firstChild, lastChild
 
   b.引用父节点: DOM模型中,除了根结点,每个结点都仅有一个父节点,可以用parentNode属性来引用.
   
   c.引用兄弟结点:
    element.nextSibling;引用下一个兄弟结点
element.previousSibling引用上一个兄弟结点
  如果该结点没有相应的兄弟结点,则属性返回null.

 
 22处理属性节点:
  1)元素结点.属性名称(可以读写属性值)
    使用setAttritbute(), getAttribute()添加和设置属性。
 
  2)处理文本结点:
  要获取一个结点内的文本,一般使用innerHTML属性,innerHTML属性不局限于操作一个结点,
  而是可以使用HTML片段直接填充页面或直接获取。
 
  3)处理属性节点:
    元素结点.属性名称(可以读写属性值)使用setAttritbute(), getAttribute()
    添加和设置属性处理文本结点
  要获取一个结点内的文本,一般使用innerHTML属性
  innerHTML属性不局限于操作一个结点,而是可以使用HTML片段直接填充页面或直接获取HTML片段,大大提高了开发的灵活性。 
 
  出去根节点,每个节点都有且只有一个根节点。
任何节点都有0个或者多个子节点。

 23改变文档的层次结构:
  1)创建,document.createElement方法创建元素结点:
    var divElement = document.createElement(“div")
  2)添加,使用appendChild方法添加结点:
    parentNode.appendChild(childElement)
  3)插入,使用insertBefore方法插入子结点:
    parentNode.insertBefore(newNode, beforeNode)
  4)取代,使用replaceChild方法取代子结点:
    parentNode.replaceChild(newNode, oldNode),oldNode必须是已经存在的,不然会发生异常。
  5)删除,使用removeChild方法删除子结点:
    parentNode.removeChild(childNode)
 注意:下拉列表和表格不能用这样的DOM方法,而要用DHTML接口中的方法。


 22innerHTML属性利用的四个属性节点:
div   span    li     td(列)

 23添加节点的步骤:
1).创建出要添加的新节点 并且为其设置相关的属性
2).要找到要添加位置的父节点
3).然后通过父节点的appendChild()函数添加新节点







抱歉!评论已关闭.