前端学习笔记-jQuery（二）

一、jQuery对象和dom对象互转

1.jQuery对象对象转dom对象

​ $(selector) -> $(selector).get(0)
$(selector) -> $(selector)[0]

​ jQuery对象是一个伪数组，可以通过get方法通过下标来转化为DOM对象，或者直接用数组方法转化。

2.dom对象转jQuery对象

​ domobj -> $(domobj)

二、动态操作节点

1.创建节点

​ $(‘标签’)

2.添加节点

​ parent.append(child):追加到到最后
parent.prepend(child)：追加到最前面
brother.after(obj):追加到兄弟节点后
brother.before(obj):追加到兄弟节点前

3.删除节点

​ empty():清空所有子元素
remove()：出被选元素，包含之下的所有子元素
detach()：移出被选元素，包含之下的所有子元素

4.替换节点

​ replaceWith(新节点)
replaceAll(旧节点)

5.复制节点

​ clone(true|false)
true:是复制包含子节点
false：只复制自身

三、获取元素尺寸和位置

1.元素尺寸

​ 1.自身尺寸
$(selector).width()
$(selector).height()

​ 2.padding+自身尺寸
$(selector).innerWidth()
$(selector).innerHeight()

​ 3.border+padding+自身尺寸
$(selector).outerWidth()
$(selector).outerHeight()

​ 4.border+padding+margin+自身尺寸
$(selector).outerWidth(true)
$(selector).outerHeight(true)

2.元素位置

​ 1.相对页面
offset():获取位置
offset({top:*px,left:*px}):设置位置

​ 2.相对父元素位置，父元素在定位下
position()

​ 3.注意事项
position不可以设置位置，如果需要改变，可以用设置行间样式(css)

3.滚动条距离

​ $(document).scrollTop()：离顶部距离
$(document).scrollLeft()：离左边距离

四、动画

​ 1.隐藏与显示
hide():隐藏
show()：显示
toggle()：切换

​ 2.淡入淡出
fadeIn():淡入
fadeOut()：淡出
fadeToggle():切换

​ 3.滑动
slideDown()：隐藏元素
slideUp()：显示元素
slideToggle()：切换元素

​ 4.自定义动画animate

​ $(selector).animate({params},speed,回调函数);
=>形成动画的CSS属性

​ }）

​ 5.停止
stop()：立即停止
finish()：结束后停止

五、Ajax

​ $.ajax({

​ type:“POST”“GET”,

​ url:url,

​ dataType:“json”,

​ data{

​ 请求携带参数。

​ },

​ success:function(result){

​ 响应成功后执行的代码

​ }

​ error:function(err){

​ 失败后执行的代码

​ }

​ })
$.get(url,params,回调函数)

​ $.post(url,params,回调函数)

​ params为请求是携带的参数

六、jQuery方法拓展

​ 1.元素集
$.fn.extend({
自定义拓展方法
})

​ 2.jQuery对象本身拓展
$.extend({

​ }）

​ 3.jQuery 与$.fn的区别

​ $.fn是jQuery的原型对象