python写前端和js_Python之路【第十二篇】前端之js&dome&jQuery

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1、存在方式

functionfunc() {

alert("Hello Shuaige")

}

2、javascript代码块位置

放在

标签内的代码底部,为什么不能放在上面呢?为什么css的就可以放在上面呢?

注:css代码首先要记住html代码是从上往下解释的,如果css代码放在下面,在上面的代码使用css样式,如果css代码块放在下面就没有办法显示样式了

另不同的浏览器处理请求也不同:正常来说当有一个请求过来时候会把js&css一起发送过去,咱们按照最low的方式理解的话可以这么理解:如果js文件或者js耗时比较久的话,下面的html代码就无法执行了。

3、变量和函数的声明

变量:

functionm1() {

alert("shuaige")var name = 'tianshuai'; //var 变量名 ,变量名前面加var为局部变量

age = '18';//注这里需要注意,建议使用的时候一般不要使用全局变量!否则如果代码量比较大的

//时候容易出现调用混乱的问题

}

m1();

函数

//普通函数

functionfunc() {

alert("Hello Shuaige")

}//定义一个可传参数的函数

functionfunc(arg) {

alert(arg)

}

func('Superman')//自执行函数,顾名思义,定义好之后可以自动执行

(function f3(arg) {alert(arg)})("Shuaige is good man");

//匿名函数,用处不是很大了解就行

var a = function() {

alert('meinv');

};

a();

js 的展示方法有两种:

通过网页来展示

functionf1() {

alert("hello shuai ge")

}

f1()

显示效果如下:

通过console来展示

functionf1() {

console.log("Hello shuaige ")

}

f1()

显示效果如下:

打开google chrome F12点击"Console",刷新页面!

4、字符串常用方法及属性

调试的地方可以在google chrome 上进行测试,F12点击"Console"

obj.trim()  去除空格

var a = "Luotianshuai"undefined

a.trimLeft()#去除左边的空格

"Luotianshuai"a.trimRight()#去除右边的空格

"Luotianshuai"a.trim()//去除两边的空格"Luotianshuai"a"Luotianshuai" #这里可以发现我执行了上面的去除空格的命令之后,实际的值是没有改变的

b=a.trim()"Luotianshuai" #但是我们可以通过赋值来改变他

b"Luotianshuai"

obj.charAt(index) 根据索引获取字符串里的字符

b"Luotianshuai"b.charAt(0)"L"b.charAt(1)"u"b.charAt(2)"o"

obj.substring(start,end)  获取字符的子序列,类似于切片

b"Luotianshuai"b.substring(0,3)"Luo"

obj.indexOf(char) 去字符串找指定的字符的索引值是多少

b"Luotianshuai"b.indexOf("t")3

obj.length  获取字符串的长度

b"Luotianshuai"b.length12

5、数组

声明一个数组和python中的列表类似

a = [11,22,33,44] #声明一个数组

[11, 22, 33, 44]

插入

a = [11,22,33,44] #声明一个数组

[11, 22, 33, 44]

a.push(55) #在数组最后增加一个元素

5 #这里是数组的长度

a

[11, 22, 33, 44, 55]

a.unshift(00) #在数组最前面增加一个元素

6 #长度

a

[0,11, 22, 33, 44, 55]

a.splice(3,0,'insert') #在指定的索引增加一个元素,括号内(3为索引值,0为固定值,要插入的内容)

[]

a

[0,11, 22, "insert", 33, 44, 55]

a.unshift(100)8

移除

a

[100, 0, 11, 22, "insert", 33, 44, 55]

a.pop()#从尾部获取

55a.shift()#从开头获取

100a

[0,11, 22, "insert", 33, 44]

a.splice(3,1) #从指定位置获取,括号内参数为(元素的索引,后面为索引后的元素个数,包含本身)

["insert"]

a

[0,11, 22, 33, 44]

切片

a

[0,11, 22, 33, 44]

a.slice(1,3)

[11, 22]

a

[0,11, 22, 33, 44]

合并

a = [11,22]

[11, 22]

b= [44,55]

[44, 55]

a.concat(b)

[11, 22, 44, 55]

a

[11, 22]

b.concat(a)

[44, 55, 11, 22]

反转

a

[11, 22]

a.reverse()

[22, 11]

a

[22, 11]

字符串格式化

a

[22, 11]

a.join('_')"22_11"a

[22, 11]

数组长度

a

[22, 11]

a.length2

6、字典

字典是数组的一种特殊形式

dict1 = {'k1':123,'k2':234} #定义一个字典

Object {k1: 123, k2: 234}

dict1['k1']123

7、循环

js中的循环有两种方式

#第一种

for (var i=0;i<10;i++) {console.log(i)}#输出结果,看本代码下第一图

#第二种

for (var item ina) {console.log(a[item])}#输出结果,看本代码下第二图

图二:

8、异常处理

和python中的异常处理类似,代码如下:

try{var tiancai =isme

}catch(e) {

console.log(e)

}finally{

console.log("shuaige is so smart;")

}

显示效果如下:

DOM编程

文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。

DOM编程:可以操作html所有的标签,进行找、操作!他也是javascript的一部分

1、选择器:

document.getElementById('id')  查找指定的id,然后我们可以进行操作

123

var i = document.getElementById('id_1'); //查找指定的id

i.innerText = '456'; //innerText修改指定的字符串

显示效果,当我们打开IE的时候123就会被修改为456

下面操作方式也类似:

document.getElementsByName('name')

123

var i = document.getElementsByName('name_1'); //查找指定的name,这里和ID不一样name可以有多个

for (var item ini) {

i[item].innerText= '456'; //innerText修改指定的字符串

};

document.getElementsByTagName('tagname')

123

234

var i = document.getElementsByTagName('div'); //查找指定的标签类型,这里同样和ID不一样标签比如

标签可以有多个

for (var item ini) {

i[item].innerText= '456'; //innerText修改指定的字符串

};

上面的代码试用jquery会非常方便就不需要重造轮子

2、注册 事件

首先了解下面的意思:

事件:比如有一个“按钮”,当你点击的时候发生什么,双击的时候发生什么,这个就叫做事件!

注册:首先这个按钮,当你点击的时候发生的动作,上面的事件要使他出现我们想要的效果,首先得把事件和函数进行绑定,然后把他们注册到指定标签上。

常用事件:

onclick

onblur

onfocus

..................

举例代码如下:

写一个input的标签,首先把事件和函数进行绑定,当你一点这个按钮的时候就会自动执行,绑定的函数:

shuaige_js_file

}

234

functionedit() {vari=document.getElementById('id_1');

i.className= 'color_red';

}

那么恢复按钮呢?只要在新增一个即可

shuaige_js_file

}

234

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值