python写前端和js_Python之路【第十二篇】前端之jsdomejQuery

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504897.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql降级导入_mysql 升级和降级

1 官方推荐的两种升级方式&#xff1a;in-place upgradelogical upgrade2 升级之前&#xff1a;备份所有数据库&#xff0c;包括系统库mysql[rootDarren1 ~]# mysqldump -uroot -p147258 -A -B -F --master-data2 --events --single-transaction>/tmp/mysqlall.bak下载5.7.…

python process_Python Process/Thread 概念整理

进程与线程 并发与并行进程与线程首先要理解的是&#xff0c;我们的软件都是运行在操作系统之上&#xff0c;操作系统再控制硬件&#xff0c;比如 处理器、内存、IO设备等。操作系统为了向上层应用程序提供 简单一致 的机制来控制复杂而又大相径庭的低级硬件设备 抽象出 进程 的…

mysql技术内幕sampdb_MySQL技术内幕汇总

MySql技术内幕之MySQL入门(1)检查系统中是否已经安装了MySQLsudo netstat -tap | grep mysql若没有显示已安装结果&#xff0c;则没有安装。否则表示已经安装。sudo apt-get install mysql-server mysql-client安装过程中会让输入密码&#xff0c;记得把密码记住。登录mysql -u…

lrtemplate如何导入pr_PR模板使用套路讲解 视频剪辑教程

​pr模板在使用的时候需要注意的事项以及如何正确操作https://www.zhihu.com/video/1237765482302226432pr模板在使用的时候需要【注意的事项】1、下载的模板必须解压后使用2、下载模板的时候网站上页面都会有介绍模版所支持的版本3、弹出不同版本的提示窗口&#xff0c;点击确…

linux没有usr目录_了解linux系统目录,sys,tmp,usr,var!

linux小白到大神的成长之路&#xff1a;了解linux系统目录&#xff0c;sys,tmp,usr,var&#xff01;本经验由宗龙龙原创,全文共600多字&#xff0c;阅读需要14分钟&#xff0c;如果文中存在错误&#xff0c;还请大家多多指点&#xff0c;我会积极改进的&#xff01;​这篇文章将…

effective python目录_Effective python(七):协作开发

一&#xff0c;文档字符串1&#xff0c; 在函数&#xff0c;类&#xff0c;模块(顶端编写)下使用三个"""括起来内容即可2&#xff0c; 文档被关联到__doc__属性中&#xff0c;应尽量充分的描述其用法&#xff0c;作用&#xff0c;异常等等二&#xff0c;使用包来…

实用卷积神经网络 运用python pdf_解析卷积神经网络—深度学习实践手册 中文pdf高清版...

解析卷积神经网络—深度学习实践手册从实用角度着重解析了深度学习中的一类神经网络模型——卷积神经网络&#xff0c;向读者剖析了卷积神经网络的基本部件与工作机理&#xff0c;更重要的是系统性的介绍了深度卷积神经网络在实践应用方面的细节配置与工程经验。笔者希望本书“…

mysql语言和php语言_MySQL如何与PHP编程语言一起使用?

MySQL与PERL&#xff0c;C&#xff0c;C &#xff0c;JAVA和PHP等各种编程语言结合使用时效果很好。在这些语言中&#xff0c;PHP因其Web应用程序开发功能而成为最受欢迎的语言。PHP提供了各种功能来访问MySQL数据库并处理MySQL数据库内部的数据记录。您将需要以与调用其他任何…

svd奇异值分解_奇异值分解SVD

点击上方蓝字关注我们奇异值分解(SVD)在计算机视觉中有着广泛的应用&#xff0c;如数据降维、推荐系统、自然语言处理等。本文是介绍SVD的数学计算过程&#xff0c;并从SVD的性质说明其应用的原理。01特征值与特征向量奇异值分解(SVD)与特征分解类似&#xff0c;是将矩阵分解为…

python turtle画房子详细解释_[宜配屋]听图阁

我就废话不多说了&#xff0c;直接上代码吧&#xff01;import turtletturtle.Turtle()turtle.Turtle().screen.delay(0)tleftturtle.Turtle()#第一部分t.penup()t.goto(0,0)t.pendown()t.left(20)t.forward(110)t.left(25)t.forward(40)t.left(100)t.circle(180,20)t.right(12…

