一丶JQuery的文档操作
1.插入操作:
父元素.append(子元素)
解释:追加某元素,在父元素中添加新的子元素.子元素可以为:stirng|element(js对象)|JQuery元素
var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));
如果追加的是JQuery对象那么这些元素将从原位置上消失.简言之,就是一个移动操作.
子元素.appendTo(父元素)
解释:追加到某元素 子元素添加到父元素
$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')
要添加的元素同样既可以是string丶element(js对象)丶JQuery元素
父元素.prepend(子元素)
解释:前置添加,添加到父元素的第一个位置
$('ul').prepend('<li>我是第一个</li>')
子元素.prependTo(父元素)
解释:前置添加,添加到父元素的的第一个位置
$('<a href="#">路飞学诚</a>').prependTo('ul')
兄弟元素.after(要插入的兄弟元素)
要插入的兄弟元素.inserAfter(兄弟元素)
解释:在匹配的元素之后插入内容
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
兄弟元素.before(要插入的兄弟元素)
要插入的兄弟元素.inserBefore(兄弟元素)
解释:在匹配的元素之后插入内容
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
2.克隆操作
$(选择器).clone()
解释:克隆匹配的DOM元素
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3.修改操作
$(selector).replaceWith(content)
将所有匹配的元素替换成指定的string丶js对象丶JQuery对象
//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));
$('<p>哈哈哈</p>')replaceAll('h2')
解释:替换所有.将所有的h2标签替换成p标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4.删除操作
$(selector).remove()
解释:删除节点后,事件也会删除(简言之,删除了整个标签)
$(selector).detach()
解释:删除节点后,事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
$(selector).empty()
解释:清空选中元素中的所有后代节点
//清空掉ul中的子元素，保留ul
$('ul').empty()
二丶JQuery的位置信息
1.宽度和高度
获取宽度 .width()
描述：为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。当一个元素的宽度需要数学计算的时候推荐使用.width() 方法 。
设置宽度 .width(value)
描述:给每个匹配的元素设置css宽度.
获取高度 .height()
描述:获取匹配元素集合中的第一个元素的当前计算高度
这个方法不接受任何参数
设置高度 .height()
描述:设置每一个匹配元素的高度值.
2.innerHeight()和innerWidth()
获取内部宽 .innerWidth()
描述:为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding,但是不包括border.
这个方法不适用于window和document对象,对于这些对象可以使用 .width()代替
设置内部宽 .innerWidth(value)
描述; 为匹配集合中的每一个元素设置CSS内部宽度.如果这个"value"参数提供一个数字,JQuery会自动加上像素单位(px)
获取内部高 innerrHeight()
描述:为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding,但是不包括border.
这个方法不适用于window和document对象,对于这些对象可以使用.height()代替
设置内部宽: innerHeight(value)
描述:为匹配集合中的每个元素设置CSS内部高度.如果这个"value"参数提供一个数字,JQuery会自动加上像素单位(px)
3.outWidth和outHeight()
获取外部宽 .outerWidth([includeMargin])
描述:获取匹配元素集合中第一个元素的当前计算外部宽度(包括padding,border和可选的margin)
includeMargin(默认: false)
类型; Boolean
一个布尔值,表面是否在计算时包含元素的margin值
这个方法不适用于window和document对象,可以使用 .width()代替
设置外部宽: .outerWidth(value)
描述:为匹配集合中的每个元素设置 CSS外部宽度
获取外部宽 .outerHeight([includeMargin])
描述:获取匹配元素集合中第一个元素的当前计算外部高度(包括padding,border和可选的margin)
includeMargin(默认; false)
类型: Boolean
一个布尔值,表明是否在计算时包含元素的margin值
这个方法不适用于window和document对象,可以使用.width()代替
设置外部高 .outerHeight( value)
描述:为匹配集合中的每个元素设置CSS外部高度
4.偏移
获取 .offset()
返回值：Object 。.offset()返回一个包含top 和 left属性的对象 。
描述：在匹配的元素集合中，获取的第一个元素的当前坐标，坐标相对于文档。
注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标
设置 .offset(coordinates)
描述;设置匹配元素集合中每一个元素的坐标,坐标相对于文档
coordinates
类型: Object
一个包含top和left属性的对象,用整数指明元素的新顶部和左边坐标
$("p").offset({ top: 10, left: 30 });
5.元素坐标
.position()
返回值:Object{top,left}
描述:获取匹配元素中第一个元素的当前坐标,相对于offset paren的坐标(offset parent指离该元素最近的而且被定位过的祖先元素)
当把一个新元素放在同一个容器里面另一个元素附近时,用 .position()更好用
6.滚动距离
水平方向:
获取: .scrolLeft()
描述:获取匹配的元素集合第一个元素的当前水平滚动条的位置(页面卷走的宽度)
设置: .scrolLeft(value)
描述:设置每个匹配元素的水平方向滚动条位置
垂直方向:
获取: .scrollTop()
描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)
设置: .scrollLeft(value)
描述:设置每个匹配元素的垂直方向滚动条位置