python之路-第13周
0.HTML&CSS
1.介绍
javascript是一门语言，与python一样，通过浏览器就可以让网页动起来
dom和javascript配合就是我们泛指的js，有这两个玩意就可以完成所有的功能了
jQuery是js的内库，封装了js的内容，可以完成非常复杂的操作
2.javascript 这门语言
1）存在形式
正如css有三种存在形势，对于js有两种方式：
<!-- 方式一 单独文件-->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 标签，代码块->
<script type"text/javascript">
Js代码内容
</script>
2）存放位置
- html中的head
- html的body底部【**推荐**】
3） js基本语法
1） 声明变量
局部变量：var age=123;
全局变量：name = "alex";
2）注释：
单行：//
多行：/* */
3）单行结尾：
要加分号
4）基本数据类型
数字（number）：
var a1 =1,a2 =2, a3 =3; //同时定义多个变量
var age = "18.2";
var age1 = Number(18); //也可以这么定义
console.log(parseInt(age),typeof age); //在console中打印转化为数字的age
console.log(parseFloat(age),typeof age); //在console中打印转化为float数字的age
//在js中int和float都是number类型，不再区分
result：
用console能直接解释js代码；
字符串string：
var name = "felo" //定义字符串
var name = "felo "
name.trim() //去除空格
"felo"
name.charAt(1) //查看index为1的字符
"e"
name.substring(0,2) //切片
"fe"
name.indexOf("l") //字符位置
2
name.length //长度
7
布尔类型boolean：
a = Boolean(1) //1为真0为假
true
a = Boolean(0)
false
a = true
true
a = false
false
数组array：
li = [1,23,3,4,5,3,32,]
[1, 23, 3, 4, 5, 3, 32]
li = Array(1,2,3,2,4,2,323,2,23,5,6,0)
[1, 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0]
li.push(100) //追加，返回长度
13
li
[1, 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0, 100]
li.unshift(0) //前面追加
14
li.splice(2,0,"alex") //指定位置增加，中间参数必须为0
[]
li
[0, 1, "alex", 2, 3, 2, 4, 2, 323, 2, 23, 5, 6, 0, 100]
li.pop() //删除最后，并返回
100
li.shift() //删除最前
0
li.splice(5,3) //删除5号位置后面3个元素
[4, 2, 323]
li
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0]
li.slice(2,4) //切片
[2, 3]
li2 = [1,2]
[1, 2]
li3 = li.concat(li2) //合并
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0, 1, 2]
li3
[1, "alex", 2, 3, 2, 2, 23, 5, 6, 0, 1, 2]
li.reverse() //原array反转
[0, 6, 5, 23, 2, 2, 3, 2, "alex", 1]
li.join("-") //合并成字符串
"0-6-5-23-2-2-3-2-alex-1"
li.length
10
var dic = {1:34,2:345} //字典
undefined
dic
Object {1: 34, 2: 345}
json序列化：
s = JSON.stringify(dic) //json序列化
"{"1":34,"2":345}"
s
"{"1":34,"2":345}"
m = JSON.parse(s) //json反序列化
Object {1: 34, 2: 345}
m
Object {1: 34, 2: 345}
5）循环
//数组循环
li = [11,22,33,44,55];
for(var index in li){
console.log(index,li[index]);
}
for(var i=0;i<li.length;i++){
console.log(i,li[i]);
}
//字典循环
dic = {"k1":132,"k2":342};
for(var index in dic){
console.log(index,dic[index]);
}
//IF 判断
var name = "alex";
if(name == "alex"){
console.log(name);
}else if(name == "eric"){
console.log(name)
}else{
console.log("wrong....")
}
while循环
while(true){
if(name == "alex"){
console.log(name);
break;
}else if(name == "eric"){
console.log(name)
}else{
console.log("wrong....")
}
}
switch
var name1 = "eric";
switch(name1){
case "alex":
console.log("alex");
break;
case "eric":
console.log("eric");
break;
default:
console.log("wrong....")
}
try
try{
console.log(a)
}catch(e){
console.log(e)
}finally{
console.log("ok...........")
}
4）函数
// 函数的声明
function func1(arg){
return true;
}
console.log(func1(123));
// 匿名函数
var func2 = function(arg){
return "tony";
};
console.log(func2(456));
// 自执行函数
(function(arg){
console.log(arg);
})('789');
5）面向对象
function Foo(name,age){
this.name = name;
this.age = age;
this.func = function(attr){
console.log(this.name,attr,this.age);
}
}
var obj = new Foo("alex",18);
obj.func("sb");
3.DOM
将整个html生成一个document的对象，通过调用document的方法来获取和修改值；
选择器：常用的有id，tagname，classname，name。
分别为：
- document.getElementById
- document.getElementsByTagName
- document.getElementsByClassName
- document.getElementsByName
var nid = document.getElementById("n1"); //字符串，因为id是唯一的。
console.log(nid.innerText);
var lis = document.getElementsByTagName("li"); //列表
for(var i in lis){
lis[i].innerText = i;
}
var c1s = document.getElementsByClassName("c1"); //样式为c1的列表
for(var i in c1s){
c1s[i].innerText = i; //获取标签中间的值使用innerText
}
var user = document.getElementsByName("username")[0]; //列表
var pwd = document.getElementsByName("password")[0]; //列表
user.value = "alex"; //修改user.value
pwd.value = "123123"; //修改pwd.value
console.log(user.value,pwd.value) //在console中显示
获取值
- innerText：获取标签中间的文本
- innerHTML：获取标签中间的所有字符
- value：获取特殊标签的内容，如select,input,textarea
<div>
<input id="n2" type="text"/>
<select id="n3">
<option value="1" selected="selected">shanghai</option>
<option value="2">beijing</option>
<option value="3">guangzhou</option>
</select>
<textarea id="n4">i am the textarea...</textarea>
<input type="button" value="getValue" onclick="GetValue();" />
</div>
<script>
function GetValue(){
var obj = document.getElementById("n4"); //n2,n3,n4
alert(obj.value);
obj.value = "2"
</script>
}
来个搜索框的例子
// 没获取焦点的时候显示请输入关键字，获取焦点就请款输入框
<div>
<input id="search" type="text" value="请输入关键字" onfocus="Focus();"
onblur="Blur()"/>
</div>
<script>
function Focus(){
var obj = document.getElementById("search");
if(obj.value == "请输入关键字"){
obj.value = "";
}
}
function Blur(){
var obj = document.getElementById("search");
if(!obj.value.trim()) {
obj.value = "请输入关键字";
}
}
</script>
