12/21 69-2 [ jQuery] EQ/IS/Not/EndFind

[EQ]

.eq()

선택 된 객체 중에서 기술된 순서대로
인덱스가 부여됨(인덱스 0부터 시작!) 즉 부모  자식관계와는 무관

 

폼

<fieldset>
    <legend>eq()함수</legend>
    <h2>당신이 좋아하는 과목은?</h2>
    <ul>
        <li>자바</li>
        <li>닷넷</li>
        <li>스프링</li>
        <li>제이쿼리</li>
    </ul>
    <h2>당신이 좋아하는 산은?</h2>
    <ul class="mountain">
        <li>지리산</li>
        <li>설악산</li>
        <li>소백산</li>
        <li>한라산</li>
    </ul>
    <button>확인</button>
</fieldset>

저렇게 인덱스 변수처리할 때 좋군

 $(function(){
    $('button').click(function(){
        console.log('선택기 필터 사용:',$('li:eq(4)').html()); //li중에서 인덱스4인 요소
        console.log('eq()함수 사용:',$('li').eq(4).html());   
        //인덱스변수처리할 때는 eq()함수가 유리
        var index=6;
        console.log('선택기 필터 사용:',$('li:eq('+index+')').html());
        console.log('eq()함수 사용:',$('li').eq(index).html());
    })
});

---

[IS]

이도끼가 네도끼냐 ?

처럼 조건걸러네는 함수

 

폼

<fieldset>
    <legend >boolean is(선택자)</legend>
    <input type="checkbox" />동의
    <p id="mydiv">
        <input type="text"/>
        <input type="text"/>			
        <input type="button" value="버튼"/>
        <input type="file"/>			
    </p>
</fieldset>

 

나 :이거 너무 헷깔려서 찍어봄

console.log($(':checkbox'))  //0: <input type="checkbox">
 console.log($('checkbox'))  //Object { 0: HTMLDocument http://127.0.0.1:5500/core/IS.html}

:요거가 있으면 걍 그 요소를 가져오나봄 

아하!

$(function(){
        $('legend').click(function(){
            console.log($(':checkbox').is(':checked')); //체크박스가 체크되었느냐?
            console.log($('#mydiv').is('div'))  //false               
        })
        
        
        $('#mydiv').children().each(function(index,element){

           문]두번째 텍스트박스를  위쪽 및 좌우 테두리는 제거하고 아래쪽 
             테두리만 1px green solid로 설정하여라,
             단 is()함수를 사용하여라.                  
      
         	$('input[type=text]').eq(1).css({border:'none',borderBottom:'1px green solid '})
        	이렇게 하고 좋아했는데 is 함수를 써야 했네 .. 하 놔...
        
       	 	console.log('인덱스:%s,찾는요소:%s',index,$(this).is(':text:eq(1)'));
         	if($(this).is(':text:eq(1)')){
            	$(this).css({border:'none',borderBottom:'1px green solid '});
           }
        });
    });

요렇게 적용 됨

---

[Not]

이름하야 걔 빼고 함수

 $(선택자).not(제거할 선택자) : 선택한 객체 중에서 제외하고 싶은 선택자 지정

 

폼

<fieldset>
    <legend>not("선택자")함수</legend>
    <a href="www.naver.com">네이버</a>
    <a href="www.daum.net">다음</a>
    <a href="Form3.jsp">페이지로1</a>
    <a href="Form4.jsp">페이지로2</a>
    <a href="www.cyworld.com">싸이월드</a>
    <a href="Form5.jsp">페이지로3</a>		 
    <button id="btn">확인</button>
</fieldset>

not함수 미사용 시 filter()를 이용해도 됨 하지만 간편한게 있으면 간편한걸 써야지

$(function(){     
       var href=""; 
      
      not함수 미 사용
      $('#btn').click(function(){         
          $('a').filter('[href^=www]').each(function(){ //www로 시작하는 요소들
              href+=$(this).attr('href')+' ';
            });
          console.log(href);   //www.naver.com www.daum.net www.cyworld.com
       });    
        
        not함수 사용
        $('#btn').click(function(){  // jsp포함된거 빼고
        $('a').not('[href$=jsp]').each(function(){
                href+=$(this).attr('href')+' ';
            });
       	 console.log(href); //www.naver.com www.daum.net www.cyworld.com 
        });
       
    });

 

---

[EndFind]]

 

end(): 바로 이전 선택된 객체를 반환(즉 end()함수가 적용된 바로 이전 객체)
$('선택자'),find('찾을 선택자'):find는 선택된 객체의 하위(손자,자식 다 포함)에서 찾음   

 

폼

<fieldset>
    <legend>end()함수/find(선택자)함수</legend>
    <span title="SPAN1">SPAN1</span>
    <span title="SPAN2">SPAN2</span>
    <span title="SPAN3">SPAN3</span>
    <div>
        <p>
            <b>축구</b>
        </p>
        <p>
            <b>농구</b>
        </p>
        <p>
            <b>배구</b>
        </p>
        <button>확인</button>
    </div>
</fieldset>

헷깔릴 수도 있겠당....

$(function(){
    $('button').click(function(){
      console.log($('div').find('p:last').find('b').html());
      console.log($('div').find('p:last').text());
      console.log($('div p:last').text());
      console.log($('div').find('p:last').find('b').end().html());
      console.log($('div').end().length);    //요소를 못 찾아도 1 반환
        try{
            console.log($('div').end().html());   // 에러나서 try~catch로 잡음
        }
        catch(e){
            console.log('요소를 못 찾았어요',e.message)
        }

   $('span').css('color','red').eq(0).css('border','1px  red solid').end().eq(2).css('border','5px green solid');
    })

});

콘솔창확인

css적용