JS起步阶段随笔【JavaScript】

  1. 命名规范
    驼峰法
//小驼峰
var userName;
//大驼峰
var UserName 
  1. 打印引号
    如果要在字符串中加引号并打印出来,要加转义字符
var a='我是/'xxx/'';
//result:我是'xxx'  
  1. 一点感受
    对新手入门来说,优秀的编程视频讲解,会跟你讲它的思想,很多细节(是什么,,会返回什么,,会发生什么),帮助你加深理解,形成自己的认知思想,那些就代码论代码的视频,往往消化不良,往往需要自己去额外地理解,尤其是讲解的内容多的时候。

  2. JavaScript 的组成

JavaScript  包含两个部分,语法和webAPIs(BOM、DOM)
  1. <script>标签位置
    <script></script>一般写在<head></head>中,当然,要获取标签成为js中的元素注意下面第7条提醒。

  2. 字符串语法规范
    js中的字符串一般都用单引号

  3. 控制台反馈结果
    当使用 console.log(); 返回值为 null:空对象(代码是从上往下执行的,定义的东西在下面,也会这样)
    若undefined:未定义。
    当使用 console.log();console.dir(); 打印结果可以展开,那么就是对象。

  4. 查看一个对象的类型
    也就是查看它的类
    方法一:console.dir(); 找proto的值;
    方法二:console.log(元素名字.constructor); constructor指的是函数构造器;

  5. 原生JS标签定位方法
    getElementsBytagName();
    该方法可以获取某标签类型的所有元素,其返回值就是一个伪数组(数组的模样,但没有数组的方法),例如:

var divs=getElementsBytagName('div');
for(var i=0;i<divs.length;i++)
{
	var div=divs[i];
	console.log(div);
}
  1. 原生JS获取标签内容
// 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,在标签内可以用,拿出去以后,就达不到想要的效果了,因为它所属的环境变了。

  1. 设置空白页
    如果窗口还开着,就设置为空白页
if(window){
   window.location.href="about:blank";
}
  1. 页面跳转
//跳转或打开一个新网页
window.open("xxx.com";
//关闭页面
window.parent.close();
window.close("window.location.href");
window.parent.close("window.location.href")

奇怪的是,confirm()根据返回值来使用window.close(),怎么调试都不好用(关闭了一次编辑器后又可以用了,这四种都好用。

  1. 显示当前时间
<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

  1. 原生JS修改网页样式
<!--点击后.......-->
<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语法(区分)
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
floatfloatStyle
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
backgroundbackground
background-p_w_uploadbackgroundAttachment
background-colorbackgroundColor
background-p_w_picpathbackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
colorcolor
displaydisplay
list-style-typelistStyleType
list-style-p_w_picpathlistStyleImage
list-style-positionlistStylePosition
list-stylelistStyle
white-spacewhiteSpace
fontfont
font-familyfontFamily
font-sizefontSize
font-stylefontStyle
font-variantfontVariant
font-weightfontWeight
letter-spacingletterSpacing
line-breaklineBreak
line-heightlineHeight
text-aligntextAlign
text-decorationtextDecoration
text-indenttextIndent
text-justifytextJustify
text-transformtextTransform
vertical-alignverticalAlign
  1. 输出换行
    注意document.write()只能向页面写入一次,之后文档流会关闭,再次写入时候打开,之前页面的内容也会被覆盖掉。所以不适用于静态页面的写入。主要用于写入文件中去,而不是写入页面中去。
    document.write(“内容”+“<br>”) 使用“<br>”来实现换行

  2. 使用 document.write() 方法可以将内容写到 HTML 文档中。

  3. 发送数据请求

<input id="username"type="text" class="input" >
<input type="submit" onclick="f();">

使用<input>标签的时候一定要把 type 注明,不然 JavaScript 传值就会失败,读不到

  1. 如何获取复选框value
    获取复选框的值

  2. var 和 let 的区别
    块作用域
    在块作用域中两者的区别较为明显, let只在for()循环中可用,而 var是对于包围for循环的整个函数可用

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循环外的范围是可见的
}
  1. 实现单选框
    你只要确认它们的 name 相同,value 值不同就可以实现始终只选一个 radio 了
<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>
  1. <label> 标签为 input 元素定义标注
    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

来杯Sherry

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值