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

1: jQuery 能做什么?

1. 选择网页元素

可以当作CSS选择器使用,简单的比如 $('#id'),复杂的比如$('E~F')

2. 改变结果集

提供各种强大的过滤器对结果集进行筛选,缩小选择结果。比如:
$('div').has('p'); // 选择包含p元素的div元素
$('div').eq(5); //选择第6个div元素

3. 链式操作

最终选中网页元素以后,可以对它进行一系列操作,并且所有操作可以连接在一起,以链条的形式写出来,比如:
$('div').find('h3').eq(2).html('Hello') //找到div标签选择其中的h3,但是h3有多个,接着选择第三个h3,把它的html内容改为hello

4. 元素的操作:取值和赋值

比如:
$('h1').html(); //html()没有参数,表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello,表示对h1进行赋值

5. 元素的操作:移动

比如:
$('p').after($('div')) //在p后面插入div
$('div').insertAfter($('p')) // 把div插入到p后面
这两种目的一样

6. 元素的操作:复制、删除和创建

比如:
复制元素使用.clone()
var obj = $('<div class="test"><p><span>Done</span></p></div>')
只需要把DOM字符串传入$方法即可返回一个jQuery对象

7. 工具方法

比如:
$.trim() //去除字符串两端的空格
$.isArray() //判断某个参数是否为数组
$.support() 判断浏览器是否支持某个特性

8. 事件操作

jQuery 把事件直接绑定在网页元素之上,比如:

  $('p').click(function(){
    alert('Hello');
  });

9. 特殊效果

比如:
.fadeIn() //淡入
.fadeOut() //淡出

10. AJAX

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

二者区别:

DOM 原生对象是通过js中查询元素的方法get到的DOM对象, 比如 document.getElementById()、document.querySelector() 、document.querySelectorAll()等等。
分为单个节点对象,以及DOM提供的两种节点集合对象,NodeList和HTMLCollection。

而jQuery对象是使用内部封装好的选择器获得的对象,也许返回的结果类似,甚至内部实现采用了某些原生js的获取元素的方法,但是经过封装后,就是独有的jQuery对象,二者不等价。
jQuery选择器返回的也是类数组对象。但是jQuery对象和DOM对象不能相互用对方的方法操作。

什么意思呢? 例如:
jq中用 $("#ct").html() 获取ID为ct的元素内的html代码。
原生中用 document.querySelector('#ct').innerHTML 来达到同样目的,返回的结果相同,但中间取值过程不同。
所以 $("#ct").innerHTML、document.querySelector('#ct').html()之类的写法都是错误的!

如何相互转化:

  • 原生对象 → jQuery对象:
    只需要把DOM字符串传入$方法即可返回一个jQuery对象,这也是创建一个jqeury对象的方法之一。
    var obj = $('<div class="test"><p><span>Done</span></p></div>')
    或者传入DOM中原生查询元素的方法$(document.querySelector('.active'))

  • jQuery对象 → 原生对象 :

  1. 通过[index]方法,因为jQuery对象是类数组对象:
    $('li')[2]
  2. 使用jQuery本身提供,通过.get(index)方法,通过检索匹配jQuery对象得到对应的DOM元素:
    $('li').get(2)

如果只是在匹配到的jQuery对象里众多DOM元素集合中,选择一个元素构造新的jQuery对象,那么可以使用 .eq(index) 方法,参数为集合下标的索引值。
最后再次强调一遍,不能用DOM原生方法操作jQuery对象,反之亦然。 通过相互转换之后,方能使用。

3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

  • bind:为一个元素绑定一个事件处理程序,处理程序附加到jQuery对象中当前选中的元素,所以,在.bind()绑定事件的时候,这些元素必须已经存在。
  • unbind:从元素上删除一个以前附加事件处理程序。
  • delegate:为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
    用于事件绑定和代理(委派),对应的是 undelegate
  • live:将委托的事件处理程序附加到一个页面的document元素,从而简化了在页面上动态添加的内容上事件处理的使用。
  • on:.on( events [, selector ] [, data ], handler(eventObject) )在选定的元素上绑定一个或多个事件处理函数。
  • off: .off( events [, selector ] [, handler ] )移除一个事件处理函数。

