私はダークホースで17日目にトレーニングしました.
41085 ワード
javaScript概要:行動基準、ウェブページとユーザのインタラクション、フォーム検証 の3つの使い方:jsの解釈器は遊覧器に内蔵されています. 行内式:一般的にラベルに用いられるイベント処理EG: 埋め込み式:新しい一対のscriptタグをここにjsコード を書きます.外部チェーン:scriptのsrc属性はjsファイル を導入する.
定義変数:JavaScriptの変数タイプはその値によって決定され、変数を定義するにはキーワード“var”が必要であり、JavaScript文は“;”で終わるべきである.JavaScriptの注釈は単一の行の注釈(/注釈の内容)と複数の行の注釈(/複数行の注釈/)でデータを印刷するタイプはコンソールに分類される. データタイプ:jsには5つの基本データタイプと複雑なデータタイプがあります.5種類の基本データタイプ:1、number数字タイプ2、string文字列タイプ3、bollanブールタイプtrueまたはfalse 4、undefined undefinedタイプ、変数宣言は初期化されていません.その値はundefined 5、null nullタイプです.空のオブジェクトを表します.もし定義された変数が将来保存対象を用意すれば、変数をnullに初期化できます.ページでは対象を取得できません.戻り値はnullの1種類の複合タイプです.1、objectの後に学習するJavaScriptオブジェクトは複合タイプ に属します.
5.関数の定義と呼び出し function関数名(イメージ){関数体} 6.グローバル変数とローカル変数:**グローバル変数:関数以外の変数とページ全体のライフサイクルは同じです. **局所変数:*、関数内の変数を定義します. は、ローカルスコープ内でグローバル変数 にアクセスし、変更することができる.は、グローバルスコープにおいてローカル変数 にアクセスおよび修正することができない.
デフォルトのscriptタグの中のjsコードは、すべてのラベルがロードされる前に実行され、タグオブジェクトが取得できなくなり、エラーが発生します. 解決方法:HTMLのすべてのラベルの記載が完了するのを待って、JSコード を実行します.オブジェクト.イベント=function(){}オブジェクトが発生すると自動的に右のコード が実行されます. 9.操作ラベルの属性
属性名のjsの書き方 htmlの属性は、jsの中のほとんどの書き方と同じですが、「class」属性は「class Name」と書きます. 「style」属性の中の属性は、横棒をラクダの形に変えたものがあります.例えば、「font-size」は、「style.fontSize」 に変更されました.タグ要素を取得する:varタグオブジェクト=document.getElemenntById(ラベルID属性値) 操作ラベル属性:ラベルオブジェクト.属性名class属性は、「className 」と書く必要があります.操作ラベルスタイル:ラベルオブジェクト.style.スタイル属性名text-indent-----textIndent 操作ラベルの内容:ラベルオブジェクト.inners 10.配列の操作配列の定義 var aData 1=[1,2,3,4,5]alert(aData 1); aData 2=new Aray(1,0,0,8,6,haha) タグ要素を下付きで取得する alert(aData 2[3]) は、配列長を取得する. alert(aData 2.length) 、文末から要素を追加し、文末から要素を削除する. aData 2.pop()alert(aData 2) aData 2.push(100)//スタックalert(aData 2) **要素の追加:**appliceキーワード(以下の記号を開始し、要素の個数を削除します.追加する要素が必要です.) aData 2.splice(0,0,1,2,3);alert(aData 2) aData 2.splice(3、3)alert(aData 2) aData 2.splice(2,1,2,1)alert(aData 2) 循環文: プラスの意味: 数学演算 文字列スティッチング JSの中で+ぐらいのタイプは違ってもいいです.
タイマー ＊単語タイマーを作成します.＊パラメータ1は、タイマーが実行する関数名(匿名関数)パラメータ2は、遅延時間 です.
は、複数のタイマーを作成します.パラメータ1は、タイマーが実行する関数名(匿名関数)パラメータ2の実行間隔 です.
Dcument
var oTimer 2=set Interval(function){alert(何回も起動しますよね}、3000)シングルタイマーをオフにして、マルチタイマーをオフにします.
jQueryの使用 jqのjsファイルを導入する: 操作ラベル: タグオブジェクトを取得する:var jqオブジェクト='('芫id') jQueryセレクタの種類 タグセレクタ 類セレクタ idセレクタ レベル/末裔セレクタ 属性セレクタ
<button onclick='alert(" ");'> button>
EG:
alert(" ")
<script type="text/javascript" src="js/index.js">script>
EG:
var i = 123;
//
/*
*/
5.関数の定義と呼び出し
EG:
#
function fnAdd(){
alert("add ")
}
#
fnAdd();
#
function fnAdd(num1,num2){
var ret = num1 + num2;
return ret;
}
# = ( ,,,)
var i = fnAdd(100,200);
alert(i);
<script>
var gNum = 100;
function fnTest(){
alert(gNum);
gNum ++;
alert(gNum);
var age = 100;
alert("age="+age);
}
fnTest();
alert(gNum);
alert("age="+age);
</script>
7.** **:if( ){
}
** : && || ! () **
**js == , **
**js === **
var age = 17;
if(age>=18 ){
alert(" ");
}else if(a>=80 && age <80){
alert(" ");
}else if(age >150 || age < 0)
else{
alert(" ");
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oP = document.getElementById('p1');
alert(" "+oP.innerHTML)
oP.innerHTML += "Js "
}
function Test(){
var oP = document.getElementById('p1');
alert(' '+oP.innerHTML)
oP.innerHTML += "JS "
}
</script>
</head>
<body>
<p id='p1'> </p>
<button onclick='Test()'> </button>
</body>
</html>
属性名のjsの書き方
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function(){
var oA = document.getElementById('link01');
alert(oA.href); //
oA.href = "http://www.baidu.com"; //
alert(oA.className);
alert(oA.style.background); //
oA.style.background = "red" //
// input name
var oInput = document.getElementById('input1');
alert(oInput.name);
}
</script>
</head>
<body>
<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.jd.com" id="link01" class="sty01" style="background: green;"> </a>
</body>
</html>
var aData1 = [1,2,3,4,5]
var iCount =0;
while(iCount < aData1.length){
console.log(aData1[iCount]);
iCount ++;
}
for(var iCount=0;iCount<aData1.length;iCount++){
console.log(aData1[iCount]);
}
var iCount = 0;
do{
console.log(aData1[iCount]);
iCount ++;
}while(iCount<aData1.length)
var oTimer1 = setTimeout(function(){
alert(" ");},3000);
:clearTimeout(oTimer1);
<button onclick="clearTimeout(oTimer1);"> </button>
var oTimer2 = setInterval(function(){
alert(" ")},3000);
:clearInterval(oTimer2);
<button onclick="clearInterval(oTimer2);"> </button>
Dcument
var oTimer 2=set Interval(function){alert(何回も起動しますよね}、3000)シングルタイマーをオフにして、マルチタイマーをオフにします.
jQueryの使用
<script src="./js/jquery-1.12.4.min.js"></script>
# jq =$(js )
$(documnet).ready(function(){
var $p = $('#p1111')
alert($p.html())
});
$(function(){
var $p = $('#p1111')
alert($p.html())
$p.html(' jq ')
});
var $p3 = $('p');// p
$p3.css({
"background":"pink"})
var $p2 = $('.pp1');// class pp1
$p2.css({
"background":"green"})
var $p = $('#p2');// id p2
$p.css({
"background":"red"})
var $p4=$('div p');//
$p4.css({
"background":"black"})
var $ret = $('input[type=submit]')//
#input , name=submit
$ret.css({
"background":"#000000"})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="e:/wangye/js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $p = $('div p')
alert($p.html());
$p.html('HELLO');
$p.append('WORLD');
alert($p.prop('id'));
$p.prop({
"id":"pp2"})
});
</script>
</head>
<body>
<div id = "div1">
<p id="pp1" style="background:red;">hello</p>
</div>
</body>
</html>