<div style='font-size:smaller'> smaller一次的字型 </div> <div style='font-size:smaller'> <div style='font-size:smaller'> smaller兩次的字型 </div> </div>
$("select#elem").val('0');
$("select#elem").val('');
$("select#elem")[0].selectedIndex = 0;
$('#button_submit').click(function (e) { if ($('#txb_username').val() != '' && $('#txb_password').val()) { $('#button_submit').attr('disabled', true); } else { alert('Username/Password不允許為空值!'); e.preventDefault() } });
$('#elementId').show(); // 立刻顯示 $('#elementId').show(2000); // 動畫方式顯示,持續2000ms $('#elementId').show('fast'); // 動畫方式顯示,持續200ms $('#elementId').show('slow'); // 動畫方式顯示,持續600ms
$('#elementId').hide(); // 立刻隱藏 $('#elementId').hide(2000); // 動畫方式隱藏,持續2000ms $('#elementId').hide('fast'); // 動畫方式隱藏,持續200ms $('#elementId').hide('slow'); // 動畫方式隱藏,持續600ms
$('#elementId').toggle(); // 切換show/hide $('#elementId').toggle(2000); // 動畫方式切換show/hide,持續2000ms $('#elementId').toggle('fast'); // 動畫方式切換show/hide,持續200ms $('#elementId').toggle('slow'); // 動畫方式切換show/hide,持續600ms
if($('#elementId').is(':visible')){ // 狀態為顯示 } else{ // 狀態為隱藏 }
$('#elementId').show('fast',function(){ // show complete }); $('#elementId').hide('slow',function(){ // hide complete }); $('#elementId').toggle(2000,function(){ // toggle complete });
<script src="jquery.effects.core.js" type="text/javascript"></script> <script src="jquery.effects.clip.js" type="text/javascript"></script> <script src="jquery.effects.drop.js" type="text/javascript"></script>如果要套用其他效果,則需另外再引用該效果之js.
$('#testDiv').toggle('clip',{}, 2000); // 以clip效果切換show/hide $('#testDiv').toggle('drop', {}, 2000); // 以drop效果切換show/hide所有效果共有:
var result=$(this).is(':checked');設定Checked值：
$(this).attr('checked',true); // 選取 $(this).attr('checked',false); // 取消
// All Select - 取得所有Element var allElement = $('*'); // ID Select - 取得符合id='MyId'的Element var idElement = $('#MyId'); // Class Select - 取得符合class='MyClass'的Elmeent var classElement = $('.MyClass'); // TagName Select - 取得TagName為table的Element var tagElement = $('table'); // Children Select - 取得class='UlClass'之下,所有TagName為li的Child Elmeent. var ulLiElements = $('.UlClass > li'); // Button Select - 取得tagName為button以及type='button'的所有Element var buttonElements = $(':button'); // Image Select - 取得所有圖片Element var imageElements = $(':image'); // File Select - 取得所有Input[Type=File] Element var fileElements = $(':file'); // Password Select - 所有Input[Type=Password] Element var passwordElements = $(':password'); // Input Select - 所有Input Element var inputElements = $(':input'); // Radio Select - 所有Radio Element var radioElements = $(':radio'); // Reset Select - 所有Input[Type=Rest] Element var resetElements = $(':reset'); // Selected Select - 所有有Selected屬性之 Element var selectedElements = $(':selected'); // Submit Select - 所有Input[Type=Submit] Element var submitElements = $(':submit'); // Text Select - 所有Input[Type=Text] Element var textElements = $(':text'); // Visible Select - 所有Visible Element var visibleElements = $(':visible'); // Header Select - 所有(H1/H2/H3...) Element var headerElements = $(':header'); // Hidden Select - 所有隱藏Element var hiddenElements = $(':hidden'); // 複合條件: Class&Attribute Select - 取得class='MyClass' // ,且name為'MyName'的所有Element var myNames = $('.MyClass[name="MyName"]'); // 模糊比對: Class&Attribute Select - 取得class='MyClass', // 且color包含'red'文字的Element var myNames = $('.MyClass[color*="red"]'); // 模糊比對2: Class&Attribute Select - 取得class='MyClass' // ,且lang開頭字串(完整單字)為'en'文字的Element. // lang='en'(符合),lang='en-UK'(符合),lang='english'(不符合) var myNames = $('.MyClass[lang|="en"]'); // No Children Select - 取得所有沒有Children的Element var noChildreList = $(':empty'); // Enabled Element Select - 取得所有Enabled Element/Enabled的Input Element. var allEnabledElement = $(':enabled'); var inputEnabledElement = $('#id > input:enabled'); // nTh Element Select - 取得第n筆資料的Element. // 第一筆資料 var firstElement = $('div:first'); // 第3筆資料 var the2Element = $('div:eq(2)'); // 第4筆以後的資料 var gtElement = $('div:gt(3)'); // 第5筆以前的資料 var gtElement = $('div:gt(4)'); // 最後一筆資料 var lastElement = $('div:last'); // 偶數筆資料 var evenElement = $('div:even'); // 奇數筆資料 var evenElement = $('div:odd'); // 第一筆children資料 var lastChildElement = $('div:first-child'); // 最後一筆children資料 var lastChildElement = $('div:last-child'); // parent Select - 取得Parent Element資料 var parentElement = $('div:parent'); // 多屬性Select - 取得title有包含t字眼並且class=MyChildren的Element var multiAttrElement = $('div[title*=t][class=MyChildren]'); // Multi Selector - 多個Selector一起Select,取得span/div所有element. var multiSelectorElement = $('div[class=MyChildren],spn[class=MyChildren]'); // 順序性只取頭Select - 取得div class=MyChildren // ,並且該Element下一個Element為span且class=MyChildren的Element var seqSelectElement = $('div[class=MyChildren] + span[class=MyChildren]'); // 順序性之取後續資料 Select - div class='Root'之後 // ,所有div class='MyChildren'並且與Root同Parent Element皆取出. var seqSameParentElement = $('div[class=Root] ~ span[class=MyChildren]'); // not() select - 取得class=MyChildren的Element並剃除tagName為span的Element. var notElement = $('.MyChildren:not(span)'); // only-child select - 取得MyChildren Class為該Parent唯一Children之Element. var onlyChildrenElement = $('.MyChildren:only-child'); // has select - 取得element內必須child有符合has內的Select條件. var hasElement = $('.onlyOnChildren:has(.MyChildren)');
<html> <head> <title> using javascript </title> <script type="text/javascript"> function MyFunction() { alert('hello world!'); } </script> </head> <body onload="MyFunction"> // 網頁完整讀取完畢後才執行. </body> </html>
<html> <head> <title> using jQuery </title> <!--載入jQuery.js --> <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { // 網頁完整讀取完畢後執行 MyFunction(); }); $(function () { // 網頁完整讀取完畢後執行,jQuery允許重複定義$(function(){}); alert('hello world,again!'); }); // 顯示hello world! function MyFunction() { alert('hello world!'); } </script> </head> <body> </body> </html>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.urlparams.js"></script> <script type="text/javascript"> $(function () { var paramList = $.url.getAllParams(); var data = ""; for (key in paramList) { data += key + "=" + paramList[key] + "<br/>"; } $('#allParams').html(data); $('#getParam').click(function () { $('#result').html($.url.params($('#name').val())); }); }); </script>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.ui.themeswitcher.js"></script> <script type="text/javascript"> $(function () { $('#changeTheme').themeswitcher({ webrootpath: '../' });
// when theme location= ../css/theme , webrootpath=../ }); </script>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript" src="js/jquery.GUID.js"></script> <script type="text/javascript" src="js/jquery.getPosition.js"></script> <script type="text/javascript" src="js/jquery.ui.getPosition.js"></script> <script type="text/javascript" src="js/jquery.ui.popPanel.js"></script> <script type="text/javascript"> $(function () { $('#button').click(function () { var panel = $(this).popPanel({'closehide':false,'resizeable':false}); }); }); </script>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.ui.getPosition.js"></script> <script type="text/javascript"> $(function () { $('#button1').click(function(){ var position=$(this).getPosition(); alert(position.x+','+position.y); }); $('#div1').click(function(){ var position=$(this).getPosition(); alert(position.x+','+position.y); }); }); </script>
$(this).GUID()
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript" src="js/jquery.GUID.js"></script> <script type="text/javascript"> $(function () { $('#RunGuid').click(function(){ $('#ResultGuid').val($(this).GUID()); }); }); </script>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"> <script type="text/javascript" src="js/jquery.random.js"></script> <script type="text/javascript"> $(function () { $('.RunRandom').click(function () { $('.ResultRandom').val($(this).random()); }); $('.RunRandomString').click(function () { $('.ResultRandom').val($(this).randomString()); }); $('.RunRandomHex').click(function () { $('.ResultRandom').val($(this).randomHex()); }); }); </script>
