【JQuery】知识点总结

最新推荐文章于 2023-02-18 15:21:24 发布

夹心776655

最新推荐文章于 2023-02-18 15:21:24 发布

阅读量256

点赞数

分类专栏：知识点总结文章标签： jquery

本文链接：https://blog.csdn.net/qq_37086980/article/details/116087458

版权

知识点总结专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JQuery

基础介绍

介绍: jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单
理念: 写得少做得多 write less, do more
百度下载地址:

cdn: https://www.bootcdn.cn/jquery/

官网: https://jquery.com/
使用版本:

jquery.js: 未压缩版本学习

jquery.min.js: 压缩版本工作

引入方式：

\1. 引入本地文件: 常用

\2. 引入cdn文件: 不常用

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="js/jquery.js"></script>

最新版本：

3.5.1

2XX 3XX都不是兼容IE678

1XX 兼容IE678
主要操作

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
隐式迭代

$与JQuery的关系

$与jQuery是同一个东西

console.log(jQuery)
console.log(window.jQuery)
console.log(window.$)
console.log($)
console.log(window.jQuery == $) // true

等待页面加载

window.onload

必须等待网页全部加载完毕(包括图片资源等), 然后再执行包裹代码
只能执行一次, 如果执行第二次，那么第一次的执行会被覆盖

$(document).ready()

只需要等待网页中的DOM结构加载完毕, 就能执行包裹的代码
可以执行多次，第N次不会被上一次所覆盖
简写方案: $(function(){})

// 1. 原生等待页面及资源加载
window.onload = function(){
   console.log(1);
}
window.onload = function(){
   console.log(2);
} // 2

// 2. jquery 等待页面加载
// 2.1 $(document).ready(function(){})
$(document).ready(function(){
   console.log(3);
});
// 2.2 $().ready(函数);
$().ready(function(){
   console.log(4);
});
// 2.3 $(function(){});
$(function(){
   console.log(5);
}); // 3 4 5

JS 与JQuery互转

1.JS转成JQuery : $(js对象)

window.onload = function () {
// js原生方法获取元素
 var li = document.getElementsByTagName('li')
 console.log(li) // HTML Collection

 // js转成jq对象 $(js对象)
 console.log($(li)) // jQuery.fn.init(10)
 console.log($(li[0])) // jQuery.fn.init(10)
}

2.JQuery转成JS对象

jq对象[下标]
jq对象.get(下标)

 $(function () {
    var li = $('li')
    console.log(li)  // jQuery.fn.init(10)

    // jQuery对象转成js对象
    console.log(li[0]) // <li>0001</li>
    console.log(li.get(0)) // jq.get(下标) 
  })

JQuery选择器

基本选择器

console.log($('li')); // 标签选择器
console.log($('.a')); // 类名选择器
console.log($('#five')); // id名选择器
console.log($('.a,#five')); // 基本选择器

层级选择器

后代选择器 : 父子

直接子元素父 > 子

下一个兄弟兄弟 + 下一个标签

后面所有的兄弟兄弟 ~ 标签

// jq元素.css('属性名', '属性值')
// jq除非语法错误  否则不报错
// js对象用了jq方法  某些必传参数写错了
console.log($('ul li').css('background', 'red'));
console.log($('ul > li').css('background', 'yellow'));
console.log($('.box + div').css('background', 'blue'));
console.log($('.box ~ div').css('background-color', 'green'));

基本过滤选择器

$('ul li:first').css('background', 'red'); // 第一个元素
$('ul li:last').css('background', 'red'); // 最后一个元素
$('ul li:not(.box)').css('background', 'green'); // 类名不为box的li的元素
$('ul li:even').css('background', 'red'); // 索引为偶数的li的元素
$('ul li:odd').css('background', 'blue'); // 索引为奇数的li的元素
$('ul li:eq(5)').css('background', 'yellow'); // 获取索引为5的元素
$('ul li:lt(5)').css('background', 'pink'); // 索引小于5的元素
$('ul li:gt(5)').css('background', 'skyblue'); // 索引大于5的元素

内容过滤选择器

