python 학습 제31일(jquery)

jquery 대상
jQuery 대상은 jQuery를 통해 DOM 대상을 포장한 후에 생기는 대상이다.jQuery 대상은 jQuery만의 것입니다.만약 대상이 jQuery 대상이라면, jQuery의 방법인 $("#test") 을 사용할 수 있습니다.html();

$("#test").html()    
       //    ：  ID test     html  。  html() jQuery     

       //         DOM    ： document.getElementById(" test ").innerHTML; 

       //  jQuery     DOM      ，  jQuery    DOM       ，  DOM       jQuery    .      

       //  ：       jQuery   ,           $. 

var $variable = jQuery   
var variable = DOM   

$variable[0]：jquery    dom        $("#msg").html(); $("#msg")[0].innerHTML

2. 선택기와 필터
1. 선택기

1            
$("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")     css       


2            
$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")    css       



3            
$("li:first")    
$("li:eq(2)")     2，   0  
$("li:even")       
$("li:gt(1)")     1 
$('li:lt(1)')     1 


4          
$('[id="div1"]')   $('[color=‘red’][id]')


5           
$("[type='text']")----->$(":text")               input    : $("input:checked")

2. 필터

1            
$("li").eq(2)  $("li").first()  
$("ul li").hasclass("test")    boolean 
 2       

$("div").children(".test").   
$("div").find(".test")    
                               
 $(".test").next()   
 $(".test").nextAll()    
 $(".test").nextUntil()            
                           
 $("div").prev()     
 $("div").prevAll()  
 $("div").prevUntil()   
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil() 

 $("div").siblings()      
 

3. 두 가지 순환 방법

 jquery       
                 //   
//                 li=[10,20,30,40]
//                 dic={name:"cheng",age：‘24’}
//                 $.each(li,function(i,x){
//                     console.log(i,x)//i     key，x   
//                 })

                 //   
//                    $("tr").each(function(){
//                        console.log($(this).html()) this      
//                    })

4. 조작 요소
1. 속성 조작

--------------------------  
$("").attr();        
$("").removeAttr();
$("").prop();      
$("").removeProp();
--------------------------CSS 
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML  /  / 
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")

2. 문서 작업

//        
    $("
")


//    

    $("").append(content|fn)      ----->$("p").append("Hello");
    $("").appendTo(content)       ----->$("p").appendTo("div");
    $("").prepend(content|fn)     ----->$("p").prepend("Hello");
    $("").prependTo(content)      ----->$("p").prependTo("#foo");

//    

    $("").after(content|fn)       ----->$("p").after("Hello");
    $("").before(content|fn)      ----->$("p").before("Hello");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");

//  
    $("").replaceWith(content|fn) ----->$("p").replaceWith("Paragraph. ");

//  

    $("").empty()            
    	
    $("").remove([expr])          

//  

    $("").clone([Even[,deepEven]])

3. css 조작

CSS
        $("").css(name|pro|[,val|fn])
      
        $("").offset()               
        $("").position()			               
        $("").scrollTop([val])                 ，             ， $(window).scrollTop(0)     
        $("").scrollLeft([val])
      
        $("").height([val|fn])	      
        $("").width([val|fn])
        $("").innerHeight()    padding
        $("").innerWidth()
        $("").outerHeight([soptions])。  padding border     
        $("").outerWidth([options])

5. 확장 메커니즘

    
$.extend(object)      // JQuery         。
$.fn.extend(object)   // JQuery        。


    jQuery.extend({
          min: function(a, b) { return a < b ? a : b; },
          max: function(a, b) { return a > b ? a : b; }
        });
    console.log($.min(3,4));

//-----------------------------------------------------------------------

$.fn.extend({
    "print":function(){
        for (var i=0;i<this.length;i++){
            console.log($(this)[i].innerHTML)
        }

    }
});

$("p").print();