์ž๋Š” ์”จ์•—
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ
    • ๐Ÿฃ ๊ธฐ์ดˆ ๊ฐœ๋…
    • ๐Ÿ“Ž ์œ ํŠœ๋ธŒ
    • ๐Ÿ’พ ์กฐ๊ฐ๋ชจ์Œ
    • ๐Ÿ‘ฉ‍๐Ÿ’ป Error
    • โ„ React
    • ๐ŸฅPython
    • ๐Ÿ€ Spring
    • ๐Ÿฅž JS
    • ๐Ÿ‹ Docker
    • ๐Ÿงญ WSO2
    • ๐Ÿง Linux
    • ๐Ÿ”— SQL
    • ๐Ÿข C#
    • ๐Ÿ“‘ ์ฝ์„๊ฑฐ๋ฆฌ
    • ๐Ÿ‘€์งˆ๋ฌธ๋“ค
    • ๐Ÿ‘ฉ‍๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—…
      • Java ์ž๋ฐ”
      • Oracle ์˜ค๋ผํด
      • JDBC
      • HTML & CSS
      • JavaScript
      • JSP
      • Servlet
      • Spring
      • MyBatis
    • ๐Ÿ“• ๊ฐœ๋ฐœ ํ˜ผ๊ณต
      • ์ž๋ฐ”์˜ ์ •์„
      • ์ž๋ฐ” ORM ํ‘œ์ค€ JPA ํ”„๋กœ๊ทธ๋ž˜๋ฐ
hELLO ยท Designed By ์ •์ƒ์šฐ.
์ž๋Š” ์”จ์•—

๐ŸŒฑ

0302 ๊ตญ๋น„ ์ˆ˜์—… JavaScript JSONArray ๋ณตํ•ฉ ํ˜•ํƒœ closure jQuery CDN jQuery ๋กœ๋”ฉ(document, window) jQuery Selector(id, class, tag, multiple, attribute, sub, hoverํ•จ์ˆ˜)
๐Ÿ‘ฉ‍๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—…/JavaScript

0302 ๊ตญ๋น„ ์ˆ˜์—… JavaScript JSONArray ๋ณตํ•ฉ ํ˜•ํƒœ closure jQuery CDN jQuery ๋กœ๋”ฉ(document, window) jQuery Selector(id, class, tag, multiple, attribute, sub, hoverํ•จ์ˆ˜)

2023. 3. 4. 15:28

*JSONArray

 - JSONObject์„ ๋ฐฐ์—ด๋กœ ์‚ฌ์šฉ

 ๋ฌธ๋ฒ•)

  [ {์ด๋ฆ„:๊ฐ’,,,}, {์ด๋ฆ„:๊ฐ’,,,}, {์ด๋ฆ„:๊ฐ’,,,} ,,,]
  //๋ฐฐ์—ด ์•ˆ์— JSONObject ๊ฐ์ฒด๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ ์ •์˜๋จ

 

 


  ์‚ฌ์šฉ) 

1. JSONArray ์ƒ์„ฑ

var jsonArr
=[ { name:”์ฐจoo”,age:24}, { name:”์œ oo”,age:25}, { name:”์†กoo”,age:26}  ];

 

2. ๋ฐ˜๋ณตํ•˜์—ฌ ๊ฐ’ ์–ป๊ธฐ

var jsonObj; //json๊ฐ์ฒด

for( var i =0 ; i < jsonArr.length ; i++  ){
  
  //3. ๋ฐ˜๋ณต ์ค‘์ธ ๋ฐฉ์˜ ๊ฐ’์„ ๋ณ€์ˆ˜์— ์ €์žฅ
   jsonObj=jsonArr[i];
  
  //4. ๊ฐ’ ์–ป๊ธฐ, ์‚ฌ์šฉ
  jsonObj.์ด๋ฆ„ //jsonArr[i].์ด๋ฆ„


}//end for

 


