자바스크립트의 핵심을 가장 체계적으로 정리한 책(기본 언어 구문 제외)

1. 변수
1. 배열을 정의하려면 새 배열("1", "2")을 사용할 수 있습니다.
2. 다음과 같이 null을 할당하여 변수를 지울 수 있습니다.

//首先定义一个变量
var i1=10;
i1=null;
//此时的i1就被清除了

함수에서 이와 같은 변수를 정의할 때는 주의하세요

funtion demo(){
     x=10;
}
//而此前的代码中都没有出现x，那么这里就是定义了x，在调用demo函数以后，x就是一个全局变量了。

2. 연산자 == 및 ===

var i="5";
var j=5;
if(i==j) alert(""hello);
if(i===j) alert("world");

//위 코드만 i와 j의 값은 동일하지만 i와 j의 데이터 유형이 동일하지 않기 때문에 실행 후 hello가 팝업됩니다. 따라서 ==에는 동일한 값만 필요하지만 ===에는 동일한 값이 필요할 뿐만 아니라 동일한 데이터 유형도 필요합니다.

셋, 예외 캡쳐

try{
     if() throw "";
}catch(err){
     alert(throw);
}

넷, 이벤트
onload 웹 페이지 로딩 이벤트
onclick 클릭 이벤트
onfocus 커서 수집 이벤트
onselect 텍스트 상자 선택 이벤트
onmouseover 마우스 통과 이벤트
onmouserout 마우스 아웃 이벤트

five, dom 연산
1, 소개: 웹 페이지가 로드되면 브라우저는 페이지의 문서 객체 모델을 생성합니다.

2. DOM 작업 HTML
1) js는 페이지의 모든 HTML 요소를 변경할 수 있습니다.
①출력 스트림 변경: document.write()는 문서의 모든 내용을 덮어씁니다. 주의해서 사용하세요!
②요소 가져오기: document.getElementById();
document.getElementByTagName() 등

그 중에서 여러 요소를 가져올 수 있는 이 메소드는 다음과 같은 배열이 됩니다. 객체, 순서대로 정렬

document.getElementById("btn").addEventListener("click",function(){
  var x=document.getElementsByName("people");
  var y=x[2].value;
  alert(y);
  });

③Html 내용 변경: innerHTML;

4속성 내용 변경: 객체를 얻은 후 속성 = "속성 값"이면 setAttribute() 메서드를 사용할 수도 있습니다. 첫 번째 매개 변수는 속성 이름입니다. , 두 번째 매개변수는 속성 값입니다
document.getElementById("pid").setAttribute("class","pid2");

속성 값을 얻는 방법은 getAttribute()를 사용하는 것입니다.

alert(document.getElementById("name").getAttribute("name"));

dom 컨트롤 html 메소드 중 일부:

          1，设置属性：如var attr=document.getElementById("demo1");
                              attr.setAttribute("title","dhello");//设置属性
                              var st=attr.getAttribute("title");//得到属性

                              alert(st);


          2.得到子节点：
                         var child=document.getElementsByTagName("ul")[1].childNodes;
                         alert(child.length);


          3得到父节点： var parent=document.getElementsByTagName("li")[0].parentNode;
                          alert(parent.nodeName);

          4创建元素节点：   var body=document.body;
                         var inp=document.createElement("input");//创建一个input节点
                         inp.type="button";//节点类型
                         inp.value="ann";
                         body.appendChild(inp);//把新的子节点添加到指定节点。（添加到末尾 ）

          5创建文本节点


          6删除子节点：<p id="p1">
                         <p id="p1">这是一个段落。</p>
                         <p id="p2">这是另一个段落。</p>
                         </p>

                         var parent=document.getElementById("p1");//找到 id="p1" 的元素：

                         var child=document.getElementById("p1");//找到 id="p1" 的 <p> 元素：

                         parent.removeChild(child);//从父元素中删除子元素：


                         第二种方法：var child=document.getElementById("p1");
                                       child.parentNode.removeChild(child);


          7动态添加节点(课选择添加的位置)
                                       var p=document.getElementById("p");
                                       var node=document.getElementById("pid");
                                       var newnode=document.creatElement("p");
                                       p.inserBefore(newnode,node);
                                                      要添加的 在这之前的

2) js는 페이지의 모든 HTML 속성을 변경할 수 있습니다

 <title>hello world</title>

 <a id="aid"/>
 <p id=pid>hello world!!</p>

< ;script>

 document.getElementById("aid").href="www.baidu.com";//改变属性值

3) js는 페이지의 모든 CSS 스타일을 변경할 수 있습니다

document.getElementById("pid") .style.backgrouneColor ="red";

4) js는 페이지의 모든 이벤트에 반응할 수 있습니다

5) DOM 개체는 HTML을 제어합니다

6. 이벤트 핸들 EventListener