$('li:contains(6)').css('background', 'red'); // 文本中包含某个文字的
$('li:has(span)').css('background', 'blue'); // 标签中有span
$('li:parent').css('background', 'orange'); // li中有内容  文字  标签
$('li:empty').css('background', 'blue'); // li中为空的

可见性过滤选择器

不可见情况

input type=“hidden”
display:none

console.log($('li:visible'));
console.log($('li:hidden'));
console.log($('body *:hidden'));
console.log($('body *:visible'));

属性过滤选择器

 $('li[tag]').css('background', 'red'); // 获取有tag属性的li
 $('li[tag=123]').css('background', 'green'); // tag属性值为123的li
 $('li[tag!=123]').css('background', 'blue'); // tag属性值不为123的li

 $('li[title^=a]').css('background', 'yellow'); // title属性以a为开头
 $('li[title$=a]').css('background', 'orange'); // title属性以a为结尾
 $('li[title*=a]').css('background', 'skyblue'); // title中有a这个字符的

子元素过滤选择器

$('ul li:nth-child(1)').css('background', 'red'); // nth-child选中第几个
$('ul :nth-child(1)').css('background', 'blue'); // nth-child选中第几个
$('ul :nth-child(even)').css('background', 'pink'); // nth-child选中偶数
$('ul :nth-child(odd)').css('background', 'orange'); // nth-child选中奇数
$('ul :nth-child(3n+1)').css('background', 'blue'); // 表达式  1  4   7  

$('ul :first-child').css('background', 'purple');// 第一个
$('ul :last-child').css('background', 'purple');// 最后一个

表单属性过滤选择器

console.log($('input:enabled')); // 获取可用的输入框
console.log($('input:disabled')); // 获取不可用的输入框

console.log($(':checkbox:checked')); // 获取选中的复选框
console.log($(':radio:checked')); // 获取选中的单选框

console.log($('select :selected')); // 获取选中的下拉列表的项

表单元素过滤选择器

console.log($(':input')); // 获取所有的表单
console.log($(':text')); // 获取所有的输入框
console.log($(':radio')); // 单选按钮
console.log($(':checkbox')); // 复选按钮
console.log($(':button')); // 按钮
console.log($(':reset')); // 重置按钮
console.log($(':submit')); // 重置按钮
console.log($(':image')); // 上传图片
console.log($(':file')); // 上传文件

节点遍历

子节点

// 1. 子节点
console.log($('ul').children());
console.log($('ul').children('li'));
console.log($('ul').children('li:odd'));

// 2. 上一个兄弟节点
$('.box').prev().css('background', 'red'); // 获取上一个
$('.box').prevAll().css('background', 'blue'); // 获取前面所有的
$('.box').prevAll('a').css('background', 'black'); // 获取前面所有的

// 3. 下一个兄弟节点
$('.box').next().css('background', 'orange'); // 获取下一个
$('.box').nextAll().css('background', 'green'); // 获取下面所有的

// 4. 获取所有的兄弟节点
$('.box').siblings().css('background', 'pink'); // 获取所有的兄弟节点

父节点

console.log($('.box').parent()); // 直接父节点
console.log($('.box').parents()); // 获取所有的父节点
console.log($('.box').parents('ul')); // 可以接收选择器作为接收条件

过滤节点

find | filter | not

$('ul').find('.box').css('background', 'pink'); //找到ul后 再去找ul中类名为box的元素
$('li').filter('.box').css('background', 'orange'); //找到li 在li中过滤出有类名.box的元素
 $('li').not('.box').css('background', 'blue'); //找到li 在li中过滤出没有类名.box的元素

取赋值

取赋值一体化: 即取值, 设置值使用同一个方法

取值: 只获取符合选择器条件的第一个元素的值

赋值: 遍历赋值(隐式迭代)

attr

jq对象.attr(‘属性名’) 获取

jq对象.attr(‘属性名’, ‘属性值’) 设置只适用于单个属性的设置

jq对象.attr({

‘属性名’: 属性值,

‘属性名1’: 属性值1,

}); 适合批量设置多个属性

既可以操作固有属性也可以操作自定义属性

jq对象.removeAttr(‘属性名’);

console.log($('.box').attr('class'));
console.log($('.box').attr('id'));
console.log($('.box').attr('tag'));

