작업실

HTML JS /** * */ $(document).ready(function(){ //배열선언과 동시에 초기화 var array=[ {name:"Naver",link:"https://www.naver.com"}, {name:"Daum",link:"https://www.daum.net"}, {name:"Google",link:"https://www.google.com"} ]; //each() 메서드를 사용하여 array배열을 관리하자 $.each(array,function(index,item){ //html에 출력할 출력문을 저장하기 위한 변수지정 var output=""; //html에 출력하고자하는 문자열을 만들자 output+="" //주소가 여기로 들어옴 item.link의 값이 들어옴 outpu..

HTML 필터 선택자를 알아보자 지역번호 052 053 02 054 055 JS /** * */ //기호필터 선택자 //제이쿼리의 기본문법 $(document).ready(function(){ //속성선택자로 text입력란 선택 //$("[type='text']").val("abcd"); //$("[type!='text']").val("abcd"); //기호필터선택자 //input type="text"인 태그 선택 $(":text").val("abcd") //input type="password"인 태그 선택 $(":password").val("abcd") //input type="radio"인 태그 선택 $(":radio").val("abcd") //input type="checkbox"인 태그 선택 ..

HTML JS /** * */ $(document).ready(function(){ //input태그의 type속성의 값이 text와 같은걸 선택해서 배경색을 빨간색 $("[type='text']").css("backgroundColor","red") //input태그의 type속성의 값이 text와 같지 않은걸 선택해서 배경색을 빨간색으로 만들어라 $("[type!='text']").css("backgroundColor","red") //input태그의 type 속성의 값이 word로 끝나는 모든 태그를 선택해서 배경색을 빨간색으로 만들어라 $("[type$='word']").css("backgroundColor","red") $("[type|='pass']").css("backgroundColor",..

HTML 자식선택자 list 1 list 2 list 3 JS /** * */ $(document).ready(function(){ //얘는 무조건 들어감 제이쿼리의 기본문법 //메모리 등재역할 //자식선택자(선택자>선택자) $(".container>h1").css("color","red") //css에서 하고싶으면 css따로 만들어서 하면 됨 둘다 가능 //css에서는 //.container>h1{color:red;} //문법차이 //후손선택자(선택자 선택자) 한칸 띄움 $(".container ul").css("color","blue") //css에서는 //.container h1{color:blue;} //문법차이 }) 결과

HTML 회 원 가 입 아이디 패스워드 패스워드 확인 이름 닉네임 이메일 @ 이메일 수신 수신미수신 SMS 수신 수신미수신 연락처 010011018-- 가입경로 -선택해주세요-검색지인추천광고지사이트 광고 취미 독서수영낚시등산 성별 남자여자 프로필사진 선택된 파일 없음 JS /** * */ window.onload=function(){ var input=document.querySelector("input") var ment=document.getElementById("ment") //id입력안이 포커스를 잃으면(blur) input.onblur=function(){ //alert(input.value) //input.value.length(문자열) var length=input.value.length i..

each() 메서드 요소 그룹(배열)을 받고, 그 그룹에 속하는 모든 요소에서 특정 작업을 수행 형식 $.each(object, function(index, item) { } ) $(선택자).each(fucntion (index, item) { } ) function(index, item) { } - index : 배열의 인덱스 또는 객체의 키 - item : 배열의 인덱스 또는 객체의 키가 가지고 있는 값 활용

1. 자식 선택자 문서 객체 모델(DOM=족보)에서 특정 태그(요소 노드)와 직접 연결된 모든 자식 태그(요소 노드)를 선택하기 위해 사용 '부모 > 자식’의 형태로 사용 예 : $(‘body > p’) 2. 속성 선택자 (기본 선택자 뒤에 붙여 사용하며, 입력 양식과 관련된 태그()를 선택할 때 많이 사용) val() 메서드 일치하는 태그의 value 속성값을 리턴하거나 값을 설정 처음으로 매치되는 태그의 value 속성의 값을 리턴 예 : $(선택자).val() 매치되는 모든 태그의 value 속성의 값을 설정 예 : $(선택자).val(값) 3. 필터 선택자 - 기호를 포함하는 선택자 - 입력 양식 필터 선택자 - 위치 필터 선택자

html code 태그 선택자 실습 아이디 선택자 실습 클래스 선택자 실습 js code /** * */ $(document).ready(function(){ //전체 선택자 : $("*") $("*").css("margin",0) //태그 선택자 : h1태그의 테두리 적용 $("h1").css("border","2px solid red") //아이디 선택자 //자바스크립트 : document.getElementById("idselector") $("#idselector").css({"background-color":"gray","color":"red"}) //클래스 선택자 $(".classselector").css("background-color","yellow").css("color","red"); ..

선택자 HTML 요소를 선택하거나 조작할 것을 지정 문서 내의 특정 태그를 선택 CSS 선택자와 유사 기본선택자 전체 선택자 $(“*”) 태그 선택자 $(“태그명”) 아이디 선택자$(“#아이디명”) 클래스 선택자$(“.클래스명”) √ 전체선택자의 역할 및 사용 예 별표(*) : HTML 문서 내의 모든 태그들을 선택 선택자: 문자열로 취급하여 ‘ ‘ 또는 ‚ ‚로 감싸줌 전체 선택자 표기법의 예 : $(‘*’) √ 태그선택자의 역할 및 사용 예 태그 이름에 근거하여 태그를 선택하며, 태그 이름을 이용 여러 개의 태그 선택 시 콤마( , )로 구분 $(“h1”,”p”) 예 : $(‘h1’) css( ) 메서드 : 선택된 태그의 스타일 속성 설정, 리턴 시 사용 css( ) 메서드로 선택된 태그의 스타일을 ..

JQuery를 정의하거나 접근하기 : $ 사용 $로 시작 -> 구문은 jQuery를 사용하겠다는 의미 기본 구문 $(선택자).메서드( ) 활용 h1 태그를 가져와 숨기도록 하는 코드 $(‘h1’).hide(); Window 객체의 onload 이벤트의 기본형태 onload 이벤트란 ? ‘브라우저에서 문서의 로딩이 종료되어 준비가 되면 입력된 함수를 실행하라’는 의미 Window 객체의 onload 이벤트의 기본형태를 JQuery를 이용하여 나타내기 JQuery 기본 문법