jQuery設定および取得スタイル

取得要素のテキストを設定する:text():メソッドはテキストを取得するときにパラメータを必要としません.テキストのみ取得できます.テキストに含まれるラベル設定テキストが取得されない場合はパラメータが必要です.テキストのみを設定し、上書きして値を割り当てます.ラベルが含まれている場合は、文字列として解析されません.

//         .text()  (    )             
//var $(text) = $(     ).text（） 
 var $text = $('p').text();
 console.log($text); 
//        （   ）       ，                   。
$('p').text($text+"   ？"); //      ;

html()メソッド:テキストを取得する際にパラメータも不要で、テキストだけでなく、テキストのラベルも取得できます.テキストを設定するにはパラメータが必要で、テキストだけでなく、テキスト内のラベルも取得でき、ラベルを含む属性も解析できます.

//              ，                   。 
 var $text1 = $('p').html();
 console.log($text1);
 $('p').html($text1+"   ")

val()メソッド:value値を取得します(入力ボックスに多く使用されます).

//val();       value
 var $two = $('input').val();
 console.log($two);
 //  value 
 $('input').val("     ");

取得ラベルのプロパティの設定:attr();属性を設定します.たとえば、name、id class valueは、設定削除属性を取得します.

//    ：attr
 var $attr = $('p').attr('id'); 
 console.log($attr); //    id    
 //                                  ，            
 var $attr1 = $('p').attr({'name':'p','id':"one",'class':"two"});
 console.log($attr1);
 //     removeAttr（）；//             /          
 var $one = $('p').removeAttr('id');
 console.log($one);

クラスの削除について

//  class 
 $('div').addClass("hehe");
 $('div').addClass("haha");
//                   。                      
 //  class 
 $('div').removeClass("hehe");
 //  class 
 window.onclick = function() {
 //    'abc'   ，    ，      
 $('div').toggleClass("abc");
 }

ラベルに属性が含まれているかどうかを判断します.

//             hasClass（）    boolean 
 var $three = $('h2').hasClass('h3');
 console.log($three); // true;

例:

 //      
 $('button').click(function(){
 if($('h2').hasClass('h3')==true){
   Class 
 $('h2').removeAttr('class',"h3");
 // $('h2').removeClass('h3');
 $('h2').addClass('h2');
 }
 else{
 $('h2').removeClass('h2')
 $('h2').addClass('h3');
 }
 })
 //                         （toggleClass）
 // $('h2').toggleClass('p3');
 $('button').click(function(){
 $('h2').toggleClass('h3');
 //       toggleClass               ，   ，   ；
 })

取得要素のスタイルを設定します.
jQを使用して要素のスタイルを取得します.cssスタイルでも行内スタイルでもページで有効であれば、jQはラベルの属性を取得できます.元のjsは行内のスタイルしか取得できません.通過する.css()メソッドでスタイルを設定します:styleの下のスタイル数値タイプに単位がある場合は、単位を付けなければなりません.単位を付けないと有効になりません.

//  css  。  css         ，         ，jQ           ，   js    css    。
             rbg、   rbga；
var $bgcolor = $('p').css('backgroundColor');
console.log($bgcolor);
var $color = $('p').css('color');
console.log($color);
//  css      
//            ，      ，        。
$('p').css("font-size","12px");
//          
var $height = $('p').height();
console.log($height);
//          ，       ，     px            ，            。
$('p').height('30%');
//         
var $width = $('p').width();
console.log($width);
$('p').width('100px');

注意:幅:

 console.log($('div').innerWidth()); //innerWidth = content + padding
 console.log($('div').outerWidth()); //outerWidth = content + padding + border

ドキュメントに対するオフセットの取得量を設定します.

//offset()           ，              ，      ；
var $offset = $('p').offset();
 console.log($offset);
 //var object = {left:100,top:100}
 //$('p').offset(object);
//$('p').offset({left:10,top:12}); 

注意:offsetは1つのオブジェクトを取得するため、すべての設定はオブジェクトで設定する必要があります.位置付けされた祖先要素に対するオフセット量を取得します.position();

//                  
 //positon()       ，     
 $('p').position();
 var $positon = $('p').position();
 console.log($positon);

スクロールバーの取得を設定します.

           ：
//               scrollleft()
 var $scrollleft = $('p').scrollLeft();
 console.log($scrollleft);
//                ，               scrollleft    ，             。
 //          
 var $scrolltop = $('p').scrollTop();
 console.log($scrolltop);
 //         
//              $('body').scrollTop(2000);
 $('button').click(function(){
 $('body').scrollTop(0);
 //$('button').hide();
 })

要素のラップ:指定したノードに親要素を追加します.
warp()メソッド:選択したラベルに親要素を追加:warpAll():同じラベルに親要素を追加します.同じラベルに他の兄弟ラベルが混ざっている場合.これらのラベルを最後に置きます.warpInner()ラベルの内容に新しいラベルを追加して包みます.

 $(document).ready(function(){
 //    （    ）：          
 //warp（）            
 $('li').warp('<ul></ul>');
 //wrapAll                   ，                            
 $('li').wrapAll('<ul></ul>');
 //warpInner                   
 $('a').wrapInner('<b></b>');
 })

注;

//   
 $('li').unwrap();

DOMの追加削除:

      ：
//  
 //1          
 var textNode = '
        ，        
';
 //2 jQ  
 var textnode2 = $('').text('        ，       ');
 //3 DOM  
 var textNode3 = document.createElement('p');
 textNode3.innerText = "       ，       。"
         ：
//          
 //A>B A.append（B）；
//          $('body').append(textNode,textnode2,textNode3); 
 //A>B B.appendTo(A)
 $(textnode2).appendTo('body');
 //          
//          A.prepend(B)
 $('body').prepend(textNode3);
 // B.prependTo(A);
 $(textNode).prependTo('body');

ラベルの前後に追加:

/*
 after:           
 before:           
 */
 $('div').after(textNode3);
 $('div').before(textnode2);
//           ，       JQ  ，        (HTML  )：

削除、置換、ノードのクリア:

//    
 //$('h1').remove();    //     
 //          
 //$('body').empty();
 //    
 $('span').replaceWith('   ');

DOM追加削除:

 $(document).ready(function(){
 //     remove（）；            ，           ，          
 var $p = $('p').remove();
 $('body').append($p);
 //toggle   
//$('button').click(function(){
//$('p').toggle();
//});
//      p               
 /* $('button').click(function(){
 if($('p').length !=0){
 $('p').remove();
 }else{
 $($p).prependTo('body')
 }
 });
 */  
 //     clone（）      ，                         。      true         。
 // var $btn = $('button').clone(true);
//                   body  
 //$('body').append($btn); 
 $('button').click(function(){
 //empty                 。
 $("#car").empty();
 });
 //A.replaceWith(B);       B；
 //B.replaceAll(A);        A；
 var $img = '<img src="img/QQ  20160827090103.jpg">';
 $('button').click(function(){
//$('img').replaceWith($img);
 $($img).replaceAll('img');
 });
 })