我爱编程饥人谷技术博客

jQuery选择器_Dom操作_样式_事件处理_动画

2017-09-25  本文已影响0人  阿鲁提尔

JQuery是什么？

jQuery就是javascript的一个库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率,极大地简化了 JavaScript 编程。

Javascipt跟jQuery的区别：

Javascript是一门编程语言，我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到。

jQuery 能做什么？

jQuery版本问题

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

什么是DOM原生对象：
什么是jQuery对象：

简单理解，就是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) )

.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属性

  $('.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])

更复杂的动画

  $('.btnHide').click(function(){
    $('#book').animate({
        opacity:0;
      },1000)
  })
  //点击 一秒时间隐藏

  $('.btnShow').click(function(){
    $('#book').animate({
        opacity:1;
      },1000)
  })
  //点击 一秒时间显示

补充 动画持续参数

jQuery 动画如何使用？

animate实例：

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内容。

  <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属性，可以用来读取或者没置某个元素中的文本内容。

  $('#container .active').text() //获取文本内容

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

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

.val([value])

  <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切换

参考文章

上一篇下一篇

猜你喜欢

热点阅读