JavaScript&Platform/jQuery2020. 9. 10. 10:47

[jQuery] select (combo) selected 선택하기 : prop


<select id="choice">
   <option value="1">하나</option>
   <option value="2">둘</option>
   <option value="3">셋</option>
</select>

<script>

    $("#choice").val("2").prop("selected",true);

</script>

 

* jquery 환경에서 실행 됩니다.

+ 추가 +

change 이벤트가 발생하지 않을 때

    $("#choice").val("1").prop("selected",true).change();

 

끝

저작자표시 비영리

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] Div click index  (0) 2018.07.10
[jQuery] .load() 사용  (0) 2016.12.29
[jQuery] Ajax Call pattern 호출 패턴  (0) 2016.05.12
[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
Posted by 비니미니파
JavaScript&Platform/jQuery2018. 7. 10. 17:51

[jQuery] Div click index

<div class="row"> 
    <div class="foo"">aaa</div> 
    <div class="foo"">bbb</div> 
    <div class="foo"">ccc</div> 
</div
 

Div  class foo 를 click 했을 때 index 를 찾아 보자


$( ".foo").click(function() {
    var index = $(".foo").index(this);
    cosole.log(index);
});

Browser Console ( chrome + F12 ) 에 찍히는 것을 확인할 수 있다!

aaa click -> 0

bbb click -> 1

ccc click -> 2

저작자표시 비영리

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] select (combo) selected 선택하기 : prop  (0) 2020.09.10
[jQuery] .load() 사용  (0) 2016.12.29
[jQuery] Ajax Call pattern 호출 패턴  (0) 2016.05.12
[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
Posted by 비니미니파
JavaScript&Platform/jQuery2016. 12. 29. 14:29

[jQuery] .load() 사용

Div layer 를 이용한 팝업 호출 시

ajax 대신 load 를 이용하면 간단 히 작성 할 수 있음.

변경전

// Popup 
var popup = {};
// 
popup.openPop1 = function() {
    $.ajax({
        url: "popup/pop1.html",
        async: false,
        success: function(html){   
            $("#popDiv").html(html);
            // Popup 호출 후 실행 function
            popDiv.show();
        }
    });
}

변경 후

// Popup 
var popup = {};
popup.openPop1 = function() {
   $("#popDiv").load("popup/pop1.html",function(){
       // Popup 호출 후 실행 function
       popDiv.show();
   });
}

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] select (combo) selected 선택하기 : prop  (0) 2020.09.10
[jQuery] Div click index  (0) 2018.07.10
[jQuery] Ajax Call pattern 호출 패턴  (0) 2016.05.12
[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
Posted by 비니미니파
JavaScript&Platform/jQuery2016. 5. 12. 10:46

[jQuery] Ajax Call pattern 호출 패턴

 var url = ""; // URL
 var params = ""; // Request Parameters

 $.ajax({
     type:"POST",
     url: url,
     dataType: "json", // html, xml, text, script, json, jsonp
     async: true, // true, false
     data: params,  
 })
 .done(function(data){
     // Success Call Back
     console.log("SUCCESS..............");
 })
 .fail(function( e ) {
     // Fail 
     console.log("FAIL..............");
 });

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] Div click index  (0) 2018.07.10
[jQuery] .load() 사용  (0) 2016.12.29
[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery] jquery ajax  (0) 2013.04.08
Posted by 비니미니파
JavaScript&Platform/jQuery2014. 12. 12. 12:01

[jQuery] table row 홀수, 짝수 배경색 지정하기


<script>
       // table row background-color change
        $(function(){
        $('tr:odd').css('background-color','#FFFFFF');  // 홀수
        $('tr:even').css('background-color','#f6f6f6');   // 짝수
        $('tr:first').css('background-color','#cdcdcd');  // 테이블 헤드
        });        
 </script>

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] .load() 사용  (0) 2016.12.29
[jQuery] Ajax Call pattern 호출 패턴  (0) 2016.05.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery] jquery ajax  (0) 2013.04.08
[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...  (0) 2013.01.18
Posted by 비니미니파
JavaScript&Platform/jQuery2014. 12. 11. 09:50

[jQuery] 숫자 자동 증가 animation

구글링으로 찾은 예제를 조금 수정하였다.

다음에 재활용하기 위해 function 으로 만들어 보았다.

// 숫자 자동증가
// ex)  autoIncrementVal( obj, val, durationVal );
//      autoIncrementVal( "#testVal", 95, 2500 );
var autoIncrementVal = function(obj, val, durationVal)
{
 $({someValue: 0}).animate({someValue: val}, {
     duration: durationVal,
     easing:'swing', // can be anything
     step: function() { // called on every step
      // Update the element's text with rounded-up value:
      $(obj).text(Math.ceil(this.someValue));
     }         
    });
}

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] Ajax Call pattern 호출 패턴  (0) 2016.05.12
[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] jquery ajax  (0) 2013.04.08
[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...  (0) 2013.01.18
[jQuery] 버튼 + 이미지쇼  (0) 2013.01.17
Posted by 비니미니파
JavaScript&Platform/jQuery2013. 4. 8. 10:52

[jQuery] jquery ajax

// ajax 를 이용한 처리
function memo_ajax()
{
      var memo=$("#memo").val();

 var url="memo_ok.php";
 var params="memo="+memo;

 $.ajax({
  type:"POST",
  url:url,
  data:params,
  success:function(txt){
   $("#memo").text(txt);
  },
  error:function(e){
   alert(e.responseText);
  }
 });

}

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...  (0) 2013.01.18
[jQuery] 버튼 + 이미지쇼  (0) 2013.01.17
[jQuery] Adipoli jQuery Image Hover Plugin  (0) 2012.11.22
Posted by 비니미니파
JavaScript&Platform/jQuery2013. 1. 18. 13:35

[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...

대충 만듬....

<!DOCTYPE>
<HTML>
 <HEAD>
  <TITLE> Div Resize </TITLE>

<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>


<style>
div { border : 1px solid #ccc }

#row1 div {
 position: absolute;
}
#row2 div {
 position: absolute;
}

</style>


<script>

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

});


