jquery总结

最新推荐文章于 2022-10-24 11:31:38 发布

GoldenPigGirl

最新推荐文章于 2022-10-24 11:31:38 发布

阅读量148

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/goldenpiggirl/article/details/106296150

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.什么是渐进增强

在网页开发中，渐进增强认为应该专注于内容本身。一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例

2.什么是优雅降级

在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨 (poor, but passable)” 可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例

jq增删改查
新增
增加可以说是先新增var $new() = $ (html 直接写HTML代码)然后在使用插入 $(“”).append()
删除
删除就使用 $().remover()
改（替换）
改可以理解为替换 $( ).css ()或者 $( ).html ()还有一种是 $().attr(属性)
查找
查找也可以理解为获取元素 $().next()或者使用document.getElementBayid()
jquery动画？
duration时间
动画执行的时间，持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供’fast’ 和 'slow’字符串，分别表示持续时间为200 和 600毫秒。

easing动画运动的算法
jQuery库中默认调用 swing。如果需要其他的动画算法，请查找相关的插件

complete回调
动画完成时执行的函数，这个可以保证当前动画确定完成后发会触发

hide()用于隐藏元素，没有参数的时候等同于直接设置display属性

$('.target').hide();

等同于 $(’.target’).css(‘display’, ‘none’)

.show()用于显示元素.他用法跟hide的用法一样

$('.target').show();

渐变
.fadeIn()通过淡入的方式显示匹配元素，参数含义和上面相同

$('#book').fadeIn('slow', function() {});

.fadeOut()通过淡出的方式隐藏匹配元素

$('#book').fadeOut('slow', function() {});

.fadeTo()调整匹配元素的透明度，方法通过匹配元素的不透明度做动作

$('#book').fadeTo('slow', 0.5, function() {});

.fadeToggle()通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
滑动
.slideDown()用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('#book').slideDown('slow', function() {});

.slideUp()用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局

$('#book').slideUp('slow', function() {});

.slideToggle()用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {

 });
});

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

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
   
  });
});

.clearQueue()清除动画队列中未执行的动画
.finish()停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
stop()停止当前正在运行的动画
.stop(true); 停止所有动画。
.stop(true,true);立即完成当前动画后停止所有动画，该元素上的 CSS 属性会被立刻修改成当前动画的目标值
如何改变this指向？
.call(),
call(thisScope, arg1, arg2, arg3…)

.apply(),
apply(thisScope, [arg1, arg2, arg3…]);两个参数

而bind 改变this的指向，返回的是函数

.bind()
bind(thisScope, arg1, arg2, arg3…)