小菜鳥筆記站

跳出確認視窗

先跳出列表選取是或否，選否的話則出現字串2 就可以去執行onclick了

onclientclick = "if(!confirm('字串')) { alert('字串2'); return false;}"

---

取得欄位內容值

$('#<%=ID.ClientID>%').val();                //ClientID大小寫有差唷

$('#元件ID').val();

---

網頁載入就執行的JS寫法

$(document).ready( function() {內容});

$(function()  {內容} );

---

Jquery設定元素的屬性 (attr)

.attr('屬性名稱' , '設定值');

$(#元件ID).attr( 

{

     'src' : 'xx.jpg' ,  'width' : '200' , 'height' : '200'       //最後一個不用逗號

});

---

移除屬性名稱

removeAttr('屬性名稱')

---

存取元素的HTML內容

var html = $('ul').html();

這樣就會擁有ul標籤內的HTML內容了

---

設定元素的html

$('div').html('更改的內容值');

---

存取元素的文字內容

.text()方法可應用於XML上，HTML()不行

.text()不能用於input元素，改用.val才行

---

存取元素的數值

function ShowData() {

    $("input[type=checkbox]").filter(":checked").each(function()

           {

                var str = str + $(this).next().text() + ',' ;

           });

}

---

設定checkbox選取用.val

$('select').val(['選項1字串','選項2字串']);

---

.attr("checked")不會隨著核取/取消而變動

.prop('checked')或 is(':checked')才會

---

click事件

---

Jquery CH4 – 選取HTML元件

l   選取方式

$(‘#ID,#ID2’)  可以這樣一次選取多個，請注意分號位置

$(‘img#img2’) 選取Img元素中id為img2的元素

        $(‘ul  li’)     選取ul下的li元素中間要空白

    $(‘ul > li’)     選取ul下的子元素li

---

l   Button click事件    但請注意這段擺的位置，擺在HEAD裡面目前是失敗

$(‘ID’).click( function() {

        //事件

} );

---

l   位置選擇器  分號跟選項不能有空白

:eq(0)       從0開始

:even               偶數

:odd                奇數

:nth-child        (1)    從1開始    

:nth-child(3n)  3的倍數都會被選取    3 6 9

:nth-child(3n+1) 1+3的倍數都會被選取  1 4 7 10

:gt(2)        從0開始，選擇大於2的項目

:lt(2)         從0開始，選擇小於2的項目

---

l   表單選擇器

:button

:checkbox

:checked

:file

:header

---

l   判斷是誰被選取

<input type="radio" name="運動" value="籃球" checked="checked" /> 籃球

js

$('#span1').text($('[name="水果"]').val());

---

l   JQUERY自定選擇器

:contains(text)  選取包含text內容的元素

        :disabled          選取除能狀態的元素

        :enabled           選取致能狀態的元素

        :hidden

        :visible

        :has(selector)  選取包含selector子元素的元素

---

JQUERY CH5 轉換選取的元素

 

l   建立新的元素，並插入HTML的body中

Append方法

    $(function () {

        var DIV1 = $('<DIV>').css(            //注意這行的<>一定要加不然會出錯

                    {

                        'background': 'black',

                        'width': '100%',

                        'height': '500px'

                    }

        );

 

        $('body').append(DIV1);

    });

 

AppendTo方法

    $(function () {

        $('<DIV>').css(

                        {

                            'background':'black',

                            'width':'100%',

                            'height':'500px'

                        }

                      ).appendTo('body')

    });

---

l   改變選取元素的數目

add, eq , filter, first, has, last, not, slice

 

add

除了選取li把P元素加入了選取範圍。

$(‘li’).add(‘p’).css(‘color’,’red’);

 

除了選取li把div下的P元素加入選取範圍

$(‘li’).add(‘p’,’div’).css(‘color’,’red’);

 

slice

$(‘li’).slice(2,4);

 

l   利用元素之間的關係來選取元素

.child()  選取的元素其子元素都被選取

$(‘li’).parent()  li元素的父元素底下的所有子元素

.parents() 選取元素的所有父元素

        .siblings() 選取元素的每個元素 但不包含自己

        .prev() 選取元素的前一個兄弟但不包含自己  li第一項就選不到東西

        .prevAll() 選取元素前的所有元素不包含自己

        .next()     用法同prev

        .nextAll() 用法同prevAll

---

l   附加方法

.is(元素)   傳回true或false

.contents

---

l   巡迴選取元素

.each()

<script type="text/javascript">

    $(function () {

        $('li').each(function (index) {

            if ($(this).text() == "Prototype") {

                this.style.color = "red";

            }

        });

    });

</script>

---

Jquery Alert

 jAlert('<%=ConfigurationManager.AppSettings["passwordRemind"] %>', '提示訊息');

 

兩個參數:

第一個是要跳出的訊息，這邊是以參考Webconfig設定為主

第二個為跳出視窗上面的文字。