|
|
| |
jQuery API - ¼Ó¼º(CSS), ÃßÃâ |
|
|
|
8³â Àü
|
- ¼Ó¼º(CSS)
.addClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class °ªÀ» Ãß°¡ÇÑ´Ù.
$("p").addClass("name"); // class = "name" Ãß°¡
.hasClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class À¯¹«¸¦ È®ÀÎÇÑ´Ù.
if($("p").hasClass("name")==true) // class °¡ "name"ÀÎÁö È®ÀÎ true/false
.removeClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class °ªÀ» Á¦°ÅÇÑ´Ù.
$("p").removeClass("name"); // class = "name"À» Á¦°Å
.toggleClass() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ class¸¦ Ãß°¡/Á¦°Å
$("p").toggleClass("name"); // class = "name"ÀÌ ÀÖÀ¸¸é Á¦°Å / ¾øÀ¸¸é Ãß°¡
.attr() : (1) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» ÀÔ·Â ¶Ç´Â º¯°æÇÑ´Ù.
$("a").attr("href", "http://www.googlec.co.kr"); // a ¿ä¼ÒÀÇ href °ªÀ» º¯°æÇÑ´Ù.
$("#content").attr({id:'content01', class:'style1'}); // id content ¿ä¼ÒÀÇ id¿Í class °ªÀ» º¯°æÇÑ´Ù.
(2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» °¡Á®¿Â´Ù.
$("a").attr("href"); // a ¿ä¼ÒÀÇ hrefÀÇ °ªÀ» °¡Á®¿Â´Ù.
.removeAttr() : ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» Á¦°ÅÇÑ´Ù.
$("a").removeAttr("href"); // a ¿ä¼ÒÀÇ "href" ¼Ó¼º°ªÀ» Á¦°ÅÇÑ´Ù.
.prop() : .attr()°ú µ¿ÀÏÇϳª, boolean °ªÀ» »ç¿ëÇÏ´Â ¼Ó¼º¿¡ »ç¿ëÇÑ´Ù. checked, selected, disabled
.removeProp() : removeProp()°ú µ¿ÀÏÇϳª, boolean °ªÀ» »ç¿ëÇÏ´Â ¼Ó¼º¿¡ »ç¿ëÇÑ´Ù. checked, selected, disabled
.css() : (1) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ css °ªÀ» »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù..
$("div").css("color", 'red'); // div ¿ä¼ÒÀÇ ±ÛÀÚ»öÀ» red·Î ¼³Á¤ÇÑ´Ù.
$("div").css({color:'red', border:'1px solid blue'}); // µ¿½Ã¿¡ ¿©·¯°³ÀÇ °ªÀ» ¼³Á¤ÇÒ ¼ö ÀÖ´Ù.
(2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ ¼Ó¼º°ªÀ» °¡Á®¿Â´Ù.
$("div").css("backgroundColor"); // div ¿ä¼ÒÀÇ backgroud-Color °ªÀ» °¡Á®¿Â´Ù.
Âü°í - cssÀÇ ¼Ó¼º¸í°ú jQuery¿¡¼ ¾²´Â ¼Ó¼º¸íÀº Çü½ÄÀÌ Á¶±Ý ´Ù¸£´Ù.
css : background-color , jQuery : backgroundColor
css : padding-left, jQuery : paddingLeft
.width() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ÇöÀçÀÇ °è»êµÈ ³ÐÀ̸¦ ¾ò°Å³ª ³ÐÀÌ °ªÀ» ¼³Á¤ÇÑ´Ù.
$("div").width(); // div ÀÇ ÇöÀç ³ÐÀÌ °ª (¼ýÀÚ·Î ¹Ýȯ, .css('width')´Â ¼ýÀÚµÚ¿¡ px°¡ ºÙ¾î ¹Ýȯ 400px)
$("div").width(30); // divÀÇ ³ÐÀ̸¦ 30À¸·Î ¼³Á¤ÇÑ´Ù. { 30, 30px, 30%, auto }
.innerWidth() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ paddingÀ» Æ÷ÇÔÇÑ ³ÐÀ̸¦ ¹ÝȯÇÑ´Ù. (border Á¦¿Ü)
$("div").innerWidth(); // div ÀÇ paddingÀ» Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ
.outerWidth() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ padding °ú border¸¦ Æ÷ÇÔÇÑ ³ÐÀ̸¦ ¹ÝȯÇÑ´Ù. (ÀÎÀÚ°ª true ¸é margin Æ÷ÇÔ)
$("div").outerWidth(); // div ÀÇ padding°ú border Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ
$("div").outerWidth(true); // div ÀÇ padding°ú border, margin Æ÷ÇÔÇÑ ÇöÀç ³ÐÀÌ
.height() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ÇöÀçÀÇ °è»êµÈ ³ôÀ̸¦ ¾ò°Å³ª ³ôÀÌ °ªÀ» ¼³Á¤ÇÑ´Ù.
$("div").height(); // div ÀÇ ÇöÀç ³ôÀÌ °ª (¼ýÀÚ·Î ¹Ýȯ, .css('height')´Â ¼ýÀÚµÚ¿¡ px°¡ ºÙ¾î ¹Ýȯ 400px)
$("div").height(30); // divÀÇ ³ôÀ̸¦ 30À¸·Î ¼³Á¤ÇÑ´Ù. { 30, 30px, 30%, auto }
.innerHeight() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ paddingÀ» Æ÷ÇÔÇÑ ³ôÀ̸¦ ¹ÝȯÇÑ´Ù. (border Á¦¿Ü)
$("div").innerHeight(); // div ÀÇ paddingÀ» Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ
.outerHeight() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ padding°ú border¸¦ Æ÷ÇÔÇÑ ³ôÀ̸¦ ¹ÝȯÇÑ´Ù. (ÀÎÀÚ°ª true¸é margin Æ÷ÇÔ)
$("div").outerHeight(); // div ÀÇ padding°ú border¸¦ Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ
$("div").outerHeight(true); // div ÀÇ padding°ú border, marginÀ» Æ÷ÇÔÇÑ ÇöÀç ³ôÀÌ
.data() : (1) ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ °ªÀ» »ðÀÔ ¶Ç´Â º¯°æÇÑ´Ù.
$("div").data("foo", '52'); // div ¿ä¼Ò¿¡ "foo" ¶ó´Â key·Î 52¸¦ »ðÀÔÇÑ´Ù.
$("div").data("bar", {color:'red', border:'1px solid blue'}); // "bar" ¶ó´Â key·Î ¹è¿ »ðÀÔ
$("div").data({baz : [1,2,3]}); // baz ¹è¿ »ðÀÔ
(2) ÁöÁ¤ÇÑ ¿ä¼ÒÀÇ °ªÀ» °¡Á®¿Â´Ù.
$("div").data("foo"); // div ¿ä¼Ò¿¡ "foo"¶ó´Â key·Î ÀúÀåµÈ °ªÀ» °¡Á®¿Â´Ù.
$("div").data(); // div ¿ä¼Ò¿¡ Àüü °ªÀ» °¡Á®¿Â´Ù. {foo:52, bar:{color....}, baz:[1,2,3,4]}
$.data() <jQuery.data()> : ù¹ø° ÀÎÀÚÀÇ ¿ä¼Ò¿¡ µÎ¹ø° ÀÎÀÚ¸¦ Å°·Î ¼¼¹ø° °ªÀ» ÀúÀåÇÑ´Ù. .data()¿Í µ¿ÀÏ
$.data(document.body, "foo",'52'); // ÆäÀÌÁö body ¿ä¼Ò¿¡ foo¸¦ Å°·Î 52 »ðÀÔ
.removeData() : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.
$("div").data("foo"); // div ¿ä¼Ò¿¡ "foo" ¶ó´Â keyÀÇ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.
$.removeData() <jQuery.removeData()> : ÁöÁ¤ÇÑ ¿ä¼Ò¿¡ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.
$.data($("div"), "foo"); // div ¿ä¼Ò¿¡ "foo" ¶ó´Â keyÀÇ µ¥ÀÌÅ͸¦ Á¦°ÅÇÑ´Ù.
$.hasData() <jQuery.hasData()> : $.data()¿¡ ÀÇÇØ ÀúÀåµÈ ÀÓÀÇÀÇ °ªµéÀÌ ÀÖ´ÂÁö È®ÀÎÇÑ´Ù. true / false
if(.$.hasData(document.body)==true) // document.body¿¡ data°¡ ÀÖÀ¸¸é true
- ̧̉
$.browser <jQuery.browser> : JQuery°¡ ½ÇÇàµÇ´Â browserÀÇ version, browser Á¾·ù¸¦ Map Çü½ÄÀ¸·Î ¸®ÅÏÇÑ´Ù.
$.each($.browser,function(i, val){
result += i +":" + val; // °á°ú msie:true version:7.0
}
Âü°í - $.browser.version : ºê¶ó¿ìÀúÀÇ ¹öÀüÀ» ¹®ÀÚ¿·Î ¸®ÅÏ
$.browser.safari : »çÆĸ® ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ
$.browser.opera : ¿ÀÆä¶ó ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ
$.browser.msie : Internet Explorer ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ
$.browser.mozilla : Mozilla ºê¶ó¿ìÀú ¿©ºÎ true & false ¸®ÅÏ
$.support <jQuery.support> : ºê¶ó¿ìÀú¸¶´ÙÀÇ ±â´ÉÀÇ Â÷À̳ª ¹ö±×µîÀÇ Á¤º¸¸¦ ±¸Á¶Ã¼·Î ¹Ýȯ ; 1.3 ÀÌÈÄ ¹öÀü¿¡¼´Â $.browser ´ë½Å $.support¸¦ »ç¿ë ±ÇÀå
¿É¼Ç°ª : http://api.jquery.com/jQuery.support/
.size() : ¼±ÅÃÇÑ ¿ä¼Ò ¹è¿ÀÇ ±æÀ̸¦ ¹ÝȯÇÑ´Ù.
var num = $("div").size(); // numÀº divÀÇ ¹è¿ Å©±â¸¦ ¼ýÀÚ·Î ¹ÝȯÇÑ´Ù.
.length : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ¹è¿ÀÇ ±æÀ̸¦ ¹ÝȯÇÑ´Ù. (¼±Åà ¿ä¼Ò¿¡ "" ´Â Àû¿ëÀ̾ȵȴÙ. '' »ç¿ë)
var num = $('div').length; // numÀº divÀÇ ¹è¿ Å©±â¸¦ ¼ýÀÚ·Î ¹ÝȯÇÑ´Ù
.offSet() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ Àüü ¹®¼ ³»(document)¿¡¼ÀÇ left, top ÁÂÇ¥¸¦ ±¸ÇÑ´Ù.
var offset = $('div:last').offset(); // div ¸¶Áö¸· ¿ä¼ÒÀÇ left, top ÁÂÇ¥ ¹Ýȯ offset.left / offset.top
.position() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ºÎ¸ð¿ä¼Ò¸¦ ±âÁØÀ¸·Î left, top ÁÂÇ¥¸¦ ±¸ÇÑ´Ù.
var position = $('div:last').position(); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ºÎ¸ð·ÎºÎÅÍÀÇ left, top ÁÂÇ¥ ¹Ýȯ position.left / position.top
.scrollLeft() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ½ºÅ©·Ñ¹ÙÀÇ ¼öÆò À§Ä¡(xÁÂÇ¥)¸¦ ¾ò°Å³ª º¯°æÇÑ´Ù.
var x= $('div:last').scrollLeft(); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ÇöÀç ¼öÆò ½ºÅ©·Ñ xÁÂÇ¥¸¦ ¹ÝȯÇÑ´Ù.
var x= $('div:last').scrollLeft(300); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ¼öÆò ½ºÅ©·Ñ xÁÂÇ¥¸¦ 300À¸·Î À̵¿ÇÑ´Ù.
.scrollTop() : ¼±ÅÃÇÑ ¿ä¼ÒÀÇ ½ºÅ©·Ñ¹ÙÀÇ ¼öÁ÷ À§Ä¡(yÁÂÇ¥)¸¦ ¾ò°Å³ª º¯°æÇÑ´Ù.
var x= $('div:last').scrollTop(); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ÇöÀç ¼öÁ÷ ½ºÅ©·Ñ yÁÂÇ¥¸¦ ¹ÝȯÇÑ´Ù.
var x= $('div:last').scrollTop(300); // div ¸¶Áö¸· ¿ä¼ÒÀÇ ¼öÁ÷ ½ºÅ©·Ñ yÁÂÇ¥¸¦ 300À¸·Î À̵¿ÇÑ´Ù.
$.type() <jQuery.type()> : ÀÎÀÚÀÇ objÀÇ typeÀ» ¹ÝȯÇÑ´Ù.
$.type(undefined) === "undefined" //
$.type() === "undefined" //
$.type(null) === "null" //
$.type(true) === "boolean" //
$.type(3) === "number" //
$.type("test") === "string" //
$.type(function(){}) === "function" //
$.type([]) === "array" //
$.type(new Date()) === "date" //
$.type(/test/) === "regexp" //
$.now() <jQuery.now> : ÇöÀç ½Ã°£À» number·Î ¹Ýȯ
$.now() // result : 1340954729007 (new Data).getTime();
$.fx.interval<jQuery.fx.interval> : ºê¶ó¿ìÁ® ¾Ö´Ï¸ÞÀÌ¼Ç ÇÁ·¹ÀÓ Á¶Àý
/ $.fx.interval = 1000; // ÇÁ·¹ÀÓÀ» 1000À¸·Î º¯°æÇÑ´Ù.
$.fx.off<jQuery.fx.off> : ¸ðµç ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ Àü¿ªÀûÀ¸·Î ²ö´Ù.
/ $.fx.off = true; // ¾Ö´Ï¸ÞÀÌ¼Ç È¿°ú¸¦ ²ö´Ù. |
|
̵̧ : 375 |
̵̧
¸ñ·Ï
|
|
| |
|