jQuery

问答

一、说说库和框架的区别?

  • 库(Library)
    库是将代码集合成的一个产品,提供很多的API,供开发者调用。开发者在开发的时候只需要使用库的一部分类或者函数,即可以实现功能。
  • 框架(Framework)
    开发者在使用框架的时候,必须使用这个框架的全部代码。
    打个比方就是,框架相当于一台完整的电脑,而库相当于各个零件,我们需要去自己组装成一台电脑。

二、jquery 能做什么?

jQuery 是一个 JavaScript 函数库,它通常能提供以下功能:

  • 方便快捷的获取DOM元素
    如果使用原生的JS方式来遍历DOM或者查找DOM元素,会有很多冗余的代码。而jQuery只需要一行就够了,非常简洁方便。
    例如,找到ul里面的class为current的标签。
$('ul').find('li.current');
  • 动态修改页面样式
    即使在页面呈现之后,使用jQuery可以动态修改CSS的样式。jQuery能够改变文档中某个部分的类或者个别的样式属性。
    例如,找到ul里面的第一个子标签li,给它添加名为active的类名。
$('ul > li:first').addClass('active');
  • 为页面增加动态效果
    jQuery提供了一系列特效的方法,比如隐藏、显示、淡入淡出、滑入滑出、animate自定义动画。
  • 统一Ajax操作

三、jQuery 对象和 DOM 原生对象有什么区别?如何转化?

  • DOM对象是通过原生JS获得的对象,只能使用原生JS的属性和方法;jQuery 对象是通过jQuery获得的对象,只能使用jQuery自己封装的属性和方法。
  • jQuery对象转换为DOM原生对象:
var  el = $('div')[1]; //$('div').eq[1]

DOM原生对象转化为jQuery对象:

var el = document.getElementById('wrap');
var $el = $(el);

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

  • jQuery绑定事件的方式有:
  • bind
    规定向被选元素添加一个或多个事件处理程序,这是最简单的方法。
$('a').bind('click', function(){
     alert('ok');
})
  • unbind
    移除被选元素的事件处理函数,或者当事件发生时终止函数的运行。
$('button').click(function() {
      $('p').unbind();
})
  • delegate
    为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
$( "#members" ).delegate( "li a", "click", function( e ) {} );
  • live
    为被选元素添加一个或者多个事件处理程序,
$('a').live('click', function() { 
      alert("That tickles!");
});
  • on
    把bind、delegate、live三种方法统一,用起来更方便
$( "#members" ).on( "click", "li a", function( e ) {} );
  • off
    移除事件函数
$('button').click(function() {
    $('p').off('click'); //移除p上的click事件
})
  • 推荐使用on,因为把其他三种都统一起来了,用起来更方便。

五、jquery 如何展示/隐藏元素?

  • 展示元素
$(selector).show(speed,callback)

显示出隐藏的p

$(".btn2").click(function(){
  $("p").show();
});
  • 隐藏元素
$(selector).hide(speed,callback)

隐藏元素p

$('.btn').click(function() {
    $('p').hide();
})

六、jquery 动画如何使用?

jQuery用于创建自定义动画。

$(selector).animate({params}, speed, callback);
  • 必需的 params 参数定义形成动画的 CSS 属性。
  • 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
  • 可选的 callback 参数是动画完成后所执行的函数名称。
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });

七、如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

  • 设置和获取元素的内部内容:html([string])。当没有参数的时候,返回的是innerHTML,当传一个string参数的时候,修改innerHTML的值为参数值。
  • 设置和获取元素内部文本:text([string])。和html操作类似。

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

  • 获取表单用户输入或者选择的内容:.val()
  • 设置表单用户输入或者选择的内容:.val('value')
  • 获取元素属性:.attr()
  • 设置元素属性:.attr(attributeName)

代码

一、使用 jquery实现如下效果

jQuery_第1张图片



  
  导航栏:商品分类
  
  


  
  
  


预览

二、使用 jquery 实现如下效果

jQuery_第2张图片



  
  tab栏切换
  


  
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-8ed952d538e757a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和通吊坠
      ¥1639.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥169.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥99.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏金镶玉路路通吊坠
      ¥699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶吊坠
      ¥1800.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美田玉金镶玉路路通吊坠
      ¥1799.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足镶玉路路通吊坠
      ¥1099.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金通吊坠
      ¥199.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-8ed952d538e757a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和通吊坠
      ¥1639.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥169.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥99.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏金镶玉路路通吊坠
      ¥699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶吊坠
      ¥1800.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美田玉金镶玉路路通吊坠
      ¥1799.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-15ffb40994ae2d1b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金和田玉金镶玉路路通吊坠
      ¥1699.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足镶玉路路通吊坠
      ¥1099.00
    • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
      藏美千足金通吊坠
      ¥199.00

预览
问题: 点奢侈品2的时候页面跳到了顶部,可能是什么原因?如何解决
主要是a链接的href值的原因。#包含了一个位置信息,默认的锚是#top,也就是网页的上端。
在页面很长的时候会使用#来定位页面的具体位置,格式为:# + id
如果要定义一个死链接要使用 javascript:void(0),这样点击后就不会有反应 。

三、实现如下效果

jQuery_第3张图片



  
  加载更多
  


  

珠宝首饰

  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00
  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00
  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00
  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00
  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00
  • ![](http://upload-images.jianshu.io/upload_images/2244513-aa70fe7f43f64867.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    藏美千足金和田玉金镶玉路路通吊坠
    ¥1699.00

预览

你可能感兴趣的:(jQuery)