*๋ณตํ•ฉ ํ˜•ํƒœ

  - JSONObject์•ˆ์— ๊ฐ’์œผ๋กœ JSONArray๊ฐ€ ๋“ค์–ด์žˆ๋Š” ๊ฒฝ์šฐ


 ํ˜•์‹)

{ 
	์ด๋ฆ„ : ๊ฐ’,,,, //๋‹จ์ผ ๊ฐ’์— ๋Œ€ํ•œ ์ €์žฅ (๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ์— ๋Œ€ํ•œ ๋ถ€๊ฐ€์ ์ธ ์ •๋ณด๋ฅผ ์ €์žฅ)
    
	์ด๋ฆ„ : [ {์ด๋ฆ„:๊ฐ’,,}, {์ด๋ฆ„:๊ฐ’,,}, {์ด๋ฆ„:๊ฐ’,,} ,,,, ]
	//์ค‘๋ณต ๊ฐ’์— ๋Œ€ํ•œ ์ €์žฅ ( ๊ฒ€์ƒ‰๊ฒฐ๊ณผ์— ๋Œ€ํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ์ €์žฅ )     
}

// ๊ฐ’์— json ๊ฐ์ฒด ๋ฐฐ์—ด๋กœ json๊ฐ์ฒด๋“ค์ด ๋“ค์–ด๊ฐ€์žˆ์Œ

 


*closure

- ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ด๋ฆ„๊ณผ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ด๋ฆ„์„ ๋ฌถ์–ด์ฃผ๋Š” JSONObject

- ์ ‘๊ทผ์ œํ•œ์„ ๋ณ€๊ฒฝํ•  ๋•Œ ์‚ฌ์šฉ
   : ํ•จ์ˆ˜ ์•ˆ์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋ฅผ ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์ ‘๊ทผ/์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•จ

- ()์‚ฌ์šฉ, {} ์‚ฌ์šฉ ๋‘ ๊ฐ€์ง€ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ


  

 

-( )๋ฅผ ์ด์šฉํ•œ closure

 ์„ ์–ธ)
  var ๋ณ€์ˆ˜๋ช…=(    {  ์ด๋ฆ„:๊ฐ’:,,, ์ด๋ฆ„ :function(){ ์ฝ”๋“œ,,,,} ,,, }    );

 ์‚ฌ์šฉ)
    ๋ณ€์ˆ˜๋ช….์ด๋ฆ„
    ๋ณ€์ˆ˜๋ช….ํ•จ์ˆ˜๋ช…(); 

 

 

 

-{ } ์‚ฌ์šฉํ•œ closure 

 function(๋งค๊ฐœ๋ณ€์ˆ˜,,,,) {
 
      var ๋ณ€์ˆ˜๋ช…=๊ฐ’;
      
      function ํ•จ์ˆ˜๋ช…(๋งค๊ฐœ๋ณ€์ˆ˜,,, ){
      }//function

}//function


ํ•จ์ˆ˜ ์•ˆ์— ์ •์˜๋œ ๋งค๊ฐœ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋Š” ์ •์˜๋œ ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์Œ
  => ์‚ฌ์šฉํ•˜๋ ค๋ฉด ํ•จ์ˆ˜ ์•ˆ์— ์žˆ๋Š” ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ closure๋กœ ์—ฐ๊ฒฐํ•˜๊ณ  closure๋ฅผ ๋ฐ˜ํ™˜ํ•˜์ž

 


ํ•จ์ˆ˜๋ฅผ ๋ถ€๋ฅด๋ฉด json์„ ๋ฐ˜ํ™˜ํ•˜๋„๋ก

  > ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ด๋ฆ„๊ณผ ๋‚ด๋ถ€์—์„œ ์‚ฌ์šฉํ•˜๋Š” ์ด๋ฆ„์„ ๋ฌถ์–ด์ฃผ๋Š” JSONObject์„ closure๋ผ๊ณ  ํ•จ

