dom对象:原生js获取的dom对象
jq对象:通过jquery的$()获取的对象
$(dom对象):dom对象转化成jq对象
jq对象[index]:jq对象转化成dom对象
---获取---------------------------------------
text() //获取对象节点信息,传参则替换
html() //获取对象节点信息,能够解析标签
val() //获取表单元素的value,参数则是设置
index() //获取该jq对象的index
-------------------------------------------
css()
----获取
如name是 width:200px
css(name) //获取value是200px
----设置
css(name,value) //设置单个样式
css({name:value, ...}) //多个
-------------------------------------------
Class操作
addClass(name1 name2) //添加class
removeClass(name1 name2) //删除class
hasClass(name1) //判断class返回true或false
toggleClass(name1) //切换class,有则删,无则加
-------------------------------------------
动画
//1、运动毫秒;2、回调函数
show(参数1,参数2) //没有参数单纯显示
hide(参数1,参数2) //没有参数单纯隐藏
toggle(参数1,参数2) //切换,没有同理【上】
slideDown(参数1,参数2) //向下滑入,没有参数有默认时间
slideUp(参数1,参数2) //向上滑出,没有参数有默认时间
slideToggle(参数1,参数2)//切换
fadeIn(参数1,参数2) //淡入,没有参数有默认时间
fadeOut(参数1,参数2) //淡出,没有参数有默认时间
fadeToggle(参数1,参数2) //切换
//参数1:是对象,设置运动的属性 必填
//参数2:时间毫秒数 可选
//参数3:运动规则 linear:匀速 swing:缓动(默认) 可选
//参数4:回调函数 可选
animate({left:200px},2000,'linear',function(){})
-------------------------------------------------
停止动画
//参数1:是否清除后面的动画队列
//参数2:是否跳转到最终效果
//不给参数默认为flase,false
stop()
--------------------------------------------------
创建节点html() or $()
html('<a>链接</a>') //直接添加到对象节点中作为子元素,会覆盖掉对象节点原先内容
$('<a>链接</a>') //通过append()进行追加到对象节点中最后作为子元素,不会覆盖
添加节点
父子
append($div) //追加到对象节点中最后作为子元素,$div如果存在就转移
prepend($div) //追加到对象节点中最前作为子元素,$div如果存在就转移
兄弟
after($div) //追加到对象节点中后面作为兄弟元素,$div如果存在就转移
before($div) //追加到对象节点中前面作为兄弟元素,$div如果存在就转移
清空元素
empty() //清空对象中的所有子节点
移除元素
remove() //移除该对象及所有子节点
克隆节点
clone() //参数为true会连同事件一起克隆,false只会克隆内容,默认为false
操作属性attr()--------------------------------------------------
----设置属性 //参数1:属性名 //参数2:属性值
单个设置 attr(参数1,参数2) //例如attr('src','a.jpg'),属性名无则添加,有则替换掉值
多个设置 attr({属性名:属性值, ...})
----获取属性值
attr(属性名) //标签存在属性名则获取属性值,无则undefined
----删除属性
移除单个 removeAttr(属性名)
移除多个 removeAttr(属性名1 属性名2 ...)
对于checked(复选框),selected(下拉菜单),disabled(禁用)等Boolean类型的属性,需要用prop的方法
操作dom宽高--------------------------------------------------------------------
----给参数则设置,不给参数则获取,没有px
----只包括宽度/高度
width()
height()
----包括宽度/高度 内边距
innerWidth()
innerHeight
----包括宽度/高度 内边距 边框
----加上外边距的话想要加上参数true
outerWidth()
outerHeight(true)
----获取页面可视区域
$(window).width()
$(window).height()
offset()和position()-------------------------------------------------------------
offset() //返回的是距离document的位置的对象{top:***,left:***}
position() //返回的是定位(position)的位置的对象{top:***,left:***}
scrollLeft()和scrollTop() //获取滚动的宽度和高度,加上参数为设置
$(window).scrollLeft() //获取页面滚动的宽度,高度同理,加上参数为设置
滚动事件
$(window).scroll(function(){})
--------------------------------------------------------------------
on()事件注册
----简单注册
$('div').on('click',function(){})
$('div').on({
'click':function(){},
'mouseenter':function(){}
})
----事件委托
$('父元素').on('click','div,span',function{})
off()解绑事件
$('div').off() //解绑所有事件
$('div').off('click') //解绑click事件
trigger()触发事件,代码的方式触发事件
$('div').trigger('click') //触发div的click事件,一般用于满足什么条件时触发
----自定义事件
$('div').on('zidinyi',function(){}) //自定义一个'zidinyi'事件
满足条件后执行$('div').trigger('zidinyi') //触发了'zidinyi'事件
--------------------------------------------------------------------------
链式编程:end() //回到上一个jq对象
jq对象遍历(迭代):each() //$(list).each(function(index,element){})
多库共存: var _$ = $.noConflict() //将$控制权释放,使用_$接收,则要使用_$而不是$
封装插件
this是调用的jq对象
(function($){
$.fn.方法名 = function(a){
console.log(this)
return this;
}
}(jQuery))
来源:https://www.cnblogs.com/zwj-juncy/p/12403769.html