关于绑定事件和移除绑定,推荐统一使用on/off, 其他几种都已经过时或在新版中已经被移除。
使用on绑定事件使用事件代理:

<body>
  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
  <div id="wrap"></div>
  <script>
    $('.box>ul').on('click', 'li', function(){
      //var str = $(this).text()
      //原生写法var str = this.innerText
      $('#wrap').text(str)
    })
  </script>
</body>

以上是为ul绑定事件,代理内部的li,当点击li时,ul下方的div里展示对应文本内容。
注意这里的this,因为on中传入了第二个过滤选择器参数,所以this指代的是li, 这与原生js中的玩法是不一样的,原生js中,this指代的是被绑定监听器的元素,也就是ul,但这是jQuery中实际上是绑定到了ul下面所有的li上,内部存在遍历。

4:jQuery 如何展示/隐藏元素?

我把这里的展示/隐藏 理解为 包括 display 或者 opacity这种脱离或不脱离文档流的展示/隐藏,这是较为宽泛的理解。

使用jQuery提供的动画方法 :

  • 显示/隐藏:.show() 和 .hide()
  • 渐变:渐入/渐出 .fadeIn() 和 .fadeOut()
  • 滑动:滑上/滑下 .slideUp() 和 .slideDown()
  • 使用 .animate() 动画控制透明度属性

使用提供的css相关方法:

  • 使用 .addClass() / removeClass() 控制有 display 样式的class
  • 使用 .css() 直接设置样式
    ......

总结: 实现的方法比较多,但细究起来是有区别的,优先选择最符合你的需求,和当前代码上下文的方法。

5: jQuery 动画如何使用?

照着文档,直接使用,关于常用的jQuery动画,上面也提到了不少,不过还是说一下,动画方法的可选参数是什么。

基础方法 效果作用
[duration ] [, easing ] [, complete ] 分别是动画持续时间,过渡效果(linear、swing),以及完成时执行的函数
.hide( ) 用于隐藏元素,没有参数的时候等同于直接设置display属性
.show( ) 用于显示元素,用法和hide类似
.toggle( ) 用来切换元素的隐藏、显示,类似于toggleClass,用法和show、hide类似
渐变方法 效果作用
.fadeIn( ) 通过淡入的方式显示匹配元素
.fadeOut( ) 通过淡出的方式隐藏匹配元素
.fadeToggle( ) 通过匹配的元素的不透明度动画,来显示或隐藏它们
滑动方法 效果作用
.slideDown( ) 用下滑动画显示一个匹配元素
.slideUp( ) 用上滑动画隐藏一个匹配元素
.slideToggle( ) 用滑动动画显示或隐藏一个匹配元素
.fadeTo( duration, opacity [, easing ] [, complete ] ) 调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
自定义动画 效果作用
.animate( properties [, duration ] [, easing ] [, complete ] ) properties是一个CSS属性和值的对象,动画将根据这组对象移动
动画相关方法 效果作用
.finish() 停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
.stop( [clearQueue ] [, jumpToEnd ] ) 停止匹配元素当前正在运行的动画,有两个参数,默认都是false, 是否取消已经列队的动画,和是否当前动画立即完成

前面的参数基本都是一样的,因此用法雷同,但效果各异。
一起来看几个常见的例子:

  <style>
    .box {
      width: 100px;
      height: 100px;
      background: red;
      position: relative;
    }
    .ct .item {
      list-style: none;
      border: 1px solid #666;
    }
    .ct .item p {
      display: none;
    }
  </style>
  <button id="btn-box1">fadeOut</button>
  <button id="btn-box2">fadeIn</button>
  <button id="btn-box3">攒劲的动画</button>
  <button id="btn-box4">finish</button>
  <button id="btn-box5">stop</button>
  
  <div class="box"></div>

  <div class="ct">
    <ul>
      <li class="item">
        <h3>标题1</h3>
        <p>内容1</p>
      </li>
      <li class="item">
        <h3>标题2</h3>
        <p>内容2</p>
      </li>
      <li class="item">
        <h3>标题3</h3>
        <p>内容3</p>
      </li>
      <li class="item">
        <h3>标题4</h3>
        <p>内容4</p>
      </li>
    </ul>
  </div>

