进阶任务14 jQuery

题目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 内容？如何设置和获取元素内部文本？

    

  

    
1.China landslide leaves at least 140 missing in Sichuan
    
2.what you can learn from einsteins quirky habits
    
3.England v South Africa: Tourists level T20 series with dramatic three-run win
    
4.Henry Blofeld: Test Match Special commentator calls time on career
    
5.Fabinho: Manchester United move would tempt Monaco midfielder
  
  
是滴是滴

用html()获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。

用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

题目8实现效果

题目9实现效果

题目10实现效果

题目10实现效果