始于设计 - 专于体验 - 合于沟通 - 久于转化 - 终于口碑 !      16年高端网站建设、跨境电商独立站定制开发、300+专业技术,设计团队、国家高新技术企业
如何学好javascript,外贸网站建设之js学习总结

发布者:万邦     目录:外贸网站制作     阅读数:18899

#js学习总结
js语法要点:js的变量是区分大小写的
_调试js的语法 console.log(变量或对象或数组)_ 针对有返回值
js变量(全局变量与局部变量)

全局变量:
1,在函数外部设置的变量是全局变量
2,在函数内部不用var定义的变量,需要函数调用后才能起作用

局部变量
1,在js函数里面用var声明的变量


## js函数
js函数是有预加载,允许先调用函数,再声明函数  (实际的情况是把函数的声明放入内存,然后再调用函数,这是函数的调用)

_函数先调用后声明的条件,全部代码在一个标记里面,什么叫一个标记就是<scipt></script>,每个标记是独立编译,解释,运行的_
eg:
<script>
    getMyname(); //可以先调用,再声明,必须是要在一个标记体内,分开则不行。
    function getMyname(){
        alert('我的名字叫wilson');
    }    
</script>

### 匿名函数(没有预加载,必须先声明,后调用)
_var 函数名 = function (){ };_

关键词 arguments, 接受所有的实参,数组形式, 但它并不是数组
eg:
function demo(){
     console.log(arguments);
     // arguments[0] = red,  arguments[1]=blue,  argument = green
}
demo('red','blue','green');

匿名函数传参
var a =  function(x,y){
    return x+y;
};

a(5,6) // 11 调用方法

### callee代表当前函数的引用,类似于递归
eg:
function demo(){
    arguments.callee();  //调用本函数
}
demo();

### 函数的返回值 使用return
js函数可以返回任意类型的值(数值,字符串,布尔,对象,nuLL)
return关键字还可以作为直接结束函数的执行
javascript里面一切都是对象,函数也是对象,函数内部还可以返回一个函数

### 函数的调用
传统方式调用 //函数名();

匿名函数自调用
格式: (function(形参){})(参数) 
eg:
(function(x){
    console.log(x);
})('万邦')  //结出的结果是万邦

### 神奇的eval用法
根据上下文环境,将内部的表达式或参数运行起来
eval(alert("123")); //弹出框,123
eval内部参数要求符合语法规则,如果有变量,刚要求先声明才能使用。

## DOM编辑,各个节点都是对象
文档对象模型,通过对节点的操作
在php里面,dom主要是与xml结合使用
在js里面,dom主要是与html结合使用

dom在html里面就是能看到的页面区域
js为了更好的操作DOM,把html标签内容划分了成了很多节点,划分如下:
1,文档节点,document
2,元素节点 -》 主要是指所有的html标签
3,文本节点 -》 主要是文本内容
4,属性节点 -》 主要是指标签的相关属性
5,注释节点

### 如何获得元素节点
1,通过id来获取元素节点,唯一性,getElementByid('id属性值');//直接返回节点值

2,通过标签名称来获取元素节点,getElementsByTagName('tag标签名称') //以数组或集合的形式返回
可以通过这种方式来获取节点元素
eg:
 var inputs = getElementsTagName('input');
 console.log(inputs[0])//用来输出节点元素,还可以用这种方式来输出   console.log(inputs.item(0));
 
 3,通过标签name属性值来获取元素节点,通常用在表单里面。
 getElementsByName('name属性值') //也是以数组或集合的方式返回
 eg: <input type="text" name="password">
 var inputs = getElementsByname('password');
 console.log(inputs.item(0));

### 文本节点的获取
通过子节点的方式来获取 用firstChild或者lastChild
<div>this is text</div>
eg:
var dv = getElementsByTagName('div')[0]; //获取div这个元素节点
_通过 dv.firstChild 来获取文本节点_
console.log(dv.firstChild); // <TextNode textContent = "this is text">
console.log(dv.firstChild.wholeText); // this is test (文本信息)

