選擇器

$('element'):選出所有該 element 的節點  |  $('p') :選出所有 <p> </p>的節點
$('
#divId'):選出所有 <div id="divId"></div> 的節點
$('
.divClass'):選出所有 <div class="divClass"></div> 的節點 $(".intro,.demo")

 

 

http://www.runoob.com/jquery/jquery-ref-selectors.html

https://ithelp.ithome.com.tw/articles/10197416

 

設置器

$('#lable1).text( 將更新的內容 ):替換lable1的內容

$('#textbox1).val( 將更新的內容 ):替換textbox1的內容

 

ListBox選單操作

在設計頁面的原始檔

<asp:ListBox ID="ListBox1" runat="server">
    <asp:ListItem>AAAAA</asp:ListItem>
    <asp:ListItem>BBBBB</asp:ListItem>
    <asp:ListItem>CCCCC</asp:ListItem>
</asp:ListBox>

在客戶端執行頁面的原始檔

<option value="AAAAA">AAAAA</option>
<option value="BBBBB">BBBBB</option>
<option value="CCCCC">CCCCC</option>

設動態增加Listbox選項

$('#ListBox1').change(function () {
    var str=$(this).val());
    $('#ListBox2').append('<option value=' + str + '>' + str + '</option>'); :在ListBox2新增Value=str的選項
});

獲取Listbox選擇的項目

$('#ListBox1').change(function () {
    var str=$(this).val());
});

獲取Listbox的所有項目

var str="";
$('#ListBox2').find('option').each(function (){
     str += $(this).val();
});

移至頁首

$('#gototop').click(function() {
                 $('html, body').animate({
            scrollTop: 0
 });

插入文本

$("#btn1").click(function(){ 
            $("#gototop").append(" <b>插入文本</b>.");
});  在id=gototop 插入<b>插入文本</b>

 逾時執行 

setTimeout(function() {
      要執行的內容
    }, 3500);

 

 篩選及過濾 

var dataset=[{id:'A01',name:'AA'} , {id:'A02',name:'BB'} , {id:'A03',name:'CC'}];

在JSON格式,[]為陣列,新增用=。

在JSON格式,{}為物件 ,新增用push。

以JSON進行篩選及過濾

 欄位篩選 
var newData = $.map(dataset, function(d,i) {
                    return d.name;
})

result:newData=['AA','BB','CC'];

 條件篩選或過濾 

var newData = $.grep(dataset, function(d,i) {
                    return  d.name=='AA';
})

result:newData=['AA'];

dataset=[{id:'A01',name:'AA'},{id:'A02',name:'BB'},{id:'A03',name:'CC'}]
var newData = $.grep(dataset, function(d,i) {
                    return  d.name!='AA';
})

result:newData=[[{id:'A02',name:'BB'}],{id:'A03',name:'CC'}];

var newData = $.grep(dataset, function(d,i) {
    return  (d.name!='AA'&&d.id!='A02');
})

result:newData=[{id:'A02',name:'BB'}];

 

 陣列元素篩選 

var dataset=[{id:'A01',name:'AA'} , {id:'A02',name:'BB'} , {id:'A03',name:'CC'}];

 

 

 javascript離開迴圈的方法 

var BreakException = {};
try {
     if (x == false) {  throw BreakException; }
}
catch (e) { if (e !== BreakException) throw e;}

 

 取得目前按下第幾顆按鈕的順序 

<script type="text/javascript">
    function getindex(node) {
        var index = Array.prototype.indexOf.call(node.parentNode.children, node);
    alert(index);
  }
</script>

<div>
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 0-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 1-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 2-->
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 3-->
</div>

https://jsfiddle.net/nopzp40f/

arrow
arrow
    全站熱搜

    門外漢 發表在 痞客邦 留言(0) 人氣()