函数 *****
定义函数的格式:
function 函数名(形式参数列表){
函数体;
[return 返回值;]
}
调用函数的格式:
函数名(实际参数列表);
案例:
定义一个函数, 形式参数列表(x,y) , 计算x和y的和, 并返回
function sum(x,y){
return x+y;
}
console.info(sum(100,200));
练习
定义一个函数, 形式参数列表(x,y,z,u), 比较大小, 返回较大的数字
function max(x,y,z,u){
return ((x>y?x:y)>z?(x>y?x:y):z)>u?((x>y?x:y)>z?(x>y?x:y):z):u;
}
console.info(max(100,200,300,400));
Function 类型对象 熟悉
创建function类型对象的格式:
1. 定义一个函数 , 就是在创建一个function类型对象, 对象名称为函数名称;
2. 通过匿名函数 创建对象
var 对象名 = function(形式参数列表){
}
3. 通过new 来创建函数对象
var 函数名 = new Function(可变参数列表);
参数列表的含义:
所有参数都是字符串, 最后一个参数 表示函数体, 前面所有参数表示形式参数列表
案例1.
function a(){
console.info("哈哈哈哈哈哈");
}
var b = a;
b();
-----------------------------------------
function a(){
console.info("哈哈哈哈哈哈");
}
a = function(){
console.info("新的哈哈哈哈哈哈");
}
a();
案例2.
var a = function(){
console.info("嘿嘿嘿嘿嘿");
}
a();
案例3.
var a = new Function("x","y","return x+y");
a(100,200);
匿名函数 熟悉
- 定义匿名函数的格式: ***
function(形式参数列表){}
以上格式 , 常用于参数的传递 !
- 自动执行的匿名函数
格式1:
(function(){
console.info("哈哈哈哈哈哈哈哈哈");
})();
格式2:
~|+|-|!|void(function(){
})();
注意:
~ 符号 按位取反
(所有正整数的按位取反结果为 自身+1的负数)
(所有负整数的按位取反结果为 自身+1的绝对值)
+-符号 会将返回值强制转换为number ,并运算
! 会将结果强制转换为boolean ,并取反运算
案例:
-(function(){return 100;})();
全局函数 熟悉
- isNaN(string);
用来验证参数是否为 非数字
参数为数字则返回false , 参数为非数字则返回true
- eval(string)
将参数解析为代码 , 并运行 !
案例:
var x = "alert('哈哈哈哈哈哈')";
eval(x);//弹出了提示窗
var num = "1+1+1+1";
eval(num);//结果为4
URI编码 (URL编码) 了解
- 将文字进行uri编码
var code = encodeURI(text);
- 对uri编码的文字, 进行解码
var text = decodeURI(code);
案例:
encodeURI("唐亮是一个粗人");
decodeURI("%E5%94%90%E4%BA%AE%E6%98%AF%E4%B8%80%E4%B8%AA%E7%B2%97%E4%BA%BA");
HTML DOM对象
html document object model (html文档对象模型)
通过document对象 ,获取元素对象的四种方式: *****
1. 通过id ,查找一个元素对象
var element = document.getElementById("id值");
2. 通过元素的标签名称, 获取一个元素对象数组(数组中元素的顺序是网页中元素出现的顺序!)
var elements = document.getElementsByTagName("标签名称");
3. 通过元素的name属性 , 获取一个元素对象数组(数组中元素的顺序是网页中元素出现的顺序!)
var elements = document.getElementsByName("name属性值");
4. 通过class,获取一个元素对象数组(数组中元素的顺序是网页中元素出现的顺序!)
var elements = document.getElementsByClassName("class属性值");
修改与获取元素的属性: ***
赋值:
元素对象.属性名 = 值;
取值:
var value = 元素对象.属性名;
特殊的属性:
- class属性: class属性无法通过对象.class进行操作, 必须通过 对象.className 来操作
- 文本内容: 开始标签与结束标签之间的内容 ,可以通过innerHTML属性来操作 !
案例1. 修改class
<style type="text/css">
.x1{
display: inline-block;
}
.x2{
display: none;
}
</style>
</head>
<body>
<button onclick="show()">显示</button>
<button onclick="hide()">隐藏</button>
<img src="images/1.jpg" id="x">
<script>
function show(){
document.getElementById("x").className="x1";
}
function hide(){
document.getElementById("x").className="x2";
}
</script>
案例2. 修改innerHTML
案例:
编写一个图片标签, 当被点击时 修改其宽度与高度 为原宽高的1.1倍!
<button onclick="x1()">放大</button>
<button onclick="x2()">缩小</button>
<img width="300px" id="img1" src="images/1.jpg">
<script>
function x1(){
var img1 = document.getElementById("img1")
//获取原宽度
var width = img1.width;
img1.width = width*1.1;//将原宽度放大1.1.倍, 设置给元素
}
function x2(){
var img1 = document.getElementById("img1")
//获取原宽度
var width = img1.width;
img1.width = width*0.9;//将原宽度放大0.9倍, 设置给元素
}
</script>
练习
编写一个图片标签, 当被点击时 修改其src的内容, 图片内容共5张, 要求实现点击轮播 !
<button onclick="x1()">上一张</button>
<img src="images/1.jpg" id="x">
<button onclick="x2()">下一张</button>
<script>
//记录当前显示的图片 ,在数组中的位置
var index = 0;
var images = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
function x1(){
//把图片切换到上一张
index--;
if(index==-1){
index = 4;
}
show();
}
function x2(){
//把图片切换到下一张
index++;
if(index==5){
index = 0;
}
show();
}
function show(){
var img = document.getElementById("x");
img.src=images[index];
}
</script>
-----------------------------------------------------------
<button onclick="x(-1)">上一张</button>
<img src="images/1.jpg" id="x">
<button onclick="x(1)">下一张</button>
<script>
//记录当前显示的图片 ,在数组中的位置
var index = 0;
var images = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg"];
function x(i){
//把图片切换到上一张
index+=i;
if(index==-1){
index = 4;
}else if(index==5){
index = 0;
}
document.getElementById("x").src=images[index];
}
</script>
根据元素层次 ,查找元素节点: 熟悉
- 获取父元素对象 ***
var 父元素对象 = 元素对象.parentNode;
- 获取第一个子元素对象
var 子元素对象 = 元素对象.firstChild;
- 获取最后一个子元素对象
var 子元素对象 = 元素对象.lastChild;
- 获取所有子元素对象 , 结果为数组
var 子元素对象数组 = 元素对象.childNodes;
在层次操作中, 得到的元素, 如何区分是否为标签: 了解
节点类型:
- 元素节点
- 文本节点
- 属性节点
如何判断:
元素对象.nodeType : 获取节点类型:1表示元素,2表示属性,3表示文本
元素对象.nodeName : 可以获取标签名称
元素对象.nodeValue: 文本节点获取内容, 标签获取null
文档操作 了解
创建节点
var element = document.createElement("节点名称");
插入节点
通过父元素, 追加子元素
格式: 父元素.appendChild(新元素对象);
通过父元素, 插入子元素
格式: 父元素.insertChild(新元素对象,参考元素);
//将新元素, 插入到参考元素之前 , 如果参考元素不存在,则默认为追加效果!
删除节点
父元素.removeChild("子元素");
清空节点
元素对象.innerHTML = "";
2041
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
