JS起步阶段随笔【JavaScript】

2023-05-25 11:30:32 浏览数 (1)
  1. 命名规范 驼峰法
代码语言：javascript复制
//小驼峰
var userName;
//大驼峰
var UserName
  1. 打印引号 如果要在字符串中加引号并打印出来，要加转义字符
代码语言：javascript复制
var a='我是/'xxx/'';
//result：我是'xxx'
  1. 一点感受 对新手入门来说，优秀的编程视频讲解，会跟你讲它的思想，很多细节（是什么，，会返回什么，，会发生什么），帮助你加深理解，形成自己的认知思想，那些就代码论代码的视频，往往消化不良，往往需要自己去额外地理解，尤其是讲解的内容多的时候。
  2. JavaScript 的组成
代码语言：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(); 该方法可以获取某标签类型的所有元素，其返回值就是一个伪数组（数组的模样，但没有数组的方法），例如:
代码语言：javascript复制
var divs=getElementsBytagName('div');
for(var i=0;i<divs.length;i  )
{
	var div=divs[i];
	console.log(div);
}
  1. 原生JS获取标签内容
代码语言：javascript复制
// by id
document.getElementById("demo").innerHTML
// by class
document.getElementsByClassName("demo")[0].value
代码语言：javascript复制
<!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>

然而

代码语言：javascript复制
onclick="this.innerHTML='Change' 'all' 'of' 'them';"

只能放到标签里用，this 要时刻紧靠着它自己的环境，在函数内部可以用this，在标签内可以用，拿出去以后，就达不到想要的效果了，因为它所属的环境变了。

  1. 设置空白页 如果窗口还开着，就设置为空白页
代码语言：javascript复制
if(window){
   window.location.href="about:blank";
}
  1. 页面跳转
代码语言：javascript复制
//跳转或打开一个新网页
window.open（"xxx.com"）;
代码语言：javascript复制
//关闭页面
window.parent.close();
window.close("window.location.href");
window.parent.close("window.location.href")

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

  1. 显示当前时间
代码语言：javascript复制
<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修改网页样式
代码语言：javascript复制
<!--点击后.......-->
<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

  1. 输出换行 注意document.write()只能向页面写入一次，之后文档流会关闭，再次写入时候打开，之前页面的内容也会被覆盖掉。所以不适用于静态页面的写入。主要用于写入文件中去，而不是写入页面中去。 document.write(“内容” “<br>”) 使用“<br>”来实现换行
  2. 使用 document.write() 方法可以将内容写到 HTML 文档中。
  3. 发送数据请求
代码语言：javascript复制
<input id="username"type="text" class="input" >
<input type="submit" onclick="f();">

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

  1. 如何获取复选框value 获取复选框的值
  2. var 和 let 的区别 块作用域 在块作用域中两者的区别较为明显， let只在for()循环中可用，而 var是对于包围for循环的整个函数可用
代码语言：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循环外的范围是可见的
}
  1. 实现单选框 你只要确认它们的 name 相同，value 值不同就可以实现始终只选一个 radio 了
代码语言：javascript复制
<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获取单选框里面的值

代码语言：javascript复制
<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 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
javascript 对象 函数 语法 字符串

0 人点赞