绝色教师美妇沉沦为玩物,色欲国产精品一区成人精品,息与子五十路孕中文字幕

JQuery是什么？

jQuery就是javascript的一個庫，把我們常用的一些功能進行了封裝，方便我們來調用，提高我們的開發效率,極大地簡化了 JavaScript 編程。

Javascipt跟jQuery的區別：

Javascript是一門編程語言，我們用它來編寫客戶端瀏覽器腳本。
jQuery是javascript的一個庫，包含多個可重用的函數，用來輔助我們簡化javascript開發
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

jQuery 能做什么？

方便快捷獲取DOM元素
動態修改頁面樣式
動態改變DOM內容
元素的操作：取值、賦值、移動、復制、刪除和創建
響應用戶的交互操作
為頁面添加動態效果
統一Ajax操作
簡化常見的JavaScript任務

jQuery版本問題

1.x：兼容ie678,使用最為廣泛的，體積大，官方只做BUG維護，功能不再新增。因此一般項目來說，使用1.x版本就可以了，最終版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，體積小，官方只做BUG維護，功能不再新增。如果不考慮兼容低版本的瀏覽器可以使用2.x，最終版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的瀏覽器。除非特殊要求，一般不會使用3.x版本的，很多老的jQuery插件不支持這個版本。目前該版本是官方主要更新維護的版本。

jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

什么是DOM原生對象：

DOM實際上是以面向對象方式描述的文檔模型。
DOM定義了表示和修改文檔所需的對象、這些對象的行為和屬性以及這些對象之間的關系。
根據W3C DOM規范，DOM是HTML與XML的應用編程接口（API）。
通過 DOM，可以訪問所有的 HTML 元素，連同它們所包含的文本和屬性?？梢詫ζ渲械膬热葸M行修改和刪除，同時也可以創建新的元素。HTML DOM 獨立于平臺和編程語言它可被任何編程語言諸如 Java、JavaScript 和 VBScript 使用。
DOM對象即是我們用傳統的方法(javascript)獲得的對象。

什么是jQuery對象：

jquery對象其實是一個javascript的數組
這個數組對象包含125個方法和4個屬性
4個屬性分別是
- jquery 當前的jquery框架版本號
- length 指示該數組對象的元素個數
- context 一般情況下都是指向HtmlDocument對象
- selector 傳遞進來的選擇器內容如：#yourId或.yourClass等

簡單理解，就是jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是jQuery獨有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；同理，原生JS需要使用原生JS對象的屬性和方法。

如何轉化？

<div id = "container">
    <ul>
        <li>1</li>
        <li class="active">2</li>
        <li>3</li>
    </ul>
</div>

【jQuery對象轉DOM對象】jQuery對象是一個類數組對象，可以通過[index]的方法得到相應的DOM對象。

$('#container li') ==> [li,li.active,li]
//jQuery對象
$('#container li')[0] ==> <li>1</li>
//jQuery對象轉DOM原生對象

【jQuery對象轉DOM對象】jQuery本身提供，通過.get(index)方法，得到相應的DOM對象。

$('#container li') ==> [li,li.active,li]
//jQuery對象
$('#container li').get(0) ==> <li>1</li>
//jQuery對象轉DOM原生對象 注意：這里是()

【DOM對象轉jQuery對象】對于一個DOM對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了，方式為$(DOM對象)。

document.querySelector('.active') ==> <li class="active">2</li>  
//DOM對象
$(document.querySelector('.active')) ==> [li.active] 
//DOM對象轉jQuery對象

jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

bing()

描述：為一個元素綁定事件處理程序。

一個基本的用法：

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
//使元素ID為foo響應click事件。當在用戶點擊這個元素之后，警報將顯示。

多個事件：

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});
//在<div id="foo">(當最初它不會有"entered"樣式類時)上的這個效果是
//當鼠標進入<div>時,增加"entered"樣式類，鼠標離開時移除這個樣式類

注意：在jQuery 3.0中，.bind()已被標記為棄用。從jQuery 1.7開始，.on() 方法是將事件處理程序綁定到文檔（document）的首選方法。
.bind()中文API

unbind()

描述：從元素上刪除一個以前附加事件處理程序。

不帶參數的.unbind() 將移除元素上所有綁定的處理程序：

  $('#foo').unbind();
  //移除#foo元素的所有事件

為了更加精確，我們可以傳遞一個事件類型：

  $('#foo').unbind('click');
  //刪除#foo元素的點擊事件

注：在jQuery 3.0中，.unbind()已被標記為棄用。從jQuery 1.7開始，它已經被.off()方法取代。
.unbind()中文API

delegate()

