口述做爰全过程和细节,高雅人妻被迫沦为玩物电影bd ,他扒开我奶罩揉吮我奶头

什么時候適合用jQuery

DOM操作較多、簡單的AJAX、需要兼容多款瀏覽器

什么時候不用jQuery

頁面交互極為簡單、頁面對流量有嚴苛要求、上級要求

jQuery做什么

選擇網頁元素、改變結果集、元素的操作：取值和賦值、移動、復制、刪除和創建
工具方法、事件操作、特殊效果、AJAX、

網站推薦

youmightnotneedjquery
jquery中文文檔

jQuery版本選擇

1.XXX版本支持IE6、7、8
2.XXX 3.XXX不兼容IE6、7、8 但體積小速度快

jQuery所有的API只有這兩種寫法，使用美元符號定義 jQuery

$.each()
$('ul').addClass()

啟動jQuery的幾種寫法

window.onload(等到頁面上所有的內容都加載完畢之后，不推薦)
$( document ).ready( handler )//等DOM加載完畢后再執行函數
$( handler )//當script放入header內時需要 采用這種寫法，等DOM加載完畢后再執行函數 .  script放入body底部時不需要這種方法
例如
$(function(){
})

jQuery對象與DOM對象的不同

$('#container li')稱為jQuery元素可認為是對DOM元素的一次封裝
jQuery對象只能用jQuery對象的方法
DOM對象只能使用DOM對象的方法
jQuery對象可以通過中括號加下標的方式[index]，如$('#container li')[2]轉化成DOM對象還有get(index)方式
如果想獲取jQuery對象中的某一項，但不想通過中括號加下標轉化成DOM對象的方式，可以$('#container li').eq(2)
使用$(DOM對象)就可以將DOM對象轉化為jQuery對象

jQuery選擇器

Query選擇器

jQuery DOM操作

創建元素

把DOM字符串傳入$方法即可返回一個jQuery對象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

在對象中前后添加元素

.append(content[,content]) / .append(function(index,html))
在對象.中的尾部插入內容
- 可以一次添加多個內容，內容可以是DOM對象、HTML string、 jQuery對象
- 如果參數是function，function可以返回DOM對象、HTML string、 jQuery對象，參數是集合中的元素位置與原來的html值

.appendTo(target)
把對象a插入到目標元素b尾部 a.appendTo(b)
- 目標元素可以是selector, DOM對象, HTML string, 元素集合, jQuery對象;

總之，b.append(a) === a.appendTo(b)

.prepend(content[,content]) / .prepend(function(index,html))
向對象.頭部追加內容 $( ".inner" ).prepend( "<p>Test</p>" );
.prependTo(target)
把對象插入到目標元素頭部
$( "<p>Test</p>" ).prependTo( ".inner" );

在對象的同級前后添加元素

.before([content][,content]) / .before(function)
在對象.前面(不是頭部，而是外面，和對象并列同級)插入內容
.insertBefore(target)
把對象插入到target之前
.after([content][,content]) / .after(function（index）)
在對象后面(不是尾部，而是外面，和對象并列同級)插入內容
.insertAfter(target)
對象插入到target之后（同樣不是尾部，是同級）

刪除元素

.remove([selector])
刪除被選元素（及其子元素）
.empty()
清空被選擇元素內所有子元素，但這個元素本身仍然存在
.detach()
和.remove()一樣刪除被選元素, 但 .detach()會保存刪除的數據。
當需要移走一個元素，不久又將該元素插入DOM時，這種方法很有用。

包裹元素

.wrap(wrappingElement) / .wrap(function(index))
為每個對象包裹一層HTML結構
如$( ".inner" ).wrap( "<div class='new'></div>" );
.wrapAll(wrappingElement)
把所有匹配對象包裹在同一個HTML結構中
.wrapInner(wrappingElement) / .wrapInner(function(index))
如$( ".inner" ).wrapInner( "<div class='new'></div>");
意思是$( ".inner" )內部的內容分別由( "<div class='new'></div>")包裹
.unwrap()
把DOM元素的parent移除

html([string])

讀寫兩用的方法，用于獲取/修改元素的innerHTML

$('div').html() #沒有參數，獲取元素的innerHTML
$('div').html('123') #有參數，參數內容即為修改后的元素innerHTML

text()

和html方法類似，操作的是DOM的innerText值

事件

.on( events [,selector ] [,data ], handler(eventObject) )

增加事件處理函數

events：事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"，一個或多個
selector：選擇器，用于過濾出被選中的元素中能觸發事件的后代元素。
data：傳遞給事件處理函數的event.data
handler(eventObject)：事件被觸發時的執行函數。若該函數只是要執行return false，該參數位置可以直接簡寫成 false

// 普通事件綁定，最簡單的用法
$('div').on('click', function(e){
    console.log(this); //點擊的元素
    console.log(e); // 事件，e.target 事件的對象
});
// 事件委托或者事件代理，想讓div 下面所有的span綁定事件，可以把事件綁定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在綁定的時候給事件處理程序傳遞一些參數
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

命名空間的作用：解綁事件時做一個區分

#click.hello事件解綁，但是click事件不受影響
   $('.box>ul').on('click',3,function(e){
      console.log(e.data)
    })
    $('.box>ul').on('click.hello','li',function(){
      console.log(this)
      var str = $(this).text()
      $('#wrap').text(str)
    })
    $('.box>ul').off('click.hello')

事件代理的意義：1.給未創建的后代元素綁定事件 2.當需要監視很多元素的時候，代理事件的開銷更小

