使用js的时候,统一使用双引号,然后通过反斜杠进行转义

①如果同时使用单引号、和双引号的情况下容易出现问题,导致标签中表示的事件不能调用,

②导致由于标签没有封口而出现样式布局错误

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS教程:鼠标悬停时显示文字或显示图片</title>
<script type="text/javascript">
function showPic(sUrl) {
alert(sUrl);
var x, y;
x = event.clientX;
y = event.clientY;
document.getElementById("Layer1").style.left = (x - 60).toString() + "px";
document.getElementById("Layer1").style.top = (y - 100).toString() + "px";
document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">";
document.getElementById("Layer1").style.display = "block";
}
function hiddenPic() {
document.getElementById("Layer1").innerHTML = "";
document.getElementById("Layer1").style.display = "none";
}
</script>
</head>
<body>
<div style="position: relative">
<div id="Layer1" style="display: none; position: absolute; z-index: 1;"></div>
</div>
<img src="pic/QQ截图20150721092858.jpg" onmouseout="hiddenPic()" onmousemove="showPic(this.src)" title="wowowowo" style="margin-top: 300px" />
<div onmouseout="hiddenPic()" onmousemove="showPic('pic/QQ截图20150721092858.jpg')" style="margin-top: 300px; width: 200px; height: 100px; background-color: blue" />
</body>
</html>

对于上述代码,如果ShowPic中的内容,没有使用单引号括起来的情况下,那么将会导致无法调用showPic,因为如果不使用单引号的情况下就会导致将其解析为表达式

注意其中的onmousemove和onmouseout事件的使用

onmousemove和onmouseout事件的调用,和js使用双引号、单引号的时候应该注意的问题的更多相关文章

  1. 关于js中单双引号以及转义符的理解

    关于js中单引号(')和双引号(")的使用以及转义的理解 这几天一直在画页面,身为开发人员的我之所以要画页面是因为当前项目中的页面上所有的东西都是从数据库中取得的,也就是动态的,类似于我们设 ...

  2. Js参数值中含有单引号或双引号解决办法

    <script type="text/javascript"> function Display(LoginEmail, UserName, ID) {         ...

  3. 输出到网页前台js代码中包含单引号的处理方法

    描述:后台输出js到前台,如     <script type="text/javascript">   //<![CDATA[       var aStepD ...

  4. html & js 单双引号

    1.html使用双引号,嵌套亦如此,表示dom元素的属性 <input value="Test" type="button" onclick=" ...

  5. js单双引号

    JavaScript单双引号的使用没有严格的要求,单独出现的时候,用单用双都可以的,但是如果一起出现的话就要严格区分了

  6. 在js里双引号里又加单引号的解决方案常用WdatePicker

    EndTime: '<input name="EndTime" type="text" class="editable center decim ...

  7. js去掉双引号

    替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...

  8. HTML通过事件传递参数到js 二 event

    原文链接http://blog.sina.com.cn/s/blog_8a18c33d010172pp.html event用例: <!DOCTYPE html><html>& ...

  9. asp.net 调用前台JS调用后台,后台掉前台JS

    C#前台js调用后台代码前台js<script type="text/javascript" language="javascript"> func ...

随机推荐

  1. C++资料大全

    本文内容源自GitHub<Awesome C/C++>. 关于 C++ 框架.库和资源的一些汇总列表,由 fffaraz 发起和维护. 内容包括:标准库.Web应用框架.人工智能.数据库. ...

  2. [转]开源那些事儿(四)-如何使用CodePlex进行项目管理

    本文版权信息作者:Jake Lin(Jake's Blog on 博客园) 出处:http://www.cnblogs.com/procoder/archive/2010/02/10/About-Op ...

  3. IntelliJ IDEA安装lombok插件

    Settings→Plugins→Browse repositories 输入lom后选择Install Plugin 按照提示重启IDEA   来自为知笔记(Wiz)

  4. linux脚本后台运行

    一般情况下,linux运行脚本是随着终端的关闭而关闭的,那么怎么让脚本能够在后台运行并且不随终端关闭而关闭呢? 这时用到的是nohup命令 格式: nohup 脚本路径 & 例: nohup ...

  5. sublime安装DocBlockr注释插件

    点击sublime的菜单栏 view->show console :现在打开了控制台, 这个控制台有上下两栏, 上面一栏会实时显示sublime执行了什么插件,输出执行结果, 如果你安装的某个插 ...

  6. [Perl] Getopt 函数来接收用户参数的使用

    我们在linux常常用到一个程序需要加入参数,现在了解一下perl中的有关控制参数的函数.getopt.在linux有的参数有二种形式.一种是–help,另一种是-h.也就是-和–的分别.–表示完整参 ...

  7. 36. Valid Sudoku

    ============= Determine if a Sudoku is valid, according to: Sudoku Puzzles - The Rules. The Sudoku b ...

  8. 【转】VS2013 C#WinForm程序构造界面拖动控件NumericUpDown时"未响应“是有道词典惹的祸

    很久之前遇到过因为金山词霸和其他软件冲突导致的程序无响应的情况. 没想到今天情况重现,VS2013在可视化编辑NumbericUpDown控件的时候,又出现了”未响应“,发现又是有道词典惹的祸. 可见 ...

  9. CSS实现背景透明,文字不透明(各浏览器兼容)

    /*CSS*/.waps{ background:url(07158.bmp) no-repeat top center fixed; width:1004px; text-align:center; ...

  10. PHP多线程

    #### 方案一: PHP 5.3 以上版本,使用pthreads PHP扩展,可以使PHP真正地支持多线程.多线程在处理重复性的循环任务,能够大大缩短程序执行时间.我之前的文章中说过,大多数网站的性 ...