var ๋ณ€์ˆ˜๋ช…= function(๋งค๊ฐœ๋ณ€์ˆ˜,,,,){
                var ๋ณ€์ˆ˜๋ช…=๊ฐ’;
      
                function ํ•จ์ˆ˜๋ช…(๋งค๊ฐœ๋ณ€์ˆ˜,,, ){
                  }
                 
            return {์ด๋ฆ„:๋ณ€์ˆ˜๋ช…, ์ด๋ฆ„: ํ•จ์ˆ˜๋ช… ,,,,, }; // closure๋Š” json๊ฐ์ฒด
          
         };

 

 

- ํ๋ฆ„

 var closure=function(){
                     var name=“ํ™๊ธธ๋™”;
                   
                     function test( msg ){
                        return “๋ฉ”์‹œ์ง€ : ”+msg;
                     } 
               
      return { na : name, fun : test}; // closure: ํ•จ์ˆ˜์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ด๋ฆ„๊ณผ ๋‚ด๋ถ€์˜ ์ด๋ฆ„ ๋ฌถ์–ด์ฃผ๋Š” JSONObject(closure)



};

 

-์‚ฌ์šฉ

var name=closure().na; 
//๋ฌด๊ธฐ๋ช…ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ closure๋ฅผ ์–ป๊ณ , ํ•จ์ˆ˜ ์•ˆ์˜ ๋ณ€์ˆ˜๋‚˜ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉ

var msg=closure().fun(“ํ—ฌ๋กœ”);

 


* ํ•จ์ˆ˜ ๊ธฐํ˜ธ ()๋ฅผ ๋ถ™์—ฌ ๋ฐ”๋กœ closure ๊ฐ์ฒด๊ฐ€ ๋ฐ˜ํ™˜๋˜๊ฒŒ ํ•จ > ์‚ฌ์šฉ ์‹œ () ์—†์ด ๋ฐ”๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

function testClo(){ 
//๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜๋ฅผ ๊ฐ€์ง„ ํ•จ์ˆ˜ testClo - ๋ฐ”๊นฅ์—์„œ๋Š” ์ด ์•ˆ์˜ ๋ณ€์ˆ˜,ํ•จ์ˆ˜ ์“ธ ์ˆ˜ ์—†์Œ > closure ์‚ฌ์šฉ
	
	var name="์œคoo";
	var addr = function(){
		return "์„œ์šธ์‹œ ๊ฐ•๋‚จ๊ตฌ ์—ญ์‚ผ๋™";
	}
	
	//jsonObj์„ ์‚ฌ์šฉํ•˜์—ฌ ์™ธ๋ถ€์—์„œ ์‚ฌ์šฉํ•  ์ด๋ฆ„๊ณผ ๋‚ด๋ถ€์˜ ์ด๋ฆ„์„ ์—ฐ๊ฒฐํ•œ ํ›„ jsonObj์„ ๋ฆฌํ„ดํ•จ
	return {na: name, ad: addr} ;
}//testClo



function clo(){
//()๋ฅผ ๋ถ™์ด์ง€ ์•Š๊ณ  closure๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ˜ธ์ถœํ•˜๋Š” ๊ณณ์—์„œ ()๋ฅผ ์“ธ ๋•Œ๋งˆ๋‹ค ๋ถ™์—ฌ์ค˜์•ผํ•จ
	
	var closure = testClo;
	
//closure๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ()๋ฅผ ๋ถ™์—ฌ์„œ JsonObject์œผ๋กœ ๋งŒ๋“ค์–ด์„œ ์‚ฌ์šฉํ•˜๊ฒŒ ๋จ
	alert (  closure().na  ); //()๋ฅผ ๋ถ™์—ฌ์•ผ ๊ฐ์ฒด๊ฐ€ ๋˜์–ด ๋ฐ”๊นฅ์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
	alert (  closure().ad()  ); //()๋ฅผ ๋ถ™์—ฌ์•ผ ๋ฐ”๊นฅ์—์„œ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
	//๋งค๋ฒˆ () ๋ถ™์—ฌ์„œ ์‚ฌ์šฉํ•˜๋ฉด ๋ฒˆ๊ฑฐ๋กœ์›€
		
}//clo



