jQ笔记

JQ高级(笔记)

元素节点操作

创建元素

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

var box = $("<div class='box'>div盒子</box>"); 

console.log(box);

**添加元素

// 给父元素最后面添加子元素   
父元素.append(子元素);

// 给父元素最前面添加子元素   
父元素.prepend(子元素);

// 将子元素追加到父元素中     
子元素.appendTo(父元素); 

// 将子元素添加到父元素最前面 
子元素.prependTo(父元素);

// 添加下一个兄弟元素		
元素.after(下一个兄弟元素);

// 添加上一个兄弟元素		
元素.before(上一个兄弟元素);

// 将元素添加到某个元素前面 
要添加的元素.insertBefore(元素); 

// 将元素添加到某个元素后面 
要添加的元素.insertAfter(元素)

替换元素

元素1.replaceWith(元素2) // 将元素1替换成元素2
元素1.replaceAll(元素2)  // 用元素1替换掉元素2

删除元素

// 删除元素内部所有标签和内容，让自己变成一个空标签
元素.empty()

// 删除当前标签和自己内部所有内容
元素.remove() 

复制元素

元素.clone([是否自身的事件][,是否复制子元素的事件])

使用说明：
1. 深复制，复制标签结构和内容
2. 这个方法接收两个参数:
参数1代表是否把元素的事件也克隆出来，默认为false；
参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。

元素尺寸

元素内容区域尺寸操作（不包含border与p和m）

元素.height(); 
// 获取元素内容区域高度 

元素.height(高度); 
// 设置元素内容区域高度 

元素.width(); 
// 获取元素内容区域宽度 

元素.width(宽度) 
// 设置元素内容区域宽度

获取元素内部区域尺寸

元素.innerHeight(); 
// 获取元素内部的高度，包含padding，但不包含border 

元素.innerWidth(); 
// 获取元素内部的宽度，包含padding，但不包含border

获取元素占据页面的尺寸

元素.outHeight(); 
// 获取元素占据的高度，包含padding和border，不包含margin 

元素.outHeight(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()； 
// 让元素从显示状态切换到显示状态 可选参数和show一样 

切换显示隐藏

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

元素上下拉动隐藏显示

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

元素透明度显示隐藏

元素.fadeIn() 
// 让元素从透明度0变为1的显示 

元素.fadeOut() 
// 让元素从透明度1变为0的隐藏 

元素.slideToggle() 
// 让元素切换透明度显示隐藏 
参数和show一样

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

元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) 
// 让元素在指定的时间内切换到指定的透明度 

自定义动画

开启动画

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

停止动画

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

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

---

依旧是总结的一周，这周还是懈怠了啊！感觉有点脑子空（就是不想事情），在下下周我应该要开始接触，并尝试仿写一个项目了。说真的有点紧张，更多的是不知所措。从12.30开始到现在，四个月了，我在努力的跟上前端学习的步伐。期间有迷茫，有崩溃，也彷徨过，但还是走下来了。就像当年高考失败，也有很多人劝我复读，其实我的分数离二本没差太多，但我没去（我表姐复读两年也没考上给我的压力很大，她一直是我妈嘴里别人家的孩子），我选择去读了个大专。人生这条很长，有时却又很短。有人会问我：“你后悔么？”。也许我会想想当时选择了不同的路会怎么样（俗称yy），但真的没有后悔过（真tm后悔没在高中找个女朋友），我觉得做出了选择，就没必要去后悔（所以我有点选择恐惧症），都说随波逐流不好，emmm，我觉得随心随性挺好的。

---