知能社JavaScript筆記1:基礎入門編(2)
22386 ワード
背景の色を変えます.パラメータはプレースホルダです.関数では決められないものはDivの任意のスタイルを変えます.属性を操作する第二の方法はいつ使いますか?変更する属性は固定されていない文字列と変数です.違いと関係.所属名をパラメータとして送るスタイルとclassName-元素.style.属性=xxxは修理です.行間のスタイルを変更しても、classNameは効果がありません.
第一の操作属性方法:
oTxt.value="xxxxxx";第二の操作属性の方法:oTxt.['value']="xxxxxx";違い:第二の利点:[]は、関数パラメータを受け入れることができ、第一のものはだめです.スタイル優先度:*(ワイルドカード)<ラベル<クラスID<行間は同じ要素に対してのみ、またはスタイルのみを実行するか、クラスのみを実行します.
練習:関数参照
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> title>
<style>
#div1 {width: 200px; height: 200px; background: red;}
style>
<script>
function setColor(color){
var oDiv = document.getElementById('div1')
oDiv.style.background=color;
}
script>
head>
<body>
<input type="button" value=" " onclick="setColor('green')" />
<input type="button" value=" " onclick="setColor('yellow')" />
<input type="button" value=" " onclick="setColor('black')" />
<div id="div1">div>
body>
html>イベントを抽出する-要素追加イベントのために他の属性と同様に、JSでwindows.onloadの意味を追加できます.ページのロードが完了すると、行為、スタイル、構造の三つが分離されます.(JS)(HTML)は元素のセットを取得します.
ループ
while循環語句
while( ) {
}for( ; ; ){
}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> ， ， title>
<script>
window.onload=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oDiv = document.getElementById('div1');
var aCh = document.getElementsByTagName('input');
oBtn1.onclick=function () {
for (var i = 0; i < aCh.length; i++) {
aCh[i].checked=true;
}
}
oBtn2.onclick=function () {
for (var i = 0; i < aCh.length; i++) {
aCh[i].checked=false;
}
}
oBtn3.onclick=function () {
for (var i = 0; i < aCh.length; i++) {
if (aCh[i].checked==true) {
aCh[i].checked=false;
} else {
aCh[i].checked=true;
}
}
}
};
script>
head>
<body>
<input id="btn1" type="button" name="" value=" ">
<input id="btn2" type="button" name="" value=" ">
<input id="btn3" type="button" name="" value=" ">
<div id="div1">
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
<input type="checkbox" /><br>
div>
body>
html>this:現在発生しているイベントの要素
練習:タブはすべてのDivを隠してから、「現在」Divインデックスの値を表示します.いつインデックスの値を使いますか?「いくつ目」を知っている必要があります.indexを追加するとFFでフィルタリングされますので、jsでindexを追加します.
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> title>
<style>
#div1 .active {background: yellow;}
#div1 div {width: 200px; height: 200px; background: #CCC; broder: 1px solid #999; display: none;}
style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
// button
for (var i = 0; i < aBtn.length; i++){
aBtn[i].index = i;
aBtn[i].onclick=function () {
for (var i = 0; i < aBtn.length; i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
script>
head>
<body>
<div id="div1">
<input class="active" type="button" name="" value=" ">
<input type="button" name="" value=" ">
<input type="button" name="" value=" ">
<input type="button" name="" value=" ">
<div style="display:block">111div>
<div>222div>
<div>333div>
<div>4444div>
div>
body>
html>
プログラム実現のアイデア-類似のタブは、次のdiv-innersのみが使用されます.配列の使用-定義:arr=[1,2,3]-使用:arr[0]文字列接続-役割:2つの文字列を接続します.問題:接続中の優先度
練習:interHTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> title>
<style media="screen">
#div1 {width: 200px; height: 150px; border: 1px solid black;}
style>
<script type="text/javascript">
window.onload=function(){
var oTxt = document.getElementById('txt1');
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick=function() {
oDiv.innerHTML=oTxt.value;
}
};
script>
head>
<body>
<input id="txt1" type="text" name="" value="">
<input id="btn1" type="button" name="" value=" ">
<div id="div1">div>
body>
html>