JQuery初识(三 )

Posted 2021-01-11 qicun

一丶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()

　　　　解释:删除节点后,事件也会删除(简言之,删除了整个标签)

$(‘ul‘).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)

　　　　　　描述:设置每个匹配元素的垂直方向滚动条位置