$( "#foo" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
$( window ).unload(function() {
return "Bye now!";
});
$( "#other" ).click(function() {
$( "#target" ).submit();
});
$( "#other").click(function() {
$( "#target" ).select();
});
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which ); //keydown: 85
});
$( "body" ).delegate( "a", "click", function() {
return false;
});
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.trigger( "change" );
$( "select#foo option:checked" ).val();
$( "select#foo" ).val();
$( "input[type=checkbox][name=bar]:checked" ).val();
$( "input[type=radio][name=baz]:checked" ).val();
$("input:radio[name=rdo1]").is(":checked")
//set value
$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);
//get value
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( "," ) );
if ( elem.checked ) //true
if ( $( elem ).prop( "checked" ) ) //true
if ( $( elem ).is( ":checked" ) ) //true
//get each checkbox value
var cbxVehicle = new Array();
$('input:checkbox:checked[name="vehicle"]').each(function(i) { cbxVehicle[i] = this.value; });
//check all
$("#clickAll").click(function() {
if($("#clickAll").prop("checked"))
{
$("input[name='user_active_col[]']").each(function() {
$(this).prop("checked", true);
});
}
else
{
$("input[name='user_active_col[]']").each(function() {
$(this).prop("checked", false);
});
}
});
var j = jQuery.noConflict();
j('#someDiv').hide();
$("div.div1Class > div").hide();
$( "form input:radio" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
$( "input:enabled" ).val( "this is it" );
$( "input:disabled" ).val( "this is it" );
document.title = 'blah';
<script>
$(document).ready(
function () {
$("#Button2").click(
function () {
var str = "";
$("select#sel1 option:selected").each(function () {
str += $(this).text() + "/";
});
$("#div1").text(str);
}
)
}
);
</script>
<script>
$(document).ready(
function () {
$("#Button1").click(
function(e)
{
e.preventDefault(); //prevent postback
$("[id=Button1]").click(); //do postback
//var cbxVehicle = new Array();
var str = "";
$('input:checkbox:checked[name="vehicle"]').each(function (i) {
//cbxVehicle[i] = this.value;
str += $(this).val() + "/";
});
$("#div2").text(str);
}
)
}
);
</script>
jQuery Selector:
$('table tr:even').addClass("evenColor"); //單
$('table tr:odd').addClass("oddColor"); //雙
$("table tr:eq(1)").hide();
$("table tr td:lt(2)").css("background","yellow"); //小於index
$("table tr td:gt(2)").css("background", "yellow"); //大於index
$("table tr td:nth-child(2)").css("background", "yellow"); //index form 0, for every row
$("table tr").first().fadeOut();
$("body").find('table').hide();
$("body").find(".div1Class").hide();
$(".div2Class ~ div").css("border", "3px groove blue"); //Next Siblings ~
$(".div3Class").prevAll().css("border", "3px groove red"); //Before Siblings
$("table tr td:contains('5')").css( "text-decoration", "underline" );
$(".div3Class").parent().css("background", "yellow");
$("form input:text").attr("disabled", "disabled");
$("#div1").find(".div2Class").hide(); //.class
$("div.div2Class").hide(); //div.class
$("div.div1Class > div").hide(); //div.class > div
$("#div1").load("demo_test.txt #p1");
$.get("TEST2.aspx", function (result) {
$("#divContent").html(result);
});
$("p").filter(".intro");
$("p").not(".intro");
$("div p").first();
$("div p").last();
$("#div1").width(500).height(500);
$( "div span:first-child" )
$( "div:has(p)" ).addClass( "test" )
$( "td:empty" ).text( "Was empty!" ) //Select all elements that have no children (including text nodes).
$( "div" ).children( ".selected" ).css( "color", "blue" )
$( "#term-2" ).prevUntil( "dt" ).css( "background-color", "red" )
$( ".hilite" ).siblings().css( "color", "red" )
$( "li.item-a" ).parent().css( "background-color", "red" )
$( "li.third-item" ).next().css( "background-color", "red" )
$( "li.third-item" ).prev().css( "background-color", "red" )
$( "li.third-item" ).prevAll().css( "background-color", "red" )
regex:
$(document).ready(function () {
$("#btn1").click(function () {
var valDate = $("#txtDate").val();
//alert(val);
//date yyyy/MM/dd
//var pattern = /^((19|20)?[0-9]{2}[- /.](0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01]))*$/;
//tel (07)87654321
//var pattern = /^\(\d{2,3}\)\d{7,8}$/;
//email
//var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
//int
// var pattern = /^\d+$/;
//float
var pattern = /^[0-9]+\.{0,1}[0-9]+$/;
if (pattern.test(valDate)) {
alert('正確');
return true; //to btn1_Click()
}
else {
alert('日期格式錯誤');
return false;
}
});
});
$.post:
$(document).ready(function () {
$("#btn3").click(function () {
$.post("TEST3.aspx",
{
name: "NAME1",
city: "CITY1"
},
function (data, status) {
alert("資料：" + data + "\n狀態：" + status);
});
});
});
//$.ajax post get data: 'k1=123&k2=456',
$(document).ready(function () {
$('#btn3').click(function () {
$.ajax({
type: 'post',
url: 'TEST3.aspx',
data: { name: "NAME1", city: "CITY1" } ,
success: function (response) {
alert("資料：" + response );
},
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
alert(msg);
}
})
});
});
Response.Write("Wellcome " + Request["name"].ToString() + Request["city"].ToString());
//$.ajax json
$.ajax({
url: "TEST3.aspx",
cache: false,
dataType: 'json',
success: function (data) {
//for (var k in data) {
// alert(k + "/" + data[k].name + "/" + data[k].Age );
//}
$.each(data, function (key, item) {
alert(key + "/" + item.name + "/" + item.Age);
});
}
});
})
});
string json = "[ {\"name\":\"Joe\", \"Age\":\"30\"} , {\"name\":\"Max\", \"Age\":\"20\"} ]";
Response.Write(json);
----------------------------------------------------------------
$(document).ready(function () {
$("#btn2").bind("event1", function () {
alert('111');
});
});
other button call
$(document).ready(function () {
$("#btn1").click(function () {
$("#btn2").trigger("event1");
});
});
----------------------------------------------------------------
event.type click
event.which A 65
event.target.nodeName BUTTON
e.target.getAttribute("id") btn1
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
----------------------------------------------------------------
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='.jpg']") 选取所有 href 值以 ".jpg" 開頭的元素。
$("[href*='.jpg']") 选取所有 href 值包含 ".jpg" 的元素。
----------------------------------------------------------------
$( "div" ).each(function( index, element ) {
// element == this
$( element ).css( "backgroundColor", "yellow" );
if ( $( this ).is( "#stop" ) ) {
$( "span" ).text( "Stopped at div index #" + index );
return false;
}
});
----------------------------------------------------------------
window.opener.document.getElementById("Button1").click();
----------------------------------------------------------------
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
$(function () {
$("#effectDate").datepicker({
dateFormat: "yy/mm/dd",
dafaultDate: new Date(),
minDate: new Date()
});
})
<input type="text" id="effectDate" value="2017/03/15" />
----------------------------------------------------------------
var arr = [ "a", "b", "c", "d", "e" ];
$( "div" ).text( arr.join( ", " ) );
arr = jQuery.map( arr, function( n, i ) {
return ( n.toUpperCase() + i );
});
----------------------------------------------------------------
var arr = ["a", "b", "c", "d", "e"];
$.each(arr, function(i,item) {
alert(item);
})
$.map(arr, function (item,i) {
alert(item);
})
$('#modifyList li').map(function (i,item) {
alert(item.id);
})
----------------------------------------------------------------
$("#sapn1").append(
$(".class1").map(function () {
return $(this).val();
}).get().join("/")
);
----------------------------------------------------------------
find li inner
$('#modifyList').each(function (i, lis) {
$(lis).find('li').each(function (j, li) {
var action = "";
if (li.innerHTML.indexOf("addRecovery") >= 0)
{
action = "ADD";
}
else {
action = "DEL";
}
alert(li.id + "/" + action);
});
});
$('ol#modifyList > li').each(function (i, li) {
//alert(li.id);
if (li.innerHTML.indexOf("addRecovery") >= 0) {
alert("ADD");
}
});
$('#modifyList').each(function (i, lis) {
$(lis).find('li').each(function (j, li) {
var action = (li.innerHTML.indexOf("addRecovery") >= 0) ? "ADD" : "DEL" ;
alert($(li).attr("id") + "/" + action);
});
});
----------------------------------------------------------------
sort select option
var selectList = $('#UserList option');
selectList.sort(function (a, b) {
a = a.value;
b = b.value;
return a - b;
});
$('#UserList').html(selectList);
var sel = $('#UserList');
var selected = sel.val();
var opts_list = sel.find('option');
opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected);
----------------------------------------------------------------
jQuery("img", this);
jQuery(this).find("img");
jQuery(this).children("img");
----------------------------------------------------------------
var x = $(arr).filter(function (i,item) {
return i > 2 && item == "d";
})
$( "div" ).filter( document.getElementById( "unique" ) );
----------------------------------------------------------------
$( this ).is( ":first-child" )
$( this ).is( ".blue,.red" )
$( this ).is( ":contains('Peter')" )
----------------------------------------------------------------
grep filter array
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$( "div" ).text( arr.join( ", " ) );
arr = jQuery.grep(arr, function( n, i ) {
return ( n !== 5 && i > 4 );
});
----------------------------------------------------------------
$("div").has("p").css("background-color","yellow");
$("div").not( ".green" ).css( "border-color", "red" );
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
$( "#term-2" ).nextUntil( "dt" ).css( "background-color", "red" );
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "#mydiv" ).hasClass( "bar" )
$( "div span:first-child" )
$( "p" ).find( "span" ).css( "color", "red" );
event.data.value
event.target.nodeName
event.type
event.which
$( "p" ).empty();
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).removeData( "blah" );
$( ".inner" ).before( "<p>Test</p>" );
$( ".inner" ).after( "<p>Test</p>" );
$( "li.third-item" ).prev().css( "background-color", "red" )
$( "li.third-item" ).next().css( "background-color", "red" )
$( ".container" ).append( $( "h2" ) );
$( "span" ).appendTo( "#foo" );
$( "p" ).after( "<b>Hello</b>" );
$( "#test" ).find( "*" ).css( "border", "3px solid red" )
$( "div:last" ).prevAll().addClass( "before" )
$( "div:first" ).nextAll().addClass( "after" )
$( "li.third-item" ).siblings().css( "background-color", "red" )
----------------------------------------------------------------
----------------------------------------------------------------
for (var i = 0; i < products.length; i++) {
console.log(products[i]);
}
----------------------------------------------------------------
$('#blink3 .backLink');
$("#parentId").find("#childId")
$('#slide1 > #slide_body')
----------------------------------------------------------------
var employ = new Object();
employ.id = "0001";
employ.name = "BOB";
var json = JSON.stringify(employ);
alert(json); {"id":"0001","name":"BOB"}
----------------------------------------------------------------
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);
document.write(contact.phone[1]);
----------------------------------------------------------------
$("div.id_100 select").val("val2");
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
$(this).prop('selected','selected');
return;
}
});
$('select[name="dept"]').val('3');
$("div.id_100").val("val2").change();
$('.id_100 option').removeAttr('selected').filter('[value=val1]').attr('selected', true)
----------------------------------------------------------------
選擇器:
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
----------------------------------------------------------------
$.trim("hello, how are you? ");
$.contains(document.documentElement,document.body); // true
$.isNumeric("3.1415")
----------------------------------------------------------------
<script>
$(document).ready(function () {
$('#btn2').click(function () {
$("#div1").scrollTop(0);
$("#div1").scrollLeft(0);
});
});
</script>
<script>
$(document).ready(function () {
$("#target").keyup(function (event) {
if (event.which == 13) //event.keyCode
{
alert('Enter');
}
alert(event.keyCode);
});
});
</script>
----------------------------------------------------------------
$("#content").after("this is after"); //abc 換行 this is after
$("#content").append("this is append"); //abc this is append
$("<font>this is appendTo</font>").appendTo("div#content"); //abc this is appendTo
$("#content").before("this is before"); //this is before 換行 abc
$("#content").append($("div#content").clone()); //abc 換行 abc
$("#content").detach(); //清空內容
$("#content").empty(); //清空內容
$("#content").after($("p:first").hasClass("abc")); //abc 換行 true
$("<font>this is insertAfter</font>").insertAfter("div#content"); //abc 換行 this is insertAfter
$("<font>this is insertBefore</font>").insertBefore("div#content"); //this is insertBefore 換行 abc
$("#content").prepend("this is prepend "); //this is prepend abc
$("<font>this is prependTo </font>").prependTo("div#content"); //this is prependTo abc
$("#content").remove(); //移除元素
$("<font>this is replaceAll</font>").replaceAll("#content"); //this is replaceAll
$("#content").replaceWith("<font>this is replaceWith</font>"); //this is replaceWith
$("#content").wrap("<div style='color:gray'></div>"); //灰色 abc
$("#content").wrapAll("<div style='color:gray'></div>"); //灰色 abc
$("#content").wrapInner("<b></b>"); // 粗體 abc
$("ul.level-2").children().css("background-color", "#d6d8cd"); //子(含)層 下 多個
$("li.item-b").siblings().css("background-color", "#d6d8cd"); //前後同一層 多個
$("li.item-b").parent().css("background-color", "#d6d8cd"); //父(含)層 下 多個
$("li.item-b").prev().css("background-color", "#d6d8cd"); //同一層的上一個
$("li.item-b").next().css("background-color", "#d6d8cd"); //同一層的下一個
$("li.item-b").prevUntil("li.item-ii").css("background-color", "#3366cc"); //同一層的上多個
----------------------------------------------------------------
//storge data in jq
$(document).ready(function () {
var x = "<%=value1%>"; //public visible, pageload set value
$("#btn2").click(function () {
$("#content").data( { "data1" : x , "data2" : 21 } );
});
$("#btn3").click(function () {
alert( $("#content").data("data2") );
});
});
----------------------------------------------------------------
var id = "#li2";
var i = $("li").index($(id));
----------------------------------------------------------------
$("#div1").toggle('slow');
$("#div1").fadeToggle();
$("#div1").toggleClass("class1");
----------------------------------------------------------------
$(window).load(function () {
alert('start');
});
$(window).unload(function () {
alert('end');
});
----------------------------------------------------------------
$("#div1").load("../JQ/TEXT.aspx"); load txt.htm.aspx...
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
$( window ).unload(function() {
return "Bye now!";
});
$( "#other" ).click(function() {
$( "#target" ).submit();
});
$( "#other").click(function() {
$( "#target" ).select();
});
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " + event.which ); //keydown: 85
});
$( "body" ).delegate( "a", "click", function() {
return false;
});
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "select" )
.change(function() {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.trigger( "change" );
$( "select#foo option:checked" ).val();
$( "select#foo" ).val();
$( "input[type=checkbox][name=bar]:checked" ).val();
$( "input[type=radio][name=baz]:checked" ).val();
$("input:radio[name=rdo1]").is(":checked")
//set value
$( "#single" ).val( "Single2" );
$( "#multiple" ).val([ "Multiple2", "Multiple3" ]);
$( "input").val([ "check1", "check2", "radio1" ]);
//get value
var singleValues = $( "#single" ).val();
var multipleValues = $( "#multiple" ).val() || [];
$( "p" ).html( "<b>Single:</b> " + singleValues +
" <b>Multiple:</b> " + multipleValues.join( "," ) );
if ( elem.checked ) //true
if ( $( elem ).prop( "checked" ) ) //true
if ( $( elem ).is( ":checked" ) ) //true
//get each checkbox value
var cbxVehicle = new Array();
$('input:checkbox:checked[name="vehicle"]').each(function(i) { cbxVehicle[i] = this.value; });
//check all
$("#clickAll").click(function() {
if($("#clickAll").prop("checked"))
{
$("input[name='user_active_col[]']").each(function() {
$(this).prop("checked", true);
});
}
else
{
$("input[name='user_active_col[]']").each(function() {
$(this).prop("checked", false);
});
}
});
var j = jQuery.noConflict();
j('#someDiv').hide();
$("div.div1Class > div").hide();
$( "form input:radio" )
.wrap( "<span></span>" )
.parent()
.css({
background: "yellow",
border: "3px red solid"
});
$( "input:enabled" ).val( "this is it" );
$( "input:disabled" ).val( "this is it" );
document.title = 'blah';
<script>
$(document).ready(
function () {
$("#Button2").click(
function () {
var str = "";
$("select#sel1 option:selected").each(function () {
str += $(this).text() + "/";
});
$("#div1").text(str);
}
)
}
);
</script>
<script>
$(document).ready(
function () {
$("#Button1").click(
function(e)
{
e.preventDefault(); //prevent postback
$("[id=Button1]").click(); //do postback
//var cbxVehicle = new Array();
var str = "";
$('input:checkbox:checked[name="vehicle"]').each(function (i) {
//cbxVehicle[i] = this.value;
str += $(this).val() + "/";
});
$("#div2").text(str);
}
)
}
);
</script>
jQuery Selector:
$('table tr:even').addClass("evenColor"); //單
$('table tr:odd').addClass("oddColor"); //雙
$("table tr:eq(1)").hide();
$("table tr td:lt(2)").css("background","yellow"); //小於index
$("table tr td:gt(2)").css("background", "yellow"); //大於index
$("table tr td:nth-child(2)").css("background", "yellow"); //index form 0, for every row
$("table tr").first().fadeOut();
$("body").find('table').hide();
$("body").find(".div1Class").hide();
$(".div2Class ~ div").css("border", "3px groove blue"); //Next Siblings ~
$(".div3Class").prevAll().css("border", "3px groove red"); //Before Siblings
$("table tr td:contains('5')").css( "text-decoration", "underline" );
$(".div3Class").parent().css("background", "yellow");
$("form input:text").attr("disabled", "disabled");
$("#div1").find(".div2Class").hide(); //.class
$("div.div2Class").hide(); //div.class
$("div.div1Class > div").hide(); //div.class > div
$("#div1").load("demo_test.txt #p1");
$.get("TEST2.aspx", function (result) {
$("#divContent").html(result);
});
$("p").filter(".intro");
$("p").not(".intro");
$("div p").first();
$("div p").last();
$("#div1").width(500).height(500);
$( "div span:first-child" )
$( "div:has(p)" ).addClass( "test" )
$( "td:empty" ).text( "Was empty!" ) //Select all elements that have no children (including text nodes).
$( "div" ).children( ".selected" ).css( "color", "blue" )
$( "#term-2" ).prevUntil( "dt" ).css( "background-color", "red" )
$( ".hilite" ).siblings().css( "color", "red" )
$( "li.item-a" ).parent().css( "background-color", "red" )
$( "li.third-item" ).next().css( "background-color", "red" )
$( "li.third-item" ).prev().css( "background-color", "red" )
$( "li.third-item" ).prevAll().css( "background-color", "red" )
regex:
$(document).ready(function () {
$("#btn1").click(function () {
var valDate = $("#txtDate").val();
//alert(val);
//date yyyy/MM/dd
//var pattern = /^((19|20)?[0-9]{2}[- /.](0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01]))*$/;
//tel (07)87654321
//var pattern = /^\(\d{2,3}\)\d{7,8}$/;
//var pattern = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
//int
// var pattern = /^\d+$/;
//float
var pattern = /^[0-9]+\.{0,1}[0-9]+$/;
if (pattern.test(valDate)) {
alert('正確');
return true; //to btn1_Click()
}
else {
alert('日期格式錯誤');
return false;
}
});
});
$.post:
$(document).ready(function () {
$("#btn3").click(function () {
$.post("TEST3.aspx",
{
name: "NAME1",
city: "CITY1"
},
function (data, status) {
alert("資料：" + data + "\n狀態：" + status);
});
});
});
//$.ajax post get data: 'k1=123&k2=456',
$(document).ready(function () {
$('#btn3').click(function () {
$.ajax({
type: 'post',
url: 'TEST3.aspx',
data: { name: "NAME1", city: "CITY1" } ,
success: function (response) {
alert("資料：" + response );
},
error: function (jqXHR, exception) {
var msg = '';
if (jqXHR.status === 0) {
msg = 'Not connect.\n Verify Network.';
} else if (jqXHR.status == 404) {
msg = 'Requested page not found. [404]';
} else if (jqXHR.status == 500) {
msg = 'Internal Server Error [500].';
} else if (exception === 'parsererror') {
msg = 'Requested JSON parse failed.';
} else if (exception === 'timeout') {
msg = 'Time out error.';
} else if (exception === 'abort') {
msg = 'Ajax request aborted.';
} else {
msg = 'Uncaught Error.\n' + jqXHR.responseText;
}
alert(msg);
}
})
});
});
Response.Write("Wellcome " + Request["name"].ToString() + Request["city"].ToString());
//$.ajax json
$.ajax({
url: "TEST3.aspx",
cache: false,
dataType: 'json',
success: function (data) {
//for (var k in data) {
// alert(k + "/" + data[k].name + "/" + data[k].Age );
//}
$.each(data, function (key, item) {
alert(key + "/" + item.name + "/" + item.Age);
});
}
});
})
});
string json = "[ {\"name\":\"Joe\", \"Age\":\"30\"} , {\"name\":\"Max\", \"Age\":\"20\"} ]";
Response.Write(json);
----------------------------------------------------------------
$(document).ready(function () {
$("#btn2").bind("event1", function () {
alert('111');
});
});
other button call
$(document).ready(function () {
$("#btn1").click(function () {
$("#btn2").trigger("event1");
});
});
----------------------------------------------------------------
event.type click
event.which A 65
event.target.nodeName BUTTON
e.target.getAttribute("id") btn1
$("p").one("click",function(){
$(this).animate({fontSize:"+=6px"});
});
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
----------------------------------------------------------------
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='.jpg']") 选取所有 href 值以 ".jpg" 開頭的元素。
$("[href*='.jpg']") 选取所有 href 值包含 ".jpg" 的元素。
----------------------------------------------------------------
$( "div" ).each(function( index, element ) {
// element == this
$( element ).css( "backgroundColor", "yellow" );
if ( $( this ).is( "#stop" ) ) {
$( "span" ).text( "Stopped at div index #" + index );
return false;
}
});
----------------------------------------------------------------
window.opener.document.getElementById("Button1").click();
----------------------------------------------------------------
<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" />
$(function () {
$("#effectDate").datepicker({
dateFormat: "yy/mm/dd",
dafaultDate: new Date(),
minDate: new Date()
});
})
<input type="text" id="effectDate" value="2017/03/15" />
----------------------------------------------------------------
var arr = [ "a", "b", "c", "d", "e" ];
$( "div" ).text( arr.join( ", " ) );
arr = jQuery.map( arr, function( n, i ) {
return ( n.toUpperCase() + i );
});
----------------------------------------------------------------
var arr = ["a", "b", "c", "d", "e"];
$.each(arr, function(i,item) {
alert(item);
})
$.map(arr, function (item,i) {
alert(item);
})
$('#modifyList li').map(function (i,item) {
alert(item.id);
})
----------------------------------------------------------------
$("#sapn1").append(
$(".class1").map(function () {
return $(this).val();
}).get().join("/")
);
----------------------------------------------------------------
find li inner
$('#modifyList').each(function (i, lis) {
$(lis).find('li').each(function (j, li) {
var action = "";
if (li.innerHTML.indexOf("addRecovery") >= 0)
{
action = "ADD";
}
else {
action = "DEL";
}
alert(li.id + "/" + action);
});
});
$('ol#modifyList > li').each(function (i, li) {
//alert(li.id);
if (li.innerHTML.indexOf("addRecovery") >= 0) {
alert("ADD");
}
});
$('#modifyList').each(function (i, lis) {
$(lis).find('li').each(function (j, li) {
var action = (li.innerHTML.indexOf("addRecovery") >= 0) ? "ADD" : "DEL" ;
alert($(li).attr("id") + "/" + action);
});
});
----------------------------------------------------------------
sort select option
var selectList = $('#UserList option');
selectList.sort(function (a, b) {
a = a.value;
b = b.value;
return a - b;
});
$('#UserList').html(selectList);
var sel = $('#UserList');
var selected = sel.val();
var opts_list = sel.find('option');
opts_list.sort(function (a, b) { return $(a).text() > $(b).text() ? 1 : -1; });
sel.html('').append(opts_list);
sel.val(selected);
----------------------------------------------------------------
jQuery("img", this);
jQuery(this).find("img");
jQuery(this).children("img");
----------------------------------------------------------------
var x = $(arr).filter(function (i,item) {
return i > 2 && item == "d";
})
$( "div" ).filter( document.getElementById( "unique" ) );
----------------------------------------------------------------
$( this ).is( ":first-child" )
$( this ).is( ".blue,.red" )
$( this ).is( ":contains('Peter')" )
----------------------------------------------------------------
grep filter array
var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
$( "div" ).text( arr.join( ", " ) );
arr = jQuery.grep(arr, function( n, i ) {
return ( n !== 5 && i > 4 );
});
----------------------------------------------------------------
$("div").has("p").css("background-color","yellow");
$("div").not( ".green" ).css( "border-color", "red" );
$( "input:not(:checked) + span" ).css( "background-color", "yellow" );
$( "#term-2" ).nextUntil( "dt" ).css( "background-color", "red" );
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "#mydiv" ).hasClass( "bar" )
$( "div span:first-child" )
$( "p" ).find( "span" ).css( "color", "red" );
event.data.value
event.target.nodeName
event.type
event.which
$( "p" ).empty();
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).removeData( "blah" );
$( ".inner" ).before( "<p>Test</p>" );
$( ".inner" ).after( "<p>Test</p>" );
$( "li.third-item" ).prev().css( "background-color", "red" )
$( "li.third-item" ).next().css( "background-color", "red" )
$( ".container" ).append( $( "h2" ) );
$( "span" ).appendTo( "#foo" );
$( "p" ).after( "<b>Hello</b>" );
$( "#test" ).find( "*" ).css( "border", "3px solid red" )
$( "div:last" ).prevAll().addClass( "before" )
$( "div:first" ).nextAll().addClass( "after" )
$( "li.third-item" ).siblings().css( "background-color", "red" )
----------------------------------------------------------------
----------------------------------------------------------------
for (var i = 0; i < products.length; i++) {
console.log(products[i]);
}
----------------------------------------------------------------
$('#blink3 .backLink');
$("#parentId").find("#childId")
$('#slide1 > #slide_body')
----------------------------------------------------------------
var employ = new Object();
employ.id = "0001";
employ.name = "BOB";
var json = JSON.stringify(employ);
alert(json); {"id":"0001","name":"BOB"}
----------------------------------------------------------------
var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);
document.write(contact.surname + ", " + contact.firstname);
document.write(contact.phone[1]);
----------------------------------------------------------------
$("div.id_100 select").val("val2");
$("div.id_100 > select > option[value=" + value + "]").attr("selected",true);
$("div.id_100 > select > option[value=" + value + "]").prop("selected",true);
$('select#ddlCountry option').each(function () {
if ($(this).text().toLowerCase() == co.toLowerCase()) {
$(this).prop('selected','selected');
return;
}
});
$('select[name="dept"]').val('3');
$("div.id_100").val("val2").change();
$('.id_100 option').removeAttr('selected').filter('[value=val1]').attr('selected', true)
----------------------------------------------------------------
選擇器:
* $("*") 所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有 <p> 元素
.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有 href 属性的元素
[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素
[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素
[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input $(":input") 所有 <input> 元素
:text $(":text") 所有 type="text" 的 <input> 元素
:password $(":password") 所有 type="password" 的 <input> 元素
:radio $(":radio") 所有 type="radio" 的 <input> 元素
:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素
:submit $(":submit") 所有 type="submit" 的 <input> 元素
:reset $(":reset") 所有 type="reset" 的 <input> 元素
:button $(":button") 所有 type="button" 的 <input> 元素
:image $(":image") 所有 type="image" 的 <input> 元素
:file $(":file") 所有 type="file" 的 <input> 元素
:enabled $(":enabled") 所有激活的 input 元素
:disabled $(":disabled") 所有禁用的 input 元素
:selected $(":selected") 所有被选取的 input 元素
:checked $(":checked") 所有被选中的 input 元素
----------------------------------------------------------------
$.trim("hello, how are you? ");
$.contains(document.documentElement,document.body); // true
$.isNumeric("3.1415")
----------------------------------------------------------------
<script>
$(document).ready(function () {
$('#btn2').click(function () {
$("#div1").scrollTop(0);
$("#div1").scrollLeft(0);
});
});
</script>
<script>
$(document).ready(function () {
$("#target").keyup(function (event) {
if (event.which == 13) //event.keyCode
{
alert('Enter');
}
alert(event.keyCode);
});
});
</script>
----------------------------------------------------------------
$("#content").after("this is after"); //abc 換行 this is after
$("#content").append("this is append"); //abc this is append
$("<font>this is appendTo</font>").appendTo("div#content"); //abc this is appendTo
$("#content").before("this is before"); //this is before 換行 abc
$("#content").append($("div#content").clone()); //abc 換行 abc
$("#content").detach(); //清空內容
$("#content").empty(); //清空內容
$("#content").after($("p:first").hasClass("abc")); //abc 換行 true
$("<font>this is insertAfter</font>").insertAfter("div#content"); //abc 換行 this is insertAfter
$("<font>this is insertBefore</font>").insertBefore("div#content"); //this is insertBefore 換行 abc
$("#content").prepend("this is prepend "); //this is prepend abc
$("<font>this is prependTo </font>").prependTo("div#content"); //this is prependTo abc
$("#content").remove(); //移除元素
$("<font>this is replaceAll</font>").replaceAll("#content"); //this is replaceAll
$("#content").replaceWith("<font>this is replaceWith</font>"); //this is replaceWith
$("#content").wrap("<div style='color:gray'></div>"); //灰色 abc
$("#content").wrapAll("<div style='color:gray'></div>"); //灰色 abc
$("#content").wrapInner("<b></b>"); // 粗體 abc
$("ul.level-2").children().css("background-color", "#d6d8cd"); //子(含)層 下 多個
$("li.item-b").siblings().css("background-color", "#d6d8cd"); //前後同一層 多個
$("li.item-b").parent().css("background-color", "#d6d8cd"); //父(含)層 下 多個
$("li.item-b").prev().css("background-color", "#d6d8cd"); //同一層的上一個
$("li.item-b").next().css("background-color", "#d6d8cd"); //同一層的下一個
$("li.item-b").prevUntil("li.item-ii").css("background-color", "#3366cc"); //同一層的上多個
----------------------------------------------------------------
//storge data in jq
$(document).ready(function () {
var x = "<%=value1%>"; //public visible, pageload set value
$("#btn2").click(function () {
$("#content").data( { "data1" : x , "data2" : 21 } );
});
$("#btn3").click(function () {
alert( $("#content").data("data2") );
});
});
----------------------------------------------------------------
var id = "#li2";
var i = $("li").index($(id));
----------------------------------------------------------------
$("#div1").toggle('slow');
$("#div1").fadeToggle();
$("#div1").toggleClass("class1");
----------------------------------------------------------------
$(window).load(function () {
alert('start');
});
$(window).unload(function () {
alert('end');
});
----------------------------------------------------------------
$("#div1").load("../JQ/TEXT.aspx"); load txt.htm.aspx...