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

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

jQuery 能做什么

jQuery是一款快速而简洁的javascript的库,核心是构建与css选择器上,用来操作DOM元素,通过链式调用,兼容性好,API 友好,功能强大,与时俱进

  • HTML元素选取
  • HTML元素的操作:取值和赋值、移动、复制、删除和创建等
  • CSS操作
  • 事件操作
  • 特殊效果,如JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • 工具方法
  • AJAX
  • Utilities
jQuery 对象和 DOM 原生对象有什么区别?如何转化
  • 对于jQuery对象只能使用jQuery对象的API
  • 对于原生对象只能使用原生对象的 API

转化

  • 对于原生转化为jQuery,只需在外面加上一层$符号
$(document.querySelector("#box"))
就可以变为jQuery对象,就可以使用jQuery对象的API了
  • 对于jQuery对象转换为原生对象,只需要加个[下标]
$("#box .box")[0]
,就可以使用j原生对象的API了

问题是:那我们又不想变成原生对象,又想取值怎么办呢?
$("#box .box").eq(0)  //.eq(index)
jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法

jQuery提供了四种方法进行事件监听,on,bind,delegate,one(live已经弃用),相应的解除监听off,unbind,undelegate。

$('a').bind('click', handle);//给$('a')的‘click’事件绑定执行函数
$('a').unbind(['click']);//给$('a')解除所有绑定事件【‘click’事件】

jQuery 扫描文档找到所有 $(‘a’) 元素,然后给每一个找到的元素的 click 事件绑定处理函数。

$('a').live('click',handle });// $('a')绑定‘click’事件,执行函数
$('a').die('click',handle });// $('a')解除及‘click’事件执行函数

jQuery绑定处理函数到 $(document) 元素,并把 ‘click’ 和 ‘a’ 作为函数的参数。有事件冒泡到document节点的时候,检查这个事件是不是 click 事件,target element能不能匹配 ‘a’ css选择器,如果两个条件都是true,处理函数执行

$('a', $('#container')[0]).live(...);

live方法也可以绑定到指定的元素(或者说“上下文(context)”)而不用绑定到document.

$('#container').delegate('a', 'click', handle);//$('#container')绑定‘click’事件,执行函数
$('#container').undelegate('a', 'click', handle);//$('#container')解除‘click’事件和执行函数

jQuery扫描文档找到 $(‘#container’),绑定处理函数到他的 click 事件,’a’ css选择器作为函数的参数。当有事件冒泡到 $(‘#container’),检查事件是不是 click,并检查target element是不是匹配css选择器,如果两者都符合,执行函数。

one()该方法绑定的事件触发一次后自动删除

$('.class').on( events [,selector ] [,data ], handler);//$('.class')绑定事件
$('.class').off()$('.class')解除事件

on实现事件委托很简单, '.class'为父元素,on后面括号里的selector 参数为子元素,当‘.class’的事件触发时,判断事件来源是否子元素selector,若是,则执行处理函数,从而实现事件委托。
on是最基本的事件绑定方法,bind,delegate,live都是调用on来绑定事件,因此,推荐使用on来绑定事件。

//delegate源码
delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}
//live源码
live: function( types, data, fn ) {
  jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
//bind源码
bind: function( types, data, fn ) {
  return this.on( types, null, data, fn );
}
jQuery 如何展示/隐藏元素
  • 通过设置css的display属性来实现
var $h1 = $('h1')
$h1.css('display', 'block')
$h1.css('display', 'none')
  • 通过增加或删除class来实现
//css部分
.status{
    display: none;
}

//js部分
var $h1 = $('h1')
$h1.addClass('status') //隐藏元素
$h1.removeClass('status') //展示元素
  • 通过jQuery动画的hide、show、toggle方法实现
var $h1 = $('h1')
$h1.hide()//隐藏
$h1.show()//展示
$h1.toggle()//隐藏

其中toggle方法用于切换元素的隐藏、显示。

jQuery 动画如何使用
duration:动画持续多久
easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
complete:在动画完成时执行的函数
opacity:不透明度
  • 基础用法:
    • 隐藏元素
    .hide([duration ] [,easing ] [,complete ])
    
  • 显示元素
    • 隐藏元素
    .hide([duration ] [,easing ] [,complete ])
    
    • 显示元素
    .show( [duration ] [, easing ] [, complete ])
    
    • 切换元素
    .toggle( [duration ] [, easing ] [, complete ] )
    
  • 渐变
    • 淡入显示
    .fadeIn( [duration ] [, easing ] [, complete ] )
    
    • 淡出隐藏
    .fadeOut( [duration ] [, easing ] [, complete ] )
    
    • 调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
    .fadeTo( duration, opacity [, easing ] [, complete ] )
    
    • 调整匹配的元素的不透明度动画来显示或隐藏它们,方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display样式属性设置为none ,元素不再影响页面的布局。
    .fadeToggle( [duration ] [, easing ] [, complete ] )
    
  • 自定义
    • properties是一个CSS属性和值的对象,动画将根据这组对象移动。
    .animate( properties [, duration ] [, easing ] [, complete ] )
    
    • options是一组包含动画选项的值的集合。
    .animate( properties, options )
    
    • 当一个元素调用.stop(),当前正在运行的动画(如果有的话)立即停止。
    .stop( [clearQueue ] [, jumpToEnd ] )
    
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本
  • 用html方法获取/修改元素的innerHTML
    • 没有传递参数时直接返回元素的innerHTML
    $('div').html()
    
    • 传递了一个string参数时修改元素的innerHTML为参数值
    $('div').html('hello world')
    
  • 用text方法获取/修改元素的innerText
    • 没有传递参数时直接返回元素的innerText
    $('div').text()
    
    • 传递了一个string参数时修改元素的innerText为参数值
    $('div').text('hello world')
    

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

  1. 如果结果是多个进行赋值操作的时候会给每个结果都赋值
  2. 如果结果多个,获取值的时候,返回结果集中的第一个对象的相应值
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性
  • 用val方法设置和获取表单用户输入或者选择的内容
    也是一个读写双用的方法,用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值
$('input').val()//获取用户输入或选择的内容
$('input').val('newValue');//设置用户输入或选择的内容
  • 用attr和prop方法来设置和获取元素属性
$('div').attr()//获取元素属性
$('div').prop()//获取元素属性
$('div').attr('color','red')//设置元素属性
$('div').prop({
  background: "yellow",
  font-size: "3em"
})//设置元素属性

其中:attr多用于html原有属性,prop多用于自定义属性

使用 jQuery实现如下效果

预览

使用 jQuery 实现如下效果

预览

实现如下效果

预览

模仿视频6,完成 左右切换的 Tab 效果

预览

推荐阅读更多精彩内容