1027_jQuery : 선택자 Selectors

1027_jQuery : 선택자 Selectors

<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> Insert title here * { padding: 0; margin: 0; box-sizing: border-box; } body { font-style: 14px; font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:acrive { color: tomato; text-decoration: underline; } h3 { margin: 10px; } span, label { display: block; } .box { width: 350px; min-height: 50px; margin: 20px auto; padding: 15px; border: 3px dotted gray; } // 실행 안됨. DOM이 준비 되지 않았으므로 // $("p").css("border", "1px solid #777"); // DOM이 로딩 되었을 때 실행 $(function() { // 모든 요소 $("*").css({color:"#333", "font-size":"13px"}); // {}는 자바스크립트에서 객체 // 태그 선택자 $("p").css("border","2px dashed #333"); // id 선택자 $("#layout1").css({width:'300px', padding:'10px', border:'2px solid green'}); // class 선택자 $(".red").css("color", "red"); // AND $("label.underline").css("text-decoration", "underline"); // 바로 아래 자식 하나 $("div > label").css("color", "tomato"); // 모든 자식(손자도 포함) $("div label").css("background", "#ff0"); // 인접 형제. 바로 다음 형제 하나 $("label + span").css("border", "1px dashed red") // 다음에 나오는 일반 형제 $("label ~ span").attr("title", "과목"); }); selector 프로그래밍 자바 C언어 코틀린 데이터베이스 오라클 MySQL 빅데이터 웹 HTML CSS JavaScript 웹프로그래밍 JSP PHP ASP.NET React 기타 jQuery

<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> Insert title here * { padding: 0; margin: 0; box-sizing: border-box; } body { font-style: 14px; font-family: 맑은 고딕, 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:acrive { color: tomato; text-decoration: underline; } h3 { margin: 10px; } .box { width: 350px; min-height: 50px; margin: 20px auto; padding: 15px; border: 3px dotted gray; } .box span, .box label { display: block; } // 실행 안됨. DOM이 준비 되지 않았으므로 // $("p").css("border", "1px solid #777"); // DOM이 로딩 되었을 때 실행 $(function() { // span 태그의 글자색을 tomato로 $("span").css("color", "tomato"); // span 태그와 label 태그의 글자에 밑줄 $("span, label").css("text-decoration", "underline"); // div1 아이디의 글자색을 blue $("#div1").css("color", "blue"); // div2 아이디의 글자를 진하게 $("#div2").css("font-weight", "700"); // c1 클래스의 배경색을 yellow로 $(".c1").css("background", "yellow"); // input 요소 중 name=subject인 요소 $("input[name=subject]").css("background", "#eee"); // form의 input 요소 중 name 속성을 가진 요소 $("form input[name]").css("border", "none"); // form의 input 요소 중 type=text와 type=password인 요소 $("form input[type=text], form input[type=password]").css("border-bottom", "1px solid blue"); // form의 input 요소 중 name 속성 값이 'a'로 시작하는 요소 $("form input[name^=a]").css("border-right", "3px solid red"); // form의 input 요소 중 title 속성 값이 '버튼'으로 끝나는 요소 $("form input[title$='버튼']").css("border-left", "3px solid black"); // form의 input 요소 중 name 속성 값이 'x'가 포함된 요소 $("form input[name*=x]").css("border-left", "3px solid black"); // form의 input 요소 중 title 속성 값에 '내용'이라는 단어(띄어쓰기 구분)가 들어간 요소 $("form input[title~='내용']").css("background", "yellow"); }); selector 테스트 1 테스트 2 테스트 3 테스트 4 테스트 5 테스트 6 테스트 7

Insert title here *{ padding: 0; margin: 0; } body { font-size:14px; font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif; } a { color: #000; text-decoration: none; } a:hover, a:active { color: tomato; text-decoration: underline; } h3 { margin: 10px; } .btn { color:#333; font-weight:500; border:1px solid #ccc; background-color:#fff; text-align:center; cursor:pointer; padding:3px 10px 5px; border-radius:4px; font-family:"Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif; } .btn:active, .btn:focus, .btn:hover { background-color:#e6e6e6; border-color: #adadad; color: #333; } textarea:focus, input:focus{ outline: none; } .boxTF { border:1px solid #999; padding:3px 5px 5px; border-radius:4px; background-color:#fff; font-family:"Malgun Gothic", "맑은 고딕", NanumGothic, 나눔고딕, 돋움, sans-serif; } .box{ box-sizing: border-box; width: 500px; min-height: 50px; margin: 20px auto; border: 3px dotted gray; padding: 15px; } $(function() { $("form input + span").hide(); $("form input[type=text]").css("border", "1px solid #aaa"); // focus 이벤트. button 제외 $("form input").not($(":button")).focus(function() { $(this).css("border", "1px solid #f28011"); // 이벤트를 발생시킨 바로 다음 형제중 span 태그 $(this).next("span").show(); }); // blur 이벤트. button 제외 $("form input").not($(":button")).blur(function() { $(this).css("border", "1px solid #aaa"); // 이벤트를 발생시킨 바로 다음 형제중 span 태그 $(this).next("span").hide(); }); }); selectors 예제 아이디 입력. 5~10자 이내 이름 입력. 나이 입력. 생년월일 입력.

focus 이벤트에서 button을 제외

blur이벤트에서 button을 제외

이외 filter 가 여러가지 있음.

from http://development-writing.tistory.com/337 by ccl(S) rewrite - 2021-10-28 07:00:53