function clo2(){
//()๋ฅผ ๋ถ™์—ฌ์„œ closure๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํ˜ธ์ถœํ•˜๋Š” ๊ณณ์—์„œ () ์—†์ด ๋ฐ”๋กœ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
	var closure = testClo();
	
	alert (  closure.na  ); 
	alert (  closure.ad() );
	
}//clo2

 

 

 

 


*jQuery

 - 2006๋…„ John Resig๊ฐ€ ์ œ์ž‘ํ•˜์—ฌ ๋ฐœํ‘œ
 - write less, do more – ์ ๊ฒŒ ์“ฐ๊ณ  ๋งŽ์€ ์ผ์„ ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ๋œ JavaScript Library
 - ๋‹จ์ˆœํ™” > ๊ฐ€๋…์„ฑ ํ–ฅ์ƒ, ๊ฐœ๋ฐœ ํšจ์œจ์„ฑ์ด ํ–ฅ์ƒ๋จ
 - ์›น ํ‘œ์ค€์„ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœ๋˜์—ˆ์Œ (๋ชจ๋“  ์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘- cross browsing)
 - CSS์˜  selector๋ฅผ ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Œ
 - AJAX๋ฅผ ๋‹จ์ˆœํ™”
 - jquery.com์—์„œ ๋ฐฐํฌ.(compressed version, uncompressed version)

   - compressed

  • ์••์ถ•๋ฒ„์ „- ๊ธฐ๊ณ„์ค‘์‹ฌ
  • ํ”„๋กœ๊ทธ๋žจ์— ๋ฐ˜๋“œ์‹œ ํ•„์š”ํ•œ ๊ณต๋ฐฑ๋งŒ  ๋‚จ๊ธฐ๊ณ , ํ•„์š”์—†๋Š” ์ฃผ์„, ์—”ํ„ฐ, ํƒญ์„ ์‚ญ์ œํ•œ ์†Œ์ŠคํŒŒ์ผ => ํŒŒ์ผ์˜ ํฌ๊ธฐ๊ฐ€ ์ถ•์†Œ
  • ๋‹จ : ์ฝ”๋“œ์ฝ๊ธฐ๊ฐ€ ์–ด๋ ค์›€ (๊ฐœ๋ฐœ์ž๊ฐ€ ๋ณด๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๊ดœ์ฐฎ์Œ)
  • ์žฅ : ํŒŒ์ผ์ด ๊ฐ€๋ฒผ์›€ ( ๋‹ค์šด๋กœ๋“œ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ˆ˜ํ–‰ )
  • ํŒŒ์ผ๋ช…์— min์ด ๋“ค์–ด๊ฐ

   - uncompressed

  • ๋น„์••์ถ•๋ฒ„์ „ –์‚ฌ๋žŒ์ค‘์‹ฌ
  •   -์ฃผ์„, ์—”ํ„ฐ, ํƒญ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ์†Œ์ŠคํŒŒ์ผ
  •   -์žฅ : ์ฝ”๋“œ๋ฅผ ์ฝ๊ธฐ๊ฐ€ ํŽธํ•จ (์ˆ˜์ • ํŽธํ•จ)
  •   -๋‹จ : ํŒŒ์ผ์ด ์šฉ๋Ÿ‰ ํผ

 

 

 

-๋‹ค์–‘ํ•œ CDN(Content Delivery Network)์„ ํ†ตํ•ด ๋ฐฐํฌ
// CDN: ์‚ฌ์šฉ์ž๊ฐ€ ์žˆ๋Š” ์œ„์น˜์™€ ์ง€๋ฆฌ์ ์œผ๋กœ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๋ณต์ œ์„œ๋ฒ„์—์„œ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œํ•˜๋Š” ๊ธฐ์ˆ 

- ajax, event, effect, DOM, plug in ์ œ๊ณต
// plug in: ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๊ธฐ์ˆ ๋“ค์„ ๋ฏธ๋ฆฌ ๊ตฌํ˜„ํ•ด ๋†“์€ ๊ฒƒ

 


 

