學習筆記專區

    <script src="js/jquery-1.12.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <script>

       $(function() {

           //設定txtName中的值

           $('#txtName').val("guest");//val有參數，寫入,所以框框中會有預設值guest

           $('#buttonClick').click(function() {

              //將使用者輸入在txtName中的內容讀出顯示在span1中

              //將使用者輸入在txtName中的內容讀出加上<h2>的標籤顯示在span1中

              var v = $('#txtName').val();//val沒有參數，讀取

              //             $('#span1').text(v);//span1是框框旁邊的空間，將讀取到的資料v顯示在此

              //             $('#span1').text("<h2>"+v+"</h2>");//text標籤不會解讀html，顯示結果為：<h2>guest</h2>

              $('#span1').html("<h2>" + v + "</h2>");//html才會解讀標籤

              console.log($('#span1').html());//<h2>guest</h2>

              console.log($('#span1').text());//guest

           });

           //----------------------------------------------------

           $('#select1').change(function() {

              //練習

              //當使用者選取不同的select1項目時

              //讀出此項目的索引值(index),文字(text),值(value)

              //將這些資料顯示在span2的span中

              //alert($(this).val());

              //         var v = $(this).val();

              //         var t = $("#select1>:selected").text();

              //         var i = $("#select1>:selected").index();

              //--------------------------------------------

              //因為上面有很多重覆的地方，所以建議改一下

              var seled = $("#select1>:selected")

              var v = $(this).val();

              var t = seled.text();

              var i = seled.index();

              $('#span2').html(v + "," + t + "," + i);

           });

           //找到網頁上的連結標籤，加上target=_blank屬性

           $('a[href ^="http"]').attr("target", '_blank')

           //找到網頁上要連結到外部網站的連結標籤，加上target=_blank屬性

           //attr() vs prop()

           //console.log($(":checkbox:eq(0)").attr('checked'));

           //console.log($(":checkbox:eq(1)").attr('checked'));

           //console.log($(":checkbox:eq(2)").attr('checked'));

           //console.log($(":checkbox:eq(3)").attr('checked'));

           //console.log($(":checkbox:eq(4)").attr('checked'));

           //console.log($(":checkbox:eq(5)").attr('checked')); 

           //console.log($(":checkbox:eq(0)").prop('checked'));

           //console.log($(":checkbox:eq(1)").prop('checked'));

           //console.log($(":checkbox:eq(2)").prop('checked'));

           //console.log($(":checkbox:eq(3)").prop('checked'));

           //console.log($(":checkbox:eq(4)").prop('checked'));

           //console.log($(":checkbox:eq(5)").prop('checked'));

           $('#buttonToggle').click(function() {

              //切換所有checkbox的勾選狀態

              $(":checkbox[name='a']").each(function(){

                  //":checkbox[!id='Toggle']"

                  var b = !$(this).prop('checked');

                  $(this).prop('checked',b)

              })

              //切換各自checkbox的勾選狀態

              var str = "";

              $(":checked[name='a']").each(function(){

                  str += $(this).val()              

              })

              alert(str)

           });

           $('#Toggle').change(function() {

              var b = $(this).prop('checked');

              $(':checkbox').prop('checked', b);

           });

//         prepend() vs append() vs before() vs after()

           $('#myH').before("<u>before最前面，節點之前</u>").prepend("<u>prepend在節點之後、字串之前</u>")

                     .append("<u>append在節點之前、字串之後</u>").after("<u>after最後面，節點之後</u>");

           $('<u>appendTo一定要加標籤</u>').appendTo("#myH")//一定要加標籤

           $('沒有標籤，不會顯示').appendTo("#myH")//沒有標籤，不會顯示

//         $()代表將()內的內容轉為JQ物件，帶有HTML、TAG的才能成功轉成JQ物件，純文字無法轉

           //empty() vs remove()

           //empty：清除節點內容

           //remove：刪除節點

           $('#myH').empty()

           $('#myH').remove()

       });

    </script>