jQuery小总结

元素节点操作

创建元素

$("标签和内容")      --     创建一个标签并给里面放内容

列举：

var brr = $("<div class=""box-1"></div>)
console.log(brr)

添加元素
给父元素追加子元素：

父元素.append（子元素）
	-- 在里面追加的元素自动就会解析   比如  标签b：
	var box = &（“<b>我已经加粗啦</b>”）

给父元素前面添加一个子元素

父元素.prepend（子元素）

将子元素添加到父元素中

	//将子元素追加到父元素中
	子元素.appendTo（父元素）
	//将子元素添加到父元素最前面
	子元素.prependTO（父元素）

添加兄弟元素

		//添加下一个兄弟元素
		元素,after（下一个兄弟元素）

添加上一个兄弟元素

元素.before（上一个兄弟元素）

将元素添加到某一个元素前面或后面

		//将元素添加到某个元素最前面
		要添加的元素.insertBefpre（元素）
		//将元素添加到某个元素后面
		要添加的元素.insertAfter（元素）

替换元素

使用新元素替换某个元素

某个元素.replacewith（新元素）
新元素.replaceAll（某个元素）

删除元素

删除元素内部所有标签和内容,让自己变成一个空标签

元素.empty（）

将当前标签从页面中删除

元素.remove（）			//删除自己和自己内部所有内容

复制元素

元素.clone（是否复制自身事件，是否复制子元素事件） 			//这个默认就是teue

使用说明：

1. jquery中的复制元素是深复制，复制标签结构和内容
2. 这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。
3. 如果不复制父元素的事件，子元素的事件也不能复制

元素尺寸

元素内容区域尺寸操作：

元素,height（）			//获取元素内容区域高度
元素.height（高度）	//设置元素内容区域高度
元素.width（）			//获取元素内容的宽度
元素.width（宽度）		//设置元素内容宽度

注：只有元素的宽高可以直接获取设置

获取元素内部1区域尺寸：

元素.innerHeight（）     //获取元素占据的宽度  --  包含pading不包含border
元素.innerWidth（）		//获取元元素内部宽度	  --  包含padding不包含border

获取元素占据页面的尺寸

元素.outHeight（）				//获取元素占据的高度,   包含 padding和border  -   不包含margin
元素.ouHeight（true）  		//获取元素占据的宽度，包含padding和border   -   包含margin
元素.outWidth();			// 获取元素占据的宽度，包含padding和border，不包含margin
元素.outWidth(true); 		// 获取元素占据的宽度，包含padding和border，包含margin

元素的位置

元素相对页面的位置操作：

元素.offset（）   		//获取元素的页面中的位置，包含left值和top值，返回一个对象
元素.offset（{left：值，top：值}）		//将元素设定到指定位置,使用relative

元素相对父元素的值

元素.position(); // 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top	

获取元素滚动过的距离

$(window).scrollTop(); // 获取元素滚动过的高度
$(window).scrollLeft(); // 获取元素滚动过的宽度
$(window).scrollTop(值); // 设置元素滚动过的高度
$(window).scrollLeft(值); // 设置元素滚动过的宽度

动画

基本动画
显示：

元素.show（）		//让元素从隐藏到显示状态（从display：none；变成 display：block)
可选参数1：时间  --  毫秒 ==  让元素在规定的时间显示（操作属性有很多)
可选参数2：速度方式  --  均速 - 加速 - 减速
可选参数3：动画结束后执行的回调函数

隐藏

元素.hide（）   ————   让元素怒从显示状态切换到隐藏状态切换

切换显示 - 到隐藏

元素.toggle(); // 让元素在隐藏和显示状态切换
可选参数和show一样

元素上下拉隐藏显示：

元素.slideDown() // 让元素向下拉动显示
元素.slideUp() // 让元素向上拉动隐藏
元素.slideToggle() // 让元素切换上下拉动显示隐藏
参数和show一样

元素透明度显示隐藏

元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样

让元素切换到指定的透明度

元素.animate（毫秒数，透明度，速度方式，结束回调函数）			//让元素在指定的时间内切换到指定的透明度

自定义动画

开启动画

元素.animate({
    css属性名:属性值,
    css属性名:属性值,
    。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);

停止动画

元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态

扩展：

stop有两个参数，值都是布尔值：
参数1表示是否执行后续的动画，true表示不执行，false表示执行，默认是false
参数2表示是否停止在当前位置，true表示停止的当前动画的结束位置，false表示停止在当前位置，默认为false
动画的链式操作：
通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行，例：