python之路(十七)-javascript

JavaScript

JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理。

1. JavaScript的存在形式

JavaScript有两种存在形式,分别是文件形式和代码块形式

文件形式:

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>

js代码块存在形式:

<script type"text/javascript">
Js代码内容
</script>

2、JavaScript代码存在位置

  • html的head标签内
  • html的body底部,推荐使用这种方式,因为html代码是从上往下执行的,这样可以避免某些js脚本问题而导致页面内容不显示,一般会让页面先显示出来然后再执行js脚本。

  代码示例:

  

<body>
<script src="jquery-2.2.3.min.js"></script>
<script>
(function(){alert(1);})();
(function(arg){
console.log("aaabbb",arg)
})("cccddd");
function foo(num1,num2){
this.num1=num1;
this.num2=num2;
this.Func= function (arg) {
return this.num1+arg;
}
} </script>
</body>

3、变量

  • 全局变量
  • 普通变量

  JavaScript中变量的声明是一个非常容易出错的点,局部变量必须一个 var 开头,如果未使用var,则默认表示声明的是全局变量

  

var name = "seven"  # 局部变量
age = 18 # 全局变量

注:注释 // 或 /* */

4、基本数据类型

  • 数字(Number)

  定义方法: 

var age=19
var age=parseInt("20")
var age=Number("21")
  • 字符串(String)  
        var name =String("北京故宫")
console.log(name[0]) //按照索引取相应的字符串
console.log(name.charAt(2))//按照索引取相应的字符串
console.log(name.substring(1,4))//连续取字符串
console.log(name.indexOf("京"))//取某字符串的索引
console.log(name.length)//取字符串的长度
  • 布尔(Boolean)

  

var status = true;
var status = false;
var status = Boolen(1==1)
  • 数组(Array)

  

var names = ['alex', 'tony', 'eric']
var names = Array('alex', 'tony', 'eric') 常用方法:
添加
obj.push(ele) 追加
obj.unshift(ele) 最前插入
obj.splice(index,0,'content') 指定索引插入,中间的0是固定参数必须为0
移除
obj.pop() 数组尾部获取
obj.shift() 数组头部获取
obj.splice(index,count) 数组指定位置后count个字符 切片
obj.slice(start,end)
合并
newArray = obj1.concat(obj2)
翻转
obj.reverse() 字符串化
obj.join('_')
长度
obj.length
字典
var items = {'k1'123'k2''tony'}
 

5. 循环

<script>
//数组 方式一
var names=["alex", "tony", "rain"]
for (var i=0;i<names.length;i++){
console.log(names[i]);
}
var dics = {"name1":"alex","name2":"tony"}
for (var n in dics) {
console.log(dics[n])
}
//数组 方式二
var names=["alex", "tony", "rain"]
for (var index in names){
console.log(names[index])
} //while循环
while (1==1){
console.log("ok!");
break;
}
</script>

6. if语句

    <script>

        //if语句
a = "alex"
if (a=="tony"){
console.log("wrong!");
}else if (a=="alex"){
console.log("right!");
}else{
console.log("no!");
}
//switch case 语句
names="tony"
switch(names){
case "tony":
console.log("tony");
break;
case "rack":
console.log("rack");
break;
case "alex":
console.log("alex");
break;
}
</script>

7. 异常处理

        //异常处理
try {
dfadfadfadf;
}catch (e){
console.log("出错了!"); }finally {
console.log("endly");
}

8. 函数

<script>
//普通函数
function func(){
console.log("普通函数!")
}
func()
//匿名函数
var func2 = function(){
console.log("匿名函数")
}
func2() //自执行函数 (function(){
console.log("ok")
})();

9. 面向对象

function Foo (name,age) {
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
} var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

Dom编程

Dom

文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最为关心的是,DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容。

注:一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器

document.getElementById('id');//根据id获取
document.getElementsByName('name');//根据name属性获取
document.getElementsByTagName('tagname');//根据标签名字获取

2、内容

innerText
innerHTML var obj = document.getElementById('nid')
obj.innerText # 获取文本内容
obj.innerText = "hello" # 设置文本内容
obj.innerHTML # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>" # 设置HTML内容 特殊的:
input系列
textarea标签
select标签 value属性操作用户输入和选择的值

3. 创建标签

方式一:
var obj = document.createElement('a');
obj.href = "http://www.etiantian.org";
obj.innerText = "老男孩"; var container = document.getElementById('container');
//container.appendChild(obj);
//container.insertBefore(obj, container.firstChild);
//container.insertBefore(obj, document.getElementById('hhh')); 方式二:
var container = document.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin', 'afterBegin', 'beforeEnd', 'afterEnd'
//container.insertAdjacentHTML("beforeEnd",obj);

4. 标签属性

var obj = document.getElementById('container');
固定属性
obj.id
obj.id = "nid"
obj.className
obj.style.fontSize = "88px"; 自定义属性
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.removeAttribute(name)

5. 5、提交表单

document.geElementById('form').submit()

6. 事件

python之路(十七)-javascript

特殊的:

window.onload = function(){}
//jQuery:$(document).ready(function(){})
//onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还么有渲染,就可以进行事件的执行。

7、其他功能

console.log()
alert()
confirm() // URL和刷新
location.href
location.href = "url" window.location.reload() // 定时器
setInterval("alert()",2000);
clearInterval(obj)
setTimeout();
clearTimeout(obj)

jQuery

jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在兼容性方面十分优秀。

http://www.php100.com/manual/jquery/

上一篇:IIS 7如何实现http重定向https


下一篇:[python IO学习篇]补充打开中文路径的文件