涓€銆佸紑澶存彁闂細鎵嬫満椤甸潰鐐逛笉鍔紵鍙兘鏄綘娌＄敤瀵规柟娉曪紒

姣忔鐪嬪埌鑷繁鍐欑殑绉诲姩绔〉闈㈢偣浜嗘病鍙嶅簲锛屾槸涓嶆槸蹇冮噷鐩寸棐鐥掞紵鍒厡锛佷粖澶╁挶浠氨鍞犲敔鎬庝箞鐢ㄢ€?strong>鈥媕Query杩欐妸鐟炲＋鍐涘垁鈥?/strong>鈥嬶紝鍦↗SP閲岃交鏉炬悶瀹氱偣鍑讳簨浠跺拰鏁版嵁浜や簰銆?/p>

浜屻€佺Щ鍔ㄧ寮€鍙戝繀鐭ワ細涓轰粈涔堥€塲Query锛?/h3>

鈥?strong>鈥嬫柊鎵嬭鍖衡€?/strong>鈥嬶細鏈変汉瑙夊緱鈥滅幇鍦ㄩ兘鐢╒ue/React浜嗭紝jQuery杩囨椂浜嗗惂锛熲€?br/> 鈥?strong>鈥嬬湡鐩告椂鍒烩€?/strong>鈥嬶細瀵逛簬鍒氬叆闂ㄧ殑JSP椤圭洰锛宩Query鐨勨€?strong>鈥嬭交閲忕骇鈥?/strong>鈥嬪拰鈥?strong>鈥嬪吋瀹规€р€?/strong>鈥嬫墠鏄湡棣欙紒鐗瑰埆鏄Щ鍔ㄧ椤甸潰锛屽畠鑳借В鍐充笁澶х棝鐐癸細

1. 鈥?strong>鈥嬫祻瑙堝櫒閫傞厤鈥?/strong>鈥嬶細瀹夊崜鍜宨OS鐨刉ebView缁忓父闂硅劸姘旓紝jQuery鑳藉府浣犳憜骞?/li>
2. 鈥?strong>鈥嬩唬鐮侀噺鍑忓皯鈥?/strong>鈥嬶細鍘熺敓JS鍐欑偣鍑讳簨浠惰10琛岋紝jQuery鍙2琛?/li>
3. 鈥?strong>鈥嬪揩閫熻皟璇曗€?/strong>鈥嬶細鐢?code>console.log()鏌ユ暟鎹瘮寮圭獥鏇翠笓涓?/li>

涓句釜鏍楀瓙馃尠锛?/p>

jsp澶嶅埗

