JQueryベースクイックエントリー(スーパー詳細)

105571 ワード

JQuery基礎学習

JQueryコンセプト

クイックエントリー

JQueryオブジェクトとJSオブジェクトの区別と変換

セレクタ

1.基本操作の学習

2.分類

2.1基本セレクタ

2.2階層セレクタ

2.3属性セレクタ

2.4フィルタセレクタ

2.5フォームフィルタ

Dom操作

1.コンテンツ操作

2.属性アクション

2.1汎用属性操作

2.2 class属性操作

3.CRUDオペレーション

ケース

1.色替え

3.QQ表情選択

4.複数選択ドロップダウンリストを左右に

移動
JQueryコンセプト
コンセプト:JavaScriptフレームワーク.簡略化JS開発*jQueryは、Prototypeに続く優れたJavaScriptコードライブラリ(またはJavaScriptフレームワーク)であり、高速で簡潔なJavaScriptフレームワークです.jQuery設計の趣旨は「write Less，Do More」であり、より少ないコードを書き、より多くのことをすることを提唱している.JavaScriptでよく使われる機能コードをカプセル化し、簡単なJavaScript設計モードを提供し、HTMLドキュメントの操作、イベント処理、アニメーション設計、Ajaxインタラクションを最適化します.

 JavaScript  ：       js  ，   js

クイックスタート
1.JQueryのダウンロード

  jQuery      ：
     1.x：  ie678,       ，    BUG  ，
                  。        ，  1.x      ，
                ：1.12.4 (2016 5 20 )
       2.x：   ie678，      ，    BUG  ，
                  。                  2.x，
                ：2.2.4 (2016 5 20 )
       3.x：   ie678，         。      ，
                  3.x   ，    jQuery         。
                             。    ：3.2.1（2017 3 20 ）

JQueryのjsファイルのインポート:min.jsファイル

のインポート

を使用

			var div1 = $("#div1");
             alert(div1.html());

JQueryオブジェクトとJSオブジェクトの区別と変換

JQueryオブジェクトは操作時に便利です.

JQueryオブジェクトとjsオブジェクトの方法は通用しない.

両者は互いに*jq->js:jqオブジェクト[インデックス]またはjqオブジェクトを変換する.get(インデックス)*js->jq:$(jsオブジェクト)

セレクタ
セレクタのコンセプト:類似したフィーチャーを持つ要素をフィルタ(ラベル)
1.基本操作の学習

1.     
  //1.  b1  
   $("#b1").click(function(){
       alert("abc");
   });

2.     
 $(function () {
    
  });

window.onloadと$(function)はwindowを区別する.onloadは1回しか定義できませんが、複数回定義すると、後の方が前の方を上書きします$(function)は複数回定義できます.

3.     ：css  
  // $("#div1").css("background-color","red");
   $("#div1").css("backgroundColor","pink");

2.分類
2.1基本セレクタ

タグセレクタ(要素セレクタ)構文:$("html ")タグ名に一致するすべての要素

を取得する

// 
$("#b1").click(function () {
    $("#one").css("backgroundColor","pink");
});

idセレクタ構文:$("#id ")指定id属性値に一致する要素

を取得する.

 // 
$("#b1").click(function () {
    $("#one").css("backgroundColor","pink");
});

クラスセレクタ構文:$(".class ")指定したclass属性値に一致する要素

を取得する.

//
$("#b3").click(function () {
   $(".mini").css("backgroundColor","pink");
});

パラレルセレクタ:構文:$(" 1, 2....")複数のセレクタで選択されたすべての要素

を取得します.

//
$("#b4").click(function () {
    $("span,#two").css("background","blue");
})

2.2階層セレクタ

子孫セレクタ（A>B>C）構文:$("A B ") A要素の内部にあるすべてのB要素( B )

を選択する.

// 
$("#b1").click(function () {
    $("body div").css("backgroundColor","red");
});

サブセレクタ構文:$("A > B") A要素の内部にあるすべてのBの ( C )

を選択する.
以下の例は、変更内

  // 
$("#b2").click(function () {
    $("body > div").css("backgroundColor","blue");
});
 
2.3 セレクタ セレクタ :$(「A[ ]」) を むセレクタ
// 
$("#b1").click(function () {
   $("div[title]").css("backgroundColor","red");
});
  セレクタ1.( が しい) 1:$("A[ =' ']")は、 が に しいセレクタ
を む.// 
$("#b2").click(function () {
    $("div[title = 'test']").css("backgroundColor","red");
});
 
2.( が しくない) 2:$("A[ !=' ']") が に しいセレクタを む// 
$("#b3").click(function () {
    $("div[title != 'test']").css("backgroundColor","blue");
});
// 
$("#b4").click(function () {
    $("div[title ^= 'te']").css("backgroundColor","pink");
});

