목록Javascript (12)
개발이야기
select 태그의 option에서 data 속성을 불러올때는 #("id").data("data속성값"); 으로는 불러오지 못한다. 여기선 $("#id").find("option:selected").data("data속성값"); 이런식으로 해주어야 한다. 출처 : https://islet4you.tistory.com/entry/query-select-data-%EC%86%8D%EC%84%B1%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0
this is first this is second 실행 시 출력되는 화면은 다음과 같다. aa bb 즉 html은 태그 내용까지 변경이 가능하고, text는 태그가 아닌 단순 문자열만 변경이 가능하다. 실행 후, $val.html()과 $val.text()를 각각 실행해보면 $val.html(); // aa 출력 $val.text(); // aa 출력 라는 결과가 나온다.
자바스크립트 dom 객체는 div, p 태그 등을 getElementById 등으로 가져온 객체이다. ex) test 여기서 val에 자바스크립트 dom 객체값이 생성된다. 제이쿼리 객체의 경우는 ex) test 이런식으로 생성하며, $val에 제이쿼리 객체가 생성되어 제이쿼리의 메서드를 사용할 수 있게 된다. $(this) 와 같이 클릭했을때의 특정 객체를 가져올때 사용하는 this도 자바스크립트 dom객체이며, $(this) 이렇게 제이쿼리로 감싸면 제이쿼리 객체가 된다.
filter("선택자")는 현재 선택된 노드들 중에서만 선택 find("선택자")는 현재 선택된 노드의 자식, 자손 노드들에서 선택(현재 선택된 노드는 제외)
1 2 3 4 위 코드처럼, $divs[1]과 $divs.get(1)은 자바스크립트 dom 객체를 가져오므로, 해당 객체에서는 제이쿼리 메소드를 사용하지 못한다. $divs.eq(2)은 div 목록중 3번째 인덱스에 해당하는 제이쿼리 객체를 불러온다. 따라서 이 객체에서는 제이쿼리 메소드를 사용할 수 있다.
보통 자바스크립트 function을 보면 function hello(name){ alert(name + "님 환영합니다."); } hello("홍길동"); 이런식으로 구성되어 있다. 여기에 매개변수 name을 없애고 arguments를 활용해도 된다. 즉, function Hello(){ alert(arguments[0] + "님 환영합니다."); } hello("홍길동"); 이렇게 쓸 수 있다. arguments는 매개변수에 따라 arguments[0], arguments[1] 등 이렇게 쓰면 된다.
불러오고자 할 웹페이지가 https 통신을 할 경우, 반드시 https로 기재해서 불러와야한다. ex) 만약 http로 불러올 경우 제대로 불러오지 못해 에러가 발생한다.
자바스크립트의 클로저의 특성을 활용하면, 자바와 같은 객체지향 언어의 캡슐화처럼 활용할 수 있다. function Person(name, age){ var thisName = name; var thisAge = age; return{ getName : function() {return thisName;}, getAge : function() {return thisAge;}, setName : function(x) {thisName = x;}, setAge : function(x) {thisAge = x;} }; } var user = Person("hoon", 30); console.log(user.getName());// hoon console.log(user.getAge());// 30 user.se..
var $element = $(this); 이렇게 선언하면, $(this).addClass('test'); 대신 $element.addClass('test');로 대체 가능하다.
jQuery를 보면 $('div')[0] 또는 $("#id")[0] 과 같이 index를 뒤에 붙이는 경우가 있다. 이 경우는 제이쿼리로 받아온 요소의 경우는 제이쿼리에서 제공하는 메소드밖에 사용하지 못하기에, DOM 메서드와 속성을 실행하려고 할땐 이와 같이 인덱스 ( [0], [1] 등) 를 붙여서 사용한다. ex) $('div')[0].innerHTML but, reverse() 같은 함수도 자바스크립트 기본 내장 함수는 [0] 을 안써도 사용 가능해보인다.