국비 55일차 jQuery (기본선택자, 계층구조, 속성, filter, contain, has, empty)

2021. 3. 26. 18:23

2021.03.26 국비교육 55일차

[TOC]

기본 선택자(core)

선택자 종류 표현식
All selector $(" * ")
Elelment Selector $(" tag ")
Id Selector $(" #id ")
Class Selector $(" .class ")
Multiple Selector $(" "tag1.tag2 ")

all

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function() { // CSS함수('스타일 속성이름', '스타일 속성값');

    $("*").css("color", "red"); //document.getElementByTagName().style = "color:red";

})//end
</script>
</head>
<body>
<p>Hello</p>
<div>World</div>

</body>
</html>

tag

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p").css("color", "red"); // 모든 p태그 선택

    console.log("1 : ",document.getElementsByTagName("p")); //javascript 메소드

    var x = $("p"); // jquery메소드 fn이 붙으면 jQuery에서 사용 가능한 객체라는 의미
    console.log("2 : ", x);
    console.log(x[0],x[1], x.length);

    console.log(x[0].innerText, x[1].innerText);
    console.log("div 태그 :", $("div"));
    console.log("첫번쨰 div값 ", $("div")[0].innerText); // world
    console.log("두번쨰 div값 ", $("div")[1].innerText); //world2
    $("div")[1].innerText = "text";

    var x = $("div");
    $(x[1]).css("color", "blue");

})//end

</script>
</head>
<body>
<p>Hello</p>
<p>Hello2</p>
<div>World</div>
<div>world2</div>

</body>
</html>

id

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("p").css("color", "red"); // 모든 p태그 선택

    console.log("1 : ",document.getElementsByTagName("p")); //javascript 메소드

    var x = $("p"); // jquery메소드 fn이 붙으면 jQuery에서 사용 가능한 객체라는 의미
    console.log("2 : ", x);
    console.log(x[0],x[1], x.length);

    console.log(x[0].innerText, x[1].innerText);
    console.log("div 태그 :", $("div"));
    console.log("첫번쨰 div값 ", $("div")[0].innerText);
    console.log("두번쨰 div값 ", $("div")[1].innerText);
    $("div")[1].innerText = "text";

    var x = $("div");
    $(x[1]).css("color", "blue");

})//end

</script>
</head>
<body>
<p>Hello</p>
<p>Hello2</p>
<div>World</div>
<div>world2</div>

</body>
</html>

class

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".myClass").css("color", "red"); // myclass 선택
    console.log("첫번째  myClass : ", $(".myClass").first().text()); // 첫번째
    console.log("마지막  myClass : ", $(".myClass").last().text()); // 마지막


})//end

</script>
</head>
<body>
<p class="notMe">div class="notMe"</p>
<p class="myClass">p class="myClass1"</p>
<div class="myClass">div class="myClass2"</div>
<div class="myClass">div class="myClass3"</div>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".a").css("color", "red");
    var test = $(".a");
    console.log(test);
    console.log(test[1]);
    test[1].innerText = "aaaaaaa" //바뀜

    //test[1].text("22222"); //error

})//end

</script>
</head>
<body>
<p class="a">Hello</p>
<p class="a2">Hello2</p>
<div class="a">World</div>



</body>
</html>
  • 중요한점은 jQuery 객체 인 경우에만 jQuery메소드를 사용할 수 있다는 점이다
  • text() 함수가 사용가능하나는 것은 jQuery객체라는 것이고 innerText가 사용가능한 경우는 일반 dom일 경우이다.

계층 구조 (자식 자손)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //자식만 선택
    console.log($("div>a"));
    $("div>a").css("color", "red");

    //자손까지 선택
    console.log($("div a"));
    $("div>a").css("font-size", "40px");

})//end
</script>
</head>
<body>
    <div>
        <a href="#">daum</a><br>
        <a href="#">naver</a>
        <p>test</p>
        <p>
            <a href="">Google</a>
        </p>
    </div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //p 태그 바로 뒤의 형제 a태그 반환(형제 태그중)
    $("p+a").css("color", "red");

    //p 태그 바로 뒤 모든 형제 a 태그
    $("p~a").css("font-size", "40px");

})//end
</script>
</head>
<body>
    <div>
        <p>p</p>
        <a href="">daum</a>
        <a href="">naver</a>

        <p>p</p>
        <a href="">test</a>
        <p>
            <a href="">Google</a>
        </p>
    </div>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        //태그 바로 뒤 input 태그 반환
        $("label + input").css("color", "red").val("Labeled");

        console.log($("label + input").val());


    });//end
</script>
</head>
<body>
    <form>
        <label>Name:</label> 
        <input name="name" id="name" value="test" /> 
        <input name="none">
        <hr>
        <fieldset>
            <label>Name:</label> 
            <input name="name" id="name" value="test" /> 
            <input name="none">
        </fieldset>
    </form>


