//小驼峰
var userName;
//大驼峰
var UserName
var a='我是/'xxx/'';
//result:我是'xxx'
JavaScript 包含两个部分,语法和webAPIs(BOM、DOM)
<script>
标签位置
<script></script>
一般写在<head></head>
中,当然,要获取标签成为js中的元素注意下面第7条提醒。
console.log();
返回值为 null:空对象(代码是从上往下执行的,定义的东西在下面,也会这样)
若undefined:未定义。
当使用 console.log();
或 console.dir();
打印结果可以展开,那么就是对象。
console.dir();
找proto的值;
方法二:console.log(元素名字.constructor);
constructor指的是函数构造器;
getElementsBytagName();
该方法可以获取某标签类型的所有元素,其返回值就是一个伪数组(数组的模样,但没有数组的方法),例如:
var divs=getElementsBytagName('div');
for(var i=0;i<divs.length;i++)
{
var div=divs[i];
console.log(div);
}
// by id
document.getElementById("demo").innerHTML
// by class
document.getElementsByClassName("demo")[0].value
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>
然而
onclick="this.innerHTML='Change'+'all'+'of'+'them';"
只能放到标签里用,this 要时刻紧靠着它自己的环境,在函数内部可以用this,在标签内可以用,拿出去以后,就达不到想要的效果了,因为它所属的环境变了。
if(window){
window.location.href="about:blank";
}
//跳转或打开一个新网页
window.open("xxx.com");
//关闭页面
window.parent.close();
window.close("window.location.href");
window.parent.close("window.location.href")
奇怪的是,confirm()根据返回值来使用window.close(),怎么调试都不好用(关闭了一次编辑器后又可以用了,这四种都好用。
<p id="cg" class="buttom-text">2016/12/21 上午12:00:00</p>
<script>
// 这个cg就是span的id,初始化Date时间并转化为字符string类型,每1000毫秒
//setInterval() 的调用直到页面关闭
setInterval("cg.innerHTML=new Date().toLocaleString()", 1000);
</script>,
一份很棒的js链接https://www.cnblogs.com/jeremy5810/p/7665866.html
<!--点击后.......-->
<a class="link"id="c" href="#"onclick="colorChange()">hhh</a>
<script>
function colorChange(){
//点击后,链接会呈现黄色
//document.getElementById("xx").style.xxx中的所有属性
document.getElementById("c").style.color="yellow";
}
</script>
样式表
CSS语法(不区分大小写) | JS语法(区分) |
---|---|
border | border |
border-bottom | borderBottom |
border-bottom-color | borderBottomColor |
border-bottom-style | borderBottomStyle |
border-bottom-width | borderBottomWidth |
border-color | borderColor |
border-left | borderLeft |
border-left-color | borderLeftColor |
border-left-style | borderLeftStyle |
border-left-width | borderLeftWidth |
border-right | borderRight |
border-right-color | borderRightColor |
border-right-style | borderRightStyle |
border-right-width | borderRightWidth |
border-style | borderStyle |
border-top | borderTop |
border-top-color | borderTopColor |
border-top-style | borderTopStyle |
border-top-width | borderTopWidth |
border-width | borderWidth |
clear | clear |
float | floatStyle |
margin | margin |
margin-bottom | marginBottom |
margin-left | marginLeft |
margin-right | marginRight |
margin-top | marginTop |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
background | background |
background-p_w_upload | backgroundAttachment |
background-color | backgroundColor |
background-p_w_picpath | backgroundImage |
background-position | backgroundPosition |
background-repeat | backgroundRepeat |
color | color |
display | display |
list-style-type | listStyleType |
list-style-p_w_picpath | listStyleImage |
list-style-position | listStylePosition |
list-style | listStyle |
white-space | whiteSpace |
font | font |
font-family | fontFamily |
font-size | fontSize |
font-style | fontStyle |
font-variant | fontVariant |
font-weight | fontWeight |
letter-spacing | letterSpacing |
line-break | lineBreak |
line-height | lineHeight |
text-align | textAlign |
text-decoration | textDecoration |
text-indent | textIndent |
text-justify | textJustify |
text-transform | textTransform |
vertical-align | verticalAlign |
document.write()
只能向页面写入一次,之后文档流会关闭,再次写入时候打开,之前页面的内容也会被覆盖掉。所以不适用于静态页面的写入。主要用于写入文件中去,而不是写入页面中去。
document.write(“内容”+“<br>”) 使用“<br>”来实现换行
document.write()
方法可以将内容写到 HTML 文档中。
<input id="username"type="text" class="input" >
<input type="submit" onclick="f();">
使用<input>
标签的时候一定要把 type 注明,不然 JavaScript 传值就会失败,读不到
function f1(){
// i 对于for循环外的范围是不可见的(i is not defined)
for(let i = 1; i<5; i++){
// i只有在这里是可见的
}
}
function f2(){
// i 对于for循环外的范围是可见的
for(var i = 1;i<5; i++){
// i 在for 在整个函数体内都是可见的
}
// i 对于for循环外的范围是可见的
}
<br><input type="radio" class="none" name="answer">A. 栈
<br><input type="radio" class="none" name="answer">B. 队列
<br><input type="radio" class="none" name="answer">C. 二叉树
<br><input type="radio" class="none" name="answer">D. 树
js获取单选框里面的值
<script>
window.onload = function(){
//通过名字获取 getElementsByName
//var obj = document.getElementsByName("fruit");
//通过标签获取 getElementsByTagName
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i ++){
if(obj[i].checked){
alert(obj[i].value);
}
}
}
</script>
<form>
<input type="radio" name ="fruit" value="apple" checked>苹果
<input type="radio" name ="fruit" value="banana">香蕉
<input type="radio" name ="fruit" value="pear">梨
</form>
<label>
标签为 input 元素定义标注
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。