$('.box').attr('id', 'a45678');
$('.box').attr('tag', 'weekDay');

$('li').attr({
    'name': 'isLi',
    'age': 20
});

$('li').attr('name', '');
$('li').removeAttr('name');

prop

语法跟attr完全一致使用有限制

\1. 只添加属性名就起作用的时候(固有属性)

\2. 属性值只有true、false checked disabled selected

jq对象.prop(‘属性名’) 获取

jq对象.prop(‘属性名’, ‘属性值’) 设置只适用于单个属性的设置

jq对象.prop({

‘属性名’: 属性值,

‘属性名1’: 属性值1,

}); 适合批量设置多个属性

可以操作固有属性

jq对象.removeProp(‘属性名’);

console.log($(':checkbox'));
console.log($(':checkbox').prop('checked'));
$(':checkbox').prop('checked', true);
$(':checkbox').prop({
    'name': 'check',
     'value': '复选框',
     'tag': '123',
     'checked': true
});
console.log($(':checkbox').removeProp('checked'));

链式调用

链式调用原理: jq方法在被调用之后, 将当前方法操作的对象或者操作以后的对象返回回来

操作类名

addClass

添加类名 jq对象.addClass(‘类名1 类名2’)

// $('div').addClass('active');
// $('div').addClass('active bg');
// console.log($('div').addClass('active').addClass('bg'));

removeClass

移除类名: jq对象.removeClass(‘类名类名1’)

// $('div').removeClass('active bg');

toggleClass

添加移除类名 jq对象.toggleClass(‘类名’)

有类名的话就移除如果没有类名就添加类名

$('div').toggleClass('active');

hasClass

是否具有某个类名: jq对象.hasClass(‘类名’)

有返回true 如果没有返回false

console.log($('div').hasClass('active'));

is

是否具有某个选择器或状态: jq对象.is(’.类名’) ()里面写的是选择器

有返回true 如果没有返回false

console.log($('div').is('.active'));

操作样式

jq对象.css(‘属性名’) 获取对应的值
jq对象.css(‘属性名’, ‘属性值’) 设置只设置单个样式属性
jq对象.css({ ‘属性名’: 属性值,‘属性名1’: 属性值1 }) 设置

注意:

属性名: 可以加引号也可以不加如果不加的话 - 需要转成驼峰命名法如果加引号不需要转驼峰建议加引号

属性值:

带单位 ‘30px’

数值 300 默认添加px

表达式 ‘+=40’ -= *= /=

console.log($('div').css('width'));
console.log($('div').css('width', 300));
console.log($('div').css({
    'width': 500,
    'height': '300px',
    'font-size': '+=20'
}));
$('button').click(function(){
    $('div').css({
        'font-size': '+=10',
    });
})

操作内容

text

text(): 类似于innerText

\1. 取值: jq对象.text(); 获取到所有符合条件的元素的内容

\2. 设置: jq对象.text(‘内容’); 后面的会覆盖前面的遍历设置

console.log($('div').text());

html

html(): 类似于innerHTML

\1. 取值: jq对象.html(); 获取符合条件的元素的第一个的内容

\2. 设置: jq对象.html(‘内容’); 后面的会覆盖前面的遍历设置

可以识别标签

console.log($('div').html());
console.log($('div').html('<i>这是我写的新内容</i>'));
$('p').text('<i>这是我写的新内容</i>');

val

val(): 类似于value

\1. 取值: jq对象.val(); 获取符合条件的元素的第一个的内容

\2. 设置: jq对象.val(‘内容’); 后面的会覆盖前面的遍历设置

console.log($('input').val());
$(':text').val('新内容');

console.log($(':radio:checked').val());

$(':radio').val(['男']); // value上的值
console.log($(':checkbox').val());


$(':checkbox').val(['LOL', 'CS']);
console.log($('#city').val());

$('#city').val('nj');
console.log($('#mul').val());
console.log($('#mul').val(['bj', 'nj']));

BOM

三大宽高

宽: width height
可视宽高: clientWidth clientHeight
占位宽高: offsetWidth offsetHeight
滚去的高度: scrollTop

