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

作者: 阿鲁提尔 | 来源:发表于2017-09-25 20:12 被阅读0次

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 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。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'
    }

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

参考文章

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

饥人谷技术博客

补充动画持续参数