JS-常见问题

本文出自svtter.com

JavaScript首先应该看w3cschool来涨涨见识, 但是因为之前沉溺游戏荒废了。。

mark一个还不错的gitbook learn javascript

自备梯子。。(没钱奈何现在还是free\w\w\w\w..)

js一切皆为对象。

JS-再理解

javascript是一脚本语言 — 脚本语言的特性就是一句一句解释执行,所以很多情况和处理机制和bash类似(但是语法明显不同)

在定义变量等思想,作用域也比较接近.

Js-使用getElement以及\$定位

使用if(% == null)来判断一下是否真的获取到了对象

另外,添加新元素append()的时候记得补充</div>

Js-使用正则表达式

如果使用RegExp("")+exec()这种形式,””中的的元字符需要双来使用。

此外,如果需要查询正则表,可以通过这个链接正则表

js文件无法运行原因

使用Opera或者Chrome调试,大部分问题都可以找出 — 基本上不是func写错了,就是使用了int这种定义文件方式..

之前编写html和js都不知道有console这等神器。如果以后再写html做一些研究。。

JS-jQuery-创建

If the HTML is more complex than a single tag without attributes,
as it is in the above example,
the actual creation of the elements is handled by the browser’s innerHTML mechanism. In most cases,
jQuery creates a new

element and sets the innerHTML property of the element to
the HTML snippet that was passed in. When the parameter has a single tag,
such as $(‘‘) or $(‘‘),
jQuery creates the element using the native JavaScript createElement() function.

使用js批量上传图片

file是一种特殊的input,不能被赋值,也不能被javascript取值,只能随表单提交,
而且随表单提交的也是file路径所指向的文件本身。

这是浏览器安全原因所限制的,如果可以取值和赋值的话,那么javascript就可以随意获取你电脑上的文件了,这是非常危险的

所以想要实现批量上传图片一种方法是添加新的文件之后,在添加一个Input,但是美观方面就差强人意了。

jQuery

jQuery选择器

可以选择带有某属性的元素,例如$("[href$='.jpg']"), 所有带有以 “.jpg” 结尾的属性值的 href 属性

JS-优化上传文件的样式

上传文件type=file真心丑,所以采用方法解决一下。

中心思想是隐藏input,然后利用css定位,使其仍然可以被点击(有点欺骗的性质)

text需要禁止点击(使用diabled='disabled')

源代码

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>定义input type="file" 的样式</title>
        <style type="text/css">
body{ font-size:14px;}
input{ vertical-align:middle; margin:0; padding:0}
.file-box{ position:relative;width:340px}
.txt{ height:22px; border:1px solid #cdcdcd; width:180px;}
.btn{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}
.file{ position:absolute; top:0; right:85px; height:24px; filter:alpha(opacity:0);opacity: 0;width:70px }
        </style>
    </head>
    <body>
        <div class="file-box">
            <form action="" method="post" enctype="multipart/form-data">
                <input type='text' name='textfield' id='textfield' class='txt' disabled='disabled'/>
                <input type='button' class='btn' value='浏览...' />
                <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />
                <input type="submit" name="submit" class="btn" value="上传" />
            </form>
        </div>
    </body>
</html>

JS-变量相关-jQuery调用

在javascript函数外部定义的变量均为全局变量。

调用jQuery, 需要把jQuery放在<script>最前。

调用本地jQuery的代码

jQuery 目录: ../js/jquery-1.11.1.min.js/

其他的script文件放在jquery后即可

HTML

依据w3cschool修改

<html>
<head>
<script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    alert("debug!")
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>