描述：為所有匹配選擇器（selector參數）的元素綁定一個或多個事件處理函數，基于一個指定的根元素的子集，匹配的元素包括那些目前已經匹配到的元素，也包括那些今后可能匹配到的元素。

  $("table").delegate("td", "click", function() {
    $(this).toggleClass("chosen");
  });
  //給table下面的所有td綁定事件代理，用戶點擊時，移除/增加class:chosen

live

將委托的事件處理程序附加到一個頁面的document元素，從而簡化了在頁面上動態添加的內容上事件處理的使用。
直接給元素綁定時間代理。

  $('a').live('click',function(){
      alert('That tickles!')
  })

注：從jQuery1.7開始， .live() 方法已經過時了。請使用.on()
附加事件處理程序。舊版本的jQuery中用戶，應優先使用.delegate()來取代.live()。

on

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

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

.on()方法提供綁定事件處理的所有功能。包括.bind()、.delegate()、.live()

  //普通事件綁定，最簡單的用法
  $('#div').on('click',function(e){
    console.log(this)
    //輸出當前點擊的元素
  })

  //事件委托或事件代理，想讓div下面所有的span綁定事件，可以把事件綁定在div上
  $('#div').on('click','span',function(e){
    console.log(this)
  })

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

舉例

  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <input id="ipt" type="text">
    <button id="btn">添加</button>
    <div id="warp">這里是warp</div>
  </div>

HTML效果

  //為li添加點擊事件
  $('.box>ul>li').on('click',function(){
    var str = $(this).text()
    $('#wrap').text(str) //替換#wrap的文本內容
  })

缺點：后來添加的li沒有綁定事件，點擊li不會在warp內顯示文本

  // 有綁定事件(給父級元素綁定事件)
  $('.box>ul').on('click','li',function(){
    var str = $(this).text()
    $('#warp').text(str)
  })

  //在input輸入內容，生成li添加到ul中
  $('#btn').on('click',function(){
    var value = $('#ipt').val() //獲取ipt的value值
    $('.box>ul').append('<li>+value+</li>')
    //在ul中添加
  })

off()

描述：方法移除用.on()綁定的事件處理程序。

  //移除所有段落上的事件
  $("p").off()

  //移除所有段落上的代理事件
  $("p").off("click","**")

  //通過傳入的第三個參數，僅移除先前綁定的事件處理函數
  var foo = function(){
      xxx
  }
  //添加事件處理函數
  $("body").on("click","p",foo);
  //移除事件處理函數
  $("body").off("click","p",foo);

標記命名空間
為了方便移除事件

  $('.box>ul').on('click.hello','li',function(){ hello
    xxx 
  })
  //標記一個click，命名為hello
 
  //移除這個命名標記
  $('.box>ul').off('click.hello')

推薦使用哪種？

事件處理中最頭疼的就是瀏覽器兼容問題，jQuery封裝了很好的API，可以方便的進行事件處理，在1.7之前的版本中jQuery處理事件有很多個辦法，作用各不相同，后來統一的使用on/off方法。

使用on綁定事件使用事件代理的寫法？