이벤트 핸들은 이벤트를 트리거하는 작업입니다. 예를 들어 onclick은 클릭할 때의 핸들입니다.
이벤트 핸들러를 js에 추가하면 많은 코드를 줄일 수 있습니다.
예를 들어 다음은 전통적인 이벤트 트리거 방법입니다
button
추가 기능 js 코드 이벤트 핸들은 다음과 같습니다. 처리 함수는 () 대괄호를 추가할 수 없습니다!
var x=document.getElementById("btn");
x.addEventListener("click",demo);//여기에는 두 개의 매개변수가 있습니다. 하나는 이벤트 핸들이고 후자는 이벤트를 처리하는 함수입니다. event

Delete Handle RemoveEventListener() 사용

Seven, event

1. 이벤트 흐름: 페이지에서 이벤트가 수락되는 순서는 이벤트 버블링(내부에서 외부로)과 이벤트 캡처( 외부에서 내부로).

2. 이벤트 처리:

1) HTML 이벤트 처리: HTML 구조에 직접 추가

<button onclick="demo()"><button>

2) dom 레벨 0 이벤트 처리: 이벤트 핸들러 속성에 함수 지정

<button id="btn"></button>
<script>
var btn1=document.getElementById("btn");
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";
};     
</script>

//레벨 0 이벤트 처리 이벤트 지우기 처리는 onclick을 비우도록 할당하는 것만 큼 간단합니다. 설정시 객체가 아닌 객체의 시간이 null로 설정됩니다!

btn1.onclick=null;

//동일한 이벤트에 여러 핸들러가 있는 경우 이전 핸들러는 이후 이벤트 핸들러에 의해 지워집니다.

btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="red";//被覆盖
};
btn1.onclick= function () {
    document.getElementById("pid").style.backgroundColor="blue";
};

3) dom 레벨 2 이벤트 처리:

 addEventListener("事件名"，“事件处理函数”，“true/false”)；

true: 이벤트 캡처

false: 이벤트 버블링
이벤트 처리를 지우려면 RemoveEventListener()를 사용하세요.

//dom 2 레벨 이벤트 핸들러는 덮어쓰지 않지만 덮어쓰이게 됩니다. 단계별로 분석하고 실행해야 합니다.

4) IE 이벤트 핸들러. (IE8 이하 버전에서 사용되며, addEventListener 사용과 유사합니다.)

이벤트 추가attachEvent

이벤트 detachEvent삭제

5) 브라우저 버전에 따라 다른 코드를 작성할 수 있습니다

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3. 객체: DOM 이벤트가 트리거되면 객체가 생성됩니다.

이벤트 개체의 속성:

1) 유형: 이벤트 유형 가져오기

document.getElementById("btn").addEventListener("click",showType);
function showType(e){
     alert(e.type);
}

2) 대상: 이벤트 가져오기 대상: 이벤트가 트리거되는 위치, 즉 이 이벤트의 개체가 html 요소의 어떤 요소인지 .

document.getElementById("btn").addEventListener("click",showTarget);
function showTarget(e){
     alert(e.target);
}

3) stopPropagation(): 이벤트 버블링 방지: 가장 안쪽 요소의 이벤트가 발생하지만, 이 이벤트가 발생한 후에는 이 요소가 포함된 상위 요소의 이벤트도 발생합니다! 따라서 때때로 우리는 이런 일이 발생하는 것을 원하지 않으며, 이는 이벤트 버블링이 발생하는 것을 방지합니다.

event.stopPropagation();

4) PreventDefault(): 이벤트 기본 동작 방지

event.preventDefault();

//dom 0级事件处理
//  var btn1=document.getElementById("btn");
//  btn1.onclick= function () {
//      document.getElementById("pid").style.backgroundColor="red";
//  };
//
//   btn1.onclick=null;
////dom 2级事件处理,处理函数不能加（）括号符！
//

//var btn=document.getElementById("btn");
//btn.addEventListener("click",demo1);
//
//function demo1(){
//
//// alert("dom 2级事件处理！");
//
//   document.getElementById("pid").innerHTML="dom 2级事件处理！";
//}

//事件对象

//1.获取事件对象的类型

//document.getElementById("btn").addEventListener("click",showType);
//function showType(e){
//   alert(e.type);
//}

//2.获取事件对象的目标

//document.getElementById("btn").addEventListener("click",showTarget);
//function showTarget(e){
//   alert(e.target);
//}

八，内置对象
1.什么是对象：js中所有事物都是对象，例如字符串，数组，时间，数值，函数等，每个对象都会带有属性和方法；
2.创建对象：
1）使用new object创建
people=new objet();
people.name="krys";
people.age=20;
2）直接创建：
people={name:"krys",age:20,addres:"guangdong"};
3）使用函数创建

funtion people(name,age){
     this.name=name;this.age=age};
son=new people("jess",20);//然后创建一个对象

document.getElementById("btn").addEventListener("click",creat);
function people(name,age){
          this.name=name;
          this.age=age;
     }
 function creat(){
          var name1= document.getElementById("name").value;
          var age1=document.getElementById("age").value;
          son=new people(name1,age1);
          alert(son.name);
          alert(son.age);
          }

3.字符串对象：String：字符串可以使用双引号也可以使用单引号！

