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')
这种读写两用的方法很多，原理都类似
- 如果结果是多个进行赋值操作的时候会给每个结果都赋值
- 如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性
- 用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 效果
预览