普通綁定事件：$('.btn').click(function(){}綁定

on綁定事件：$(document).on('click','.btn',function(){}綁定

jQuery 如何展示/隱藏元素？

原生js

  node.style.display = "none/block"

jQuery .css相關

  $('.hunger').css('display','none')  //隱藏
  $('.hunger').css('display','block')  //展示

基礎

.hide([duration][,sasing][,complete])/.show([duration][,sasing][,complete])

用于隱藏/展示元素，沒有參數的時候等于直接設置display屬性

duration:動畫持續時間，毫秒單位
easing:表示過渡使用哪種緩動函數，jQuery自身提供‘linear’和‘swing’(其他可以使用相關插件)
- linear 在開頭/結尾移動慢，在中間移動快
- swing 勻速移動
complete:在動畫完成時執行的函數

  $('.hunger').hide() 隱藏
  $('.hunger').show() 展示
  $('.hunger').hide(1000) 一秒的隱藏動畫
  $('.hunger').show(1000) 一秒的展示動畫

.toggle([duration][,easing][,complete])

用來切換元素的隱藏、顯示

漸變

.fadeIn/.fadeOut([duration][,easing][,complete])

淡入的方式顯示匹配元素/淡出的方式隱藏匹配元素

  $('#btn-box1').on('click',function(){
      $('.box').fadeIn()  //淡入顯示
  })
  $('#btn-box2').on('click',function(){
      $('.box').fadeOut()  //淡出隱藏
  })

.fadeTo(duration,opcity[,easing][,complete])

調整匹配元素的透明度，方法通過匹配元素的不透明度做動畫效果

  $('#book').fadeTo('slow',0)
  //slow 600毫秒 opcity=0 ==> 隱藏
  $('#book').fadeTo('slow',1)
  // opcity = 1 ==> 展示

.fadeToggle([duration][,easing][,complete])

通過匹配的元素的不透明度動畫，來顯示或隱藏他們，方便執行匹配元素的不透明度動畫，當被可見元素調用時，元素不透明度一旦達到0，display樣式屬性設置為none,所以元素不在影響頁面的布局

  $("button:first").click(function(){
    $("p:first").fadeToggle("slow","linear");
    // 漸隱或漸顯，用時 600 毫秒，并且是線性緩沖效果。
  })

滑動

.slideDown/.slideUp([duration][,easing][,complete])

向下滑動顯示一個匹配元素/向上滑動顯示一個匹配元素

  $(selector).on('click',function(){
    $('.box').slideDown('slow')
    //向下滑動出現
  })
------------------------------------
  $(selector).on('click',function(){
    $('.box').slideUp('slow')
    //向上滑動出現
  })

自定義

.animate(properties[,duration][,easing][,complete])

更復雜的動畫

properties是一個css屬性和值的對象，動畫將根據這組對象移動

  $('.btnHide').click(function(){
    $('#book').animate({
        opacity:0;
      },1000)
  })
  //點擊 一秒時間隱藏

  $('.btnShow').click(function(){
    $('#book').animate({
        opacity:1;
      },1000)
  })
  //點擊 一秒時間顯示

補充動畫持續參數

數字毫秒
fast(200毫秒)
normal(400毫秒)
slow(600毫秒)

jQuery 動畫如何使用？

顯示/隱藏
- show() 顯示
- hide() 隱藏
- toggle() 切換顯示/隱藏
漸變
- fadeIn() 淡入的方式顯示匹配元素
- fadeOut() 淡出的方式隱藏匹配元素
- fadeTo() 調整匹配元素的透明度
- fadeToggle() 通過不透明度，切換顯示/隱藏元素
滑動
- slideDown() 向下滑動顯示
- slideUp() 向上滑動隱藏
自定義（更復雜的動畫）
- .animate(properties[,duration][,easing][,complete])
  - properties一個CSS屬性和值的對象,動畫將根據這組對象移動。
  - duration (默認: 400):一個字符串或者數字決定動畫將運行多久。（愚人碼頭注：默認值: "normal"，三種預定速度的字符串("slow", "normal", 或 "fast")或表示動畫時長的毫秒數值(如：1000) ）
  - easing (默認: swing):一個字符串，表示過渡使用哪種緩動函數。（注：jQuery自身提供"linear" 和 "swing"）
  - complete:在動畫完成時執行的函數。

animate實例：

  //點擊按鈕后div元素的幾個不同屬性一同變化
  $("#go").click(function () {
    $("#block").animate({
        width: "90%",
        height: "100%",
        fontSize: "10em",
        borderWidth: 10
    }, 1000);
});

  //讓指定元素左右移動
  $("#right").click(function () {
    $(".block").animate({ left: '+50px' }, "slow");
  });
  $("#left").click(function () {
    $(".block").animate({ left: '-50px' }, "slow");
  });

  //在600毫秒內切換段落的高度和透明度
  $("p").animate({
    height: 'toggle', opacity: 'toggle'
  }, "slow");

 //用500毫秒將段落移到left為50的地方并且完全清晰顯示出來（透明度為1）
  $("p").animate({
    left: 50, opacity: 'show'
  }, 500);

  //切換顯示隱藏
  $(".box h3").toggle(function(){
    $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'},"slow");
    $(this).addClass("arrow");
    return false;
   },function(){
      $(this).next(".text").animate({height: 'toggle', opacity: 'toggle'}, "slow");
      $(this).removeClass("arrow");
      return false;
    });
  });

  //滾動焦點
  $(window).scroll(function () {              //當前窗口的滾動事件
    var winTop = $(window).scrollTop();     //獲取當前窗口的大小
    var objTop = $("#obj1").offset().top;   //獲取當前對象的x坐標
  });

如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

設置和獲取元素內部 HTML 內容

.html([string])

描述：此方法類似于JavaScript中的innerHTML屬性，可以用來讀取或者設置某個元素中的HTML內容。

當用戶沒有傳遞參數的時候，返回元素的innerHTML
當用戶傳遞了一個string參數的時候，修改元素的innerHTML為參數值。

  <div id = "container">
    <ul>
      <li>1</li>
      <li class="active"><strong>2</strong></li>
      <li>3</li>
    </ul>
  </div>

  $('#container .active').html() ==> <p>2</p> //也會獲取HTML
  $('#container .active').html('<i>2</I>')  
  ==> <strong>2</strong>替換為<i>2</i>

