js学习

最新推荐文章于 2024-06-04 23:11:16 发布

咫尺的梦想丶

最新推荐文章于 2024-06-04 23:11:16 发布

阅读量218

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/sinat_31161167/article/details/78082383

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

自己学习总结的一些简单的js.

锚点

<a name="html">HTML 教程</a><br>
<a name="css">CSS 教程</a><br>
<a name="xml">XML 教程</a><br>
<a href="/js/">JavaScript 教程</a>
document.write(document.anchors.length);//获取锚点数

锚点数量为3个 a标签name指向的是锚点

innerHTML

定义

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

用法1：

<body>

<a name="html">HTML 教程</a><br>
<a name="css">CSS 教程</a><br>
<a name="xml">XML 教程</a><br>
<a id="html">HTML 教程</a>
<p>文档中第一个锚:
<script>
document.write(document.anchors[0].innerHTML);
</script>
</p>

</body>

结果为 HTML 教程

document.getElementById("html").innerHTML

也可获得同样的结果

用法2

<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" οnclick="myFunction()">点击这里</button>
	
</body>

结果为：p标签的内容为
我的第一个 JavaScript 函数

调用外部的js

<script src="myScript.js"></script>

调用一个名为myScript的js文件

document.write

请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>document.write()</title> 
</head>
<body>
	
<h1>会被覆盖</h1>
<p>我的段落。会被覆盖</p>
<button οnclick="myFunction()">点我</button>
<script>
function myFunction() 
{
    document.write(Date());
}
</script>
	
</body>
</html>

console.log()

作用在控制台输出。

换行

可以使用反斜杠“\”进行换行

document.write("你好 \
世界!");

可以正常显示，不能下面这样使用！

document.write \ 
("你好世界!");

对象创建方法

方法一：

function Obj(){
    var obj=new Object();
    obj.name="小明";
    obj.age=12;
    obj.ontFun=function(){
    }//可以有多个方法
   /* obj.twoFun=function(){
    }*/
    return obj;
}
var one=Obj();

方法二：

把第一种方法的

//var one = Obj();
//换成
var one = new Obj;

其他方法：

var one = {name : '小明', age : 12 , oneFun : function(){ ... }  }
//或
var one= new Ojbect();
one.name = '小明';   
one.age = 12;  
one.oneFun = function(){  }

typeof操作符

typeof可以检测数据类型。

typeof "str"                // 返回 string 
typeof 12                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'小明', age:12} // 返回 object

特别提醒：

typeof null        //返回object
var person = null      
typeof person   //返回object
var person = undefined
typeof person   //返回undefined

var person;                  // 值为 undefined(空), 类型是undefined
typeof person               //返回undefined

undefined与null的区别

null 和 undefined 的值相等，但类型不等

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

constructor 属性

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

可以使用constructor来查看对象是不是数组或者日期

自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

#pos可以定位到id尾pos的尾部定位点

HTML DOM 树

DOM HTML tree

通过 id 查找 HTML 元素

var id=document.getElementById("id");

通过标签名查找 HTML 元素

var id=document.getElementById("id");
var p=id.getElementsByTagName("p");

通过类名找到 HTML 元素

var className=document.getElementsByClassName("className");

数字

当一个数字直接出现在JavaScript程序中，我们称之为数字直接量，注意，在任何数字直接量前加负号（-）可以得到他们的负值，但负号是一元求反运算符，并不是数字直接量语法的组成部分。