console.log($('div').width(), $('div').height()); // 宽 高  内容
console.log($('div').innerWidth(), $('div').innerHeight()); // 可视宽  可视高 
// content + padding
console.log($('div').outerWidth(), $('div').outerHeight()); // 占位宽、高 
//content + padding + border
// 有一个参数  布尔值: true--content + padding + border +margin  false/不传---content + padding + border
console.log($('div').outerWidth(true), $('div').outerHeight(true));

// 取赋值一体化 
// jq对象.width(数值)
$('div').width(500);
// jq对象.innerWidth(数值)   padding不会改变  变得是具体的内容宽高
$('div').innerWidth(500); // content + padding = 500  
// jq对象.outerWidth(数值, 是否包含margin)  true--表示包含   false/不传--表示不包含
$('div').outerWidth(500); // content + padding + border = 500   
$('div').outerWidth(500, true); // content + padding + border + margin = 500

元素位置

当前元素距离具有定位属性父元素的距离

console.log($('div').offset());
console.log($('div').offset().top);

滚动高度

$(window).scroll(function(){
    console.log($(this).scrollTop())
    console.log($(this).scrollLeft())
});

DOM

创建节点

$(‘html片段’)

var li = $('<li>这是一个新标签</i>');
console.log(li);

追加节点

// 1. 追加到父节点的末尾

$('ul').append(li); // 父节点.append(子节点)
li.appendTo('ul'); // 子节点.appendTo('父节点选择器')
// 如果是一次性批量的往父元素中添加
li.appendTo('ul:eq(0)');
li.appendTo('ul:eq(1)');
// 分开步骤追加同一个节点到不同的父节点中  会发生物理位移

// 2.追加到父节点的开头
// prepend
// prependTo
$('ul').prepend(li); // 父节点.prepend(子节点)
li.prependTo('ul'); // 子节点.prependTo(父节点)

//3. 追加某个参考元素之前
// before  insertBefore
$('.box').before(li); // 参考节点.before(新节点)
li.insertBefore('.box'); // 新节点.insetBefore('选择器')

// 4. 追加到某个参考元素之后
// after  insetAfter
$('.box').after(li); // 参考节点.after(新节点)
li.insertAfter('.box'); // 新节点.insertAfter('选择器')

删除节点

detach: 删除当前元素, 返回被删除的元素, 可以保留之前元素的行为
remove: 删除当前元素, 返回被删除的元素, 不能保留之前元素的行为
empty: 清空当前元素(删除当前元素的所有子元素)

$('ul li').click(function(){
    $(this).css('background', 'red');
});

// :eq(0)   jq对象.eq(下标)   得到的都是jq对象
$('button:eq(0)').click(function(){
    var li = $('ul li').eq(0).detach();
    console.log(li);
    setTimeout(function(){
        $('ul').append(li);
    }, 2000);
});

$('button:eq(1)').click(function(){
    var li = $('ul li').eq(0).remove();
    console.log(li);
    setTimeout(function(){
        $('ul').append(li);
    }, 2000);
});


$('button:eq(2)').click(function(){
    $('ul').empty();
});

克隆节点

jq对象.clone(布尔值) 返回克隆的节点页面不存在需要追加到页面中才能看到

不传/false 表示不克隆行为 true 表示克隆行为

$('ul li').click(function(){
    console.log(this);
});

// jq对象.clone(布尔值)  返回克隆的节点  页面不存在 需要追加到页面中才能看到
// 不传/false  表示不克隆行为   true  表示克隆行为
$('button').click(function(){
    // var li = $('ul li').eq(0).clone();
    var li = $('ul li').eq(0).clone(true);
    $('ul').append(li);
});

替换节点

replaceAll: 新节点.replaceAll(‘选择器’)

replaceWith: $(‘参考节点’).replaceWith(新节点)

var li = $('<p>这是非法嵌套</p>');
// $('li').replaceWith(li); 
li.replaceAll('li');

包裹节点

// 链式调用原理： jq方法操作的对象或者是操作以后的对象返回回来
// 1. jq对象.wrap('标签')  jq对象的外面包裹一层标签
$('span').wrap('<div></div>');

