フロントエンド-JQuery

目次

フロントエンド-JQuery

jQueryのオブジェクト

セレクタ

フィルタ

スタイル操作

位置操作

テキスト操作

属性操作

文書処理

イベント

共通イベント

イベントバインド

削除イベント

フロントエンド-JQuery
私たちがHTML、CSS、JavaScriptを学んだ後、ホームページの制作を完成することができて、JQueryはただ1種の軽量級のJavaScriptライブラリで、私たちにもっと便利にJavaScriptコードを書くことができて、私たちの需要を完成することができます.
jQueryのメリットは次のとおりです.

ファイルは非常に小さく、ページのロード速度

に影響しません.

セレクタは、JavaScriptを直接呼び出すよりも便利です.

は事務、スタイル、アニメーションをサポートし、インタフェースをより生き生きと書くことができます.

はブラウザ間で互換性があり、JavaScript互換性のあるブラウザよりも広い

プラグインの拡張、jQueryのサードパーティプラグインは非常に多く、呼び出しと修正が非常に便利である.

セレクタ、フィルタ、スタイル、テキスト操作、属性操作、ドキュメント処理、イベントなど、jQueryの各方面の内容を簡単に紹介します.
jQueryのオブジェクト
jQueryのオブジェクトは、jquerによってDOMがパッケージされたオブジェクトである、jQuery独自のオブジェクトであり、JavaScriptのオブジェクトと互いに変換することができる.
jQueryオブジェクトを定義するとき、変数名の前に$を付けます.jQuery文を呼び出すときも含めて、jQueryオブジェクトの操作を$で直接表すことができます.例えば、

var $a = jQuery  

# jQuery      :
$(selector).action()

また、jQueryを定義する前に必ずjQueryファイルをインポートし、ネットワーク上のキャッシュファイルでもローカルファイルでもよい.
https://jquery.com/
セレクタ

#id   
$("#id")

#     
$("tagName")

#class   
$(".className")

#       
$("*")

#     
$("#id,.className,tagName")

#     
$("x   y") x     y
$("x > y") x     y
$("x + y") x       y(  )
$("x - y") x     y

#     
#             ,       

[attribute]
[attribute=value]

フィルタ＃フィルタ＃

#      
:first       
:last         
:eq()               
:even              
:odd               
:gt()                  
:lt()                  
:not(   )         not        
:has(   )         has        

#      
:text         
:password     
:file           
:redio         
:checkbox      
:submit       
:reset        
:button       

#        
:enabled
:disabled
:checked
:selected     select          ,        selected       

#      
$("#id").next()          
$("#id").prev()          
$("#id").parent()       ,    ,   
$("#id").parent()          
$("#id").children()         
$("#id").siblings()         
$("#id").find()                 
$("#id").filter()        filter      ,     

スタイルアクション

#          
addClass();           ,      
removeClass();       CSS  ,      
hasClass();                ,       
toggleClass();          ,   ,    ,   

#       
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

位置操作

#         
offset()                            ,             
position()                          
scrollTop()                      (        )
scrollLeft()                    (        )

テキストアクション

#            html,text  val
html()                     html  ,               html  
text()                      ,                 
val()                         ,                

属性アクション

#           ID        
attr(attrName)                           
attr(attrName,attrValue)                    
attr(k1:v1,k2:v2)                         
removeAttr()                                

#       checkbox radio 
prop()              
removeProp()        

attr prop     ,attr     HTML    , prop DOM     .
      
                       ,  attr   .
               ,  checkbox,radio option ,  prop

ドキュメント処理

$(A).append(B)       B   A      

$(A).prepend(B)      B   A      

$(A).after(B)        B     A     

$(A).before(B)       B     A     

$(A).remove()        DOM           

$(A).empty()                     ,      

replaceWith()             

replaceAll()              

≪イベント｜Events｜ldap≫
jQueryのイベントはJavaScriptのイベントと非常に似ており、書き方以外はほぼ同じといえる.
共通イベント

click(function(){})     click   JavaScript  onclick ondblclick     
hover(function(){})                         ,       
blur(function(){})         onblur    
focus(function(){})        onfocus    
change(function(){})                 
keydown(function(){})             
keyup(function(){})               

イベントバインド

.on(events[selector],function(){})

events:       
selector:      
function:          

イベントの削除

.off(events[selector],function(){})

events:       
selector:      (  )
function: