jq

作者: 进击的前端_风笑影 | 来源:发表于2017-08-13 12:04 被阅读0次

题目1： jQuery 能做什么？

jQuery的核心功能主要有下列几个：

方便快捷获取DOM元素：

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

$('div.content').find('p');
动态修改页面样式:

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

$('ul > li:first').addClass('active');
动态改变DOM内容:

jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。

$('button.show-details').click(function() {
$('div.details').show();
});
上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

简单的页面动画：

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

$('button.show-details').click(function() {
$('div.details').show('slow');
});
给show传一个参数，就可以形成渐现的效果。

对ajax进行了封装:

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

$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
简化常见的JavaScript任务:

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

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

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

DOM原生对象：

是对象；
拥有原生对象的属性和方法；

jQuery对象：

是DOM元升级对象经过包装之后，拥有jQuery的属性和方法（对原生DOM对象的封装）；
是类数组；
DOM原生对象转化为jQuery对象：
$div = $(document.getElementsByTagName(‘div’));

**jQuery对象转化为DOM原生对象：
div = $div[index];

对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法

$('div').eq(3);// 获取结果集中的第四个jQuery对象

我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象

$('div')[2];
$('div').eq(2);

Paste_Image.png

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

Query可以使用bind,live,delegate,on这四种方式进行事件监听,还可以直接绑定例如a.click(function(){}); a.change(function(){})

对应的，移除一个事件的处理函数的方法：unbind,die,undelegate,off

用法：

$(selector).bind(events,[data],fn); 对单个目标元素进行监听

$(selector).live(events,[data],fn); 效果和bind相同，但是运用到事件委托机制

$(selector).delegate(childSelector,events,[data],fn); 实现事件代理

$(selector).on(events,[childSelector],[data],fn); 可以实现以上所有功能，如单个目标元素的监听，监听多个目标

所以，推荐使用on

<!DOCTYPE html>
<html>
<head>
  <title>demo</title>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
  <ul>
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
    <li>test5</li>
  </ul>

  <script>
    $('ul').on('click','li',function(){
      console.log(this)
      })
  </script>  //对ul进行监听，使用childSelector这个参数，对子元素进行事件绑定
</body>
</html>

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

可以使用添加删除元素实现，可用的函数有append,appendTo,prepend,prependTo,before,insertBefor,after,insertAfter, 例：在div添加$('div').append('<h1>title</h1>')；删除div$('div').remove()
使用jQuery动画相关的函数，hide,show,toggel,fadeIn,fadeOut,fadeToggle,slideDown,slideUp,slideToggle, 例：隐藏div，$('div').hide(), 展示div，$('div').show(); 或者直接使用$('div').toggle()即可实现展示和隐藏的切换
写CSS，然后给目标元素添加相应的class达到展示/隐藏效果，$('div').addClass()

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

基础动画

.hide([duration],[easing],[complete] )
用于隐藏元素，没有参数的时候等同于直接设置display属性为none
duration： Type: Number or String，一个字符串或者数字决定动画将运行多久，默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
easing： Type: String，一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件

.show([duration],[easing],[complete] )
显示匹配元素，与.hide()方法类似

.toggle([duration],[complete] )
显示或隐藏匹配元素。用法与.hide()相似

自定义动画

.animate( properties [, duration ] [, easing ] [, complete ] )
properties：类型: PlainObject，一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数。

.finish()
停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（愚人码头注：就是所有动画的目标值）。所有排队的动画将被删除。

.stop()
停止匹配元素当前正在运行的动画。

当一个元素调用.stop()，当前正在运行的动画（如果有的话）立即停止。如果，例如，一个元素用.slideUp()隐藏的时候，调用.stop()，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。

如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

渐变动画

.fadeIn( [duration ][,easing] [, complete ] )
通过淡入的方式显示匹配元素。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数。

.fadeOut( [duration ] [,easing] [, complete ] )
通过淡出的方式隐藏匹配元素。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数。

.fadeTo( duration, opacity [,easing] [, complete ] )
调整匹配元素的透明度
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
opacity: 类型: Number, 0和1之间的数字表示目标元素的不透明度。
complete：类型: Function()，在动画完成时执行的函数。

.fadeToggle( [duration ] [, easing ] [, complete ] )
通过匹配的元素的不透明度动画，来显示或隐藏它们。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数。

滑动

.slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数。

.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数

.slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。
duration (默认: 400)：类型: Number or String，一个字符串或者数字决定动画将运行多久。
easing (默认: swing)：类型: String，一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete：类型: Function()，在动画完成时执行的函数

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

$('selector').html() 不传参，获取元素内部HTML
$('selector').html('innerHtml') 传参，设置元素内部HTML

$('selector').text() 不传参，获取元素内部HTML
$('selector').text('innerHtml') 传参，设置元素内部HTML

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

$('selector').val() 不传参，获取用户输入或者选择的内容
$('selector').val('inputValue') 传参，输入或者选择的内容

$('selector').attr('attribute') 获取元素属性的值
$('selector').attr('attribute','value') 将元素属性的值设置为bbb

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

Paste_Image.png
http://js.jirengu.com/jawowawuje/2/edit

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

Paste_Image.png
http://js.jirengu.com/nowawesoda/3/edit

题目10：实现如下效果

Paste_Image.png
http://js.jirengu.com/fadadubumu/1/edit

题目11：模仿视频6，完成左右切换的 Tab 效果

http://js.jirengu.com/yetemakase/3/edit

jq

题目1： jQuery 能做什么？

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

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

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

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

基础动画

自定义动画

渐变动画

滑动

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

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

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

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

题目10：实现如下效果

题目11：模仿视频6，完成左右切换的 Tab 效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

jq

题目1： jQuery 能做什么？

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

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

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

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

基础动画

自定义动画

渐变动画

滑动

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

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

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

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

题目10：实现如下效果

题目11： 模仿视频6，完成 左右切换的 Tab 效果

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

题目11：模仿视频6，完成左右切换的 Tab 效果