$(window).resize(function(){ 
 setSize();
});

function setSize() {
 var cellLeft = null;
 var rowHeight = null;
 var rowTop = 0;
    var rowWidth = $('#row1').innerWidth();

 var rowNum = $("#wrapper").children().length;
 var divNum = $("#row1").children().length;

 for ( r = 1; r <= rowNum ; r++ )
 {

  cellLeft = 0;

  $('#row'+r+' .quarter').css({'width':rowWidth/4} ); 
  $('#row'+r+' .half').css({'width':rowWidth/2} );

  for ( i = 1; i <= divNum ; i++ )
  {
   cellWidth = $('#row'+r+' .cell' + i).width();

   $('#row'+r+' .cell'+i).css({left:cellLeft, top: rowTop});

   cellLeft += cellWidth;
  }

  rowHeight = $('#row'+r+' .cell1').height();

  rowTop += rowHeight;

 }
}

</script>

 </HEAD>

 <BODY id ="body">
<div id="wrapper">
 <div id="row1">
  <div class="cell1 quarter">
   <img class="quarter" src="11.jpg">
  </div>
  <div class="cell2 quarter">
   <img class="quarter" src="22.jpg">
  </div>
  <div class="cell3 half">
   <img class="half" src="33.jpg">
  </div>
 </div>
 <div id="row2">
  <div class="cell1 quarter">
   <img class="quarter" src="11.jpg">
  </div>
  <div class="cell2 half">
   <img class="half" src="33.jpg">
  </div>
  <div class="cell3 quarter">
   <img class="quarter" src="22.jpg">
  </div>
 </div>

</div>
 
 
 </BODY>
</HTML>

 

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery] jquery ajax  (0) 2013.04.08
[jQuery] 버튼 + 이미지쇼  (0) 2013.01.17
[jQuery] Adipoli jQuery Image Hover Plugin  (0) 2012.11.22
Posted by 비니미니파
JavaScript&Platform/jQuery2013. 1. 17. 17:50

[jQuery] 버튼 + 이미지쇼

<script>

$(function(){

 var tabOjb = null;
 var mapObj = null;

 // 탭 li 클릭 시
 $("#tabmenu li").click(function(){
  
  for ( var i=1; i < 5 ; i++ )
  {
   tabOjb = "#tab" + i;   

   var className = $(tabOjb).attr("class"); // object class name

   if ( className == "on" )  // class 가 on 일 경우 만
   {
    $(tabOjb).removeClass("on");
    $("#map"+i).fadeOut(1000);
   }  

   if ( tabOjb == "#"+this.id ) // tab 클릭 시
   {
    $(tabOjb).addClass("on");
    $("#map"+i).fadeIn(1000);
   }
  }
 });
});

</script>

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery] jquery ajax  (0) 2013.04.08
[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...  (0) 2013.01.18
[jQuery] Adipoli jQuery Image Hover Plugin  (0) 2012.11.22
Posted by 비니미니파
JavaScript&Platform/jQuery2012. 11. 22. 15:24

[jQuery] Adipoli jQuery Image Hover Plugin

이미지 호버 시 밝아지는 이펙트... ^^ 좋네요...

Adipoli jQuery Image Hover Plugin

http://jobyj.in/adipoli/

 

'JavaScript&Platform > jQuery' 카테고리의 다른 글

[jQuery] table row 홀수, 짝수 배경색 지정하기  (0) 2014.12.12
[jQuery] 숫자 자동 증가 animation  (0) 2014.12.11
[jQuery] jquery ajax  (0) 2013.04.08
[jQuery]브라우저 리사이즈 시 이미지 자동 리사이즈...  (0) 2013.01.18
[jQuery] 버튼 + 이미지쇼  (0) 2013.01.17
Posted by 비니미니파

티스토리툴바