'javascript/jquery'에 해당되는 글 3건

  1. 2013.08.14 JavaScript 형변환 (OKJSP 펌)
  2. 2013.08.06 jquery selectbox(중요) 1
  3. 2013.03.25 jQuery selector
javascript/jquery2013. 8. 14. 16:40

보통 자바에서 parseInt 쓰던 습관으로 자바스크립트에서도 

parseInt("10") 

parseInt("10",10) 

이렇게 쓰곤 하는데 만약 공백이 들어간다면 NaN 을 리턴해요. 


-------------- 자바스크립트에서는 형변환 -------------- 

var a = "100" 

var b = 5 

a+b // "1005" 

+a+b // 105 

a-0+b // 105 


+a, a-0 외에도 a*1 이런식으로 바꿔줄수가 있습니다. 

만약 공백인경우에는 0을 리턴하구요. 


parseInt 를 쓸때 진법을 명시안해주면 위와 같은 방법에 비해 속도가 매우 느리다고 합니다. 



 --------------  비트연산 기호를 사용한 형변환 -------------- 


var seven = "07"; 

// 그냥 더하면 문자열 결합된다... 

seven + 1; // "071" 


// bitwise 

~~seven + 1; // 8 

(seven << 0) + 1; // 8 

(seven >> 0) + 1; // 8 


자바스크립트에서 비트연산을 하게 되면 언어 명세상 문자열을 Uint32 형으로 강제변환하기에 가능한 꼼수입니다. 

이 방식은 더구나 속도도 빠른걸로 알고 있네요 :) 

다만 문자열에 숫자가 아닌 문자가 있다면 결과값은 항상 0입니다; parseInt와는 다르게;;; 


객체의 숫자형 변환도 가능한데 valueOf를 오버라이딩 해주시면 됩니다. 

var obj = { 

value: "백", 

valueOf: function(){ return 100; } 

}; 

obj - 1 // 99 



http://stackoverflow.com/questions/10841204/vs-parseint 


Using ~~x is often done because: 

1. It's usually faster than calling a method. 

2. It's faster to type than anything else. 

3. It makes power users feel cool because it's sort of inscrutable and also sort of justifiable. :) 


3번째 이유가 ㅋㅋ

'javascript/jquery' 카테고리의 다른 글

jquery selectbox(중요)  (1) 2013.08.06
jQuery selector  (0) 2013.03.25
Posted by 유기농농부
javascript/jquery2013. 8. 6. 13:08

jQuery로 선택된 값 읽기

$("#select_box option:selected").val();
$("select[name=selectbox]").val();

jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected")); 

// 셀렉트 박스 옵션에 추가(기존 옵션 뒤쪽으로 추가)

$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// 옵션 시작 부분(맨 앞에) 추가
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// 옵션값을 새롭게 정의
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// 옵션값의 인덱스 번호를 변경
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// 2번 인덱스의 값을 선택된 상태로 변경
$("#myselect option:eq(2)").attr("selected", "selected");

// 텍스트 내용으로 선택된 상태로 변경
$("#myselect").val("Some oranges").attr("selected", "selected");

// 선택된 옵션의 값을 변경
$("#myselect").val("2");

// index번호가 0인것을 제거
$("#myselect option:eq(0)").remove();

// 첫번째 옵션 엘리먼트를 제거
$("#myselect option:first").remove();

// 마지막 옵션 엘리먼트를 제거
$("#myselect option:last").remove();

// 선택된 텍스트 알림으로 보이기
alert($("#myselect option:selected").text());

// 선택된 값 알림으로 보이기
alert($("#myselect option:selected").val());

// 선택된 옵션의 인덱스 번호 보이기
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// 0번 인덱스 다음으로 옵션을 추가
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번 인덱스 이전에 옵션을 추가
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// select 박스의 값이 변경되었을 때 알링으로 값과 텍스트 보이기
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});


'javascript/jquery' 카테고리의 다른 글

JavaScript 형변환 (OKJSP 펌)  (0) 2013.08.14
jQuery selector  (0) 2013.03.25
Posted by 유기농농부
javascript/jquery2013. 3. 25. 10:49

jQuery selector

1. $('*') : 모든 요소를 선택

2. $('#l') : 아이디가 l 인 모든 요소 선택

3. $('E') : 태그 이름이 E인 모든 요소 선택

4. $('.C') : 클래스 이름이 C가 지정된 모든 요소 선택

5. $('E F') : E 요소의 자식 요소 가운데 태그 이름이 F인 모든 요소 선택

6. $('E.C') : E 요소 가운데 클래스 이름이 C인 모든 요소 선택

7. $('E .C') : E 요소의 자식 노드 가운데 클래스 이름인 C인 모든 요소 선택

8. $('E > F') : E 요소의 자식 요소 가운데 다음에 위치하는 모든 F 요소 선택

9. $('E+F') : E의 형제 요소 가운데 바로 다음에 위치하는 F 요소 선택

10. $('E~F') : E의 형제 요소 가운데 다음에 위치하는 모든 F 요소 선택

11. $('E:has(F)') : F요소를 하나 이상 포함하는 E 요소 선택 (ex : $('div:has(p)').css();)

12. $('E[A]') : 속성 A를 포함한 모든 E요소를 선택 (ex : $(':[data-test]').css();)

13. $('E[A=V]') : 속성 A의 값이 V인 모든 E 요소 선택

14. $('E[A^=V]') : 속성 A의 값이 V로 시작되는 모든 E 요소 선택

15. $('E[A$=V]') : 속성 A의 값이 V로 끝나는 모든 E 요소 선택

16. $('E[A*=V]') : 속성 A의 값이 V를 포함하는 모든 E 요소 선택

17. $('div:first') : 전체 리스트의 첫 번째 요소 선택

18. $('div:first-child') : 각 리스트의 첫 번째 요소 선택

19. $('div:last') : 전체 리스트의 마지막 요소 선택

20. $('div:last-child') : 각 리스트의 마지막 요소 선택

21. $('div:only-child') : 형제 노드가 없는 모든 요소 선택

22. $('div:even') : 전체 리스트에서 짝수(even) 또는 홀수( odd) 번째 위치한 모든 요소 선택

21. $('div:nth-child(1)') : 각 리스트의 N번째에 해당하는 요소 선택

22. $('div:eq(1)') : 리스트 전체에서 N번째에 해당하는 요소 선택

23. $('div:gt(1)') : 리스트 전체에서 N번째 이후의 모든 요소 선택

24. $('div:lt(1)') : 리스트 전체에서 N 번째 이전의 모든 요소 선택



<!-- css 적용 example --!>


html table에 클래스가 table인놈 tbody의 tr에서 두번째 td를 찾아 그 안에 a태그의 css를 변경 ( 두개는 같은 표현 )

$('table.table tbody tr').find('td:eq(1) > a').css("color", "#050099");

$('table.table tbody tr').find('td:eq(1)').children('a').css("color", "#050099");

$('table.table tbody tr').find('td:eq(1)').css("color", "#050099"); ->a태그 제외하고 td의 css변경


html table에 클래스가 table인놈 tbody의 tr갯수만큼 반복 

$('table.table tbody tr').each(function(index){

}); 

BUT!! css 적용은 스크립트보다 table.table tbody tr td.title a {color: #050099;} 선언하는것이 올바르다.


tr.hoverline:hover {

    background-color: #eaf2fa;

}

table.table tbody tr td.title a {color: #050099;}



'javascript/jquery' 카테고리의 다른 글

JavaScript 형변환 (OKJSP 펌)  (0) 2013.08.14
jquery selectbox(중요)  (1) 2013.08.06
Posted by 유기농농부