[Jquery] first,last/even,odd/eq/lt,gt/slice
2022. 2. 17. 22:52
공부/JavaScript
FIRST, LAST 첫 번째 요소와 마지막 요소를 선택할 때 사용한다. $(document).ready(function(){ $("#menu>li").first().css("color","red") $("#menu>li").last().css("color","blue") }) 이렇게 하면 li 중에서 첫 번째는 red, 마지막 li는 blue로 변경된다. EVEN, ODD 짝수 요소와 홀수 요소를 선택할 때 사용한다. $(document).ready(function(){ $("#menu>li").even().css("color","red")//짝수요소 $("#menu>li").odd().css("color","blue")//홀수요소 }) even은 짝수, odd는 홀수, 즉 아래와 같이 선택된다. 리스..
[Jquery] val 메서드
2022. 2. 17. 22:31
공부/JavaScript
val 메서드를 사용하여 접근한 요소의 value(값)을 읽어올 수 있다. $(document).ready(function(){ var myVal=$("#my-input").val() console.log(myVal) }) 그렇다면 여기서 아래와 같은 간단한 응용을 해볼 수 있다. function myFunc(){ var myColor=$("#myColor").val() var myBgColor=$("#myBgColor").val() $("#my-div").css({"color":myColor, "backgroundColor":myBgColor}) } 이렇게 하면 myColor, myBgColor라는 id를 가진 input 요소의 value를 받아온 뒤, css 선택자로 적용하여 요소의 색을 변경할 수 ..
[Jquery] prev, next, siblings
2022. 2. 17. 22:23
공부/JavaScript
리스트1 리스트2 리스트3 리스트4 리스트5 위와 같은 상황에 me를 기준점으로 이전, 이후의 요소를 선택하는 방법이 prev, next이다. 코드는 다음과 같다. $(document).ready(function(){ $("#me").prev().css("color","red") $("#me").next().css("color","blue") }) 그리고 이전의 요소 모두, 다음 요소 모두를 선택하는 방법도 있다. $(document).ready(function(){ $("#me").prevAll().css("color","red") $("#me").nextAll().css("color","blue") }) 위와 같이 prevAll, nextAll을 사용해주면 된다. 그리고 기준점부터 원하는 요소 바로 ..
[Jquery] CSS 분리
2022. 2. 17. 22:20
공부/JavaScript
css에서 직접 작업하는게 가장 좋겠지만 jquery를 이용하여 분리하여 사용할 수도 있다. 일단 css 스타일을 담을 변수를 선언하고, 그 변수를 jquery css 선택자에 집어 넣는 것이다. 코드는 아래와 같다. $(document).ready(function(){ var myStyle={"color":"red", "backgroundColor":"blue", "border":"4px solid black"} $("#wrap>section").children().css(myStyle) })
[Jquery] 하위요소 선택, children
2022. 2. 17. 22:14
공부/JavaScript
jquery로 하위 요소를 선택하는 첫 번째 방법은 아래와 같다. $(document).ready(function(){ $("#wrap>h1").css("color","red") }) $(document).ready(function(){ $("#wrap h1").css("color","red") }) 위의 첫번째 코드는 한 칸 아래의 h1을 선택하고, 두 번째 코드는 하위에 있는 모든 h1을 선택한다. 두 번째 방법은 children을 사용하는 것인데 방법은 다음과 같다. $(document).ready(function(){ $("#wrap>section").children().css("color","red") }) 이렇게 하면 section의 모든 자식 요소들의 color를 red로 바꾼다.
[Jquery] ready, parent 메서드
2022. 2. 17. 22:09
공부/JavaScript
ready 메서드는 DOM TREE가 완성되면 콜백 함수가 실행된다. $(document).ready(function(){ document.getElementById("title").style.color="red" }) parent 메서드는 선택한 요소의 부모요소에 접근한다. $(document).ready(function(){ $("#li2").parent().css({ "border":"2px dashed blue" }) }) 위 코드는 li2의 부모요소에 접근하여 경계선을 파란색 점선으로 바꾼다.
[Jquery] css 선택자와 사용 방법
2022. 2. 17. 22:00
공부/JavaScript
Jquery를 사용하여 쉽게 css 속성을 부여하고 변경할 수 있다. function myFunc(){ $("#title").css("color","red") } 위 코드는 document.getElementById("title").style.color="red"와 같다. 즉, ID가 title인 요소를 선택하여 color를 red로 변경한다. function myFunc(){ $("#title").css("backgroundColor","blue") } 그렇다면 위 코드는 document.getElementById("title").style.backgroundColor="blue"와 같다. 또한 이렇게 따로따로 적을 필요 없이 아래처럼 하면 더 쉽게 여러가지 속성을 부여할 수 있다. function m..
[JS] JSON 메서드, JSON 배열
2022. 1. 30. 15:27
공부/JavaScript
JSON JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준이다. JSON 메서드 자바스크립트에선 아래와 같은 JSON 데이터 처리를 위한 메서드를 제공하고 있다. JSON.stringify(), JSON.parse(), toJSON() JSON.stringify() : 인수로 전달받은 자바스크립트의 객체를 문자열로 변환 후 반환한다. JSON.parse() : 인수로 전달받은 문자열을 자바스크립트의 객체로 변환 후 반환한다. toJSON() : 자바스크립트 Date 객체의 데이터를 JSON 형식의 문자열로 변환 후 반환한다. 따라서 Date.prototype 객체에서만 사용할 수 있다. JSON 배열 var personList=[ {name:'박덕팔',age:20,he..
[JS] 사용자 정의 객체
2022. 1. 30. 15:13
공부/JavaScript
자바스크립트에서는 내장된 객체를 사용하기도 하지만 사용자가 직접 객체를 정의할 수도 있다. var person={ name:'김철수', age:20, height:170, introduce:function(){ document.write("이름:"+this.name," ") document.write("나이:"+this.age," ") document.write("키:"+this.height," ") } } person.introduce()