简易航空订票系统_四川航空APP全新升级改版,三大亮点提升订票体验

成都2015年10月23日电 /美通社/ -- 四川航空发布手机APP全新的3.0版本&#xff0c;不仅针对界面风格做了全新改变&#xff0c;在iOS9、安卓系统上的展示更加炫丽&#xff1b;而且在机票预订、航班动态、特价机票方面均做了大幅升级&#xff0c;会员服务也更加贴心。对于有机票需…

python可视化分析网易云音乐评论_网易云音乐热门评论api分析

网上有现成的例子我就扒过来了&#xff01;&#xff01;title: 网易云评论api分析date: 2018-12-24 20:54:46tags: [python]网易云音乐是个好地方&#xff0c;里面各个都是人才&#xff0c;特别是评论区……所以我就想把评论爬下来看看&#xff0c;下面记录一下分析api的过程与…

python 功能化模块_【软件测试教程】Python模块化以及内置模块的使用

一&#xff1a;什么是模块模块是一个包含所有你定义的函数和变量的文件&#xff0c;其后缀名是.py。模块可以被别的程序引入&#xff0c;以使用该模块中的函数等功能。二&#xff1a;模块类型1&#xff1a;自定义模块由编程人员自己写的模块。自定义模块时要注意命名&#xff0…

spring 上下文_一次性教你彻底理解 Spring容器和应用上下文!

作者&#xff1a;陈本布衣www.cnblogs.com/chenbenbuyi有了Spring之后&#xff0c;通过依赖注入的方式&#xff0c;我们的业务代码不用自己管理关联对象的生命周期。业务代码只需要按照业务本身的流程&#xff0c;走啊走啊&#xff0c;走到哪里&#xff0c;需要另外的对象来协助…

oracle plsql 到处dbf_plsql 导出oracle数据库

plsql 导出数据库有两个问题&#xff0c;一个是只导出结构&#xff0c;一个是导出表结构加数据这样的&#xff0c;首先人家让我导成sql语句这不是简单&#xff0c;首先打开PLSQL一、导出结构1、然后tools->Export User Objects..然后出来一片空白2、要选择哪个User3、上面会…

python爬取百度百科搜索结果_用Python抓取百度搜索结果,python,爬取,的

前言前几天爬的今天整理了一下发现就两个需要注意的点一是记得用带cookie的方式去访问&#xff0c;也就是实例化requests.session()二是转化一下爬取到的url&#xff0c;访问爬到的url得到返回的Location值&#xff0c;该值便是真实的地址(如果你不是要爬url当我没说)知道了这两…

spring aop设计模式_Spring框架中设计模式的运用

设计模式大家可能随口就能说出总共有23种&#xff0c;但是具体怎么用&#xff0c;或者在常用的组建中有哪些体现&#xff0c;这时候不一定说的上来了。接下来几篇文章&#xff0c;我们一起深入理解。首先我们一起了解下常用的组建中是怎么运用的&#xff0c;比如 JDK、Sring、M…

使用yum命令安装mysql_Linux Centos 下使用yum 命令安装mysql实现步骤

linux centos 下使用yum 命令安装mysql实现步骤1. 查看服务器中有没有安装过mysql1. 查看有没有安装包:yum list mysql*#移除已经安装的mysqlyum remove mysql mysql-server mysql-libs compat-mysql51rm -rf /var/lib/mysqlrm /etc/my.cnf2. 查看是否还有mysql软件:rpm -qa|gr…

sql unicode转中文_SELECT语句《SQL必知必会》

数据库中有哪些数据类型&#xff1f;数据库中最常用对数据类型有三种&#xff1a;Text&#xff08;文本&#xff09;、Number&#xff08;数字&#xff09;和 Date/Time。文本类型&#xff1a;即字符串&#xff0c;如“nameasdas”数字类型&#xff1a;十进制数字&#xff0c;如…

mpython 直接访问_如何从python代码中直接访问Android的Service

在Kivy中&#xff0c;通过pyjnius扩展可以间接调用Java代码&#xff0c;而pyjnius利用的是Java的反射机制。但是在Python对象和Java对象中转来转去总让人感觉到十分别扭。好在android提供了binder这个进程间通信的功能&#xff0c;Java中的Service也是基于Binder的C代码封装来实…