// 2. jq对象.wrapInner('标签');  jq对象的里面包裹一层标签
$('span').wrapInner('<i>12345</i>');

// 3. jq对象.wrapAll('标签')  jq对象包裹在一个标签中
var b = $('span').wrapAll('<p></p>');

// 4. jq对象.unwrap(); jq对象删除以及父节点  删到body截止
var a = $('span').unwrap().unwrap().unwrap().unwrap();
console.log(a, b);

事件对象

/* 
    事件对象： 事件处理函数的第一个参数
*/
$('div').click(function(ev){
    console.log(ev); // jQuery.Event
    console.log(ev.originalEvent); // 原生事件对象
    console.log(ev.type); // 事件类型
    console.log(ev.target); // 触发源
    console.log(ev.delegateTarget); // 事件的绑定对象
    console.log(ev.which); // 与keyCode基本一致，比keyCode强大  保留鼠标的左中右  123
    console.log(ev.screenX, ev.screenY); // 鼠标距离屏幕左上角
    console.log(ev.pageX, ev.pageY); // 鼠标距离页面左上角
    console.log(ev.offsetX, ev.offsetY); // 鼠标距离div的左上角的距离
    console.log(ev.ctrlKey, ev.shiftKey, ev.altKey); // 事件触发的时候  对应的键是否被按下
    console.log(ev.clientX, ev.clientY); // 鼠标相对于屏幕左上角可视区域的距离

    // 阻止冒泡
    ev.stopPropagation();
    // 阻止默认行为
    ev.preventDefault();
    // 阻止冒泡 + 阻止默认事件
    return false;
    // 一般写在函数的最后
});
$(document).contextmenu(function(){
    // return false;
});

事件绑定

on

给同一个元素绑定同一事件不同的事件处理函数

function a(){
    console.log(1);
}
function b(ev){
    console.log(ev.type);
}
// 1. jq对象.on('事件类型', 事件处理函数)
$('div').on('click', a);
$('div').on('click', b);

给同一元素的不同事件添加同一处理函数

jq对象.on(‘事件类型事件类型1 事件类型2’, 事件处理函数)
```
$('div').on('click dblclick mouseenter mouseleave contextmenu', b);
```

给同一个元素的不同事件添加对应的事件处理函数

jq对象.on({ 属性名: 函数}) 属性名—事件类型

$('div').on({
    'click': b,
    'mouseenter': a,
    'mouseleave': function(){
        console.log(2);
    },
    // 'click': a // 如果属性名相同  后面的覆盖前面的
});

绑定自定义事件

自定义事件

$('div').on('abc', function(){
    console.log('哈哈哈哈哈');
});
// 手动触发: jq对象.trigger(自定义事件类型)
setTimeout(function(){
    $('div').trigger('abc'); // 手动触发自定义事件
}, 3000);

实现事件委托元素可以发生在未来

事件委托： jq对象.on(事件类型, 选择器, 事件处理函数)

$('div').on('click', 'p', function(){
    console.log($(this).text());
});
$('div').append('<p>12345</p>');

命名空间

/* 
    jq对象.on();
    jquery1.7版本以上 delegate  bind  live
*/
function a(){
   console.log(1);
}
function b(ev){
   console.log(ev.type);
}

$('div').on('click.a', function(){
    console.log(2);
});

$('div').on('mouseover.a', function(){
    console.log(4);
});

off

事件取消： jq对象.off(事件类型, 处理函数的名字);

事件处理函数的名字可写可不写

/* 
    jq对象.on();
    jquery1.7版本以上 delegate  bind  live
*/
function a(){
    console.log(1);
}
function b(ev){
    console.log(ev.type);
}

$('div').on('click.a', function(){
    console.log(2);
});

$('div').on('mouseover.a', function(){
    console.log(4);
});

$('div').on('click', a);
$('div').on('click', b);

/* 
    事件取消： jq对象.off(事件类型, 处理函数的名字);
    事件处理函数的名字可写可不写
*/
$('div').off('click', a);
$('div').off('click.a');
$('div').off('click');
$('div').on('click', function (){
    console.log(333);
});

// 无法取消事件
// $('div').off('click', function(){
//     console.log(333);
// });
$('div').off('click');

