题目1: jQuery 能做什么?
- 选择网页元素
- 改变结果集
- 元素的操作:取值和赋值
- 元素的操作:移动
- 元素的操作:复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?
DOM原生对象就是一个对象,jQuery对象是一个类数组对象。
jQuery对象转化成DOM对象我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象
$('div')[0]
$('div').get()
DOM对象转化成jQuery对象只需用$()把DOM对象封装起来,就可得到jQuery对象
var div = document.querySelector('div')
$(div)
题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
jQuery中可以使用bind delegate live on来绑定事件
bind()
:为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。(从jQuery 3.0 开始已被弃用,用.on()
代替)
unbind()
:移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行,(从jQuery 3.0 开始已被弃用,用.off()
代替)
delegate()
:为匹配的元素添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数,(从jQuery 3.0 开始已被弃用,用.on()
代替)
live()
:为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。(从jQuery 1.7开始已被弃用,用.on()
代替)
on()
:在被选元素及子元素上添加一个或多个事件处理程序。(推荐使用)
off()
:用于移除通过on()
方法添加的事件处理程序。(推荐使用)
使用on绑定事件使用事件代理:
$('ul.musicList').on('click','li',function() {
console.log($(this).text())
})
题目4:jQuery 如何展示/隐藏元素?
1 为元素添加或移除新的class,提前设置好class的隐藏属性
.active {
display:none;
}
$('button').toggleClass('active')
2 使用toggle()
来切换展示和隐藏元素
$('button').toggle()
3 使用show()
和hide()
来展示和隐藏元素
$('button').show();
$('button').hide();
类似的还可以使用slideUp()
和slideDown()
以及fadeIn()
和fadeOut()
来实现隐藏。
题目5: jQuery 动画如何使用?
.animate( properties [, duration ] [, easing ] [, complete])
properties
:一个CSS属性和值的对象,动画将根据这组对象移动。
duration
(默认: 400):一个字符串或者数字决定动画将运行多久。有三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000)
easing
(默认: swing):一个字符串,表示过渡使用哪种缓动函数
complete
:在动画完成时执行的函数
百叶窗实现效果
题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
<div class="container">
<ul class="news">
<li>1.China landslide leaves at least 140 missing in Sichuan</li>
<li>2.what you can learn from einsteins quirky habits</li>
<li>3.England v South Africa: Tourists level T20 series with dramatic three-run win</li>
<li>4.Henry Blofeld: Test Match Special commentator calls time on career</li>
<li>5.Fabinho: Manchester United move would tempt Monaco midfielder</li>
</ul>
<p>是滴是滴</p>
用html()
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。
<script>
$('div.container').html()//获取class为container的div里的html内容
$('div.container').html('<p>This is a new paragraph</p>')//div里的html内容会被设置的内容取代
</script>
用text()
获取匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。
$('div.container').text()//会得到div自身以及所有子元素的文本内容
$('.new>li:frist-child').text('123')//第一个的文本内容会替换成123
题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
var $input = $('#input');
$input.val('123') //设置input的value
$input.val() //获取input的value
$input.attr('type') //获取input的type属性
$input.attr('type','password') //设置input的type属性为password