### 兄弟节点 (在firefox, chrome, safari,opera会给空白节点,ie中不考虑空白节点)
nextSibling   //获得下一个兄弟节点
previousSibling  //获得上一个兄弟节点
childNodes  //获取父节点中所有子节点

用法:  节点元素.兄弟节点 eg dv.nextSibling

###  父节点
parentNode  eg: dv.prarentNode 

## 属性值的操作
何为属性,就是指一个标签内的所有选项
eg:<input **type='' name='' class='' value=''**>加粗的这部分是属性
eg: <a **href='http://www.xingbell.com' addr='xingbell' target=''**></a> 加粗的这部分是属性

获取属性值:1,节点.属性名称;(注意:只要操作W3C规定的属性)
          2,节点.getAttribute (规定和自定义的都可以设置)
**
    eg: 
    var demo = getElementsByTagName('a')[0];
    console.log(demo.href); // http://www.xingbell.com
    console.log(demo.getAttribute('addr'));  //xingbell
**
注意: 自定义属性的获取。

设置属性值:1, 节点.属性名称 = 值;(注意:只要操作W3C规定的属性)
          2, 节点.setAttribute('属性','值');  (规定和自定义的都可以设置)
          
何为自定义的属性(自己可以在任何标签内自定义属性)
eg: <a href="" **Myattr='bannerlink'**></a>

**
    eg: 
    var demo = getElementsByTagName('a')[1];
    console.log(demo.href); // http://www.xingbell.com;
    demo.addr = 'wanbong';
    demo.setAttribute('addr','bong');
**
注意:自定义属性值的设置。

### 获取属性节点的全部属性,通常很少使用 (节点.attributes)
<input type='text' name='username' class='red' value='red' id='username'>
**
    eg:
    var its = getElementById('username');
    var attrs = its.attributes;
    console.log(attrs.value); // value = 'red'
**

#### 节点的创建和追加
1,创建元素节点:
documents.creatElement('tag标签名称');

2,创建文本节点:
documents.creatTextNode('文本内容');
 
**属性的设置: 
节点.setAttribute('名称','值');**

节点的追加:
父节点.appendChild(子节点);
父节点.insertBefore(新节点,旧节点);  //将新节点放到旧节点的前面
父节点.replaceChild(新节点,旧节点);  //新节点替换掉旧节点

#### 节点复制
节点.cloneNode(true/false); 
传递参数
true: 深层复制,节点和子节点全部复制
false: 浅层复制,节点复制,子节点没复制

#### 节点删除
父节点.removeChild(子节点); 

## DOM对css的操作
1,获取css样式
元素节点.style.css样式名称 eg:  divnode.style.width;

2,设置css样式(有则修改,没有则添加)
元素节点.style.css样式名称 = '值';  eg: divnode.style.height = '100px';

注意事项:
1,DOM只能操作行内样式(css样式分为:行内样式,内部样式,外部样式)
行内样式eg:  <div style="width:100xp; backgroud-color:red;"></div>

**2,操作复合样式属性的时候,要去掉中杠,后面首字母要大写**
eg: div.style.backgroudColor = 'red';

# 事件操作
1,什么是事件
就是指能过鼠标,键盘对页面上所做的动作就是事件
**
事件一旦发生需要有事件处理,该事件处理称为『事件驱动』,事件驱动通常由函数担任,如下: onclick, onsubmit, onmouseover, onmouseout, onkeyup, onkeydown, 
onblur, onfocus
**
dom1级的事件方式(最基础的),有4种方式
1, <input type="text" name="username" onclick="demo()">
    function demo(){ this[window]} //这里this代表window
2,<input type="text" name="username" onclick="<script>this[itnode]</script>"
3, itnode.onclick = function(){this[itnode]};
4, itnode.onclick = 函数名;
   function 函数名(){this[itnode]}
   
**Dom2级事件方式 (主要学习内容)**
设置事件 :itnode.addEventListener('事件类型',事件处理[,事件流]);
取消事件 : itnode.removeEventListerner('事件类型',事件处理[,事件流]);

