WEB UIUX/jQuery

WEB UIUX/jQuery

[jQuery]제이쿼리 속성조작 메서드

# 속성조작 메서드 - $("요소선택").html() => 선택한 요소안의 내용을 가져오거나, 다른 내용으로 바꾼다. - .attr("속성선택") - 속성값을 가져온다. See the Pen [js]속성조작 메서드 by kaia (@kaiaakim) on CodePen. jQuary를 공부합시다!! 속성조작 메서드 속성변경 red hotpink *{ margin: 0; padding: 0; } li{ list-style: none; } a{ text-decoration: none; color: #000; } $(function(){ const jqHtml = $(".study").html(); console.log(jqHtml); //jQuary를 공부합시다!! 속성조작 메서드 const typeVal ..

WEB UIUX/jQuery

[jQuery]제이쿼리 배열관련 메서드(each(), map(), grep())

#01 each() or $.each() // ex.1) $("요소선택").each(function(매개변수1, 매개변수2){...}); // ex.2) $.each($("요소선택").function(매개변수1, 매개변수2){...}); - 배열에 저장된 문서 객체만큼 메서드가 반복 실행된다. - 배열에 저장된 객체의 인덱스 순서대로 하나씩 접근하여 객체를 선택하고 인덱스를 구한다. #02 map() // ex) $.map(Array, function(매개변수1, 매개변수2){...}); - 배열에 저장된 데이터 수 만큼 메서드가 반복 실행된다. - 함수에서 반환된 데이터는 배열에 순서대로 저장됨. #03 grep() // ex) $.grep(Array, function(매개변수1, 매개변수2){...}..

WEB UIUX/jQuery

[jQuery]제이쿼리 배열관련 메서드($.inArray(), $.isArray(), $.merge(), index())

#01 $.inArray() //ex) $.inArray(data, Array, Start index) - 지정된 데이터를 찾아 인덱스값을 반환한다.(데이터를 찾으면 가장 맨 앞 데이터의 인덱스를 반환하고, 찾지 못하면 -1을 반환한다.) #02 $.isArray() //ex) $.inArray(object) - 지정된 데이터가 배열 객체라면 true를 반환하고 아니면 false를 반환한다. #03 $.merge() //ex) $.merge(Array1, Array2) - 두 배열 객체를 하나의 객체로 묶음. (앞의것에 뒤에것을 합친다.) #04 index() //ex) $("요소선택").index("지정요소선택") - 선택자로 요소를 먼저 선택하고 다음으로 지정한 요소의 인덱스정보를 가져온다. $(fu..

WEB UIUX/jQuery

[jQuery]제이쿼리 탐색선택자(콘텐츠탐색선택자)

# 콘텐츠탐색선택자 $("요소 선택:contains(텍스트)") 선택한 요소중에 텍스트를 포함한 요소만 선택 $("요소 선택").contents() 선택한 요소의 하위 모든 자식요소를 선택 $("요소 선택:has(요소명)") $("요소 선택").has("요소명") 선택한 요소 중 지정한 태그를 포함한 요소만 선택 $("요소 선택:not(요소명)") $("요소 선택").not(제외할 요소 선택) 선택한 요소중 지정한 요소만 제외하고 선택 ex) $("#inner_1 p").not(":first") ->첫번째요소만 제외하고~ $("요소 선택").탐색 선택자().end() 선택한 요소를 탐색한 선택자를 선택하다가 다시 이전의 선택자를 적용 ex) $(".boxMore .box").eq(2).end() -> b..

WEB UIUX/jQuery

[jQuery]제이쿼리 탐색선택자(속성탐색선택자)

# 속성탐색선택자 $("요소선택[속성]") //ex) $("li[title]") 요소중에 title속성이 포함된 요소만 선택한다. $("요소선택[속성=값]") //ex) $("li[title='리스트']") 요소중 title속성값이 '리스트'인 요소만 선택 $("요소선택[속성^=텍스트]") //ex) $("a[href^=http://]") 요소중 href속성값이 'http://'로 시작되는 요소만 선택 $("요소선택[속성$=텍스트]") //ex) $("a[href$='.com']") 요소중에 href속성값이 '.com'으로 끝나는 요소만 선택 $("요소선택[href*=텍스트]") //ex) $("a[href*='ezenac.co.kr']") 요소의 속성값이 'ezenac.co.kr'을 포함한 요소만 선택..

WEB UIUX/jQuery

[jQuery]제이쿼리 탐색선택자(위치탐색선택자)

# 위치탐색 선택자 $("요소선택 :first") or $("요소선택").first() 전체요소중 첫번째 요소만 선택 $("요소선택 :last") or $("요소선택").last() 전체요소중 마지막 요소만 선택 $("요소선택 :odd") 요소무리중 짝수번째(홀수 인덱스)선택 $("요소선택 :even") 요소무리중 홀수번째(짝수 인덱스)선택 $("요소선택 :first-of-type") 요소무리중 첫번째 요소만 선택 $("요소선택 :last-of-type") 요소무리중 마지막 요소만 선택 $("요소선택 :nth-child(숫자)") 요소무리중 (숫자)번째 요소만 선택 $("요소선택 :nth-child(숫자n)") 요소무리중 (숫자의 배수)번째 요소만 선택 $("요소선택 :nth-last-of-type(숫자..

WEB UIUX/jQuery

[jQuery]제이쿼리란? (직접선택자, 인접관계선택자, 하위관계선택자, 변수에 스타일 지정하여 적용하기)

# 제이쿼리(jQuery)란? - 제이쿼리(jQuery)는 오픈 소스 기반의 자바스크립트 라이브러리이다. - 자바스크립트의 라이브러리 이기에 꼭 jquery.min.js 파일과 링크가 필요! - 자바스크립트를 더욱 손쉽게 활용할 수 있게 된다. - $(function(){}); 로 불러온다. 직접선택자 - 속성단일적용 형식) $("선택자").css("속성", "속성값"); See the Pen [jQuery] by kaia (@kaiaakim) on CodePen. 직접선택자 - 속성한번에 여러개적용 형식) $("선택자").css({"속성":"속성값","속성":"속성값", ...}); See the Pen [jQuery]직접선택자2 by kaia (@kaiaakim) on CodePen. 변수에 스타일 ..

카이아
'WEB UIUX/jQuery' 카테고리의 글 목록 (2 Page)