ホームページ > 記事 > ウェブフロントエンド > JavaScript の重要なポイントを最も体系的にまとめたもの (基本的な言語構文を除く)

JavaScript の重要なポイントを最も体系的にまとめたもの (基本的な言語構文を除く)

php是最好的语言オリジナル: 2018-07-27 15:06:26983ブラウズ

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 がポップアップ表示されます。したがって、 == は等しい値のみを必要としますが、 === は等しい値を必要とするだけでなく、同じデータ型も必要とします。

3、例外キャプチャ

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

4、イベント
onload Webページ読み込みイベント
onclickクリックイベント
onfocusカーソル収集イベント
onselectテキストボックス選択イベント
onmouseoverマウス通過イベント
onmouseroutマウスアウトイベント

5、dom操作
1 、はじめに: Web ページが読み込まれると、ブラウザはページのドキュメントオブジェクトモデルを作成します。

2. DOM 操作 HTML
1) js はページ内のすべての HTML 要素を変更できます
①出力ストリームを変更すると、ドキュメントのすべてのコンテンツが上書きされます。慎重に使用してください。
②要素の取得: document.getElementById();
document.getElementByClass();

このうち、tagnameと同様に、取得した要素はの配列になります。オブジェクトを順番に並べます

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

③HTML コンテンツの変更: innerHTML;

④属性コンテンツの変更: オブジェクトを取得した後、Attribute = "属性値" でOKですが、setAttribute() メソッドを使用することもできます。最初のパラメーターは属性名です。、2番目のパラメータは属性値です
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 属性を変更できます

fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e

 <title>hello world</title>

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d

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

3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

2cacc6d41bbb37262a98f745aa00fbf0

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

3) js はページ内のすべての CSS スタイルを変更できます

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

4) js はページ上のすべてのイベントに反応できます

5) DOM オブジェクトは HTML を制御します

6. イベントハンドル EventListener

イベントハンドルは、イベントをトリガーするアクションです。たとえば、onclick はクリックされたときのハンドルです。
イベントハンドルを js で追加できるため、多くのコードを削減できます
たとえば、以下は従来のイベントトリガー方法です
f4d5e46e10f3e67579b6b3e20e30fb19button65281c5ac262bf6d81768915a4a77ac0
追加します。 js コードイベントハンドルは次のとおりです。処理関数は () 括弧を追加できません。
var x=document.getElementById("btn");
x.addEventListener("click",demo);//ここには 2 つのパラメータがあり、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 を empty に割り当てるのと同じくらい簡単です。設定すると、オブジェクトではなくオブジェクトの時間が 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 イベントハンドラー。 (addEventListener の使用と同様、IE8 以下のバージョンで使用されます。)

イベントを追加しますattachEvent

イベントを削除します detachEvent

5) 異なるブラウザーのバージョンに応じて異なるコードを記述することができます

if(btn.addEventListener){

     btn.addEventListener();
}
else{

     btn.attachEventListener()
}

3.オブジェクト: DOM イベントがトリガーされると、オブジェクトが生成されます。

イベントオブジェクトの属性:

1) type: イベントタイプを取得します

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

2) target: イベントを取得します target: このイベントがトリガーされる場所、つまり、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. タイマー
js を使用すると、関数が呼び出された直後ではなく、設定された時間間隔後にコードが実行されます。1 つは setInterval() です。この間隔は指定されたミリ秒間継続します。指定されたコード
1 つは setTimeout() - 指定されたミリ秒数の一時停止後に、指定されたコードを実行します。
setTimeout を使用して setInterval() 関数を実装できます。呼び出し関数コードで自分自身を呼び出すだけです。
setInterval(funtion(){},1000);
setTimeout(funtion(){},1000);

この呼び出しをクリアするには、clearInterval()、clearTimeout()を使用できます。

4、Locationオブジェクト

が使用されます現在のページのアドレスを取得し、ブラウザを新しいページにリダイレクトします (実際、私の理解では現在のアドレスを解析します)

Location オブジェクトの属性:

location.hostname: Web ホストのドメイン名を返します

location .pathname: 現在のページのパスとファイル名を返します
location.port: Web ホストのポートを返します
location.protocol: 使用されている Web プロトコルを返します
location.href: 現在のページの URL を返します
location.assign () は新しいドキュメントをロードします。パラメータはドキュメントをロードするための必須のパスです。

window.location.hostname;

5、screen オブジェクト

window.screen オブジェクトには、ユーザーの画面に関する情報が含まれています

screen.availHeight; // 利用可能な画面の幅
screen. //画面の高さ
screen.width;//画面の幅

6、ナビゲーションオブジェクト
7、ポップアップウィンドウ、Cookie

ten、jsオブジェクト指向の考え方

JavaScriptの重要知識まとめポイント1

JavaScriptイベント「イベントオブジェクト」の注意点_javascriptスキル

JavaScript の重要なポイントを最も体系的にまとめたもの (基本的な言語構文を除く)

関連記事