Web前端开发笔记之JS提升08——JQ

目录

JQ对象向DOM对象转换：

事件绑定：

元素内容设置获取：

匹配元素选择器：

属性操作：

表单元素中的value属性值： 

查找方法：

操纵类名：

window事件绑定：

位置获取：

 滚动距离：

动画显示和隐藏效果：

淡入淡出效果：

展开收起动画：

 动画队列停止方法：

 自定义动画：

插入节点：

动画的回调函数：

 动画延迟方法：

 尺寸：

 节点删除：

 事件委托：

 入口函数：

 lazyload插件：

 全屏滚动插件：

 阻止默认行为：

 日期选择器插件：

 表单校验插件：

 节点克隆：

 通过trigger触发dom方法：

 JQ对象转DOM：

 表单序列化：

 JQ的数组遍历方法：

---

Js部分结束，我们来看看JQ的一些知识。

在基础笔记中，我们对JQ已经有了大概的认识，这里我会说一些，基础中没有说到或需要补充的部分。

JQ对象向DOM对象转换：

    let getAllBtn=document.querySelectorAll('button')
	let $getAllBtn=$(getAllBtn)
    console.log($getAllBtn)

只需将dom对象传入$（）中就可以将其转换为JQ对象。

事件绑定：

当然也有很多其它的动作：dbclick、mouseover......

不过这样写，如果事件很多我们如何操作。

第一种：链式编程

 第二种：on方法

$("p").on({

    mouseover:function(){$("body").css("background-color","lightgray");},

    mouseout:function(){$("body").css("background-color","lightblue");},

    click:function(){$("body").css("background-color","yellow");}

  });

事件注册中的高级用法：

元素内容设置获取：

匹配元素选择器：

 

属性操作：

 

表单元素中的value属性值： 

查找方法：

操纵类名：

window事件绑定：

位置获取：

 滚动距离：

动画显示和隐藏效果：

淡入淡出效果：

展开收起动画：

 

 动画队列停止方法：

 自定义动画：

 动画属性中传入长宽等css样式，同时也可以传入scrolltop或scrolllLeft。

插入节点：

动画的回调函数：

 

 动画延迟方法：

 尺寸：

 

 

 节点删除：

 事件委托：

 入口函数：

 load方法可以通过事件绑定来作用于document上。

 lazyload插件：

用于动态加载我们的图片，节约服务器资源。

 全屏滚动插件：

fullpage插件：用于页面希望是一种滚动状态切换的效果。

 阻止默认行为：

注意这里不是阻止冒泡。

 日期选择器插件：

 表单校验插件：

 节点克隆：

 通过trigger触发dom方法：

 JQ对象转DOM：

 表单序列化：

 JQ的数组遍历方法：