jQuery関連2

5535 ワード

1.jQuery中、$(document).ready()とはどういう意味ですか.
.ready()関数は1つの関数,$(document)を渡すことができる.ready()は、ページ内のすべてのDOMロードが完了すると、ある関数が実行されることを示す
2. $node.html()と$node.text()の違いは?
$node.html()は、元のJSのinnerHTMLを類比し、集合の最初の一致要素のHTML内容を取得することができる.パラメータが入力されると、一致する各要素のHTMLコンテンツが設定されます.
$node.text()は、元のJSのinnerTextに類することができ、一致する要素のセット内の各要素のテキスト内容の結合を取得し、彼らの子孫を含む.パラメータが入力された場合、一致する要素セット内の各要素のテキスト内容を指定したテキスト内容に設定します.
3. $.extendの役割と使い方?
$.extend(target,objectN)は、N個のobjectを渡し、これらのobjectをtargetにマージし、同じ属性があれば、後で前のものを上書きします.
例:


  var object1 = {
    a: 1,
    b: 2
  }

  var object2 = {
    b:3,
    c:4
  }

  var target = {}

  $.extend(targer,object1,object2)  //target {a: 1,b:3,c:4}

4.jQueryのチェーンコールは何ですか?
jQueryのチェーン呼び出しとは、メソッドのチェーン呼び出し、すなわち連続的に呼び出すことができるメソッドの例:$nodeを指す.animate().animate().animate() $node.parents().children('.class').css()
5.jQueryにおけるdata関数の役割
.data(key,value)は、一致する要素に関連するデータ例を格納します.


  $('div').data('a', 1) //key='a';value=1
  $('div').data({b:2})  //      object
  $('div').data() //{a:1,b:2}

.data(key)keyにより、対応するvalueが得られ、1つのパラメータkeyのみが入力されたときに、一致する要素セットの最初の要素の所定の名前のデータ格納値が返される
6.次の機能に対応するjQueryメソッドを書き出します.

要素$nodeにclass activeを追加し、要素$noedにclass active

  $node.addClass('active') //  
  $node.removerClass('active') //

を削除する

は、要素$node、非表示要素$node

  $node.hide()  //  
  $ndoe.show()  //  
  $node.toggle()  //       

  $node.fadeIn()  //  
  $ndoe.fadeOut() //  
  $node.fadeToggle()  //  

  $node.slideDown() //  
  $node.slideUp() //  
  $node.slideToggle() //

を示す.

要素$nodeの属性:id、src、titleを取得し、以上の属性

  $node.attr('id')
  $node.attr('src')
  $node.attr('title')

  $node.attr({id: 'haha', src: 'hehe', title: 'yaya'})

を変更します.

$nodeにカスタム属性data-src

  $node.attr('data-src', 'test')

を追加

$ct内部の先頭に要素$node

  $ct.prepend($node)
  $node.prependTo($ct)

を追加

$ct内部の最後尾に要素$node

  $ct.append($node)
  $node.appendTo($ct)

を追加

$node

  $node.detach()
  $ndoe.remove()

を削除

$ctの内容を

  $ct.empty()

にクリア

html

  $ct.html('')

获取、设置$node 的宽度、高度(分别不包括内边距、包括内边距、包括边框、包括外边距)

  $node.height()
  $node.width() //       、  

  $node.innerHeight()
  $node.innerWidth()  //      

  $node.outerHeight()
  $node.outerWidth()  //     

  $node.outerHeight(true)
  $ndoe.outerWidth(true)  //

を$ctに設定

ウィンドウスクロールバー垂直スクロール距離

  $(window).scrollTop

を取得する.

$nodeからルートノードまでの水平、垂直オフセット距離

  $node.offset()

を取得する.

$nodeのスタイルを変更し、フォント色を赤、フォントサイズを14 px

  $node.css({color: 'red',front-size: '14px'})

に設定します.

ノードを巡回し、各ノードのテキスト内容を

  $node.each(function(){
    var text = $(this).text()
    text += $(this).text()
    $(this).text(text)
  })

繰り返します.

$ctからclassを検索します.itemのサブエレメント

  $ct.children('.item')

$ctのすべての子供

  $ct.find()

を取得

$nodeの場合、classは'.ct'の父は、その父から見つかった.パネルの子供

  $node.parents('.ct').find('.panel')

取得選択要素の数

  $node.length

現在の要素の兄弟におけるランキング

  $node.index()

を取得する
7.jQueryで以下の操作を実現

$btnをクリックすると、$btnの背景色を赤色に変更して青色に変更する

  $btn.click(function(){
    $btn.css('background','red')
    setTimeout(function(){$btn.css('background','blue')},500)
  })

ウィンドウがスクロールすると、垂直スクロール距離

  $(window).on('scroll',function(){
    console.log($(window).scrollTop())
  })

が取得される.

マウスを$divに置くと、$divの背景色を赤に変更し、マウスの背景色を白に移動する

  $div.on('mouseenter',function(){
    $div.css({'background-color': 'red'})
  })

  $div.on('mouseout',function(){
    $div.css({'background-color': 'white'})
  })

マウスがinput入力ボックスをアクティブにすると入力ボックスの枠が青になり、入力ボックスの内容が変化すると入力ボックスの文字の小文字が大文字になり、入力ボックスがフォーカスを失ったときに枠の青を取り除くと、コンソールは入力ボックスの文字

  
  
  
    
    demo
    
  
  
    
    
      $('input').on('input',function(){
        var text = $(this).val().toUpperCase()
        $(this).val(text)
      })

      $('input').blur(function(){
        console.log($(this).val())
      })

を示す.

selectが選択すると、ユーザが選択したコンテンツ

  
  
  
    
    demo
    
  
  
    

    
      $('select').change(function(){
        $('select option:selected').each(function(){
          console.log($(this).text())
        })
      })

が取得する.

jqueryキーボードリスニングイベント、および各キーに対応する数値

jQuery Validate検査リセット