<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)

              //將這些資料顯示在span2span

              //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物件,帶有HTMLTAG的才能成功轉成JQ物件,純文字無法轉

          

          

           //empty() vs remove()

           //empty:清除節點內容

           //remove:刪除節點

           $('#myH').empty()

           $('#myH').remove()

 

       });

    </script>

arrow
arrow
    全站熱搜

    乙方 發表在 痞客邦 留言(0) 人氣()