我爱编程

进阶14:jQuery

2017-12-26  本文已影响0人  FLYSASA

题目1： jQuery 能做什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery库为Web脚本编程提供了通用(跨浏览器)的抽象层，使得它几乎适用于任何脚本编程的情形。jQuery通常能为我们提供以下功能：

1.方便快捷获取DOM元素

如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：

$('div.content').find('p');

2.动态修改页面样式

使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：

$('ul > li:first').addClass('active');

3.动态改变DOM内容

使用jQuery我们可以很容易地对页面DOM进行修改，例如，为ID为"container"的元素添加一个链接：

$('#container').append('<a href="more.html">more</a>');

4.响应用户的交互操作

jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

$('button.show-details').click(function() {
   $('div.details').show();
});

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

5.为页面添加动态效果

jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

1    $(function () {
2             $("#btnShow").click(function () {
3                 $("#msubject").hide("slow");
4             });
5         });

6.统一Ajax操作

jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

1 function (data, type) {
2     // 对Ajax返回的原始数据进行预处理
3     return data  // 返回处理后的数据
4 }

7.简化常见的JavaScript任务

除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

1 $.each(obj, function(key, value) {
2   total += value;
3 });

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

1.联系:

2.区别

3.转换

1 var a = document.getElementById('a'); //DOM对象
2 var $a = $(a); //jQuery对象

转换后,就可以任意使用jQuery的对象

(1)jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
如:

1 var $a = $('#a'); //jQuery 对象
2 var a = $a[0]; //DOM对象
3 alert(a.checked); //检测这个checkbox是否被选中

(2) jQuery本身提供,通过.get(index)方法得到相应的DOM

1 var $v = $("#v"); //jQuery 对象
2 var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
3 alert(v.checked); //检测这个 checkbox 是否被选中

总结:通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用DOM中的方法。

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

.on( events [,selector ] [,data ], handler(eventObject) )

如例:添加一个事件处理函数

/ 普通事件绑定，最简单的用法
$('div').on('click', function(e){
    console.log(this);
    console.log(e);
})

// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);

.off( events [, selector ] [, handler ] )

示例:移除一个事件处理函数

function aClick() {
  $("div").show().fadeOut("slow");
}

$("#bind").click(function () {
  $("body").on("click", "#theone", aClick)
    .find("#theone").text("Can Click!");
});

$("#unbind").click(function () {
  $("body").off("click", "#theone", aClick)
    .find("#theone").text("Does nothing...");
});

$('#foo').on('click', function() {
  console.log($(this).text())
});
$('#foo').trigger('click')

示例:创建一个点击事件并模拟点击执行

$('#foo').on('click', function() {
  alert($(this).text());
});
$('#foo').trigger('click');

题目4：jQuery 如何展示/隐藏元素？

var $h1 = $('h1')
$h1.css('display','block')
$h1.css('display':'none')

//css部分
.status{
   display: none;
}
//js部分
var $h1 = $('h1')
$h1.addClass('status') //隐藏元素
$h1.removeClass('status') //展示元素

var $h1 = $('h1')
$h1.hide() //隐藏
$h1.show() //展示
$h1.toggle() //用于切换元素的隐藏显示

题目5： jQuery 动画如何使用？

四个参数:
duration：动画持续多久
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete：在动画完成时执行的函数
opacity：不透明度

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

这种读写两用的方法很多，原理都类似

  1. 如果结果是多个，进行赋值操作的时候会给每个结果都赋值

  2. 如果结果多个，获取值的时候，$node.html()返回结果集中的第一个对象的相应值，$node.text()返回结果集中的所有值组成的字符串。

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

$('input').val()//获取用户输入或选择的内容
$('input').val('newValue');//设置用户输入或选择的内容

//获取元素属性
$node.attr('id')
$node.attr('src')
//获取元素自定义属性
$node.prop('data-title')
//设置元素属性
$node.attr('id','newId')
$node.attr('src','newSrc')
//设置元素自定义属性
$node.prop({
  data-title: "newTitle",
  data-href: "new href"
})

attr多用于html原有属性，prop多用于自定义属性。

题目8:使用 jQuery实现如下效果


代码实现(http://js.jirengu.com/boyinuqiwi/5/edit)

题目9：. 使用 jQuery 实现如下效果


代码实现(http://js.jirengu.com/wuxes/5/edit)

题目10：实现如下效果


代码实现(http://js.jirengu.com/kafefewopu/2/edit)

题目11： 完成 左右切换的 Tab 效果

代码实现(http://js.jirengu.com/hezisujore/2/edit)

上一篇 下一篇

猜你喜欢

热点阅读