<script>
document.getElementById("btn").addEventListener("click", function(){
    alert("绱鎴戜簡锛?);
});
script>


<script>
$("#btn").click(function(){
    alert("鐪熺渷浜嬶紒");
});
script>

---

涓夈€佹墜鎶婃墜鏁欏锛氱Щ鍔ㄧ鐐瑰嚮浜嬩欢瀹炵幇

绗竴姝ワ細姝ｇ‘寮曞叆jQuery搴?/h4>

鈥?strong>鈥嬬Щ鍔ㄧ鎺ㄨ崘鐢–DN鍔犻€熲€?/strong>鈥嬶細

jsp澶嶅埗
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>

灏忔妧宸?/em>锛氬湪閲屽姞杩欎釜鏍囩锛屾瘮鏀惧湪椤甸潰搴曢儴鍔犺浇閫熷害蹇?0%

绗簩姝ワ細缁戝畾鐐瑰嚮浜嬩欢

鈥?strong>鈥嬫牳蹇冧唬鐮佹ā鏉库€?/strong>鈥嬶細

jsp澶嶅埗
<script>
$(document).ready(function(){
    // 鐐规寜閽Е鍙?/span>
    $("#submitBtn").click(function(){
        alert("鎭枩浣犵偣涓簡锛?);
    });
    
    // 鐐瑰浘鐗囧垏鎹?/span>
    $(".product-img").click(function(){
        $(this).attr("src", "new_image.jpg");
    });
});
script>

鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細

• 鈥?strong>鈥嬬Щ鍔ㄧ鐐瑰嚮寤惰繜鈥?/strong>鈥嬶細iOS涓婂彲鑳芥湁300ms寤惰繜锛屽姞杩欐浠ｇ爜瑙ｅ喅

jsp澶嶅埗
<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js">script>

• 鈥?strong>鈥嬪尯鍩熷お灏忕偣涓嶄腑鈥?/strong>鈥嬶細缁欐寜閽姞padding: 10px;鎵╁ぇ鐐瑰嚮鑼冨洿

---

鍥涖€佹暟鎹氦浜掞細璁╅〉闈㈠拰鏈嶅姟鍣ㄨ涓婅瘽

鍦烘櫙1锛氭彁浜よ〃鍗曟暟鎹?/h4>

jsp澶嶅埗
<script>
$("#loginBtn").click(function(){
    // 鑾峰彇杈撳叆妗嗙殑鍊?/span>
    var username = $("#username").val();
    var password = $("#password").val();
    
    // 鍙戦€佺粰鏈嶅姟鍣?/span>
    $.post("login.jsp", {
        user: username,
        pwd: password
    }, function(response){
        if(response == "success") {
            window.location.href = "home.jsp";
        } else {
            alert("璐﹀彿瀵嗙爜涓嶅鍝︼紒");
        }
    });
});
script>

鍦烘櫙2锛氬姞杞藉晢鍝佸垪琛?/h4>

jsp澶嶅埗
<script>
// 椤甸潰鍔犺浇瀹岃嚜鍔ㄨ幏鍙栨暟鎹?/span>
$(document).ready(function(){
    $.get("getProducts.jsp", function(data){
        var html = "";
        $.each(data, function(index, product){
            html += "" + product.name + "
";
        });
        $("#productList").html(html);
    });
});
script>

鈥?strong>鈥嬫€ц兘浼樺寲鎶€宸р€?/strong>鈥嬶細

• 鐢?code>JSON鏍煎紡浼犳暟鎹紝浣撶Н姣擷ML灏忎竴鍗?/li>
• 鍔犲姞杞藉姩鐢绘彁鍗囦綋楠岋細

jsp澶嶅埗
$("#loading").show();  // 鍙戦€佽姹傚墠鏄剧ず
$("#loading").hide();  // 鏀跺埌鏁版嵁鍚庨殣钘?/span>

---

浜斻€佸父瑙佺炕杞︾幇鍦轰笌鑷晳鎸囧崡

缈昏溅1锛氱偣浜嗘病鍙嶅簲

鈥?strong>鈥嬪彲鑳藉師鍥犫€?/strong>鈥嬶細

• jQuery娌″姞杞芥垚鍔?鈫?妫€鏌ユ祻瑙堝櫒鎺у埗鍙版姤閿?/li>
• 閫夋嫨鍣ㄥ啓閿欎簡 鈫?鐢?code>console.log($("#btn").length)鏌ュ厓绱犳槸鍚﹀瓨鍦?/li>
• 浜嬩欢缁戝畾鏃舵満涓嶅 鈫?纭繚浠ｇ爜鍦?code>$(document).ready()閲?/li>

缈昏溅2锛氭暟鎹姞杞藉け璐?/h4>

鈥?strong>鈥嬫帓鏌ユ楠も€?/strong>鈥嬶細

1. 鐪嬫帴鍙ｅ湴鍧€瀵逛笉瀵?鈫?瀵规瘮$.get("鍐欓敊鍦板潃.jsp")
2. 鏌ョ綉缁滆姹傜姸鎬?鈫?娴忚鍣‵12鎵撳紑Network鏍囩
3. 璇曠洿鎺ヨ闂帴鍙?鈫?鍦ㄥ湴鍧€鏍忚緭鍏?code>getProducts.jsp鐪嬭繑鍥炲€?/li>

缈昏溅3锛氬畨鍗撴満鏄剧ず寮傚父

鈥?strong>鈥嬬粓鏋佹柟妗堚€?/strong>鈥嬶細

• 鍔爒iewport鏍囩寮哄埗缂╂斁姣斾緥

jsp澶嶅埗
name="viewport" content="width=device-width, initial-scale=1.0">

• 鐢?code>rem浠ｆ浛px鍋氬崟浣?/li>

---

鍏€佷釜浜哄績寰楋細鍐欑粰鍧氭寔鐪嬪埌杩欑殑浣?/h3>

鎼炵Щ鍔ㄧ寮€鍙戝氨鍍忕倰鑿滐紝鈥?strong>鈥嬬伀鍊欙紙鎬ц兘锛夆€?/strong>鈥嬪拰鈥?strong>鈥嬭皟鏂欙紙浜や簰锛夆€?/strong>鈥嬪緱骞宠　銆傛柊鎵嬪父鐘殑閿欐槸鎬ョ潃涓婂鏉傚姛鑳斤紝缁撴灉鍩虹閮芥病鎵撶墷銆傚缓璁厛姝荤涓変釜鎶€鑳斤細

1. 鈥?strong>鈥嬩細鐪嬫帶鍒跺彴鎶ラ敊鈥?/strong>鈥嬶細姣旂洸鐩敼浠ｇ爜鏁堢巼楂?0鍊?/li>
2. 鈥?strong>鈥嬪杽鐢ㄨ皟璇曞伐鍏封€?/strong>鈥嬶細Chrome鐨凞evice Toolbar鑳芥ā鎷熷悇绉嶆墜鏈?/li>
3. 鈥?strong>鈥嬪鐪熸満娴嬭瘯鈥?/strong>鈥嬶細鍒厜鐢ㄦ祻瑙堝櫒妯℃嫙锛屾棫鎵嬫満鎵嶆槸鐓у闀?/li>

鏈€鍚庤鍙ュぇ瀹炶瘽锛氣€?strong>鈥嬩唬鐮佹槸鏀瑰嚭鏉ョ殑锛屼笉鏄兂鍑烘潵鐨勨€?/strong>鈥嬨€傞亣鍒伴棶棰樺埆鑷棴锛屽垹浜嗛噸鍐欏線寰€姣旂‖鏀规洿蹇紒

本文由嘻道妙招独家原创，未经允许，严禁转载