</body>
</html>

속성 attribute

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //1.[href] a 태그 중 href
    $("a[href]").css("color", "red").css("font-size", "40px");

    //2.[href = 값] 값에 해당되는 것 모두
    $("a[href='https://daum.net']").css("color", "red");

    //3.[href != 값] 값이 아닌 것 모두
    $("a[href != 'https://daum.net']").css("color", "red");

    //4.[href ^= 값] 값으로 시작되는 것 모두
    $("a[href ^= 'https']").css("color", "red");

    //5.[href $= '값'] 값으로 끝나는 것 모두
    $("a[href $= '.net']").css("color", "red");

    //6.[href *= '값'] 특정 값을 포함하는
    $("a[href *= 'www']").css("color", "red");

    //7.[href ~= '값'] 단어 형태로 포함되는 (띄어쓰기 구분)
    $("a[href ~= 'www']").css({'color': 'red', 'background-color' : 'yellow'});

});//end
</script>
</head>
<body>
<div>
    <span>hello</span><br>
    <a href="www kkk xxx">www kkk xxx</a><br>
    <a href="https://daum.net">https://daum.net</a><br>
    <a href="http://naver.com">http://naver.com</a><br>
    <a href="http://www.google.com">http://www.google.com</a><br>
    <a href="www.korea.com">www.korea.com</a><br>
</div>

</body>
</html>

filter

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //모든 태그의 자식들 중 첫번째 자식 [html, head, meta, ul, li, li, p, prevObject : S.fn.init(1)]
    var x = $(":first-child");
    console.log("first child : ", x);

    //지정된 ul의 부모기준  w.fn.init [ul, prevObject: w.fn.init(1)]
    var y = $("ul:first-child");
    console.log("ul:first-child : ", y);

    //ul의 첫번째 자식
    var z = $("ul>:first-child"); //ul 의 자식 li중에서 첫번째 것들
    console.log("ul>:first-child : ", z);

    //ul의 부모기준
    var a = $("li:last-child");  //A4, B4
    console.log("li:last-child : " , a);

});//end
</script>
</head>
<body>
    <ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>
        <p>Hello</p>
    </div>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //전체 문서중 first 1   선택자 : 필터링
    var x =$(":first"); //html
    console.log("x =", x);

    //ul 한정 : 첫번째 ul
    var y = $("ul:first");
    console.log("y =", y)

    //전체문서중 마지막 태그
    var z = $(":last");
    console.log("z = ", z)

    //li 중 마지막
    var a = $("li:last");
    console.log("a = ", a.text())

});//end
</script>
</head>
<body>
    <ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>
        <p>Hello</p>
        <p>hello-end</p>
    </div>
    <div>hello-endenenenenenenen</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {

    //부모기준의 자식하나만 있는 것을 선택
    var a = $("h1:only-child");
    console.log("only child : ", a.text());

    //부모를 기준으로 n번째 자식
    var b = $(":nth-child(2)"); //title, body, ul, li, li
    console.log("nth-child(2) :", b);

    //부모 기준 배수번째 자식
    var c = $(":nth-child(2n)"); // 모든 태그중 2n번째 자식 title, script, body, ul, li, li, li, li, div,
    console.log("nth-child(2n) : ", c);

    //짝수번째(index=1부터 시작) 부모 ul 기준
    var d = $("li:nth-child(even)");
    console.log("li:nth-child(even)", d);
    //d.css("color", "blue");

    //홀수번째
    var e = $("li:nth-child(odd)");
    console.log("li:nth-child(odd)", e);

    //부모 문서 기준의 짝수(index : 0부터)
    var f = $("li:even");
    console.log("li:even : ", f);
    //f.css("color", "red");

    //부모 문서 기준 홀수
    var g = $("li:odd");
    console.log("li:odd : ", g);

    });//end
</script>
</head>
<body>
<div>
        <h1>eee</h1>
    </div>
    <ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>        
        <p>Hello</p>
    </div>


</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
    //:eq(n) ==>index 0부터 n번째 태그
    var a = $(":eq(0)"); //html
    console.log(":eq(0) : ", a);

    //li 태그중 3번째 태그
    var b = $("li:eq(3)"); //A3
    console.log("li:eq(3) :", b);

    //greater than (>)
    var c = $("li:gt(2)"); //A4, b, b2, b3, b4
    console.log("li:gt(2) : ", c); 
    //c.css("color", "red");

    //less than (<)
    var d = $("li:lt(5)");
    console.log("li:lt(5) : ", d); //b, A4, A3, A2, A
    //d.css("color", "red");

    });//end
