初识 jQuery

2017-10-13 本文已影响0人 D一梦三四年

1. jQuery 能做什么？

jQuery 是一个轻量级的 JavaScript 库，它强调的理念是写得少，做得多（write less, do more），利用 jQuery 强大的选择器、链式操作、事件处理机制和完善的 Ajax ，我们可以更快捷的完成 JavaScript 任务

方便快捷的获取DOM元素
动态修改页面样式
动态改变DOM内容
响应用户的交互操作
为页面添加动态效果
统一Ajax操作
简化常见的 JavaScript 任务。

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

区别
- DOM 对象可以使用 JavaScript 中的方法，不能使用 jQuery 里的方法
- jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象，jQuery 无法使用 DOM 对象的任何方法，只能使用 jQuery 里的方法

相互转换

jQuery 对象转 DOM 对象：[index] 和 get(index)，示例如下：

//[index]
var $ct = $('#ct');
var ct = $ct[0];

//get(index)
var $ct = $('#ct');
var ct = $ct.get(0);

DOM 对象转 jQuery 对象：用 $() 把 DOM 对象包裹住可以了

var ct = document.getElementById('ct');
var $ct = $(ct);

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

jQuery 中有4种绑定事件的方式 bind、delegate、live、on，对应的解除绑定的方式为 unbind、undelegate、live、off。
bind() 可以用来给元素绑定一个或多个事件，bind() 的调用方式为 bind(type, data, fn)
- 第一个参数 type 为事件类型（blur, focus, load, click等）
- 第二个参数 data 为可选参数，通过event.data 属性值作为传入监听函数的参数
- 第三个参数 fn 是用来监听的处理函数
```
//简单用法
$('#ct .btn').bind('click.myClick',function () {
  $('#ct').prepend('<p>hello world</p>')
})
//解除绑定
$('#ct .btn').unbind('click.myClick')
```
delegate() 用于事件代理，为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数；适用于当前或未来的元素（比如由脚本创建的新元素）。

$('ul').delegate('li', 'click', function() {
  var text = $(this).text();
  console.log(text);
})

live()：这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。在新版本中推荐用 on() 方法，即时在旧版本中，也推荐使用 delegate() 方法来取代 live() 方法。
on()：在选定的元素上绑定一个或多个事件处理函数，提供绑定事件处理的所有功能。注意：on() 的事件代理和 delegate 的事件代理，写法不一样，子元素和触发事件的位置不同


  //简单用法
  $('#ct .btn').on('click.myClick',function () {
    $('#ct').prepend('<p>hello world</p>')
  })
  
  //绑定事件代理
  $('ul').on('click', 'li', function() {
  var text = $(this).text();
  console.log(text);
  })
  
  //解除绑定
  $('#ct .btn').off('click.myClick')

推荐使用：on()方法，因为既能绑定普通事件，也能绑定事件代理。

  //绑定事件代理
  $('ul').on('click', 'li', function() {
  var text = $(this).text();
  console.log(text);
  })

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

show()方法和 hide() 方法(宽高同时延伸)

$('#ct').hide();
//可以添加一个时间参数，单位是毫秒
$('#ct').show(1000);

fadeIn() 和 fadeOut() 方法，淡入淡出效果

$('#ct').fadeIn();
//可以添加一个时间参数，单位是毫秒
$('#ct').fadeOut(3000);

slideUp() 和 sildeDown() 方法，由上到下延伸(宽度不变)

$('#ct').slideUp();
//可以添加一个时间参数，单位是毫秒
$('#ct').slideDown(3000);

5. jQuery 动画如何使用？

animate() 自定义动画方法，用法为animate(params, speed, callback)
- paras：一个包含样式属性及值的映射如{left: '500px', top: '300px'}
- speed：速度参数，可选
- callback：在动画完成时执行的函数，可选

$('#ct').on('click', function () {
  $(this).animate({left: '200px', top: '100px'}, 3000);

4个专门用于交互的动画方法
- toggle() ：切换元素的可见状态
```
$('#ct').on('click', function () {
 $(this).toggle();
});
```
- slideToggle()：通过高度变化来切换元素的可见性
```
$('#ct').on('click', function () {
 $(this).slideToggle(3000);
});
```
- fadeTo()：把元素的不透明度以渐进方式调整到指定的值
```
$('#ct').on('click', function () {
 $(this).fadeTo(1000, 0.2);
});
```
- fadeToggle()：通过不透明度的变化来切换元素的可见性
```
$('#ct').on('click', function () {
 $(this).fadeToggle(1000);
});
```

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

html()：设置和获取元素内部 HTML 内容

//获取
var ctHtml = $('#ct').html();
//设置
$('#ct').html('<p>hello world</p>');

text()：设置和获取元素内部文本

//获取
var pText = $('p').text();
//设置
$('p').text('hello world');

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

val()：设置和获取表单用户输入或者选择的内容

<input type="text" id="address" value="请输入地址">
//获取输入框的值
$('#address').val();
//设置输入框的值
$('#address').val('广州市xx区xx街道');

attr()：设置和获取元素属性

//获取
var ctId = $('.ct').attr('id');
//设置
$('.ct').attr('id', 'container');
$('.ct').attr('id' : 'container', 'name' : 'container');
//移除
$('.ct').removeAttr('id', 'name');