JS起步阶段随笔【JavaScript】

来杯Sherry

已于 2023-03-14 08:38:49 修改

阅读量107

点赞数 1

分类专栏： H5 | CSS3 | JS 专栏文章标签： JavaScrpit

于 2020-07-22 17:54:53 首次发布

本文链接：https://blog.csdn.net/weixin_44041700/article/details/92141930

版权

H5 | CSS3 | JS 专栏专栏收录该内容

15 篇文章 0 订阅

订阅专栏

命名规范
驼峰法

//小驼峰
var userName;
//大驼峰
var UserName

打印引号
如果要在字符串中加引号并打印出来，要加转义字符

var a='我是/'xxx/'';
//result：我是'xxx'

一点感受
对新手入门来说，优秀的编程视频讲解，会跟你讲它的思想，很多细节（是什么，，会返回什么，，会发生什么），帮助你加深理解，形成自己的认知思想，那些就代码论代码的视频，往往消化不良，往往需要自己去额外地理解，尤其是讲解的内容多的时候。
JavaScript 的组成

JavaScript  包含两个部分，语法和webAPIs（BOM、DOM）

<script>标签位置
<script></script>一般写在<head></head>中,当然，要获取标签成为js中的元素注意下面第7条提醒。
字符串语法规范
js中的字符串一般都用单引号
控制台反馈结果
当使用 console.log(); 返回值为 null：空对象（代码是从上往下执行的，定义的东西在下面，也会这样）
若undefined：未定义。
当使用 console.log(); 或 console.dir(); 打印结果可以展开，那么就是对象。
查看一个对象的类型
也就是查看它的类
方法一：console.dir(); 找proto的值；
方法二：console.log(元素名字.constructor); constructor指的是函数构造器；
原生JS标签定位方法
getElementsBytagName();
该方法可以获取某标签类型的所有元素，其返回值就是一个伪数组（数组的模样，但没有数组的方法），例如:

var divs=getElementsBytagName('div');
for(var i=0;i<divs.length;i++)
{
	var div=divs[i];
	console.log(div);
}

原生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，在标签内可以用，拿出去以后，就达不到想要的效果了，因为它所属的环境变了。

设置空白页
如果窗口还开着，就设置为空白页

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

原生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语法（区分）
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 传值就会失败，读不到

如何获取复选框value
获取复选框的值
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循环外的范围是可见的
}

实现单选框
你只要确认它们的 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>

<label> 标签为 input 元素定义标注
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

来杯Sherry

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS起步阶段随笔【JavaScript】

1.命名用驼峰法，，username -> userName(更加规范)2.如果要在字符串中加引号并打印出来，要加转义字符var a='我是/'xxx/'';打印结果为我是'xxx' 3.优秀的编程视频讲解，会跟你讲它的思想，很多细节（是什么，，为什么，，会发生什么），帮助你加深理解，形成自己的认知思想，那些就代码论代码的视频，往往消化不良，往往需要自己去额外地理解，尤其...
复制链接

扫一扫