函数补充及其它案例
一、函数补充
function func(形式参数) {
}
func(实参); <!--自执行函数-->
(function (形式参数1) {
console.log(形式参数1);
})()实参
js作用域为函数；
function func() {
var xo="alex";
function inner() {
console.log(xo);
}
return inner;
}
var ret=func(); //返回inner即接受function函数的返回值//
ret(); //执行inner函数//
xo="jjj"
function func() {
var xo="alex";
function inner() {
var xo="eric";
console.log(xo);
}
inner();
}
func(); //输出eric，此题目的在于熟悉函数的作用域，若eric不在，则输出slex，若slex不在jjj若jjj不在，则无输出
function func() {
console.log(xxoo);
xxoo="wang";
}
func(); //输出结果undefined，因为函数变量提前声明，此函数虽然xxoo写在内部，但相当于提前声明，console.log(xxoo);执行到此步时，只能检测到此变量存在，但是还未执行下一步赋值操作，故输出undefined
function fun(n) {
this.name=n;
this.sayname=function () {
console.log(this.name);
}
}
var obj=new fun('we');
//this代指对象
//创建对象时 new 函数();
//obj.name 即为n
//obj.sayname() 即得到function函数
function Foo() {
this.name=n;
}
Foo原型
Foo.prototype={
"sayname":function () {
console.log(this.name);
}
}
obj1=new Foo('we');
obj1.sayname(); //执行时先找到类，然后再在类中找到Foo原型
innerText //只是获取内部内容，忽略标签//
innerHTML //获取标签内部所有东西//
二、字体及标签变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color: #999999;
}
.item:hover{
color: #54b5f4; //鼠标放在item标签上面字体变红//
}
.item .b:hover{
background-color: yellow;
}
</style>
<link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css"> //类似于表 格的引入
</head>
<body>
<div class="item">
<div class="a">123
</div>
<div class="b">456
</div>
<div>
<i class="fa fa-id-card-o" aria-hidden="true"></i>
</div>
</div>
</body>
</html>
三、添加标签功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="add_tag1();" value="+"/><hr/>
<div id="i1">
<input type="text"/><hr/>
</div>
<script>
function add_tag() {
var tag=" <input type=\"text\"/><hr/><hr/>" //创建一个标签//
document.getElementById('i1').insertAdjacentHTML("afterBegin",tag); //通过修改第一个参数来确定所插入标签的位置 beforeBegin,afterBegin,afterEnd
}
function add_tag1() {
var tag=document.createElement('input');
//创建input标签..
//添加属性//
tag.setAttribute("type","text");
tag.style.fontSize="16px";
tag.style.color="red";
//创建p标签//
var p=document.createElement('p');
//在p标签添加input标签//
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
</script>
</body>
</html>
三、删除按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="status">
</div>
<input type="button" onclick="deleta();" value="删除"/>
</body>
<script>
function deleta(){
document.getElementById('status').innerText="已删除";
//设置定时器，执行函数后5000毫秒执行一次；之后停止；
setTimeout(function () {
document.getElementById('status').innerText="";
},5000)
}
</script>
</html>
四、添加内容使其打印在屏幕上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="t1"/>
<input type="button" value="添加" id="a1"/>
<ul id="u1">
<li>111</li>
<li>222</li>
</ul>
<script src="../jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
//找到t1标签value内容即输入内容//
var v=$('#t1').val();
//拼接字符串使其成为li标签//
var temp="<li>"+v+"</li>"
//将li标签添加在ul中//
$('#u1').append(temp);
//将添加的内容打印在屏幕上//
$('ul').delegate('li','click',function () {
var v=$(this).text();
alert(v);
})
})
</script>
</body>
</html>
3218
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