one

one: on用法完全一致

区别: one一次性事件

$('div').one('click', function(){
   console.log(1);
});


// 用on模拟one事件
$('div').on('click', function(){
    console.log(1);
    // 解绑事件
    $(this).off('click');
});

合成事件

语法： jq对象.hover();

参数是一个函数：滑入滑出事件都触发这个函数

参数是两个函数: 滑入函数和滑出函数

$('div').hover(function(ev){
   console.log(ev.type);
});

$('div').hover(function(ev){
    $(this).html('这是enter');
    $(this).css('background', 'blue');
}, function(){
    $(this).html('这是leave');
    $(this).css('background', 'green');
});

遍历

$.each

$.each(数据, 函数)

函数有两个形参第一个形参是索引/属性名第二个形参具体的值

// 1. 遍历集合
$.each($('li'), function(i, v){
    // console.log(i, v);
    $(v).css('background', 'red');
    console.log(this); // 当前的元素
    console.log(this == v);
});


// 2. 遍历数组
var arr = ['a', 'b', 'c', 'd', 'e'];
$.each(arr, function(i, v){
    console.log(i, v);
    console.log(this); // 当前的值
    console.log(v == this);
});

// 3. 遍历对象
var obj = {
    name: '彭于晏',
    height: 188,
    age: 18
};
$.each(obj, function(k, v){
    console.log(k, v);
});

$().each

$().each(函数)

函数有两个形参第一个形参是索引第二个形参具体的值

不能遍历对象

// 1. 遍历集合
$('li').each(function (i, v) {
    // console.log(i, v);
    console.log(this);
});

// 2. 数组
var arr = ['a', '1', 2, 3, 4, 5];
$(arr).each(function(i,v){
    console.log(i, v);
});

extend

浅拷贝

浅拷贝: 只比较属性名，如果属性名重复，用后面的覆盖前面的

返回拼接数据以后的dest

工具: $.extend(dest, src, src);

var obj = {
    name: '张艺兴',
    height: 198,
    age: 33
};

var obj1 = {
    age: 18,
    tip: '挣钱'
}

// 工具: $.extend(dest, src, src);  

// 浅拷贝: 只比较属性名，如果属性名重复，用后面的覆盖前面的
// 返回拼接数据以后的dest
var objnew = $.extend(obj, obj1);
console.log(obj);
console.log(objnew);
console.log(objnew == obj);

// 会改变dest里数据  可以使用以下方法
$.extend({}, src, src1...)
var objnew1 = $.extend({}, obj, obj1);
console.log(objnew1);
console.log(obj);

深拷贝

深拷贝: $.extend(true, dest, src, src)

原理: 将$.extend的第一个参数设置成true的时候就是深拷贝。

过程: 先看属性名是否重复，不重复就把属性名和属性值拷贝进来，如果属性名重复, 有一个属性值不是对象的时候，就用后面的覆盖前面的，如果都是对象，就会对比子属性, 重复上述过程.

var a = {
    name: 1,
    age:{
        n: 30,
        l: 18
    },
    height: 188,
    xl: 8
};

var b = {
    name: 2,
    age: {
        n: 31,
        look: 19
    }
}

var o = $.extend(true, {}, a, b);
console.log(o);

动画

show、hide、toggle

show

show: 不传参没有动画效果

传参有动画效果

show(speed, easing, fn); w + h + o

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数

$('button').eq(0).click(function(){
    // $('div').eq(0).show(2000);
    // $('div').eq(0).show('slow');
    $('div').eq(0).show(5000, 'linear', function(){
        console.log(1);
    });
    $('div').eq(1).show(5000, 'swing', function(){
        console.log(2);
    });
});

hide

hide: 不传参没有动画效果

传参有动画效果

hide(speed, easing, fn); w + h + o

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数

$('button').eq(1).click(function(){
    $('div').eq(0).hide(5000, 'linear', function(){
        console.log(1);
    });
    $('div').eq(1).hide(5000, 'swing', function(){
        console.log(2);
    });
});

toggle

toggle有就隐藏没有就显示

toggle: 不传参没有动画效果

传参有动画效果

toggle(speed, easing, fn); w + h + o

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数

