juqery 50コードセグメントリファレンス
79423 ワード
この文書では、javascriptプロジェクトに役立つ50個のjqueryコードクリップを示します.その中のいくつかのコードセグメントはjQuery 1からである.4.2サポートされ始めた方法と、本当に役に立つ関数や方法があります.彼らはあなたが速くよく仕事を完成するのを助けることができます.これらは私ができるだけ覚えている最高の性能を持つコードセグメントなので、もしあなたがもっとよくできるところを見つけたら、あなたのバージョンをコメントに貼り付けてください.この文章で役に立つものを見つけてほしい.
1.ネストされたフィルタを作成する方法:
2.要素検索の再利用方法
3.has()を使用して、要素にクラスまたは要素が含まれているかどうかを確認します.
4.jQueryを使用してスタイルシートを切り替える方法
5.最適化の目的に基づいて、選択範囲を制限する方法:
6.ToggleClassを正しく使用する方法:
7.IE固有の機能の設定方法:
8.要素の代わりにjQueryを使用する方法:
9.エレメントが空であるかどうかを検証する方法:
10.ソートされていないセットから要素のインデックス番号を見つける方法
11.イベントに関数をバインドする方法:
12.htmlを要素に追加または追加する方法:
13.要素を作成するときに、オブジェクトのフォント量(literal)を使用して属性を定義する方法
14.フィルタリングに複数の属性を使用する方法
15.jQueryを使用して画像をプリロードする方法:
16.セレクタに一致する任意の要素のイベントハンドラを設定する方法:
17.選択したoption要素を見つける方法:
18.値テキストを含む要素を非表示にする方法:
19.ページ内の領域に自動的にスクロールする場合
20.各種ブラウザの検出方法:
21.列の単語を置換する方法
22.右クリックコンテキストメニューを無効にする方法:
23.カスタムセレクタの定義方法
24.エレメントが存在するかどうかを確認する方法
25.jQueryを使用して、右クリックと左クリックの両方を検出する方法:
26.inputドメインのデフォルト値を表示または削除する方法
27.エレメントを一定時間後に自動的に非表示または閉じる方法(バージョン1.4をサポート):
28.作成した要素をDOMに動的に追加する方法:
29.「Text-ARea」ドメインの文字数を制限する方法:
30.関数の基本的なテストを作成する方法
31.jQueryで要素をクローンする方法:
32.jQueryで要素が表示されるかどうかをテストする方法
33.スクリーンの中心に要素を配置する方法:
34.特定の名前を持つすべての要素の値を配列に配置する方法:
35.HTMLを要素から削除する方法
36.closestを使用して親要素を取得する方法:
37.FirebugとFirefoxを使用してjQueryイベントログを記録する方法:
38.ポップアップウィンドウでリンクを強制的に開く方法:
39.新しいタブでリンクを強制的に開く方法:
40.jQueryでの使用方法Siblings()は同世代要素を選択します
41.ページのすべてのチェックボックスを切り替える方法:
42.入力テキストに基づいて要素リストをフィルタする方法:
43.マウスパッドカーソル位置xおよびyの取得方法
44.リスト要素(List Element,LI)全体をクリック可能にする方法
45.jQueryを使用してXMLを解析する方法(基本例):
46.画像が完全にロードされているかどうかを確認する方法
47.jQueryを使用してイベントのネーミングスペースを指定する方法:
48.クッキーが有効かどうかを確認する方法
49.クッキーを期限切れにする方法:
50.ページ内の任意のURLを置換するためにクリック可能なリンクを使用する方法
1.ネストされたフィルタを作成する方法:
1. // ， 2. // 。 ， 3. // （:not） （:has） 4. // class “selected”（.selected） 。 5. .filter(":not(:has(.selected))") 2.要素検索の再利用方法
1. var allItems = $("div.item"); 2. var keepList = $("div#container1 div.item"); 3. // jQuery 。 ， 4. // “keep list”， 5. // 6. < DIV >class names: 7. $(formToLookAt + " input:checked").each(function() { 8. keepList = keepList.filter("." + $(this).attr("name")); 9. }); 10. < /DIV> 3.has()を使用して、要素にクラスまたは要素が含まれているかどうかを確認します.
1. //jQuery 1.4.* has 。 2. // 3. // 。 4. $("input").has(".email").addClass("email_icon"); 4.jQueryを使用してスタイルシートを切り替える方法
1. // （media-type）， href 。 2. $('link[media='screen']').attr('href', 'Alternative.css'); 5.最適化の目的に基づいて、選択範囲を制限する方法:
1. // ， 2. // jQuery 3. // 。 ， 4. // ， 5. // 。 6. var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul id="shopping_cart_items">
<li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li>
<li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li>
<li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li>
</ul>6.ToggleClassを正しく使用する方法:
1. // （toggle） 2. // 。 3. // ： 4. a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton'); 5. //toggleClass 6. a.toggleClass('blueButton'); 7.IE固有の機能の設定方法:
1. if ($.browser.msie) { 2. // Internet Explorer 3. } 8.要素の代わりにjQueryを使用する方法:
1. $('#thatdiv').replaceWith('fnuh'); 9.エレメントが空であるかどうかを検証する方法:
1. if ($('#keks').html()) { 2. // ; 3. } 10.ソートされていないセットから要素のインデックス番号を見つける方法
1. $("ul > li").click(function () { 2. var index = $(this).prevAll().length; 3. }); 11.イベントに関数をバインドする方法:
1. $('#foo').bind('click', function() { 2. alert('User clicked on "foo."'); 3. }); 12.htmlを要素に追加または追加する方法:
1. $('#lal').append('sometext'); 13.要素を作成するときに、オブジェクトのフォント量(literal)を使用して属性を定義する方法
1. var e = $("", { href: "#", class: "a-class another-class", title: "..." }); 14.フィルタリングに複数の属性を使用する方法
1. // input ， 2. // 3. var elements = $('#someid input[type=sometype][value=somevalue]').get(); 15.jQueryを使用して画像をプリロードする方法:
1. jQuery.preloadImages = function() { 2. for(var i = 0; i < arguments.length; i++) { 3. $("<img />").attr('src', arguments[i]); 4. } 5. }; 6. // 7. $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg'); 16.セレクタに一致する任意の要素のイベントハンドラを設定する方法:
1. $('button.someClass').live('click', someFunction); 2. // ， jQuery 1.4.2 ，delegate undelegate 3. // live， 4. // ， table ， 5. //.live() 6. $("table").each(function(){ 7. $("td", this).live("hover", function(){ 8. $(this).toggleClass("hover"); 9. }); 10. }); 11. // 12. $("table").delegate("td", "hover", function(){ 13. $(this).toggleClass("hover"); 14. }); 17.選択したoption要素を見つける方法:
1. $('#someElement').find('option:selected'); 18.値テキストを含む要素を非表示にする方法:
1. $("p.value:contains('thetextvalue')").hide(); 19.ページ内の領域に自動的にスクロールする場合
1. jQuery.fn.autoscroll = function(selector) { 2. $('html,body').animate( 3. {scrollTop: $(selector).offset().top}, 4. 500 5. }; 6. } 7. // class/area 。 8. $('.area_name').autoscroll(); 20.各種ブラウザの検出方法:
1. Safari (if( $.browser.safari)), 2. IE6 (if ($.browser.msie && $.browser.version > 6 )), 3. IE6 (if ($.browser.msie && $.browser.version <= 6 )), 4. FireFox 2 (if ($.browser.mozilla && $.browser.version >= '1.8' )) 21.列の単語を置換する方法
1. var el = $('#id'); 2. el.html(el.html().replace(/word/ig, '')); 22.右クリックコンテキストメニューを無効にする方法:
1. $(document).bind('contextmenu',function(e){ 2. return false; 3. }); 23.カスタムセレクタの定義方法
1. $.expr[':'].mycustomselector = function(element, index, meta, stack){ 2. // element- DOM 3. // index – 4. // meta – 5. // stack – 6. // true 7. // false }; 8. // ： 9. $('.someClasses:test').doSomething(); 24.エレメントが存在するかどうかを確認する方法
1. if ($('#someDiv').length) { 2. // ！！！ …… 3. } 25.jQueryを使用して、右クリックと左クリックの両方を検出する方法:
1. $("#someelement").live('click', function(e) { 2. if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) { 3. alert("Left Mouse Button Clicked"); 4. } else if(e.button == 2) { 5. alert("Right Mouse Button Clicked"); 6. } 7. }); 26.inputドメインのデフォルト値を表示または削除する方法
1. // ， 2. // input 3. // 4. wap_val = []; 5. $(".swap").each(function(i){ 6. wap_val[i] = $(this).val(); 7. $(this).focusin(function(){ 8. if ($(this).val() == swap_val[i]) { 9. $(this).val(""); 10. } 11. }).focusout(function(){ 12. if ($.trim($(this).val()) == "") { 13. $(this).val(swap_val[i]); 14. } 15. }); 16. }); 27.エレメントを一定時間後に自動的に非表示または閉じる方法(バージョン1.4をサポート):
1. // 1.3.2 setTimeout 2. setTimeout(function() { 3. $('.mydiv').hide('blind', {}, 500) 4. }, 5000); 5. // 1.4 delay() （ ） 6. $(".mydiv").delay(5000).hide('blind', {}, 500); 28.作成した要素をDOMに動的に追加する方法:
1. var newDiv = $(''); 2. newDiv.attr('id','myNewDiv').appendTo('body'); 29.「Text-ARea」ドメインの文字数を制限する方法:
1. jQuery.fn.maxLength = function(max){ 2. this.each(function(){ 3. var type = this.tagName.toLowerCase(); 4. var inputType = this.type? this.type.toLowerCase() : null; 5. if(type == "input" && inputType == "text" || inputType == "password"){ 6. //Apply the standard maxLength 7. this.maxLength = max; 8. } 9. else if(type == "textarea"){ 10. this.onkeypress = function(e){ 11. var ob = e || event; 12. var keyCode = ob.keyCode; 13. var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd; 14. return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection); 15. }; 16. this.onkeyup = function(){ 17. if(this.value.length > max){ 18. this.value = this.value.substring(0,max); 19. } 20. }; 21. } 22. }); 23. }; 24. // 25. $('#mytextarea').maxLength(500); 30.関数の基本的なテストを作成する方法
1. // 2. module("Module B"); 3. test("some other test", function() { 4. // 5. expect(2); 6. // ， JUnit assertEquals 7. equals( true, false, "failing test" ); 8. equals( true, true, "passing test" ); 9. }); 31.jQueryで要素をクローンする方法:
1. var cloned = $('#somediv').clone(); 32.jQueryで要素が表示されるかどうかをテストする方法
1. if($(element).is(':visible') == 'true') { 2. // 3. } 33.スクリーンの中心に要素を配置する方法:
1. jQuery.fn.center = function () { 2. this.css('position','absolute'); 3. this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px'); 4. this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px'); 5. return this; 6. } 7. // ： 8. $(element).center(); 34.特定の名前を持つすべての要素の値を配列に配置する方法:
1. var arrInputValues = new Array(); 2. $("input[name='table[]']").each(function(){ 3. arrInputValues.push($(this).val()); 4. }); 35.HTMLを要素から削除する方法
1. (function($) { 2. $.fn.stripHtml = function() { 3. var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi; 4. this.each(function() { 5. $(this).html( $(this).html().replace(regexp,”") ); 6. }); 7. return $(this); 8. } 9. })(jQuery); 10. // ： 11. $('p').stripHtml(); 36.closestを使用して親要素を取得する方法:
1. $('#searchBox').closest('div'); 37.FirebugとFirefoxを使用してjQueryイベントログを記録する方法:
1. // 2. // ： 3. $('#someDiv').hide().log('div hidden').addClass('someClass'); 4. jQuery.log = jQuery.fn.log = function (msg) { 5. if (console){ 6. console.log("%s: %o", msg, this); 7. } 8. return this; 9. }; 38.ポップアップウィンドウでリンクを強制的に開く方法:
1. jQuery('a.popup').live('click', function(){ 2. newwindow=window.open($(this).attr('href'),'','height=200,width=150'); 3. if (window.focus) { 4. newwindow.focus(); 5. } 6. return false; 7. }); 39.新しいタブでリンクを強制的に開く方法:
1. jQuery('a.newTab').live('click', function(){ 2. newwindow=window.open($(this).href); 3. jQuery(this).target = "_blank"; 4. return false; 5. }); 40.jQueryでの使用方法Siblings()は同世代要素を選択します
1. // 2. $('#nav li').click(function(){ 3. $('#nav li').removeClass('active'); 4. $(this).addClass('active'); 5. }); 6. // 7. $('#nav li').click(function(){ 8. $(this).addClass('active').siblings().removeClass('active'); 9. }); 41.ページのすべてのチェックボックスを切り替える方法:
1. var tog = false; 2. // true， 3. $('a').click(function() { 4. $("input[type=checkbox]").attr("checked",!tog); 5. tog = !tog; 6. }); 42.入力テキストに基づいて要素リストをフィルタする方法:
1. // 2. // 3. $('.someClass').filter(function() { 4. return $(this).attr('value') == $('input#someId').val(); 5. }) 43.マウスパッドカーソル位置xおよびyの取得方法
1. $(document).ready(function() { 2. $(document).mousemove(function(e){ 3. $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY); 4. }); 5. }); 44.リスト要素(List Element,LI)全体をクリック可能にする方法
1. $("ul li").click(function(){ 2. window.location=$(this).find("a").attr("href"); 3. return false; 4. }); 1. <ul> 2. <li><a href="#">Link 1</a></li> 3. <li><a href="#">Link 2</a></li> 4. <li><a href="#">Link 3</a></li> 5. <li><a href="#">Link 4</a></li> 6. </ul> 45.jQueryを使用してXMLを解析する方法(基本例):
1. function parseXml(xml) { 2. // Tutorial author 3. $(xml).find("Tutorial").each(function() { 4. $("#output").append($(this).attr("author") + ""); 5. }); 6. } 46.画像が完全にロードされているかどうかを確認する方法
1. $('#theImage').attr('src', 'image.jpg').load(function() { 2. alert('This Image Has Been Loaded'); 3. }); 47.jQueryを使用してイベントのネーミングスペースを指定する方法:
1. // 2. $('input').bind('blur.validation', function(e){ 3. // ... 4. }); 5. //data 6. $('input').data('validation.isValid', true); 48.クッキーが有効かどうかを確認する方法
1. var dt = new Date(); 2. dt.setSeconds(dt.getSeconds() + 60); 3. document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 4. var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 5. if(!cookiesEnabled) { 6. // cookie 7. } 49.クッキーを期限切れにする方法:
1. var date = new Date(); 2. date.setTime(date.getTime() + (x * 60 * 1000)); 3. $.cookie('example', 'foo', { expires: date }); 50.ページ内の任意のURLを置換するためにクリック可能なリンクを使用する方法
1. $.fn.replaceUrl = function() { 2. var regexp = /((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi; 3. this.each(function() { 4. $(this).html( 5. $(this).html().replace(regexp,'<a href="$1">$1</a>‘) 6. ); 7. }); 8. return $(this); 9. } 10. // 11. $('p').replaceUrl();