// 
$("#b5").click(function () {
    $("div[title $= 'est']").css("backgroundColor","red");
});

// 
$("#b6").click(function () {
    $("div[title *= 'es']").css("backgroundColor","black");
});
  セレクタ :$("A[ =' '][]...") の を むセレクタ
// 
$("#b7").click(function () {
    $("div[id][title *= 'es']").css("backgroundColor","pink");
});
 
2.4フィルタセレクタヘッダエレメントセレクタ ::first されたエレメントの のエレメント
を する// 
  $("#b1").click(function () {
      $('div:first').css("backgroundColor","red");
  });
  ::last した の の 
を します.// 
$("#b2").click(function () {
    $('div:last').css("backgroundColor","red");
});
  ::not(selector)は、 された の 
を まない.// 
$("#b3").click(function () {
    $('div:not(.one)').css("backgroundColor","red");
});
  セレクタ ::even 、0から
をカウント// 
$("#b4").click(function () {
 	$('div:even').css("backgroundColor","red");
});
  セレクタ ::odd 、0から
をカウント// 
$("#b5").click(function () {
    $('div:odd').css("backgroundColor","red");
});
 はインデックスセレクタ に しい::eq(index)はインデックス 
を する.// 
$("#b7").click(function () {
   $('div:eq(3)').css("backgroundColor","red");
});
 はインデックスセレクタ より きい::gt(index)は インデックス 
より きい.// 
$("#b6").click(function () {
    $('div:gt(3)').css("backgroundColor","red");
});
 がインデックスセレクタ より さい::lt(index)が インデックス 
より さい.// 
$("#b8").click(function () {
    $('div:lt(3)').css("backgroundColor","red");
});
 タイトルセレクタ ::headerタイトル(h 1~h 6) を し、 き 
を する.// 
$("#b9").click(function () {
    $(':header').css("backgroundColor","red");
});
 
2.5フォームフィルタ な ::enabled な 
を // 
$('#b1').click(function () {
    $("input[type='text']:enabled").val("aaa")
})
  ::disabled 
を / <input type="button" value="    jQuery     val()                 "  id="b2"/>
$('#b2').click(function () {
   	$("input[type='text']:disabled").val("bbb")
})
  (ラジオ/チェックボックス) ::checkedラジオ/チェックボックス の 
を // 
//   
$('#b3').click(function () {
    alert($("input[type='checkbox']:checked").length)
})
//   
$('#b3').click(function () {
    alert($("input[type='radio']:checked").length)
})
  セレクタ ::selectedドロップダウンボックスで した 
を します.// 
$('#b4').click(function () {
   alert($("#job > option:selected").length)
})
 
Dom 
1.コンテンツ  html(): のラベルコンテンツの / -->コンテンツ
//   myinput  value 
                alert($("#myinput[value]").val())
  text(): のラベルボディのテキストコンテンツを / -->コンテンツ
//   mydiv      
                alert($("#mydiv").html())
  val(): のvalue 
を / する.//   mydiv    
                alert($("#mydiv").text())
 
2. 
2.1 アクション attr(): の を / 
//       name   
            alert($("#bj").attr("name"))
  removeAttr(): 
を //       name     name      
            $("#bj").removeAttr("name");
  prop(): の を / 
//  hobby      
            alert($("#hobby").prop("checked"))
  removeProp(): 
を             alert($("#hobby").removeProp("checked"))
 
attrとpropの いは? の である 、prop( w3c prop)
を することを する. カスタム を する は、attr( attr)
を することを する.
2.2 class 
ここで するsecondはスタイルです/*     */
.second{
	width: 300px;
  	height: 340px;
  	margin: 20px;
  	background: yellow;
  	border: pink 3px dotted;
	float:left;
  	font-size: 22px;
  	font-family:Roman;
}
  addClass():class 
を //
$("#b1").click(function () {
	$("#one").prop("class","second")
})

$("#b2").click(function () {
   $("#one").addClass("second")
})
  removeClass():class 
を //
$("#b3").click(function () {
   $("#one").removeClass("second")
})
  toggleClass():classプロパティの り え
 toggleClass(“one”): 
は、 オブジェクトにclass="one"が する 、 oneを すると する. オブジェクトにclass="one"が しない は、
を します.
 
 //
$("#b4").click(function () {
    $("#one").toggleClass("second")
})
  css():スタイル
を する.//
$("#b5").click(function () {
   alert($("#one").css("backgroundColor"))
})
 
 //
$("#b6").click(function () {
   $("#one").css("backgroundColor","green")
})
 