์‚ฌ์šฉ๋ฒ•)

1. ๋ฐฐํฌ๋œ .js ๋ฅผ HTML ์— ์™ธ๋ถ€ํŒŒ์ผ๋ฐฉ์‹์œผ๋กœ ๋กœ๋”ฉ (๋˜๋Š” CDN ์‚ฌ์šฉ )

   <script type=“text/javascript” src=“URL”> ์—ฌ๊ธฐ์— ์ฝ”๋”ฉX </script>

 

 2. <script>์ƒˆ๋กœ ์—ด์–ด ์ฝ”๋“œ ์ž‘์„ฑ

  <script type=“text/javascript”>
      //์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฌธ๋ฒ• ์‚ฌ์šฉ
      //์™ธ๋ถ€ํŒŒ์ผ ๋ฐฉ์‹์œผ๋กœ ์—ฐ๊ฒฐ๋œ .js ์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ => jQuery์ฝ”๋“œ
  </script>

 

 


๋ฌธ๋ฒ•)
 $ : jQueryObject

  $(“selector”).jqueryํ•จ์ˆ˜( function (){
     // ์ฝ”๋”ฉ…; } // first class function : ํ•จ์ˆ˜๊ฐ€ ๋ฐ์ดํ„ฐ ํ˜•์œผ๋กœ ์‚ฌ์šฉ๋˜๊ธฐ ๋•Œ๋ฌธ์—
);

 

 

  • $: jQuery Object๊ฐ€
  • “selector” : selector์— ํ•ด๋‹นํ•˜๋Š” ํƒœ๊ทธ๋ฅผ ์ฐพ๊ณ  (css์…€๋ ‰ํ„ฐ)
  • jquery์—์„œ ์ œ๊ณตํ•˜๋Š” ํ•จ์ˆ˜๋ช…: ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ ์šฉ
  • ๋ฌด๊ธฐ๋ช… ํ•จ์ˆ˜: ๊ฐœ๋ฐœ์ž๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์œผ๋กœ ์ผ ์ฒ˜๋ฆฌ

*jQuery ๋กœ๋”ฉ

 -document ๋กœ๋”ฉ : HTML <body>ํƒœ๊ทธ์— ํƒœ๊ทธ ์ •๋ณด๊ฐ€ ๋กœ๋”ฉ๋˜๋ฉด jQuery ์‹คํ–‰

 $(document).ready(function(){ //(document).ready๋Š” ์ƒ๋žต ๊ฐ€๋Šฅ

  });
  
  
 $(function(){ 

  });



 -window๋กœ๋”ฉ :  HTML๋ฌธ์„œ์— <body>ํƒœ๊ทธ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ๋ชจ๋“  ๊ฐ์ฒด๊ฐ€ ๋กœ๋”ฉ๋˜๋ฉด ์‹คํ–‰

   load๋Š” ready๋ณด๋‹ค ๋กœ๋”ฉ์†๋„๊ฐ€ ๋А๋ฆผ

$(window).load(function(){
  
  });

 


*jQuery Selector

- CSS์˜ selector์™€ ๊ฐ™์Œ

- ์…€๋ ‰ํ„ฐ๋กœ ๋Œ€์ƒ์„ ์ฐพ๊ณ , ๊ทธ์— ๋Œ€ํ•ด ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ์„ ๋ถ€์—ฌํ•จ

 

 -id selector์‚ฌ์šฉ ("#id๋ช…")

   $(“#id๋ช…”).๊ธฐ๋Šฅ( function (){
        ๊ตฌํ˜„ํ•  ๊ธฐ๋Šฅ 
     } );

 

   -class select์‚ฌ์šฉ (".class๋ช…")

    $(“.class๋ช…”).๊ธฐ๋Šฅ( .. );

 

  - tag selector ("ํƒœ๊ทธ๋ช…")

  $(“ํƒœ๊ทธ๋ช…”).ํ•จ์ˆ˜๋ช…( .. );

 

  -multiple selector

  $(“ํƒœ๊ทธ๋ช… ,,,” ).ํ•จ์ˆ˜๋ช…( .. );

 

  - attribute selector

  $(“[์†์„ฑ๋ช…=‘๊ฐ’’]”).ํ•จ์ˆ˜๋ช…( .. );

 

 -sub selector

  $(“๋ถ€๋ชจํƒœ๊ทธ๋ช… > ์ž์‹ํƒœ๊ทธ๋ช…“).ํ•จ์ˆ˜๋ช…( .. );

 

