jQuery 能做什么?
jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用,让我们实现功能时不用再为兼容性而困扰,少写了许多代码。
jQuery是一个JavaScript函数库,可以方便地:
- 选择dom元素
- dom操作
- 事件处理
- 特效处理
- ajax
- 链式操作
jQuery 对象和 DOM 原生对象有什么区别?如何转化?
区别:
DOM对象 :W3C标准用于操作文档的API。具体点来说就是指 HTML 文本中的所有被标签标记的东西 ,在js里可以用 getElementById 等传统的方法获得的对象,拥有原生对象的属性和方法。
jQuery对象:将DOM原生对象进行封装后得到的类数组对象
注意:
jQuery对象只能用jQuery对象的方法
DOM对象只能使用DOM对象的方法
转化:
jquery提供了两种方法将一个jquery对象转换成一个DOM对象,[index]和get(index)。
使用$(DOM对象)就可以将DOM对象转化为jQuery对象
jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
//bind用于绑定事件,古老写法,不推荐
$(selector).bind(event,[data],function)
//unbind用于解绑事件,古老写法,不推荐
$(selector).unbind(event,[function])
//delegate用于事件代理,古老写法,不推荐
$(selector).delegate(childSelector,event,[data],function)
//live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。不推荐使用
$(selector).live(event,[data],function)
.on( events [,selector ] [,data ], handler(eventObject) )
增加事件处理函数
- events:事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin",一个或多个
- selector:选择器,用于过滤出被选中的元素中能触发事件的后代元素。
- data:传递给事件处理函数的event.data
handler(eventObject):事件被触发时的执行函数。若该函数只是要执行return false,该参数位置可以直接简写成 false
// 普通事件绑定,最简单的用法
$('div').on('click', function(e){
console.log(this); //点击的元素
console.log(e); // 事件,e.target 事件的对象
});
// 事件委托或者事件代理,想让div 下面所有的span绑定事件,可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
命名空间的作用:解绑事件时做一个区分
click.hello事件解绑,但是click事件不受影响
$('.box>ul').on('click',3,function(e){
console.log(e.data)
})
$('.box>ul').on('click.hello','li',function(){
console.log(this)
var str = $(this).text()
$('#wrap').text(str)
})
$('.box>ul').off('click.hello')
.off( events [, selector ] [, handler ] )
移除一个事件处理函数
jQuery 如何展示/隐藏元素?
- .hide([duration ] [,easing ] [,complete ])
隐藏元素,没有参数的时候等同于直接设置display:none属性 - .show( [duration ] [, easing ] [, complete ] )
用于显示元素,用法和hide类似 - .toggle( [duration ] [, easing ] [, complete ] )
toggle是切换的意思,用来切换元素的隐藏、显示,类似于toggleClass
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置
- duration:动画持续多久
- easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
- complete:在动画完成时执行的函数,先完成动画,后执行函数
jQuery 动画如何使用?
渐变
- .fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素 - .fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素 - .fadeTo( duration, opacity [, easing ] [, complete ] )
调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果 - .fadeToggle( [duration ] [, easing ] [, complete ] )
滑动
- .slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素 - .slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素 - .slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素
自定义动画
- .animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
html([string])
读写两用的方法,用于获取/修改元素的innerHTML$('div').html()
//没有参数,获取元素的innerHTML$('div').html('123')
//有参数,参数内容即为修改后的元素innerHTMLtext()
读写两用的方法,和html方法类似,用于获取/修改元素的innerText值
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
-
.val([value])</br>
读写双用的方法,用来处理input的value,设置和获取表单用户输入或者选择的内容,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值
$('input').val() //没有参数的时候返回input的value值
$('input').val('newValue'); //当传递了一个参数的时候,将参数值设为input的value值
$('input')[0].value = "hello" 用原生DOM的方式设置值
-
.attr(attributeName)</br>
获取元素的属性。
<input type="text" value="hello">
<script>
console.log($('input').attr("type")) //text
</script>
-
.removeAttr(attributeName)</br>
移除特定元素的某个属性。
为匹配的元素集合中的每个元素中移除一个属性