初识JQuery

1.JQuery能做什么?

选择网页元素
改变结果集
元素的操作
工具方法
事件操作
特殊效果
AJAX

2.JQuery对象与DOM原生对象有什么区别?如何转化?

jquery对象通常用jquery的方法$(’’)来得到,可以使用jquery提供的方法来操作html的数据,DOM原生对象只能用js提供的方法,如getElementById,getElementByTagName,有的获取的是一个元素,有的获取的是一个数组。需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
JQuery对象转化Dom对象:$('#id')[index]
DOM对象转化JQuery对象:$(document.querySeletor('#id'))

3.JQuery如何绑定事件?bindunbinddelegateliveonoff都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

jquery使用on绑定事件

  $('#btn').on('click', function(){ })
  $('.box ul').on('click', 'li', function(){ })
  $('.box').on('click', {name:'hunger'}, function(){ })

bind为一个元素绑定一个事件处理程序。
$('#btn').bind('click', function(){})
unbind从元素上删除一个以前附加事件处理程序。
$('#btn').unbind('click')
delegate为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括目前已经匹配到的和未来可能匹配到的元素。
$('.box ul').delegate('li', 'click', function(){})
live附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
$('.box ul').live('click', function(){})
on在选定的元素上绑定一个或多个事件处理函数。
off移除一个事件处理函数 $('.box ul').off('click')
推荐使用 on off

   $('.box>ul').on('click','li',function(){
        console.log(this);
        var str = $(this).text();
        $('#wrap').text(str);
    });
    $('#btn').on('click',function(){
        var value = $('#ipt').val();
        $('.box>ul').append('<li>'+value+'</li>')
    });
4.jQuery如何展示/隐藏元素?

显示元素 $('.class').show() 等同于 $('.class').css('display','none')
隐藏元素 $('.class').hide()
切换的方式显示或隐藏元素 $('.class').toggle()
淡入的方式显示元素$('.class').fadeIn()
淡出的方式隐藏元素$('.class').fadeOut()
调整透明度显示或隐藏元素 $('.class').fadeTo('slow',0.5,function(){...})
滑动动画显示元素 $('.class').slideDOwn()
滑动动画隐藏元素 $('.class').slideUp()
滑动动画显示或隐藏元素 $('.class').slideToggle()

5.jQuery动画如何使用?

自定义动画方法 animate(properties[,duration][,easing][,completer])
properties是一个CSS属性和值的对象,动画将根据这组对象移动。

  $('#clickme').click(function(){
    $('#book').animate({
      opacity: 0.5,
      left: '+=20',
      height: 'toggle'
    },5000,function(){
      //animate complete
    });
   });
6.如何设置和获取元素内部HTML内容?如何设置和获取元素内部文本?

设置元素内部HTML内容 $node.html('htmlContent')
获取元素内部HTML内容 $node.html()
设置元素内部文本 $node.text('textContent')
获取元素内部文本 $node.text()

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

设置表单用户输入的内容 $node.val('newValue')
获取表单用户输入的内容 $node.val()
设置元素属性 $node.attr('attributeName')
获取元素属性 $node.atr()

8.实现效果
9.实现效果
10.实现效果
11.模仿jQuery动画,实现左右切换的Tab效果

实现效果

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 674评论 0 3
  • 象山耕夫【转】 2017-03-12 一般来说,国学是指以儒学为主体的中华传统文化与学术,它的涵盖范围极其广...
    象山耕夫阅读 299评论 0 0
  • 今天分享的书籍叫《瞬变》,晨读文章避开枝桠,直指一个问题:如何提高行动力? 为便于描述,原文作者塑造了一个“大象与...
    南多先生阅读 176评论 4 3