-behavior selector๋Š” ์ง€์›ํ•˜์ง€ ์•Š๊ณ , hover() ํ•จ์ˆ˜๋กœ ๋Œ€์ฒดํ•จ

$(“๋Œ€์ƒ:hover”).ํ•จ์ˆ˜๋ช…( .. );  => $(“selector”).hover(  .. );

 

 :odd – ํ™€์ˆ˜ ๋ฒˆ์งธ์— ์ ์šฉ  
 :even – ์ง์ˆ˜ ๋ฒˆ์งธ์— ์ ์šฉ

  $(“๋Œ€์ƒ:odd”).ํ•จ์ˆ˜๋ช…( .. );  
  $(“๋Œ€์ƒ:even”).ํ•จ์ˆ˜๋ช…( .. );

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<script type="text/javascript">

$(function(){ 
//document ready๋Š” body์™€ ๊ฐ™์ด ๋™์ž‘ํ•จ (body์— ์–ด๋–ค ๋…ธ๋“œ/ํƒœ๊ทธ๊ฐ€ ์žˆ๋Š”์ง€ ๋กœ๋”ฉ/์ฝ์–ด๋“ค์ธ ํ›„ ๋™์ž‘ํ•จ/์ฝ”๋“œ์‹คํ–‰)
	
//id selector	
$("#div").css("background-color","#FF0000");

//class selector	
$(".p").css("font-size","25px");

//tag selector
$("td").css("border","2px dotted #FF0000");

//multiple selector - ๊ฐ™์€ ํƒœ๊ทธ๊ฐ€ ์—ฌ๋Ÿฌ๊ฐœ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ
$("span,strong,b").css("color","#0000FF");


//name selector (attribute selector)
$("[type='text']").css("font-size","20px");
$("[type='password']").css("font-size","50px");
	
	
//behavior selector
$("li:odd").css("background-color","#00FF00");
$("li:even").css("background-color","#FF0000");
$("tr:odd").css("background-color","#333")	;

});



</script>




</head>
<body>

<div id="div">div</div>
<p>jQuery</p>
<p class="p">selector</p>
<p>์ œ์ด์ฟผ๋ฆฌ</p>
<p class="p">์„ ํƒ์ž</p>

<table border="1">
<tr>
<th style="width:80px">์ด๋ฆ„</th>
<th style="width:60px">๋‚˜์ด</th>
<th style="width:300px">์ฃผ์†Œ</th>
</tr>
<tr>
<td>์œค์ค€</td>
<td>20</td>
<td>์„œ์šธ์‹œ ๊ฐ•๋‚จ๊ตฌ ์—ญ์‚ผ๋™</td>
</tr>
<tr>
<td>๊น€oo</td>
<td>25</td>
<td>๊ฒฝ๊ธฐ๋„ ์ˆ˜์›์‹œ ํŒ”๋‹ฌ๊ตฌ</td>
</tr>
<tr>
<td>์ดoo</td>
<td>23</td>
<td>์ธ์ฒœ์‹œ ๋ถ€ํ‰๊ตฌ ๋ถ€ํ‰๋™</td>
</tr>
</table><br>
<div>
<span>์˜ค๋Š˜์€</span> ๋ชฉ์š”์ผ์ž…๋‹ˆ๋‹ค<br>
๋‚ด์ผ์€ <strong>๊ธˆ์š”์ผ</strong>์ž…๋‹ˆ๋‹ค<br>
๋ชจ๋ ˆ๋Š” <b>ํ‡ผ</b>์ž…๋‹ˆ๋‹ค
</div>
<div>
<input type="text" name="name" class="inputBox" value="์ด๋ฆ„"/><br>
<input type="password" name="pass" class="inputBox" value="๋น„๋ฒˆ"/><br>
<input type="text" name="tel" value="์ „ํ™”๋ฒˆํ˜ธ" class="inputBox"/><br>
</div>
<ol>
	<li>์‚ฌ๊ณผ</li>
	<li>๋ฐฐ</li>
	<li>๋”ธ๊ธฐ</li>
	<li>ํฌ๋„</li>
	<li>๊ทค</li>
	<li>๊ฐ</li>