注意：html()方法可以用于XHTML文檔，但不能用于XML文檔。

設置和獲取元素內部文本

.text()

描述：此方法類似于JavaScript中的innerText屬性，可以用來讀取或者沒置某個元素中的文本內容。

當用戶沒有傳遞參數的時候，返回元素的innerText
當用戶傳遞了一個string參數的時候，修改元素的innerText為參數值。

  $('#container .active').text() //獲取文本內容

  $('#container .active').text('<i>2</i>')

如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

.val([value])

不加參數用于獲取表單元素的值，如input, select 和 textarea。
含有參數，參數內容包含一個文本字符串,一個數字，或一個以字符串形式的數組來設定每個匹配元素的值。

  <input id="ipt1" type="text" value="hello">
  $('#ipt1').val() //獲取ipt.value的值
  $('#ipt1').val('hello wrold')  換掉里面的值
  $('#ipt1')[0].value="123" 原生DOM設置

.attr(attributeName)
獲取/設置值和屬性

  <input id="ipt1" type="text" value="123" sex="男">
  $('#ipt1').attr('type')  ==> text //獲取值
  $('#ipt1').attr('type','checkbox')  //把type值設置為checkbox
  $('#ipt1').attr('id')  ==> //獲取值ipt1
  $('#ipt1').attr({class:"sexInput",title:value:"456"}) //設置多個值

使用 jQuery實現如下效果

我的實例

使用 jQuery 實現如下效果

我的實例

實現如下效果

我的實例

router.js

app.get('/getProducts',function(req,res){
    var products = [
        {
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
                  4/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂蘭 黃金手 猴哥款',
            price: '￥405.00'
        },{
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
                  4/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂蘭 黃金轉運珠 猴哥款',
            price: '￥100.00'
        },{
            img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
                  4/374195/9196ac66/56af0958N1a723458.jpg',
            name: '珂蘭 黃金手鏈 3D猴哥款',
            price: '￥45.00'
        },
        
    ]
    var retProducts=products;
    res.send({
        status: 0,
        data: retProducts
    })
})

Ps:當點擊按鈕時使用如下數據

var products = [
    {
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
              4/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂蘭 黃金手 猴哥款',
        price: '￥405.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
              4/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂蘭 黃金轉運珠 猴哥款',
        price: '￥100.00'
    },{
        img: 'http://img10.360buyimg.com/N3/jfs/t2242/92/144654628
              4/374195/9196ac66/56af0958N1a723458.jpg',
        name: '珂蘭 黃金手鏈 3D猴哥款',
        price: '￥45.00'
    }

左右切換的Tab效果

上下滑動Tab切換

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

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

JQuery是什么？

Javascipt跟jQuery的區別：

jQuery 能做什么？

jQuery版本問題

jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

什么是DOM原生對象：

什么是jQuery對象：

如何轉化？

jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

bing()

unbind()

delegate()

live

on

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

off()

推薦使用哪種？

使用on綁定事件使用事件代理的寫法？

jQuery 如何展示/隱藏元素？

原生js

jQuery .css相關

基礎

.hide([duration][,sasing][,complete])/.show([duration][,sasing][,complete])

.toggle([duration][,easing][,complete])

漸變

.fadeIn/.fadeOut([duration][,easing][,complete])

.fadeTo(duration,opcity[,easing][,complete])

.fadeToggle([duration][,easing][,complete])

滑動

.slideDown/.slideUp([duration][,easing][,complete])

自定義

.animate(properties[,duration][,easing][,complete])

補充 動畫持續參數

jQuery 動畫如何使用？

animate實例：

如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

設置和獲取元素內部 HTML 內容

.html([string])

設置和獲取元素內部文本

.text()

如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？

使用 jQuery實現如下效果

我的實例

使用 jQuery 實現如下效果

我的實例

實現如下效果

我的實例

左右切換的Tab效果

上下滑動Tab切換

參考文章

推薦閱讀更多精彩內容

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

jQuery 能做什么？

jQuery 對象和 DOM 原生對象有什么區別？如何轉化？

如何轉化？

jQuery中如何綁定事件？bind、unbind、delegate、live、on、off都有什么作用？推薦使用哪種？使用on綁定事件使用事件代理的寫法？

推薦使用哪種？

使用on綁定事件使用事件代理的寫法？

jQuery 如何展示/隱藏元素？

補充動畫持續參數

jQuery 動畫如何使用？

如何設置和獲取元素內部 HTML 內容？如何設置和獲取元素內部文本？

如何設置和獲取表單用戶輸入或者選擇的內容？如何設置和獲取元素屬性？