jQuery

作者: madpluto | 来源:发表于2017-06-29 17:11 被阅读0次

1. jquery 能做什么?

jquery是一个js工具类库,封装了常用的DOM操作方法,有更好的兼容性,利用jquery提供的api,可以完成以下工作:

  • 完成DOM的增删改查等操作
  • 事件绑定操作
  • 样式修改
  • 方便的动画设置
  • 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')
  1. 使用toggle()来切换展示和隐藏元素
$('button').toggle()
  1. 使用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 内容?如何设置和获取元素内部文本?

  • $().html()获取html内容
  • $().text()获取文本内容
  $('div').html()           //无参数,用于返回元素的innerHTML
  $('div').html(string)       //有参数,设置元素为内部HTML内容

  $('div').text()           //无参数,用于返回元素的innerText
  $('div').text(string)       //有参数,设置元素的内部文本

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. 示例

11. 示例

相关文章

网友评论

      本文标题:jQuery

      本文链接:https://www.haomeiwen.com/subject/xuzmcxtx.html