属性：length：str.length可得到字符串的长度、
 indexOf(),在字符串中查找字符串，并返回字符串所在的位置。

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert("r所在的位置是"+name.indexOf("r"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

match(),在字符串中匹配字符串，如果字符串1在字符串中存在，则将字符串1打印出来，如果没有就返回NULL

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){
              alert(name);
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

replace(a,b) a是要替换掉的原来的字符或字符串，b是新的字符或字符串

document.getElementById("btn").addEventListener("click",creat);
     function creat(){
          var name= document.getElementById("name").value;
          if(name.match("krys")){

              alert(name.replace("krys","krys小仙女"));
          }else{
              alert("sorry~you didnt have rights!")
          }

          }

toUpperCase()转换成大写
 toLowerCase()转换成小写
 split()分隔线，将一个字符串分隔成若干部分，如str="hello,world,welcome,to";var s=str.split(","); s[0]="hello";

4.Date对象
1）创建Date对象：
var date=new Date();
alert(date);
var h=date.getHours();//时
var m=date.getMinutes();//分
var s=date.getSeconds();//秒

2)获取具体年份：getFullYear（）；
3）获取毫秒数：getTime();
4)设置具体的日期：setFullYear();
5)获取星期：getDay();

6）设置每秒更新一次
setTimeout(function(){

 showTime();},1000);

//每秒调用一次showTime函数

5.数组对象：
1)数组的创建：var a=["1","krys","ok"];
 var a=new Array(); a[0]="hell0"; a[1]="world";
 var a=new Array("hello","world","welcome");
 2)数组常用的方法：
 concat()合并数组如 a=["krys"];b=["tal"];a.concat(b)=krystal;
 sort()排序数组 var a=["a","c","b"];a.sort();->a b c (默认从低到高排序)
 设置为降序：a.sort(funtion(a,b){return a-b;})
 push()在数组末尾添加一个元素var a=["a","c","b"]; a.push("d");
 reverse()翻转，对称中心点相互交换：a.reverse()= c b a ;

6.math对象
 1）常用函数
 round()四舍五入 Math.round(2.5)=3;
 random()返回0~1之间的随机数 Math.random();
 可以转换成整数：parseInt(Matn.random()*10);
 max()返回最大值
 min()返回最小值
 abs()返回绝对值

九，浏览器的内置对象BOM（browser object model）
1，window对象：大部分对象的祖先，最高级别对象之一。

1）简介：Window对象是指当前的浏览器窗口，所有的js全局变量函数以及变量都是Window对象的成员。
其中，全局变量是window对象的属性，全局函数是window对象的方法。

2）获得浏览器内部窗口的尺寸（即内容区域的尺寸，不包括滚动条工具栏等）：
window.innerHeight浏览器窗口的内部高度,window.innerWidth，浏览器的内部宽度。

3）使用window.open(url)可以打开一个窗口，使用window.close()可以关闭当前窗口。

2,history对象
window.history()对象包含浏览器的历史（url）的集合
有三个方法：
1）history.back()后退，返回到前一页
2）history.forward()，前进，进入到下一页
3)history.go()，带参数，参数就是要进入的页数，-1是前一页，-2是前两页，依次类推，当前页是0.

3. Timer
js를 사용하면 함수 호출 직후가 아닌 설정된 시간 간격 후에 코드가 실행됩니다. 하나는 setInterval()입니다. 간격은 밀리초 단위로 지정됩니다. 지정된 코드
One은 setTimeout()입니다. - 지정된 밀리초 동안 일시 중지한 후 지정된 코드를 실행합니다.
setTimeout을 사용하여 setInterval() 함수를 구현할 수 있습니다. 호출 함수 코드에서 자신을 호출하면 됩니다!
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

clearInterval(),clearTimeout()을 사용하여 이 호출을 삭제할 수 있습니다.

4, Location 객체

가 사용됩니다. 현재 페이지의 주소를 얻고 브라우저를 새 페이지로 리디렉션합니다(실제로 내 이해는 현재 주소를 구문 분석하는 것입니다)

Location 개체의 속성:

location.hostname: 웹 호스트의 도메인 이름을 반환합니다.

location .pathname: 현재 페이지를 반환합니다. 경로 및 파일 이름을 반환합니다.
location.port: 웹 호스트의 포트를 반환합니다.
location.protocol: 사용된 웹 프로토콜을 반환합니다.
location.href: 현재 페이지의 URL을 반환합니다.
location.sign ()는 새 문서를 로드하며 매개변수는 필수입니다. 문서를 로드할 경로입니다.

window.location.hostname;

5, 화면 객체

window.screen 객체에는 사용자 화면

screen.avaiilWidth; //사용 가능한 화면 높이
screen.availHeight; //화면 높이
screen.width;//화면 너비

6, 탐색 개체
7, 팝업 창, 쿠키

ten, js 객체 지향적 사고

관련 기사:

중요한 JavaScript 지식 요약 포인트 1

JavaScript 이벤트 "이벤트 객체"에 대한 주의 사항_javascript 기술

관련 동영상:

JavaScript 기초 향상 동영상 튜토리얼

위 내용은 자바스크립트의 핵심을 가장 체계적으로 정리한 책(기본 언어 구문 제외)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!