jQuery

作者: 1w1ng | 来源:发表于2017-12-28 10:39 被阅读0次

jQuery 能做什么?

jQuery将JavaScript的代码进行了封装,处理了兼容性问题,提供API进行调用,可以完成以下工作:

  • 选择网页元素
  • dom操作
  • 事件操作
  • 元素样式操作
  • 特殊效果
  • AJAX

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

区别:

  • DOM原生对象就是原生JS获得的对象
  • jQuery对象是DOM原生对象经过包装之后,拥有jQuery的属性和方法,是类数组对象。

转化:

  • jQuery对象转化成DOM对象,可以通过[index]的方法
var $node = $("#node"); // jQuery对象
var node = $node[0]; // DOM对象 
  • DOM对象转化成jQuery对象
var node = document.getElementById("id"); //DOM对象 
var $node = $(node); //jQuery对象  

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

  • bind() 向匹配元素附加一个或多个事件处理器
  • unbind() 从匹配元素移除一个被添加的事件处理器
  • delegate() 向匹配元素的当前或未来的子元素附加一个或多个事件处理器
  • live() 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。

以上几种方法是jQuery1.7以前的方法,现在推荐使用on()off()来绑定/解除事件。

  • on() 在选定的元素上绑定一个或多个事件处理函数。
  • off() 移除一个事件处理函数
//普通的绑定事件,最简单的事件用法
$('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: 'wing', age: 20}, function(e){
    console.log(e.data);
});

jQuery 如何展示/隐藏元素?

  • 使用hide()show()方法来隐藏和显示HTML元素。
使用hide()和show()方法
  • 使用toggle()方法来切换hide()show()方法
使用toggle()方法

jQuery 动画如何使用?

基础方法:

.hide([duration ] [,easing ] [,complete ])隐藏元素
.show( [duration ] [, easing ] [, complete ] )显示元素
.toggle( [duration ] [, easing ] [, complete ] )切换元素的显示、隐藏
  • duration:表示动画持续多久
  • easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
  • complete:在动画完成时执行的函数

渐变:

.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示
.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏
.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配的元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。
渐变

滑动:

.slideDown( [duration ] [, easing ] [, complete ] ) 用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去
.slideUp( [duration ] [, easing ] [, complete ] ) 用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去
.slideToggle( [duration ] [, easing ] [, complete ] ) 用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。
滑动

自定义动画:

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

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

html([string])

这是一个读写两用的方法,用于获取/修改元素的innerHTML

  1. 当没有传递参数的时候,返回元素的innerHTML
  2. 当传递了一个string参数的时候,修改元素的innerHTML为参数值
$('body').html();  // 获取元素内部HTML内容
$('body').html('123') //设置元素内部HTML内容

text()

html方法类似,操作的是DOM的innerText

$('body').text();  // 获取元素内部
$('body').text('123') //设置元素内部

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

.val([value])

这个方法用来处理input的value,当方法没有参数的时候返回input的value值,当传递了一个参数的时候,方法修改input的value值为参数值

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

设置和获取元素属性?

.attr()

获取元素特定属性的值

$('div').attr('id'); //获取 div 的 id 的属性
$('div').attr('id', 'newId'); //设置 div 的 id 属性为newId

.css()

这是个和attr非常相似的方法,用来处理元素的css

获取元素style特定property的值
$(this).css('background-color');
$(this).css({
    "width",
    "height",
    "color",
    "background-color"
});
设置元素style特定property的值
$(this).css('background-color', 'red');
$(this).css({
    width: '100px',
    height: '20px',
    color: 'red'
});

还有其他方法操作css:

  • .addClass() 为元素添加class,不是覆盖原class
  • .removeClass() 移除元素单个/多个/所有class
  • .hasClass(className) 检查元素是否包含某个class,返回true/false
  • .toggleClass(className) toggle是切换的意思,方法用于切换

使用 jQuery实现如下效果

代码预览地址:

二级菜单
tab切换效果
实现添加图片
滑动效果

相关文章

网友评论

    本文标题:jQuery

    本文链接:https://www.haomeiwen.com/subject/grgqgxtx.html