事件类型,主流浏器器没有on, eg: click/mouserover
         IE浏览器有on, eg : onclick/onmouserover
         
e: 
<div id="demo" style="width:200px; background-color:blue;"></div>
eg:
var dv =  getElementById('demo');
**
dv.addEventListerner('click',function(){ ....}); //设置
dv.addEventListerner('click',changecolor);  //设置
**
function changecolor(){
    dv.style.backgroundColor = 'red';
}

**
dv.removeEventListerner('click',changecolor) //取消
**

事件流(true为真:捕捉型,false为假:冒泡型【默认是冒泡型】)
eg dv.addEventListerner('click',changecolor,true);

**IE浏览器(6,7,8)默认是冒泡型,没有参数。但是IE9以后的是支持捕捉型的**

事件对象的运用
function(evt){
  var evnt = evt ? evt : window.event; //获取事件对象
  console.log(evnt.clientX + '--' + evnt.clientY); //相对浏览器dom坐标
  console.log(evnt.pageX + '--' + evnt.pageY); //相对浏览器dom坐标,考虑滚动条
  console.log(evnt.screenX + '--' + evnt.screenY); //相对屏幕
}

事件对象阻止浏览器的默认动用,就是指我们通常在提交表单的时候,在验证表单字段不正确的情况下,阻止表单的提交
eg:
<form name="form" method="post" action="">
    <p>用户名: <input type="text" name="user"></p>
    <p><input type="password" name="pass"></p>
    <p><input type="text" name="mail"></p>
    <P><input type="submit" value="submit">
</form>
<script>
 var fm  = getElementsByTagName('form')[0];
 fm.addEventListerner('submit', function(Evt){
     if(fm.user.value == ''){
        alert('表单信息不正确');
        // return false; // dom1级事件阻止表单提交方式,不适合于dom2级
        evt.preventDefault(); dom2级事件阻止表单提交方式
     }
 });
</script>

###### 加载事件
我们通常在写js的时候,有时会写在html代码的最前面,当执行时,html不起用,原因是因为js需要html和css的加载环境,要等html和css先加载完后,再执行js才可以。所以我们之前写的js代码在放到最后面的原因。如果要js代码想放到最前面,则需要加载事件

最佳js加载事件的写法如下
<html>
.....
<script>
   function jz(){
      var dv = getElementByTagName('div')[0];
      dv.addElentListerner('click', function(){
        this.style.backgroundColor = 'red';
      });
   }
   window.onload = function(){
        jz();
        ...//想加载哪些事件就加载事件,这种方法灵活
   }
</script>
<body>
  <div></div>
</body>

### BOM(大致了解一下) 
主要操作dom区外的浏览器菜单等区域
平时主要是操作地址栏跳转, location  //类似 location.href=
另外操作history(历史记录)history.go()类型这样的

window对象常用方法
alert(); //弹出框
confirm()//确认框

open();
close();
print();
setTimeout(); //定时器函数
clearTimeout();  //取消定时器函数

innerHTML :获取元素节点的内嵌内容
eg:
<script type="text/javascript">
function getInnerHTML()
  {
  alert(document.getElementById("tr1").innerHTML);
  }
</script>
</head>
<body>

<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="getInnerHTML()" value="Alert innerHTML of table row" />
// 弹出的结果如下
<th>Firstname</th>
<th>Lastname</th>

###### setInterval 处理的是全局变量

##### open方法 (创建子级页面)
function newpage(){
    //window.open('显示页面的名称','页面打开方式','参数');
    window.open('11.html','_blank');
}
<input type="text" name="" value="" onclick="newpage()">

### 作用域链
先执行加载函数,然后再执行变量,注意执行的顺序,同名函数与变量是有顺序的。

外贸网站制作专家技术原创,javascript 入门总结(一),总结二将在后面推出。

 

上一篇: 外贸网站建设公司哪家好? 考核指标有哪些?

下一篇: 6个wordpress插件,将加快外贸网站加载速度

签约 精毅集团官网
高端品牌外贸网站设计 - 万邦 03 月签约