$('button').eq(2).click(function(){
    $('div').eq(0).toggle(5000, 'linear', function(){
        console.log(1);
    });
    $('div').eq(1).toggle(5000, 'swing', function(){
        console.log(2);
    });
});

slide

slide: 改变元素的高

slideDown: 显示

slideUp: 收起

slideToggle: 有就收起没有就展开

slideDown

slideDown: 不传参有动画效果

传参有动画效果

slideDown(speed, easing, fn);

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数
```
$('button').eq(0).click(function(){
    $('div').eq(0).slideDown(5000, 'linear');
    $('div').eq(1).slideDown(5000, 'swing');
});
```
slideUp

slideUp: 不传参有动画效果

传参有动画效果

slideUp(speed, easing, fn);

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数
```
$('button').eq(1).click(function(){
    $('div').eq(0).slideUp(5000, 'linear');
    $('div').eq(1).slideUp(5000, 'swing');
});
```
slideToggle

slideToggle: 不传参有动画效果

传参有动画效果

slideToggle(speed, easing, fn);

speed: 速度毫秒数 fast slow

easing: 运动曲线 linear swing

fn: 回调函数
```
$('button').eq(2).click(function(){
    $('div').eq(0).slideToggle(5000, 'linear');
    $('div').eq(1).slideToggle(5000, 'swing');
});
```

fade

fade: 改变元素的透明度

fadeIn: 进入

fadeOut: 隐藏

fadeToggle: 有就隐藏没有就显示

fadeTo: 变道某个透明度

fadeIn

fade(speed, easing, fn)

没有参数的时候也有动画

$('button').eq(0).click(function(){
    $('div').eq(0).fadeIn(5000, 'linear');
    $('div').eq(1).fadeIn(5000, 'swing');
});

fadeOut

$('button').eq(1).click(function(){
    $('div').eq(0).fadeOut(5000, 'linear');
    $('div').eq(1).fadeOut(5000, 'swing');
});

fadeToggle

$('button').eq(2).click(function(){
    $('div').eq(0).fadeToggle(5000, 'linear');
    $('div').eq(1).fadeToggle(5000, 'swing');
});

fadeTo

fadeTo(speed, to 透明度, easing, fn)

$('button').eq(3).click(function(){
    $('div').eq(0).fadeTo(5000, .5, 'linear');
    $('div').eq(1).fadeTo(5000, .5, 'swing');
});

animate

第一种

第一种: jq对象.animate(动画参数, speed, easing, fn);

动画参数：对象 {‘属性’: 属性值, ‘属性’: 属性值}

属性值: 数字带单位字符表达式 show、hide、toggle

speed: 运动速度毫秒数默认值 400ms

easing: 运动曲线 linear swing

fn: 回调函数

$('button').eq(0).click(function(){
    $('div').animate({
        // 'left': '+=100',
        // 'left': '400px',
        'width': 'hide',
        'top': 400
    }, 2000, 'swing', function(){
        console.log(1);
    });
});

第二种

animate(动画参数, 动画配置属性)

动画配置属性可选: {}

duration: 运动时长 ms

easing: 运动方式 linear swing

step: 每一步动画触发的回调函数

complete: 动画执行结束以后的回调函数

queue: 是否队列如果设置false 无论动画写在什么位置在第一时间触发

$('button').eq(1).click(function () {
    $('div').animate({
        'width': 400,
        'height': 400
    }, {
        'duration': 2000,
        'easing': 'linear',
        'step': function () { console.log(1) },
        'complete': function () { console.log('完成') },
        'queue': true
    }).animate({
        'top': '400px',
        'left': 400
    }, {
        'duration': 2000,
        'queue': false
    });
});

停止动画

stop

.stop(clearQueue, gotoEnd)

clearQueue: 是否清除后续队列 true–表示清除 false—不清除

gotoEnd: 是否到达结束值 true—直接到结束值 false—保留在当前值

$('button').eq(1).click(function(){
    // $('div').stop();
    // $('div').stop(true); // 表示要清除后续队列  
    // $('div').stop(true, true); // 表示要清除后续队列    到达目标值
    // $('div').stop(false, true); // 表示不清除后续队列    到达目标值
});