.off( events [, selector ] [, handler ] )

移除一個事件處理函數

.trigger( eventType [, extraParameters ] )

用語句代替用戶的操作，觸發事件
$('#foo').trigger('click');

事件的簡寫方法

$('.box>ul').on('click',3,function(e){
      console.log(e.data)
    })
與下面的寫法都是可以的
$('.box>ul').click(3,function(e){
      console.log(e.data)
    })

屬性相關

.val([value])

讀寫雙用的方法，用來處理input的value，當方法沒有參數的時候返回input的value值，當傳遞了一個參數的時候，方法修改input的value值為參數值

$('input').val() //沒有參數的時候返回input的value值
$('input').val('newValue'); //當傳遞了一個參數的時候，將參數值設為input的value值
$('input')[0].value = "hello" 用原生DOM的方式設置值

.attr(attributeName)

獲取元素特定屬性的值

 <input type="text" value="hello">
    <script>
        console.log($('input').attr("type")) //text
    </script>

.attr(attributeName,value)

/ .attr(attributesJson)

/ .attr( attributeName, function(index, attr) )

為元素屬性賦值

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
}); #以Json格式批量設置屬性

$( "#greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
});//這里用id選擇符舉例是不是function永遠最多迭代一次？用類選擇符是不是更好些？

.removeAttr(attributeName)

為匹配的元素集合中的每個元素中移除一個屬性

CSS相關

.css(propertyName) / .css(propertyNames)

.css()獲取到的是瀏覽器計算后的屬性

獲取元素style特定property的值

var color = $( this ).css( "background-color" );

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )

設置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );//在原來的基礎上寬度增加200

$( this ).css( "background-color", "yellow" );

$( this ).css({ //Json格式批量設置
  "background-color": "yellow",
  "font-weight": "bolder"
});

.addClass(className) / .addClass(function(index,currentClass))

為元素添加一個或多個class，不是覆蓋原class，是追加，也不會檢查重復

removeClass([className]) / ,removeClass(function(index,class))

移除元素單個/多個/所有class

$( "p" ).addClass( "myClass yourClass" ); //為元素添加多個class
$( "p" ).removeClass( "myClass yourClass" );//移除元素多個class

.hasClass(className)

檢查元素是否包含某個class，返回true/false

$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)

toggle是切換的意思，方法用于切換class
當觸發事件時，先去判斷有沒有該class,有的話去掉，沒有的話加上

jQuery 動畫

基礎

.hide([duration ] [,easing ] [,complete ])
隱藏元素，沒有參數的時候等同于直接設置display:none屬性

duration：動畫持續多久
easing：表示過渡使用哪種緩動函數，jQuery自身提供"linear" 和 "swing"
complete：在動畫完成時執行的函數,先完成動畫，后執行函數

.show( [duration ] [, easing ] [, complete ] )
用于顯示元素，用法和hide類似
.toggle( [duration ] [, easing ] [, complete ] )
toggle是切換的意思，用來切換元素的隱藏、顯示，類似于toggleClass
事件處理套件也有一個名為.toggle()方法。哪一個被調用取決于傳遞的參數的設置

漸變

.fadeIn( [duration ] [, easing ] [, complete ] )
通過淡入的方式顯示匹配元素
.fadeOut( [duration ] [, easing ] [, complete ] )
通過淡出的方式隱藏匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] )
調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果
.fadeToggle( [duration ] [, easing ] [, complete ] )

滑動

.slideDown( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示一個匹配元素
.slideUp( [duration ] [, easing ] [, complete ] )
用滑動動畫隱藏一個匹配元素
.slideToggle( [duration ] [, easing ] [, complete ] )
用滑動動畫顯示或隱藏一個匹配元素
slideDown&slideUp例子

自定義動畫

.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一個CSS屬性和值的對象,動畫將根據這組對象移動。

##可以把一串連續變化的屬性定義成數組，遍歷數組
  $('#btn3').click(function(){
        var action = [
          {width:'80px',height:'80px',left:0,top:0},
          {width:'150px',height:'150px',left:0,top:0},
          {left:'200px'},
          {top:'200px'},
          {left:'0'},
          {top:'0'},
          {width:'80px',height:'80px',left:0,top:0}
        ]
        action.forEach(function(action,idx){
          $('.box2').animate(action)
        })
     })

#jQuery也可以使用鏈式語法
         action.forEach(function(action,idx){
         $('.box2').animate({width:'80px',height:'80px',left:0,top:0})
                   .animates({width:'150px',height:'150px',left:0,top:0}）
                   .animate({left:'200px'})
                   .animate({left:'0'})
                   .animate({top:'0'})
        })

.animate( properties, options )
options是一組包含動畫選項的值的集合。常用的選項:

duration (default: 400)：一個字符串或者數字決定動畫將運行多久。默認值: "normal"，三種預定速度的字符串("slow", "normal", 或 "fast"或表示動畫時長的毫秒數值(如：1000) ）
easing (default: swing)：一個字符串，表示過渡使用哪種緩動函數。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
complete：在動畫完成時執行的函數

.stop( [clearQueue ] [, jumpToEnd ] )
停止元素當前正在運行的動畫。

clearQueue
一個布爾值，指示是否取消以列隊動畫。默認 false
jumpToEnd
指示是否當前動畫立即完成，默認false.

.finish( [queue ] )
停止當前正在運行的動畫，刪除所有排隊的動畫

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

jQuery選擇器_Dom操作_樣式_事件處理_動畫