如何在html里调用javascript函数

如何在html里调用javascript函数,第1张

1 a href="javascript:js_method();"

这是平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题,而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发windowonbeforeunload事件,在IE里面更会使gif动画停止播放。W3C标准不推荐在href里面执行javascript语句

2 a href="javascript:void(0);" onclick="js_method()"

这种方法是很多网站最常用的方法,也是最周全的方法,onclick方法负责执行js函数,而void是一个 *** 作符,void(0)返回undefined,地址不发生跳转。而且这种方法不会像第一种方法一样直接将js方法暴露在浏览器的状态栏。

3a href="javascript:;" onclick="js_method()"

这种方法跟跟2种类似,区别只是执行了一条空的js代码。

4a href="#" onclick="js_method()"

这种方法也是网上很常见的代码,#是标签内置的一个方法,代表top的作用。所以用这种方法点击后网页后返回到页面的最顶端。

1、引入js文件

2、直接调用js中的函数

示例:

1、js文件定义

function f1(){//js中的函数

}

2、引入js文件

<script src="js文件路径"></script>

3、html函数调用

<script>

f1();//调用js的函数

</script>

方法:直接调用对方的函数就行。

步骤:

       1、两个或者多个js文件加载到同一个页面中

       2、js文件中的方法直接相互访问。

示例:

ajs中定义一个方法

function a(){

}

bjs中定义一个方法

function b(){

}

在ajs中访问bjs中方法

b();//就可以直接访问b方法

个人觉得主要是过程不同:

一个是构造对象、一个是函数调用。

function b() {

    thisp = 1;

    thisp1 = 2;

}

var a = new b();

ap // 1

ap1 //2

var c = b();

cp // 报错

cp1 // 报错

new:

实际上a的__proto__成员指向了b对象prototype成员对象,然后b函数对象的this指针替换成a,然后再调用b函数(),这时候的a里面的this变成了a自己,所以a拥有p和p1

a__proto__=bprototype;

bcall(a)

function b() {

  ap = 1;

  ap1 = 2;

}

调用js方法

execute_script(script, args)

在当前窗口/框架 同步执行javaScript

脚本:JavaScript的执行。

参数:适用任何JavaScript脚本。

使用:

driverexecute_script(‘documenttitle’)

使快播登陆用户名输入框标红显示:

#coding=utf-8

from selenium import webdriver

import time

driver = webdriverFirefox()

driverget("http://passportkuaibocom/login/referrer=http%3A%2F%2Fvodkuaibocom%2F%3Ft%3Dhome")

#给用户名的输入框标红

js="var q=documentgetElementById(\"user_name\");qstyleborder=\"1px solid red\";"

#调用js

driverexecute_script(js)

timesleep(3)

driverfind_element_by_id("user_name")send_keys("username")

driverfind_element_by_id("user_pwd")send_keys("password")

driverfind_element_by_id("dl_an_submit")click()

timesleep(3)

driverquit()

js解释:

q=documentgetElementById(\"user_name\")

元素q的id 为user_name

qstyleborder=\"1px solid red\

元素q的样式,边框为1个像素红色

隐藏元素

jshtml

<html>

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<title>js</title>

<script type="text/javascript" async="" src="http://ajaxgoogleapiscom/ajax/libs/jquery/191/jqueryminjs"></script>

<link href="http://netdnabootstrapcdncom/twitter-bootstrap/232/css/bootstrap-combinedmincss" rel="stylesheet" />

<script type="text/javascript">

$(document)ready(function(){

$('#tooltip')tooltip({"placement": "right"});

});

</script>

</head>

<body>

<h3>js</h3>

<div class="row-fluid">

<div class="span6 well">

<a id="tooltip" href="#" data-toggle="tooltip" title=" selenium-webdriver(python)">hover to see tooltip</a>

<a class="btn">Button</a>

</div>

</div>

</body>

<script src="http://netdnabootstrapcdncom/twitter-bootstrap/232/js/bootstrapminjs"></script>

</html>

查看本栏目更多精彩内容:http://wwwbiancengcn/Programming/extra/

(保持html文件与执行脚本在同一目录下)

执行js一般有两种场景:

一种是在页面上直接执行JS

另一种是在某个已经定位的元素上执行JS

#coding=utf-8

from selenium import webdriver

import time,os

driver = webdriverFirefox()

file_path = 'file:///' + ospathabspath('jshtml')

driverget(file_path)

#######通过JS 隐藏选中的元素#########

#第一种方法:

driverexecute_script('$("#tooltip")fadeOut();')

timesleep(5)

#第二种方法:

button = driverfind_element_by_class_name('btn')

driverexecute_script('$(arguments[0])fadeOut()',button)

timesleep(5)

driverquit()

js解释:

arguments对象,它是调用对象的一个特殊属性,用来引用Arguments对象。Arugments对象就像数组。

fadeOut() 方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:indexhtml,填充问题基础代码。

2、将html中的函数封装到indexjs文件中。

3、在indexhtml中的<script>标签,引入提取封装的js文件,并输入调用的js代码:fun2();fun1();。

4、浏览器运行indexhtml页面,此时成功调用了外部js文件中的函数打印出了结果。

一、工具:Dreamweaver软件、电脑

二、 *** 作步骤:

1打开Dreamweaver软件,然后在创建新项目下选择HTML;

2点击“文件”选项,然后点击“另存为”,将文件命名为test,并将其保存在电脑桌面上;

3编写一个基本的html文件,该html文件包含一个用户名及一个密码输入文本框和一个确定以及一个取消按钮;

4在title标签下插入<script language="JavaScript">js代码</script>,然后在html中调用js函数;

5完成js代码编写及html调用js代码后保存tsethtml文件,然后在浏览器中打开testhtml文件,检查js代码执行的效果;

6在Dreamweaver软件中新建一个checkjs文件(方法同html文件新建),在check文件中输入校验函数;

7然后在testhtml的title标签下引用checkjs文件;

8在程序中引用checkjs文件中的js函数,然后在浏览器中刷新testhmtl文件,然后在username的输入框中输入非法字符来检验js代码。

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/langs/12178251.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-21
下一篇2023-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存