finish

.finish() 结束所有动画并且到目标值

$('button').eq(1).click(function(){
    $('div').finish();
});

延迟动画

.delay(时间) 时间ms

$('button').eq(0).click(function(){
    $('div').animate({
        width: 1000,
        height: 1000
    }, 10000).delay(5000).animate({
        left: 1000,
        top: 1000
    }, 10000);
});

queue

问题: css不是动画不会进入动画的队列不会等待前面的动画执行结束以后在执行

css在动画开始的一瞬间就执行完成

手动加入队列: jq对象.queue(function(){ // 要执行的效果 })

手动以后的问题: queue后面所有的动画都不在执行

$('div').slideUp(1000)
    .slideDown(1000)
    // .css('background', 'yellow')
    .queue(function(next){
        $(this).css('background', 'yellow');
        // next是一个函数  
        next();
    })
    .slideUp(1000)
    .slideDown(1000);

.queue可以理解成不听话的, 帮助其他的效果和代码的插入, 后续的动画不满意此操作, 需要将后续的动画由专一的函数进行服务

AJAX

优点：

\1. 用户等待时间短

\2. 交互

\3. 对服务器的压力比较小

\4. 带宽要求不好

缺点:

\1. 对ajax对于搜索引擎支持

\2. 破坏前进、后退按钮

ajax:

底层: $.ajax

高级: $.get $.post

$.ajax

$.ajax({

url: 请求地址, 必传项

type: 请求方式, get post

data: 传输的数据 a=1&b=2 对象

success: 成功的回调函数, 200 304 有形参, 这个形参就是返回回来的数据

error: 错误的回调函数有形参返回创建的ajax对象

complete: 请求完成以后的回调函数有形参返回创建的ajax对象

timeout: 超时时间毫秒ms

datatype: 设置请求返回的期望数据的类型 text html script json … jsonp(不是期望数据类型，一个标志)

cache: 是否使用缓存(当页面地址已经请求过并且存下来数据)

});

$.ajax({
    url: './banner.json',
    // url: './banner1.json',
    type: 'get',
    // data: 'a=1&b=2'
    data: {a: 22, b: 333},
    success: function(res){
        console.log(res);
    },
    error: function(err){
        console.log('错误报错', err);
    },
    complete: function(com){
        console.log('请求完成', com);
    },
    // timeout: 1
    // dataType: 'text'
    dataType: 'json'
});

$.get

语法: $.get(url, [data], [callback])

$.get('./banner.json', 'a=1',function(res){
    console.log(res);
});

$.post

语法: $.post(url, [data], [callback])

$.post('./banner.json', 'a=1',function(res){
    console.log(res);
});

get和post的区别

get参数通过url传递，post放在request body中。
get请求在url中传递的参数是有长度限制的，而post没有。
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。
get请求只能进行url编码，而post支持多种编码方式
get请求会浏览器主动cache，请求参数会被完整保留在浏览历史记录里，而 post 中的参数不会被保留
GET产生一个TCP数据包；POST产生两个TCP数据包

jsonp

错误: 跨域问题

Access to XMLHttpRequest at ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

错误来源: 由于浏览器对js的同源策略的限制

同源策略: 同一个域名同一个端口同一种协议

非同源:

不同协议

同一个地址，不同的端口

不同的地址

jsonp: json with padding

var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
$.ajax({
    url: url,
    success: function(res){
        console.log(res);
    },
    error: function(err){
        console.log(err);
    },
    dataType: 'jsonp', // 告知jq  用jsonp的方式进行数据请求
});

注意事项: jsonp只支持get请求不支持post请求

原理:

动态的往页面中添加script标签, 将src设置成要访问的地址

var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=a';

// 点击按钮的时候 发送数据请求
$('button').click(function(){
    var sr = $('<script src="' + url + '"><\/script>');
    $('body').append(sr);
});

夹心776655

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JQuery】知识点总结

JQuery基础介绍介绍: jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单理念: 写得少做得多 write less, do more百度下载地址: cdn: https://www.bootcdn.cn/jquery/ 官网: https://jquery.com/使用版本:
复制链接

扫一扫

专栏目录