3.CURD  append(): エレメントは エレメントを オブジェクト1に する.append(オブジェクト2):オブジェクト2をオブジェクト1 の に し、 
// 
$("#b1").click(function () {
	$("#city").append($("#fk"));
})
  prepend(): は を オブジェクト1に する.prepend(オブジェクト2):オブジェクト2をオブジェクト1 の に し、 
// 
$("#b2").click(function () {
    $("#city").prepend($("#fk"));
})
  appendTo(): 1.appendTo(オブジェクト2):オブジェクト1をオブジェクト2の に し、 
$("#b1").click(function () {
  	$("#fk").appendTo($("#city"));
})
  prependTo(): 1.prependTo(オブジェクト2):オブジェクト1をオブジェクト2の に し、 
$("#b2").click(function () {
    $("#fk").prependTo($("#city"));
})
  after(): を の ろのオブジェクトに する.after(オブジェクト2):オブジェクト1の ろにオブジェクト2を します. 1と 2は 
$("#b3").click(function () {
	$("#tj").after($("#fk"));
})
  before(): を の のオブジェクトに する.before(オブジェクト2):オブジェクト1の にオブジェクト2を します. 1と 2は 
$("#b3").click(function () {
	$("#tj").before($("#fk"));
})
  insertAfter() 1.insertAfter(オブジェクト2):オブジェクト1の ろにオブジェクト2を します. 1と 2は 
// 
$("#b3").click(function () {
    $("#fk").insertAfter($("#tj"));
})
  insertBefore() 1.InsertBefore(オブジェクト2):オブジェクト1の にオブジェクト2を します. 1と 2は 
// 
$("#b4").click(function () {
    $("#fk").insertBefore($("#tj"));
})
 
ケース
1. え
スタイル<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="  "></td>
			</tr>
			<tr style="background-color: #999999;">
				<th><input type="checkbox"></th>
				<th>  ID</th>
				<th>    </th>
				<th>    </th>
				<th>  </th>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>1</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>2</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>3</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>4</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
		</table>
	</body>
 
scriptコード<script>
//  ：               pink，          yellow
	  $(function () {
          $("tr:gt(1):odd").css("backgroundColor","pink")
          $("tr:gt(1):even").css("backgroundColor","yellow")
      })
</script>
 
2. と 
スタイル<body>
		<table id="tab1" border="1" width="800" align="center" >
			<tr>
				<td colspan="5"><input type="button" value="  "></td>
			</tr>
			<tr>
				<th><input type="checkbox" onclick="selectAll(this)" ></th>
				<th>  ID</th>
				<th>    </th>
				<th>    </th>
				<th>  </th>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>1</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>2</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>3</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
			<tr>
				<td><input type="checkbox" class="itemSelect"></td>
				<td>4</td>
				<td>    </td>
				<td>       </td>
				<td><a href="">  </a>|<a href="">  </a></td>
			</tr>
		</table>
	</body>
 
scriptコード<script>
       function selectAll(obj) {
           $(".itemSelect").prop("checked", obj.checked);
       }
</script>
 
3.QQ 
スタイル<body>
    <div class="emoji">
        <ul>
            <li><img src="img/01.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/02.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/03.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/04.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/05.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/06.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/07.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/08.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/09.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/10.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/11.gif" height="22" width="22" alt="" /></li>
            <li><img src="img/12.gif" height="22" width="22" alt="" /></li>
        </ul>
        <p class="word">
            <strong>   ：</strong>
            <img src="img/12.gif" height="22" width="22" alt="" />
        </p>
    </div>
</body>
 
scriptコード<script>
        //  ：  qq  ，         
        $(function () {
            $("ul img").click(function () {
                $(".word").append($(this).clone())
            })
        })
    </script>
 
4. ドロップダウンリストを に 
スタイル<body>
		<div class="border">
			<select id="leftName" multiple="multiple">
				<option>  </option>
				<option>  </option>
				<option>  </option>
				<option>  </option>
			</select>
			<div id="btn">
				<input type="button" id="toRight" value="-->"><br>
				<input type="button" id="toLeft" value=">
			</div>
			<select id="rightName" multiple="multiple">
				<option>  </option>
			</select>
		</div>
</body>
 
scriptコード<script>
//  ：                
    //  ——   
	    $(function () {
	        /*var $leftName = $("#leftName > option:selected");
	
	            $("#toRight").click(function () {
	                $("#rightName").append($($leftName));
	            })*/
	        $("#toRight").click(function () {
	            $("#rightName").append($("#leftName > option:selected"))
	        })
	        $("#toLeft").click(function () {
	            $("#leftName").append($("#rightName > option:selected"))
	        })
	    })
</script>

Apacheのインストールと構成

Haproxy+Keepalivedマスター高可用性