我爱编程饥人谷技术博客

jQuery

2017-06-29  本文已影响0人  Eazer

1. jQuery 能做什么?

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

DOM对象转jQuery对象
var btn = document.querySelector(".btn")
$(btn)

jQuery对象转DOM对象
$('.btn')[0]

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

bind:将一个处理程序附加到元素的事件中
unbind:从元素中删除先前附加的事件处理程序
delegate:根据特定的一组根元素,将处理程序附加到于现在或者将来的选择器匹配的所有元素的一个或多个事件
live:附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
on:在选定的元素上绑定一个或多个事件(推荐使用)
off:移除一个事件处理函数(推荐使用)

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});

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

使用toggle()切换展示/隐藏元素

.toggle( [duration ] [, easing ] [, complete ] )
 $('btn').toggle()

使用show()、hide()展示/隐藏元素

.show( [duration ] [, easing ] [, complete ] )
.hide([duration ] [,easing ] [,complete ])
$('.btn').show()
$(',btn').hide()

5. jQuery 动画如何使用?

渐变

.fadeln( [duration ] [, easing ] [, complete ] )

通过淡入的方式显示匹配元素,参数含义和上面相同

.fadeOut( [duration ] [, easing ] [, complete ] )

通过淡出的方式隐藏匹配元素

$('#book').fadeIn('slow', function() { })
$('#book').fadeOut('slow', function() { })

.fadeTo( duration, opacity [, easing ] [, complete ] )

调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
});

.fadeToggle( [duration ] [, easing ] [, complete ] )

通过匹配的元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display样式属性设置为none ,所以元素不再影响页面的布局。

$("button:first").click(function() {
$("p:first").fadeToggle("slow", "linear");
});

滑动

.slideDown( [duration ] [, easing ] [, complete ] )

用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

.slideUp( [duration ] [, easing ] [, complete ] )

用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。 display 样式属性将被设置为none,以确保该元素不再影响页面布局。

$('#book').slideDown('slow', function() {
    // Animation complete.
});

$('#book').slideUp('slow', function() {
    // Animation complete.
});

.slideToggle( [duration ] [, easing ] [, complete ] )

用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {
 // Animation complete.
 });
});

自定义

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一个CSS属性和值的对象,动画将根据这组对象移动。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

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

html([string])
这是一个读写两用的方法,用于获取/修改元素的innerHTML

1.当没有传递参数的时候,返回元素的innerHTML
2.当传递了一个string参数的时候,修改元素的innerHTML为参数值

$('div').html()

$('div').html('123')

text()
和html方法类似,操作的是DOM的innerText值

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

$('.input').val('123')  //设置input的value
$('.input').val()   //获取input的value
$('.input').attr('type') //获取input的type属性
$('.input').attr('type','password')  //设置input的type属性为password

【个人总结,如有错漏,欢迎指出】
:>

上一篇下一篇

猜你喜欢

热点阅读