์ž๋Š” ์”จ์•—
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ
    • ๐Ÿฃ ๊ธฐ์ดˆ ๊ฐœ๋…
    • ๐Ÿ“Ž ์œ ํŠœ๋ธŒ
    • ๐Ÿ’พ ์กฐ๊ฐ๋ชจ์Œ
    • ๐Ÿ‘ฉ‍๐Ÿ’ป 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 ์ •์ƒ์šฐ.
์ž๋Š” ์”จ์•—

๐ŸŒฑ

๐Ÿ‘ฉ‍๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—…/JavaScript

0303 ๊ตญ๋น„ ์ˆ˜์—… JavaScript jQueryObject ํ•จ์ˆ˜(css, events, effect) HTML Form Control(val, focus, focusin, focusout)

2023. 3. 4. 15:43

*jQueryObject ํ•จ์ˆ˜

 

 *CSSํ•จ์ˆ˜ 

: selector๋กœ ์„ ํƒ๋œ ๋Œ€์ƒ์— StyleSheet๋ฅผ ์„ค์ •

- css()

  -์„ ํƒ๋œ ๋Œ€์ƒ์— ์†์„ฑ ๊ฐ’์„ ์–ป์„ ๋•Œ

   var value=$(“selector”).css(“CSS์†์„ฑ๋ช…”);



 -์„ ํƒ๋œ ๋Œ€์ƒ์— ์†์„ฑ ๊ฐ’ ํ•˜๋‚˜๋ฅผ ์„ค์ •ํ•  ๋•Œ

$(“selector”).css(“์ถ”๊ฐ€ํ•  ์†์„ฑ๋ช…”, “์†์„ฑ๊ฐ’”);



 

   

- addClass()

   - style์— ์ •์˜๋œ class๋ฅผ ์„ ํƒ๋œ ๋Œ€์ƒ์— ์ ์šฉ์‹œํ‚ฌ ๋•Œ

  $(“selector”).addClass(“์‚ฌ์šฉํ•  class๋ช…”); // <style>์— ์ •์˜๋˜์–ด์žˆ์Œ




  

 

 - removeClass()

    - ์„ ํƒ๋œ ๋Œ€์ƒ์— ๋ถ€์—ฌ๋œ class ์†์„ฑ์„ ์‚ญ์ œํ•  ๋•Œ

     $(“selector”).removeClass(“์ œ๊ฑฐํ•  class๋ช…”);

 


*eventsํ•จ์ˆ˜


 ๋ฌธ๋ฒ•)

  $(“selector”).์ด๋ฒคํŠธํ•จ์ˆ˜(function(){
    ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ œ๊ณตํ•  ์ฝ”๋“œ… 
   } );

 


  -click : ๋ชจ๋“  ํƒœ๊ทธ์— ์ ์šฉํ•  ์ˆ˜ ์žˆ์Œ

 $(“selector”).click(function(){
        ํด๋ฆญ๋˜์—ˆ์„ ๋•Œ ์ œ๊ณตํ•  ์ฝ”๋“œ 
    });



 

   -change : ํ‚ค ์ž…๋ ฅ์ด ๊ฐ€๋Šฅํ•œ Form Control, <select>

 $(“selector”).change(function(){

      });

 


*effectํ•จ์ˆ˜

-  ํŠน์ • ๋Œ€์ƒ์„ ์ˆจ๊ธธ ๋•Œ
   $(“selector”).hide();


-  ํŠน์ • ๋Œ€์ƒ์„ ๋ณด์—ฌ์ค„ ๋•Œ
  $(“selector”).show();
  
-   ๋Œ€์ƒ์˜ ์ƒํƒœ ๋ฐ˜์ „( ์ˆจ๊น€-> ๋ณด์ž„, ๋ณด์ž„->์ˆจ๊น€)
   $(“selector”).toggle();


 

*HTML Form Control

  -๊ฐ’ ์–ป๊ธฐ

 var value=$(“selector”).val();

-๊ฐ’ ์„ค์ •

   $(“selector”).val( ๊ฐ’ )

- ์ปค์„œ ์š”์ฒญ

 $(“selector”).focus();

 


- focusin : ์ปค์„œ๋ฅผ ๊ฐ€์กŒ์„ ๋•Œ


  $(“selector”).focusin( function() {
      ์ปค์„œ๊ฐ€ ๋“ค์–ด์™”์„ ๋•Œ ์ฒ˜๋ฆฌํ•  ์ฝ”๋“œ
   });

 

- focusout : ์ปค์„œ๊ฐ€ ๋น ์ ธ๋‚˜๊ฐ”์„ ๋•Œ

  $(“selector”).focusout( function() {
     ์ปค์„œ๊ฐ€ ๋น ์ ธ๋‚˜๊ฐ”์„ ๋•Œ ์ฒ˜๋ฆฌํ•  ์ฝ”๋“œ
  });

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

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

0328 JavaScript select ์„ค์ • :eq selector ์†์„ฑ append remove plugin smart editor(summernote) get๋ฐฉ์‹ post๋ฐฉ์‹  (0) 2023.03.29
0306~0309 ๊ตญ๋น„ ์ˆ˜์—… jQuery events (blur, mouseover, mouseout, hover, mousemove, keydown, keyup), tabindex is() eachํ•จ์ˆ˜ ์ˆจ๊ธฐ๊ธฐ ๋ณด์ด๊ธฐ(show, hide, toggle, fadeIn, fadeOut, fadeToggle)  (0) 2023.03.13
0302 ๊ตญ๋น„ ์ˆ˜์—… JavaScript JSONArray ๋ณตํ•ฉ ํ˜•ํƒœ closure jQuery CDN jQuery ๋กœ๋”ฉ(document, window) jQuery Selector(id, class, tag, multiple, attribute, sub, hoverํ•จ์ˆ˜)  (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
    '๐Ÿ‘ฉ‍๐Ÿ’ป ๊ตญ๋น„ ์ˆ˜์—…/JavaScript' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • 0328 JavaScript select ์„ค์ • :eq selector ์†์„ฑ append remove plugin smart editor(summernote) get๋ฐฉ์‹ post๋ฐฉ์‹
    • 0306~0309 ๊ตญ๋น„ ์ˆ˜์—… jQuery events (blur, mouseover, mouseout, hover, mousemove, keydown, keyup), tabindex is() eachํ•จ์ˆ˜ ์ˆจ๊ธฐ๊ธฐ ๋ณด์ด๊ธฐ(show, hide, toggle, fadeIn, fadeOut, fadeToggle)
    • 0302 ๊ตญ๋น„ ์ˆ˜์—… JavaScript JSONArray ๋ณตํ•ฉ ํ˜•ํƒœ closure jQuery CDN jQuery ๋กœ๋”ฉ(document, window) jQuery Selector(id, class, tag, multiple, attribute, sub, hoverํ•จ์ˆ˜)
    • 0228 ๊ตญ๋น„ ์ˆ˜์—… JavaScript Storage(sessionStorage, localStorage) JSON JSONObject eval ํ•จ์ˆ˜

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