</ol>

</body>
</html>
์ €์ž‘์žํ‘œ์‹œ ๋น„์˜๋ฆฌ ๋ณ€๊ฒฝ๊ธˆ์ง€ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'๐Ÿ‘ฉโ€๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—… > JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

0306~0309 ๊ตญ๋น„ ์ˆ˜์—… jQuery events (blur, mouseover, mouseout, hover, mousemove, keydown, keyup), tabindex is() eachํ•จ์ˆ˜ ์ˆจ๊ธฐ๊ธฐ ๋ณด์ด๊ธฐ(show, hide, toggle, fadeIn, fadeOut, fadeToggle)  (0) 2023.03.13
0303 ๊ตญ๋น„ ์ˆ˜์—… JavaScript jQueryObject ํ•จ์ˆ˜(css, events, effect) HTML Form Control(val, focus, focusin, focusout)  (0) 2023.03.04
0228 ๊ตญ๋น„ ์ˆ˜์—… JavaScript Storage(sessionStorage, localStorage) JSON JSONObject eval ํ•จ์ˆ˜  (0) 2023.03.04
0227 ๊ตญ๋น„ ์ˆ˜์—… JavaScript ์ด๋ฒคํŠธ์ฒ˜๋ฆฌ(์ต๋ช…ํ•จ์ˆ˜, ๊ธฐ๋ช…ํ•จ์ˆ˜ ์‚ฌ์šฉ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด(location, history) ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ์ฒ˜๋ฆฌ popup์ฐฝ ์—ด๊ธฐ confirm dialog ๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ API  (0) 2023.02.28
0224 ๊ตญ๋น„ ์ˆ˜์—… JavaScript select์˜ ๊ฐ’ ์–ป๊ธฐ JavaScript์—์„œ ๋ฐœ์ƒํ•œ ๊ฐ’์„ HTML Form Control ์„ค์ •(value, checked, selected)  (0) 2023.02.26
    '๐Ÿ‘ฉ‍๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—…/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • 0306~0309 ๊ตญ๋น„ ์ˆ˜์—… jQuery events (blur, mouseover, mouseout, hover, mousemove, keydown, keyup), tabindex is() eachํ•จ์ˆ˜ ์ˆจ๊ธฐ๊ธฐ ๋ณด์ด๊ธฐ(show, hide, toggle, fadeIn, fadeOut, fadeToggle)
    • 0303 ๊ตญ๋น„ ์ˆ˜์—… JavaScript jQueryObject ํ•จ์ˆ˜(css, events, effect) HTML Form Control(val, focus, focusin, focusout)
    • 0228 ๊ตญ๋น„ ์ˆ˜์—… JavaScript Storage(sessionStorage, localStorage) JSON JSONObject eval ํ•จ์ˆ˜
    • 0227 ๊ตญ๋น„ ์ˆ˜์—… JavaScript ์ด๋ฒคํŠธ์ฒ˜๋ฆฌ(์ต๋ช…ํ•จ์ˆ˜, ๊ธฐ๋ช…ํ•จ์ˆ˜ ์‚ฌ์šฉ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด(location, history) ํ‚ค๋ณด๋“œ ์ด๋ฒคํŠธ์ฒ˜๋ฆฌ popup์ฐฝ ์—ด๊ธฐ confirm dialog ๋‹ค์Œ ์šฐํŽธ๋ฒˆํ˜ธ API

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”