Home >Web Front-end >JS Tutorial >Getting started with JQuery—a detailed introduction to the coding style of the JQuery program_jquery
Getting started with JQuery—a detailed introduction to the coding style of the JQuery program_jquery
- WBOYOriginal
- 2016-05-16 17:44:411362browse
"JQuery Authoritative Guide" Chapter 1 Getting Started with jQuery Development. This chapter starts with the basic concepts of jQuery in a step-by-step manner, introduces the download of the jQuery library, and introduces simple application methods; the latter part focuses on jQuery controlling DOM objects. And the introduction of page CSS styles, through some simple examples, allows readers to have a general understanding of the functional application of jQuery in the page, laying the foundation for further learning the detailed objects and methods of the jQuery library in the next chapter. This section introduces you to the coding style of the jQuery program.
1.1.5 Code style of jQuery program
1. The use of the “$” dollar sign
In the jQuery program, the most used one is the “$” dollar sign. This symbol must be used whether it is the selection of page elements or the prefix of functional functions. It can be said that It is the hallmark of the jQuery program.
2. Linked writing of event operations
When writing events for a certain element on the page, the jQuery program can write all events of the element in a linked way. To better illustrate the use of this writing method, we illustrate it through an example.
Example 1-2 Chain writing of jQuery events
(1) Function description
In the page, there is a
tag, in which The tag contains two
tags, one for the theme and the other for the content. When the page is first loaded, the included content
tag is invisible. When the user clicks the theme
tag When , change its background color and display the content
tag.
(2) Implementation code
Create a new HTML file 1-2.html and add the code shown in code listing 1-2.
Code List 1-2 Chain writing of jQuery events
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">
Chain writing of jQuery events< ;/title> <br><script language="javascript" type="text/javascript" <BR>src="Jscript/jquery-1.4.2.min.js"></script> <br> <style type="text/css"> <br>.divFrame{width:260px;border:solid 1px #666; <br>font-size:10pt} <br>.divTitle{background-color:#eee ;padding:5px} <br>.divContent{padding:5px;display:none} <br>.divCurrColor{ background-color:Red} <br></style> <br><script type="text/ javascript"> <br>$(function(){ <br>$(".divTitle").click(function(){ <br>$(this).addClass("divCurrColor") <br>.next( ".divContent").css("display","block"); <br>}); <br>}); <br></script> <br></head> <br>< body> <br><div class="divFrame"> <br><div class="divTitle">theme</div> <br><div class="divContent"> <br> <a href="#">Link 1</a><br /> <br><a href="#">Link 2</a><br /> <br><a href="#">Link three</a> <br></div> <br></div> <br></body> <br></html> ; <br>
</div> <br>In the code of the above file, the code in bold is chain writing. <br> Code function description: When the user clicks on the element with the Class name "divTitle", a style named "divCurrColor" is added to itself; at the same time, the next element with the Class name "divContent" is displayed. It can be seen that the implementation of the two functions is linked together through the "." symbol. <br><strong> (3) Page effect </strong> <br>Execute HTML file 1-2.html, and the achieved page effect is shown in Figure 1-3.
<p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010315262084.jpg"><br></p>
<p>After clicking: </p>
<p><img alt="" src="http://files.jb51.net/file_images/article/201301/2013010315262085.jpg"><br></p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="Detailed compilation of jQuery common development techniques_jquery" href="https://m.php.cn/faq/18163.html">Detailed compilation of jQuery common development techniques_jquery</a></span><span>Next article：<a class="dBlack" title="Detailed compilation of jQuery common development techniques_jquery" href="https://m.php.cn/faq/18165.html">Detailed compilation of jQuery common development techniques_jquery</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</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="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</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>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/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><!-- Matomo --><script> var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://tongji.php.cn/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '9']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script><!-- End Matomo Code --></html>
(2) Implementation code
Create a new HTML file 1-2.html and add the code shown in code listing 1-2.
Code List 1-2 Chain writing of jQuery events
Copy code The code is as follows:
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. dtd">