Heim  >  Artikel  >  Web-Frontend  >  Mehrere nützliche Tipps für JQuery

Mehrere nützliche Tipps für JQuery

黄舟
黄舟Original
2016-12-15 15:00:08951Durchsuche

JQuery-Code

/* Öffnen Sie den Link in einem neuen Fenster: JQuery-Filterattr
* Deaktivieren Sie die Maus, um das Rechtsklick-Menü aufzurufen: DOM-Kontextmenü
* Zurück zum Anfang der Seite: DOM scrollTo
* Dynamisches Ersatz-CSS-Stylesheet: JQuery-Filter Elementattribut
* Seitenschriftgröße anpassen: Css html.css parseFloat
*/
//Bestätigen Sie, dass der DOM-Ladevorgang abgeschlossen ist
$(document).ready(function () {

/* Link-href-Attribute, die mit http beginnen, öffnen den Link in einem neuen Fenster*/
// ^ Filter, Attribut: beginnen mit eine bestimmte Zeichenfolge
$("a[href ^='http']").attr("target", "_blank");

/* Rechte Maustaste deaktivieren*/
/ /DOM contextmenu ist das Menü der rechten Maustaste
$( document).bind("contextmenu", function (e) {
warning(("Kein Rechtsklick!"));
//Tut nicht nach unten ausführen, d. h. das Rechtsklick-Menü wird nicht angezeigt
return false;
});

/* Zurück zum Seitenanfang*/
/ /Das Klickereignis des Elements mit der ID="top" löst
$('#top' click (function ()) {
// Zurück zum Seitenanfang
$ (Dokument) aus. . Scrollto (0, 500);
}); css style sheet*/
//Ersetzen Sie den href-Attributwert des Link-Tags durch den href-Wert des Seitenlinks
$("a.cssSwap ").click(function(){
$( "link[rel=stylesheet]").attr("href",$(this).attr("rel"));
});


/* Schriftgröße der Seite Vergrößern, verkleinern, wiederherstellen*/
//Schriftgröße abrufen, Schriftgröße
wird unter dem HTML-Tag definiert var originalFontSize = $("html" ).css("font-size");
//Standardschriftgröße wiederherstellen
$(".resetFont").click(function () {
$("html").css( "font-size", originalFontSize);
//JavaScript Nicht nach unten ausführen
return false;
});

//Erhöhen Sie die Schriftart, die die Klasse eines bestimmten Elements ist definiert als raiseFont
$(".increaseFont").click(function () {
//Erhalten Sie das aktuelle Schriftgrößensuffix px,pt,pc
var currentFontSize = $("html").css ("font-size");
//Die aktuelle Schriftgröße abrufen, parseFloat() konvertiert in den Float-Typ und entfernt das Suffix
var currentFontSizeNumber = parseFloat(currentFontSize);
//Neu definierte Schriftgröße
var newFontSize = currentFontSizeNumber * 1.1;
//Stylesheet neu schreiben
                                                                                            Schriftart reduzieren Die Klasse eines Elements ist definiert als dependenceFont
$(".decreaseFont").click(function. ) {
//Das aktuelle Schriftgrößensuffix px,pt,pc abrufen
var currentFontSize = $("html").css("font-size");
//Die aktuelle Schriftgröße abrufen , parseFloat() konvertiert es in den Float-Typ und entfernt das Suffix
var currentFontSizeNumber = parseFloat(currentFontSize);
/ /Schriftgröße neu definieren
var newFontSize = currentFontSizeNumber * 0.9;
          //Stylesheet neu schreiben JavaScript wird nicht nach unten ausgeführt
return false;
});
});




Html-Code:





JQuery Hilfreiche Tipps < ;/title><br> <!--Default style sheet--><br> <link type="text/css" rel="stylesheet" href="css/background-white.css"/ > ;<br/> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><br> <script type="text/javascript" src ="script/helpful-tricks.js"></script><br></head><br><br><body><br><header><br> <div> < ;p>Dynamisches Ändern des Stylesheets</p><br> <a href="#" class="cssSwap" rel="css/background-blue.css">Blauer Hintergrund</a> < cssSwap" rel="css/background-yellow.css">gelber Hintergrund</a><br> </div><br> <br/><br><br> <div> < ;p>Schriftgröße anpassen</p><br>                                                      ; ="#">Schriftgröße erhöhen</a><br>                                                                                <br></header><br><div><p> ;Link in neuem Fenster öffnen</p><br> <a href="http://www.sina.com.cn" >Sina</a><br/><br> <a href="http://www.sohu.com.cn">Sohu</a><br/><br> <a href="http://www.cnblogs.com">Blog Park</a><br/><br></div><br><div class="layout-bottom"><br> <a id="top" href="#" >Zurück zum Seitenanfang</a><br></div><br></body><br></html><br><br><br>y Das Obige ist der Inhalt Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn). <br><br></p> <p></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="jQuery-Eigenschaften und CSS-Operationen" href="http://m.php.cn/de/faq/344768.html">jQuery-Eigenschaften und CSS-Operationen</a></span><span>Nächster Artikel:<a class="dBlack" title="jQuery-Eigenschaften und CSS-Operationen" href="http://m.php.cn/de/faq/344772.html">jQuery-Eigenschaften und CSS-Operationen</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>