python 학습 제31일(jquery)

5280 단어 python 학습
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();

좋은 웹페이지 즐겨찾기