</script>
</head>
<body>
    <div>
        <h1>JQuery</h1>
    </div>
    <ul>
        <li>A</li>
        <li>A2</li>
        <li>A3</li>
        <li>A4</li>
    </ul>
    <ul>
        <li>b</li>
        <li>b2</li>
        <li>b3</li>
        <li>b4</li>
    </ul>
    <div>        
        <p>Hello</p>
    </div>


</body>
</html>

button enable / disable

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        console.log("실행 ==========");
        $(":button").css("border", "3px red solid"); // button or type = "button"
        $("#disable").click(function(){
            console.log("dis >>>");
            $("input[type='text']:enabled").removeAttr("enabled"); //enabled 속성 삭제
            $("input[type='text']:enabled").attr("disabled", "disabled");

        });

        $("#enable").click(function(){
            console.log("dis >>>");
            $("input[type='text']:disabled").removeAttr("disabled");
            $("input[type='text']:disabled").attr("enabled", "enabled");

        });



    });//end

</script>
</head>
<body>

<input type="text" id="first">
<input type="text" id="second" disabled="disabled">
<!--  
    disabled = "disabled"
    enabled = "enabled"
    img.setAttribute("src", "a.jpg"); // 자바스크립트함수
    fn.attr("src", "a.jpg"); : jQuery 쓰기 기능 / fn.attr("src") : 읽기

    value -> val
    innerText -> text
    innerHTML -> html
    setAttribute, getAttribute -> attr
-->
<input type="button" value="enable" id="enable">
<button id="disable">disable</button>

</body>
</html>

input focus

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("input").click(function(){
            console.log($("input"));
            console.log($(this)); // 이벤트가 발생된 곳 출력
            $("input:focus").css("background-color", "skyblue");
            $("input:not(:focus)").removeAttr("style"); // 선택 안되있는 것들은 원래 색으로

        });

    });//end

</script>
</head>
<body>
<input type="text" value="one" ></input>
<input type="text" value="two" ></input>
<input type="text" value="three" ></input>


</body>
</html>

checkbox 실습

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        //checkbox를 span으로 감싸게 함(부모로 만듦) 각각 하나씩
        $("input:checkbox").wrap("<span></span>").parent().css("border", "3px dotted red");

        $("input:text").val($("input:checked").val());

    });//end
</script>
</head>
<body>
사과<input type="checkbox" checked="checked" value="사과"><br>
배<input type="checkbox"  value="배"><br>
바나나<input type="checkbox"  value="바나나"><br>
<input type="text">

</body>
</html>

contain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    //특정 문자열 찾기(대소문자 구별, 자식포함에서 찾음)
    $("div:contains('Hello')").css("color", "red"); //1,3,4 Hello출력됨

});//end

</script>
</head>
<body>
<div>1. Hello !!!!</div> 
<div>2. Hi! hello</div>
<div>3. MyHello , good</div>
<div>
  <p>4 .Hello</p>
</div>

</body>
</html>

has

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    //특정 selector를 포함하는 요소 찾기(태그를 포함하는지)
    $("div:has(p)").css("color", "red");

});//end

</script>
</head>
<body>
<div>Hello !!!!</div>
<div>Hi! hello</div>
<div>MyHello , good</div>
<div>
  <p>Hello</p> <!-- 출력됨 -->
</div>

</body>
</html>

empty

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //자식이 없는 요소 반환
    $("td:empty").css("background-color", "skyblue");
    var x = $("td:empty");
    console.log(x);

    //자식이 있는 요소 반환
    //$("td:parent").css("color", "red");

});//end

</script>
</head>
<body>
<table border="1">
  <tr><td>TD #0</td><td></td></tr>
  <tr><td>TD #2</td><td></td></tr>
  <tr><td></td><td>TD#5</td></tr>
</table>


</body>
</html>

filter with function

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script    src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    $(function(){
        //1차 필터링 후 2차 필터링 (일치하는 selector) 
        $("li").filter(function(idx, ele){
            console.log(idx, ele.innerText);
            return ele.innerText == "A4";
        })//filter fuction
        .css("color", "red")

    })//

</script>
</head>
<body>
<p>Hello</p>
<ul>
    <li>A1</li>
    <li>A2</li>
    <li class = "my">A3</li>
    <li>A4</li>
    <li>A5</li>
    <li id = "a">A6</li>
    <li>A7</li>
    <li>A8</li>
</ul>
</body>
</html>

'ETC > 국비교육' 카테고리의 다른 글

국비 57일차 jQuery ( 각종 event처리 , ajax - get, post, json)  (0) 2021.03.30
국비 56일차 jQuery(traverse, 속성값 추출, manipulation, utility)  (0) 2021.03.29
국비 54일차 jQuery 기본 표현식  (0) 2021.03.25
국비 52일차 session관리  (0) 2021.03.24
국비 51일차 (MVC패턴, hidden활용, Map과 List)  (0) 2021.03.22

+ Recent posts

티스토리툴바