前端JS-Day28

jQuery效果：

 

 

① 显示：show（）

 

② 隐藏：hide（）

③ 切换：toggle（）

④ 上拉滑动：slideDown（）

⑤ 下拉滑动：slideUp（）

⑥ 切换滑动：slideToggle（）

 

事件切换：hover（[over,]out）

 

如果括号内函数只有一个则鼠标移入和鼠标移出都会触发这个事件。

 

动画队列：动画一旦触发就会执行，如果多次触发就会造成多个动画效果排队执行。

停止排队：避免动画一直执行造成观感问题。

stop（）函数：用于停止动画效果。stop写到动画或者效果前面，相当于停止结束上一次的动画。

 

淡入淡出效果：

① 淡入：fadeIn（）

② 淡出：fadeOut（）

③ 淡入淡出切换：fadeToggle（）

④ 修改透明度：fadeTo（）

 

自定义动画animate：第一参数params不能省略，以对象形式修改属性

只有元素才能执行动画函数，document和window不行！

 

jQuery属性操作：

设置/获取元素固有属性：prop（）只能获取元素本身自带属性！

 

设置/获取元素自定义属性值：attr（）类似原生的get/set Attribute()

 

 

 数据缓存：data（）

 

data和attr都可以获取H5属性例如data-index，区别在于data获取不需要加前缀data-，且data获取的值是Number类型。

 

 

jQuery内容文本值：

① 普通元素内容：html（）相当于原生的innerHTML。

② 普通元素文本内容：text（）相当于原生的innerText。

③ 获取表单值：val（）相当于原生的value属性。

parents('类名')：获取指定类名的所有父类

 

遍历元素：each中回调函数的参数是下标和dom元素，获取到的dom元素需转化为jQuery对象才可以使用jQuery方法。

① $('dom').each()

 

② $.each()：主要用于遍历处理数据。

 

创建元素：$('html元素语句')

添加元素：

① 内部添加：添加是父子关系

1.element.append('内容') ：放在元素内部最后面，类似原生appendChild 

2.element.prepend('内容')：放在元素内部最前面

② 外部添加：添加是兄弟关系

1.element.after('内容')：放在元素后面

2.element.before('内容')：放在元素前面

删除元素：

① element.remove()：删除匹配元素（本身）

② element.empty()：删除匹配元素的所有子节点

③ element.html("")：删除匹配元素所有子节点

 

jQuery尺寸：

 

jQuery位置：

① offset获取或设置偏移量：与父级无关，相对于文档。

 

② position获取相对于带有定位的父级的偏移量，若父级无定位则以文档为主。（只能获取不能设置！）

 

③ scrollTop/scrollLeft：获取或设置元素被卷去的顶部和左侧。

 

jQuery事件：

注册事件：element.事件类型(fuction(){})

绑定事件：使用on函数进行绑定：element.on(events，[selector]，fn) events多个事件，selector是绑定元素的子元素选择器，fn是回调函数。

① 若绑定多个不同事件函数，则events以对象的形式创建：

 

$('div').on({
                mouseenter: function() {
                    $(this).css('background', 'blue');
                },
                mouseleave: function() {
                    $(this).css('background', 'pink');
                },  
                click:function() {
                    $(this).css('background', 'yellow');
                }
            })

 

② 如果事件处理程序相同则多个事件写在同一引号内作为一个参数传入:

$('div').on('mouseenter mouseleave', function() {
                $(this).toggleClass('current');
 });

③ 利用on函数实现事件委托：可以缩减子元素设置事件带来的隐式迭代的消耗。

$('ul').on('click', 'li', function() {});

④ 实现给动态创建的元素添加事件：旧版click无法给即将生成的元素即动态创建的元素设置事件。

 

$('ol').on('click', 'li', ()=> alert(111));
const li = $('<li>动态生成</li>')
$('ol').append(li);

 

 

 

解绑事件：off函数移除通过on方法添加的事件。

 

 one方法只能触发一次的事件。

自动触发事件：

① element.click()

② element.trigger(事件)

③ element.triggerHander(事件)

区别：triggerHander不会触发元素的默认行为！

 

jQuery事件对象：与原生js相同

 

 

 

jQuery对象拷贝：$.extend()方法

jQuery多库共存：① 使用jQuery代替$、② 利用$.noConfflict()设置新顶级对象

 

 

 图片懒加载技术：图片延迟加载提高网页下载速度，减轻服务器负载。即等用户移动到可视区域再加载图片。

 index（）属性仅适用于亲兄弟元素，对于不在同一级的元素则不适用！