【解決方法】JavaScript を jQuery に変換する方法

[ad_1]

XML

<script language= "javascript">
window.addEventListener('load', onDocLoaded, false);

        function onDocLoaded(evt)
 { var element=document.getElementById("tgtP");
element.addEventListener('click', convert, false);}
function convert()
{
   var a=document.getElementById("tgtP").innerText;
   var b="";
   for (i = 0; i < a.length; i++)
   {
          if (a.charCodeAt(i) >= 65 && a.charCodeAt(i) <= 90)
           {
                 b = b + a.charAt(i).toLowerCase();
           }
          else{
                 b = b + a.charAt(i).toUpperCase();
           }
    alert(b);
        }}
    </script>

解決策 2
解決策 14

解決策 2

jQuery は、プラグインして使用できる多くのビルド済み関数を備えた JavaScript ライブラリであり、結果として “Write Less Do More” を実現します。ただし、それを使用することを学ぶ必要があります。訪問 http://www.w3schools.com/jquery/[^].
変換に関する質問に答えるには:

document.getElementById("tgtP")

=> のように表されます。

$("#tgtP")

jQuery 構文で。

innerText

text();

window.addEventListener('load', onDocLoaded, false)

$(document).ready(function(){
    // to code here
});

チュートリアルを進めると、それらを理解できます。結果として得られる jQuery のスクリプトは次のようになります。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    var element = $("#tgtP");
    var a = element.text();
    var b="";
    element.click(function(){
       for (i = 0; i < a.length; i++)
       {
          if (a.charCodeAt(i) >= 65 && a.charCodeAt(i) <= 90)
           {
                 b = b + a.charAt(i).toLowerCase();
           }
          else
           {
                 b = b + a.charAt(i).toUpperCase();
           }
           alert(b);
        }
    });
});
</script>
</head>
<body>
<p id="tgtP">aBc dEf ghIK kl</p>
</body>
</html>

解決策 14

var subjectObject = {
“フロントエンド”： {
“HTML”: [“Links”, “Images”, “Tables”, “Lists”]、
“CSS”: [“Borders”, “Margins”, “Backgrounds”, “Float”]、
“JavaScript”: [“Variables”, “Operators”, “Functions”, “Conditions”]

}、
「バックエンド」: {
“PHP”: [“Variables”, “Strings”, “Arrays”]、
“SQL”: [“SELECT”, “UPDATE”, “DELETE”]

}
}
window.onload = function() {
var subjectSel = document.getElementById(“subject”);
var topicSel = document.getElementById(“トピック”);
var chapterSel = document.getElementById(“章”);
for (subjectObject の変数 x) {
subjectSel.options[subjectSel.options.length] = 新しいオプション (x、x);
}
subjectSel.onchange = function() {
//空のチャプターとトピックのドロップダウン
chapterSel.length = 1;
topicSel.length = 1;
//正しい値を表示する
for (subjectObject の変数 y[this.value]) {
topicSel.options[topicSel.options.length] = 新しいオプション (y、y);
}
}
topicSel.onchange = function() {
//空の章のドロップダウン
chapterSel.length = 1;
//正しい値を表示する
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = 新しいオプション(z[i]、z[i]);
}
}
}