Le résumé le plus systématique des points clés de JavaScript (hors syntaxe de base du langage)

1. Variables
1. Vous pouvez utiliser new Array ("1", "2");
2. Vous pouvez effacer des variables en leur attribuant une valeur nulle, par exemple :

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

Soyez prudent lorsque vous définissez des variables dans une fonction comme celle-ci

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

2. Opérateurs = = et ===

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

//Le code ci-dessus n'apparaîtra bonjour qu'après l'exécution, car les valeurs ​​​​de i et j sont égales, mais les types de données de i et j sont pas égal. Donc == ne nécessite que des valeurs égales, mais === nécessite non seulement des valeurs égales, mais également des types de données égaux.

Trois, capture d'exception

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

Quatre, événement
événement de chargement de page Web de chargement
événement de clic sur clic
événement de collecte de curseur de mise au point
sélection de zone de texte sélectionnée event
onmouseover mouse over event
onmouserout mouse out event

5. Opération DOM
1 Introduction : Lorsqu'une page Web est chargée, le navigateur crée le modèle objet de document de la page. .

2. Opération DOM HTML
1) js peut modifier tous les éléments HTML de la page
①Changer le flux de sortie : document.write(); A utiliser avec prudence !
②Get elements: document.getElementById(); Méthode de chaque élément, les éléments obtenus deviennent un tableau d'objets, disposés dans l'ordre

③Change Html content: innerHTML; Après avoir obtenu le object.Attribute = "Attribute value "Oui, vous pouvez également utiliser la méthode setAttribute() : le premier paramètre est le nom de l'attribut, et le deuxième paramètre est la valeur de l'attribut

document.getElementById("pid") .setAttribute("class","pid2");

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

La méthode d'obtention des valeurs d'attribut utilise getAttribute();

Certaines méthodes de contrôle dom html :

2) js peut modifier tous les éléments des attributs HTML de la page

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

fef50554eca1a427827adaa329da8122

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

          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);
                                                      要添加的 在这之前的

9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

 <title>hello world</title>

3f1c4e4b6b16bbbd69b2ee476dc4f83a

2cacc6d41bbb37262a98f745aa00fbf0

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

36cc49f0c466276486e50c850b7e4956

73a6ac4ed44ffec12cee46588e518a5e

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

3) js peut changer tous les styles CSS dans la page

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

4) js peut réagir à tous les événements de la page

5) Contrôles d'objet DOM HTML

6. Handle d'événement EventListener

Le handle d'événement est une action qui déclenche un événement. Par exemple, onclick est la poignée lorsqu'on clique dessus.

Des gestionnaires d'événements peuvent être ajoutés dans js, ce qui peut réduire beaucoup de code

Par exemple, ce qui suit est la méthode traditionnelle de déclenchement d'événements

f4d5e46e10f3e67579b6b3e20e30fb19Button120d611986108da972f06c8ab0c8bab5

Le handle d'événement ajouté dans le code js est le suivant : la fonction de traitement ne peut pas ajouter de parenthèses () !
var x=document.getElementById("btn");
x.addEventListener("click",demo);//Il y a deux paramètres ici, l'un est le handle de l'événement et le second est le fonction pour gérer l'événement

Utilisez removeEventListener() pour supprimer le handle vers l'extérieur), capture d'événement (de l'extérieur vers l'intérieur).

2. Traitement des événements :
1) Traitement des événements HTML : directement ajouté à la structure HTML

2) Traitement des événements dom niveau 0 : attribuer une fonction à un gestionnaire d'événements attributs

//Traitement des événements de niveau 0 Le traitement des événements clairs est très simple, il suffit d'attribuer onclick à vide. Lors du réglage, l'heure de l'objet est définie sur null à la place de l'objet !

btn1.onclick=null;

//Lorsqu'il existe plusieurs gestionnaires pour le même événement, le précédent sera effacé par le gestionnaire d'événement suivant.

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

3) Traitement des événements DOM niveau 2 :

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

true : capture d'événement

false : bouillonnement d'événement

Pour effacer le traitement des événements, utilisez removeEventListener();

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

//Le gestionnaire d'événements dom niveau 2 ne sera pas écrasé mais sera analysé et exécuté étape par étape.

4) Gestionnaire d'événements IE. (Utilisé dans les versions inférieures ou égales à IE8, similaire à l'utilisation de addEventListener.)

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

Ajouter un événement attachEvent
Supprimer un événement detachEvent

5) Cela peut varier selon le version du navigateur Écrivez différents codes

3. Objet événement : Un objet sera généré lorsqu'un événement dom est déclenché.

Attributs de l'objet événement :
1) type : obtenir le type d'événement

2) cible : obtenir la cible de l'événement : où cet événement est déclenché, c'est-à-dire l'objet de cet événement est Quel élément dans l'élément html.

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3) stopPropagation() : empêche le bouillonnement d'événement : déclenche l'apparition de l'événement de l'élément le plus interne, mais après que cet événement se soit produit, l'événement de l'élément supérieur contenant cet élément sera également déclenché ! Parfois, nous ne voulons pas que cela se produise, ce qui empêchera la propagation d'événements.

event.stopPropagation();

4) PreventDefault() : empêcher le comportement par défaut de l'événement

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

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
utilise js pour exécuter du code après un intervalle de temps défini au lieu de l'exécuter immédiatement après l'appel de la fonction
Il existe deux fonctions
L'une est setInterval() -Exécuter en continu le code spécifié à un intervalle du nombre spécifié de millisecondes
L'un est setTimeout() - exécute le code spécifié après une pause pendant le nombre spécifié de millisecondes.
Vous pouvez utiliser setTimeout pour implémenter la fonction de setInterval() : appelez-vous simplement dans le code de la fonction appelante !
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

Vous pouvez utiliser clearInterval(), clearTimeout() pour effacer cet appel,

4. L'objet Location
est utilisé pour obtenir l'adresse de la page actuelle et rediriger le navigateur vers une nouvelle page (en fait, je comprends qu'il s'agit d'analyser l'adresse actuelle)

Propriétés de l'objet Location :
location.hostname : Renvoie le nom de domaine de l'hébergeur web
location.pathname : Renvoie le chemin et le nom de fichier de la page actuelle
location.port : Renvoie le port du hébergeur
location.protocol : renvoie le protocole Web utilisé
location.href : renvoie l'url de la page actuelle
location.assign() charge un nouveau document et le paramètre est le chemin du document à charger.

window.location.hostname;

5, objet écran
l'objet window.screen contient des informations sur l'écran de l'utilisateur
screen.avaiilWidth;//Hauteur d'écran disponible
screen.availHeight;//Largeur d'écran disponible
screen.height;//Hauteur de l'écran
screen.width;//Largeur d'écran

6, objet de navigation
7, fenêtre pop-up , cookie

Dix, js pensée orientée objet

Articles connexes :

Résumé des points de connaissances importants de JavaScript 1

Points importants à noter sur l'événement JavaScript "event object"_javascript skills

Vidéos associées :

Tutoriel vidéo de renforcement de base JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!