JavaScript的提示框：prompt, confirm, alter
DOM 和 jQuery
使用JavaScript操作元素属性
JavaScipt逻辑控制语句
函数的学习
1. 创建一个 prompt
var name = prompt("What's your name?");
console.log("Hello " + name);
prompt("..." ); // 弹出一个带输入框的对话框
[cancel] [ok] // 两个按钮
ok // 点击OK，会返回输入框中的字符串
cancel // 点击cancel，返回 null
这里讲到一个coercion 的概念，就是按照需要暗地里强制类型转换。点击cancel，会返回null，这个null本来是个特殊类型，不是字符串，但在字符串相加时，强制把它转成了字符串。
null -> "null"
2. 创建一个 confirm
var likesCats = confirm("Do you like cats?");
if (likesCats) {
console.log("You're a cool cat!");
}
else {
console.log("Yeah, that's fine. You're still cool!");
}
点击 ok ， 返回true
点击 cancel， 返回false
这些弹框的代码，也是可以直接在Chrome Console中运行的。
3. 使用 alert： alert("JavaScript is awesome!");
DOM - Document Object Model， HTML 文档的结构
2. 选择DOM元素
用id来标识一个元素
<h1 id="main-heading">Hello world!</h1>
用getElementById( ) 选择一个元素
var headingElement =document.getElementById("main-heading");
headingElement.innerHTML;
headingElement.innerHTML="xx";
3. 使用js修改HTML的内容
<h1 id="main-heading">Hello world!</h1>
<script>
var headingElement = document.getElementById("main-heading");
console.log(headingElement.innerHTML);
var newHeadingText = prompt("Please provide a new heading:");
headingElement.innerHTML = newHeadingText;
</script>
4. jQuery- 是一个js库。提供了一堆函数，可以方便的操作DOM。
5. 在HTML页面中加载 jQuery
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
6. 使用jQuery 修改HTML中的内容
<body>
<h1 id="main-heading">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
var newHeadingText = prompt("Please provide a new heading:");
$("#main-heading").text(newHeadingText);
</script>
</body>
仔细看这一行： $("#main-heading").text(newHeadingText);
"#main-heading" // selector
$ // 这是个 function, 相当于 getElementById( ) 或者 getElementByClass( ) 或者 getElementByTag( )
$("#xx") // getElementById
$(".xx") // getElementByClass
$("xx") // getElementByTag, i.e, $("body")
selector 的规则和 CSS 相同。
7. 使用jQuery创建一个元素
<body>
<h1 id="main-heading">Hello world!</h1>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
$("body").append("<p>This is a new paragraph</p>");
</script>
</body>
加个循环，创建多个元素
for (var i = 0; i < 3; i++) {
var hobby = prompt("Tell me one of your hobbies!");
$("body").append("<p>" + hobby + "</p>");
}
8. 使用jQuery 的动画
$("h1").fadeOut(1000);
9. 连成一串的动画
$("h1").text("This will fade out").fadeOut(3000);
$("h1").fadeOut(3000).fadeIn(2000);
$("h1").slideUp(1000).slideDown(1000);
10. 这两种写法的区别
第一种写法：
$("h1").fadeOut(1000);
$("h1").fadeIn(1000);
第二种写法：
$("h1").fadeOut(1000).fadeIn(1000);
额哦，显示效果差别挺大哈。Animation都是异步函数，第一种写法，fadeOut 还没执行完，fadeIn就开始了。 第二种写法，会等fadeOut动画完成，fadeIn才会开始。
11. 试一试其它函数
$("h1").show();
$("h1").hide();
$("h1").fadeTo(2000, 0.5);
$("h1").slideUp(300).delay(800).fadeIn(400);
12. jQuery 的文档
https://api.jquery.com
JavaScript操作元素属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document操作元素属性</title>
<script type="text/javascript">
//获取元素属性内容
function test(){
//获取元素对象
var aaa = document.getElementById("123");
//获取元素属性
alert(aaa.type+":"+aaa.name+":"+aaa.value);
}
//修改元素属性内容
function test2(){
//获取元素对象
var bbb = document.getElementById("123");
bbb.type = "button";
bbb.value = "李四";
}
</script>
</head>
<body>
<h3>js操作元素属性</h3><br />
<input type="button" id="" name="" value="测试获取元素属性" οnclick="test()" />
<input type="button" id="" name="" value="测试修改元素属性" οnclick="test2()" />
<hr />
<input type="text" id="123" name="uname" value="张三" />
</body>
</html>
点击修改元素属性后：
JavaScript的逻辑控制语句：
<html>
<head>
<title>逻辑控制语句</title>
<meta charset="UTF-8"/>
<!--
逻辑控制语句学习:
判断语句：
if(){}
if(){}else(){}
if(){}else if(){}else if(){}...else{}
选择语句：
switch(条件){
case "":
代码
break;
case "":
代码
break;
.....
default:
代码；
}
循环语句：
for循环
while(条件){执行代码}
do{执行代码}while(条件)
注意：在声明循环条件的时候，使用关键字var
-->
<script type="text/javascript">
var a=89;
/*判断语句使用*/
if(a>90){
alert("奖励鸡蛋一枚");
}else if(a>80&&a<=90){
alert("奖励蛋黄派一个");
}else{
alert("男女混合双打");
}
/*选择语句*/
var a="1";
switch (a){
case "1":
alert("哈哈，中国有雾霾");
break;
default:
break;
}
/*循环语句*/
//九九乘法表
for(var i=1;i<=9;i++){
for(var j=1;j<=i;j++){
window.document.write(i+"*"+j+"="+i*j+" ");
}
window.document.write("<br />");
}
</script>
</head>
<body>
<h3>逻辑控制语句</h3>
<hr />
</body>
</html>
<html>
<head>
<title>js的函数学习</title>
<meta charset="UTF-8"/>
<!--
js的函数学习：
1、函数的声明
函数声明一：
function 函数名(形参1，形参2...){执行体}
函数声明二：
var 变量名=new Function("形参1","形参2",...,"执行体");
从这种声明方式可以看出，在js中函数也是对象。
函数声明三：
var 变量名=function(a,b){执行体}
2、函数的参数
在js中实参的传递个数可以和形参个数不匹配，不会报错.但是会按照形参的顺序赋值。
局部变量：在函数内部和形参声明的变量，该函数内有效。
全局变量：在全局区声明的变量。
3、函数的返回值
4、函数作为参数传递
5、函数的执行符
注意：
只有一个全局区，就是声明的js代码域。
-->
<script type="text/javascript">
//函数声明一
function testA(a,b,c,d){
alert("我是函数声明一:"+a+b);
}
//函数声明二 在js中函数也是对象。
var testB=new Function("a","b","alert('我是函数声明二')");
//函数声明三
var testC=function(a,b){
alert("我是函数声明三");
}
//函数的参数
testA(1,2,3);
testA(1);
//函数的返回值
//函数作为参数传递
//函数的执行符
</script>
</head>
<body>
<h3>js的函数学习</h3>
<hr />
</body>
</html>
testAA(1),的结果是：
JavaScript函数的学习（2）：
<html>
<head>
<title>js的函数学习2</title>
<meta charset="UTF-8"/>
<!--
1、函数的返回值
在js中如果有返回值则直接返回，没有默认返回undefined;
2、函数作为对象传递
因为函数在js中也是对象，而对象是可以作为实参进行传递的。
所以在js中函数也可以作为参数传递
注意：
如果在接受函数对象参数的方法里没有使用执行符，则函数作为对象使用
如果使用了执行符，则函数对象参数作为函数执行。
3、函数的执行符
函数的执行符为():函数名()；
-->
<script type="text/javascript">
//1、函数的返回值
//声明函数
function testA(a,b){
alert(a+b);
return 66;
}
function testB(x,y,z){
alert(testA(x,y));
}
function testC(m,n,p){
alert(testB(m,n,p));
}
//在js中如果有返回值则直接返回，没有默认返回undefined;
//testC(1,2,3);//3-->66-->undefined
//2、函数作为对象传递
function methodA(a){
alert(a);
}
var methodB=function(){
alert("我是MethodB");
return 66;
}
/*methodA("哈哈");
methodA(methodB);*/
//3、函数的执行符 在js中如果不加执行符函数作为对象使用，加上执行符会当初函数执行。执行符是()
/*alert(methodB);
alert(methodB());*/
//二合一
function methodC(a){
alert(a());
}
//methodC(methodB);
methodC(function(){
alert("我是MethodB");
return 66;
})
</script>
</head>
<body>
<h3>js的函数学习2</h3>
<hr />
</body>
</html>
237
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
