元素操作
1-创建元素
var div = $(‘<div></div>‘)
2-内部插入元素
（1）append( )向div元素中插入一个p元素，放在最后
$(‘div‘).append($(‘<p></p>‘))
（2）appendTo( )把p元素插入到div中，放在最后
$(‘<p></p>‘).appendTo($(‘div‘))
（3）prepend()向 div 元素中插入一个 p 元素，放在最前
$(‘div‘).prepend($(‘<p></p>‘))
（4）prependTo() 把 p 元素插入到 div 中去，放在最前
$(‘<p>hello</p>‘).prependTo($(‘div‘))
3-外部插入元素
（1）after（） 在 div 的后面插入一个元素 p
$(‘div‘).after($(‘<p></p>‘))
（2） before（）在 div 的前面插入一个元素 p
$(‘div‘).before($(‘<p></p>‘))
（3） insertAfter( )把 p 元素插入到 div 元素的后面
$(‘div‘).insertAfter($(‘<p></p>‘))
（4）insertBefore( )把 p 元素插入到 div 元素的前面
$(‘div‘).insertBefore($(‘<p></p>‘))
4-替换元素
（1）replaceWith（） 把 div 元素替换成 p 元素
$(‘div‘).replaceWith($(‘<p></p>‘))
（2） replaceAll（）用 p 元素替换掉 div 元素
$(‘<p></p>‘).replaceAll($(‘div‘))
5-删除元素
（1）empty（）删除元素下的所有子节点
$(‘div‘).empty()
（2）remove( )把自己从页面中移除
$(‘div‘).remove()
6-克隆元素 clone（）
克隆一个 li 元素
接受两个参数
参数1： 自己身上的事件要不要复制，默认是 false
参数2： 所有子节点身上的事件要不要复制，默认是 true
$(‘li‘).clone( )
元素尺寸
原生js中没有元素相对页面的位置，有鼠标相对于页面的位置
1-操作元素的宽和高width（）、height（）不传参数是获取值，传入参数是设置值；获取时不含border和padding的值
$（‘div‘）.height() 或 $（‘div‘）.height(20px)
$(‘div‘).width( ) 或 $(‘div‘).width(30PX )
2-获取元素内置的宽和高,包含padding，不包含border
$(‘div‘).innerHeight( )
$(‘div‘).innerWidth()
3-获取元素外置的宽和高:outWidth()、outHeight()，可传入参数true或false.
不传参数时：只包含padding、border，传入true时包含padding、border、margin。
// 获取 div 元素内容位置的宽，包含 padding 和 border
$(‘div‘).outerWidth()
// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin
$(‘div‘).outerWidth(true)
元素位置
1-元素相对页面的位置 offset（）
可以获取元素相对页面的位置，得到的是一个对象
传入值时，可以设置元素相对页面的位置
// 获取 div 相对页面的位置
$(‘div‘).offset() // 得到的是以一个对象 { left: 值, top: 值 }
// 给 div 设置相对页面的位置
$(‘div‘).offset({ left: 100, top: 100 })
// 获取定位到一个距离页面左上角 100 100 的位置
2-元素相对于父元素的偏移量 position（）
// 获取 div 相对于父元素的偏移量（定位的值）
$(‘div‘).position()
3-获取页面卷去的高度和宽度
window.onscroll = function () {
// 获取浏览器卷去的高度
console.log($(window).scrollTop())
}
window.onscroll = function () {
// 获取浏览器卷去的宽度
console.log($(window).scrollLeft())
}
元素事件
原生js中的事件都可以用，使用时不加on
$(‘button‘).click(function(){})
hover事件：鼠标的移入移出
$(‘button‘).hover(function(){
console.log(‘移入‘) },function(){
console.log(‘移出‘) })
可以用事件委托
例：给ul添加事件委托,使得button有点击事件
$(‘ul‘).on(‘click‘,‘button‘,function(){
Console.log(22)})
事件解绑
$(‘ul‘).off(‘click‘,‘button‘)
或者用delegate来进行事件委托
$(‘ul‘).delegate(‘button‘,‘click‘,function(e){
console.log(3333) })
给事件只绑定一次：one
$(‘button‘).one(‘click‘,function(){ })
button的点击事件只触发一次
模拟触发事件：trigger
$(‘button‘).trigger(‘click‘)//模拟触发点击
页面加载完毕：ready
元素动画
括号中可以传3个参数（‘毫秒’，‘速度’，回调函数）
元素本身是display：block的状态，可以将其隐藏
$(‘div‘).hide( )// 给 div 绑定一个隐藏的动画
2.给元素绑定一个显示动画 show
元素本身是display：none的状态，可以将其显示
$(‘div‘).show( )// 给 div 绑定一个显示的动画
3.给元素绑定一个切换动画 toggle
元素本身是显示，那么就隐藏，本身是隐藏那么就显示
$(‘div‘).toggle( )// 给 div 绑定一个切换的动画
4.显示改变高度slideDown（）
通过改变高度进行显示
5.隐藏改变高低slideUp（）
通过改变高度进行隐藏
6.切换slide：slideToggle（）
通过改变高度，进行切换
7.通过透明度进行隐藏、显示、切换的动画
fadeOut() 隐藏
fadeIn() 显示
fadeToggle()切换
fadeTo() 将透明度设置成多少
8.自定义动画：animate
$("#box").animate(
{width: 200,height: 200,
}, 2000,
function () {
console.log("动画执行完毕"); } );
9.立刻停止动画 stop （）将其停在当前状态
10.立刻结束动画finish（）将动画停止在结束状态
原文：https://www.cnblogs.com/52580587zl/p/13204759.html