淡入淡出、滑动等效果:

  $('#btn-box1').on('click', function(){
      $('.box').fadeToggle(3000)
      //$('.box').slideUp(3000)
  })

  $('#btn-box2').on('click', function(){
      $('.box').fadeIn(3000)
      //$('.box').slideDown(3000)
  })

自定义动画的使用,这是比较优雅的用法,把动画关键帧,存在数组里,然后遍历数组的时候,传入动画函数:

  // 连续的自定义动画
  $('#btn-box3').click(function(){
    let actions = [
      {width:'200px', height:'200px'},
      {left:'200px'},
      {top:'200px'},
      {left:0},
      {top:0},
      {width:'100px', height:'100px'}
    ]
    actions.forEach(function(action){
      $('.box').animate(action, 1000)
    })
  })

下面的用法等同于上面,是不是很简单呢,只是如果自定义动作比较多的时候,看起来代码冗余很不优雅:

  // 连续的自定义动画
  $('#btn-box3').click(function(){
      $('.box').animate({width:'200px', height:'200px'}, 1000)
      $('.box').animate({left:'200px'}, 1000)
      $('.box').animate({top:'200px'}, 1000)
      $('.box').animate({left:0}, 1000)
      $('.box').animate({top:0}, 1000)
      $('.box').animate({width:'100px', height:'100px'}, 1000)
  })

另外我们都直到jQuery是支持链式调用的,jQuery方法执行外后,返回的还是jQuery对象,只是经过了一次方法执行处理后而已。

所以以上动画,还可以写成链式方式,但怎么看,还是没有最开始优雅:

$('#btn-box3').click(function(){
  $('.box').animate({width:'200px', height:'200px'}, 1000)
              .animate({left:'200px'}, 1000)
              .animate({top:'200px'}, 1000)
              .animate({left:0}, 1000)
              .animate({top:0}, 1000)
              .animate({width:'100px', height:'100px'}, 1000)
})

下面是关于finish 和 stop的使用:

  $('#btn-box4').on('click', function(){
    $('.box').finish() //停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画
  })

  $('#btn-box5').on('click', function(){
    $('.box').stop(true, true) //停止匹配元素当前正在运行的动画
  })

最后来看一个,百叶窗效果,点击其中一个叶窗打开,在点击一次是关闭,交替切换。 同时当前叶窗没有关闭,就去点击别的叶窗,那么上一次点击的叶窗就立即关闭。
代码如下:

 
  $('.ct .item').on('click', function(){
    $(this).find('p').slideToggle()  //find 是所有匹配的内部后代元素,不只是子元素
    $(this).siblings().children('p').slideUp() // siblings 是所用兄弟元素 children 只是直接子元素
  })
  

以上所有示例的完整演示, 点我点我点我

6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

.html([string])

这是一个读写两用的方法,用于获取/修改元素的innerHTML

  1. 当没有传递参数的时候,返回元素的innerHTML
  2. 当传递了一个string参数的时候,修改元素的innerHTML为参数值
$('div').html()
$('div').html('123')

后续这种读写两用的方法很多,原理都类似

  1. 如果结果是多个进行赋值操作的时候会给每个结果都赋值
  2. 如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值

.text([string])

和html方法类似,操作的是DOM的innerText值
.text() 获取匹配元素集合中每个元素的文本内容结合,包括他们的后代,或者是设置每个元素文本内容

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

.val([value])

这是读写两用的方法,可以设置和获取表单用户输入或者选择的内容,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值

$('input').val()
$('input').val('newValue')

.attr('class')

.attr(attributeName) 获取元素特定属性的值

   var title = $( "div" ).attr( "class" )

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
为元素属性赋值

$('div').attr('calss', 'active') 
$('div').attr({calss:'active', id:'container'})
$( ".greatphoto" ).attr( "title", function( i, val ) {
  return val + " - photo by Kelly Clark";
})

8: 使用 jQuery实现如下效果


预览地址

9:使用 jQuery 实现如下效果

预览地址

10:实现如下效果

预览地址

11: 上下切换 和 左右切换的 Tab 效果


上下切换-预览地址
左右切换-预览地址

推荐阅读更多精彩内容