jquery获取元素，包裹元素和插入元素属性用法详解
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery获取元素，包裹元素和插入元素属性用法详解，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5892字，纯文字阅读大概需要9分钟。
内容图文
获取元素
.eq(index) 按index获取jQuery对象集合中的某个特定jQuery对象
.eq(-index) 按逆序index获取jQuery对象集合中的某个特定jQuery对象
$( "li" ).eq( 2 ).css( "background-color", "red" );
.get(index) 获取jQuery集合对象中某个特定index的DOM对象（将jQuery对象自动转换为DOM对象）
console.log( $( "li" ).get( -1 ) );
.get() 将jQuery集合对象转换为DOM集合对象并返回
console.log( $( "li" ).get() );
.index() / .index(selector)/ .index(element) 从给定集合中查找特定元素index
1. 没参数返回第一个元素index
2.如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
3.如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
var listItem = $( "#bar" ); alert( "Index: " + $( "li" ).index( listItem ) );
.clone（[withDataAndEvents][,deepWithDataAndEvents]) 创建jQuery集合的一份deep copy（子元素也会被复制），默认不copy对象的shuju和绑定事件
$( ".hello" ).clone().appendTo( ".goodbye" );
.parent([selector]) 获取jQuery对象符合selector的父元素
$( "li.item-a" ).parent('ul').css( "background-color", "red" );.parents([selector]) 获取jQuery对象符合选择器的祖先元素
$( "span.selected" ) .parents( "div" ) .css( "border", "2px red solid" )
插入元素
.append(content[,content]) / .append(function(index,html)) 向对象尾部追加内容
1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
$( ".inner" ).append( "<p>Test</p>" ); $( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] ); $( "p" ).append( "<strong>Hello</strong>" ); $( "p" ).append( $( "strong" ) ); $( "p" ).append( document.createTextNode( "Hello" ) );
.appendTo(target) 把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合,jQuery对象;
$( "h2" ).appendTo( $( ".container" ) ); $( "<p>Test</p>" ).appendTo( ".inner" );
.prepend(content[,content]) / .prepend(function(index,html)) 向对象头部追加内容，用法和append类似
$( ".inner" ).prepend( "<p>Test</p>" );
.prependTo(target) 把对象插入到目标元素头部，用法和prepend类似
$( "<p>Test</p>" ).prependTo( ".inner" );
.before([content][,content]) / .before(function) 在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似
$( ".inner" ).before( "<p>Test</p>" ); $( ".container" ).before( $( "h2" ) ); $( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] ); $( "p" ).before( "<b>Hello</b>" ); $( "p" ).before( document.createTextNode( "Hello" ) );
.insertBefore(target) 把对象插入到target之前（同样不是头部，是同级）
$( "h2" ).insertBefore( $( ".container" ) );
.after([content][,content]) / .after(function（index）) 和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似
$( ".inner" ).after( "<p>Test</p>" ); $( "p" ).after( document.createTextNode( "Hello" ) );
.insertAfter(target) 和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）
$( "<p>Test</p>" ).insertAfter( ".inner" ); $( "p" ).insertAfter( "#foo" );
包裹元素
.wrap(wrappingElement) / .wrap(function(index)) 为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div></div>
$( ".inner" ).wrap( "<div class='new'></div>" );
<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>.wrapAll(wrappingElement) 把所有匹配对象包裹在同一个HTML结构中
Wrap an HTML structure around all elements in the set of matched elements.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div></div>
$( ".inner" ).wrapAll( "<div class='new' />");
<div class="container">
<div class="new">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
</div>.wrapInner(wrappingElement) / .wrapInner(function(index)) 包裹匹配元素内容，这个不好说，一看例子就懂
Wrap an HTML structure around the content of each element in the set of matched elements.
<div class="container"> <div class="inner">Hello</div> <div class="inner">Goodbye</div></div>
$( ".inner" ).wrapInner( "<div class='new'></div>");
<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>.unwap() 把DOM元素的parent移除
pTags = $( "p" ).unwrap();
属性方法
.val() 获取元素的value值
$( "input:checkbox:checked" ).val();
.val(value) /.val(function(index,value)) 为元素设置值，index和value同样是指在为集合中每个元素设置的时候该元素的index和原value值
$( "input" ).val( ‘hello’ );
$( "input" ).on( "blur", function() {
$( this ).val(function( i, val ) {
return val.toUpperCase();
});
});.attr(attributeName) 获取元素特定属性的值
var title = $( "em" ).attr( "title" );
.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 为元素属性赋值
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});.prop( propertyName ) 获取元素某特性值
$( elem ).prop( "checked" )
.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 为元素特性赋值
$( "input" ).prop( "checked", true );
$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
return !val;
});
$( "input[type='checkbox']" ).prop({
disabled: true
});.data(key,value) / .value(json) 为HTML DOM元素添加数据，HTML5元素 已有data-*属性
$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );.data(key) / .data() 获取获取data设置的数据或者HTML5 data-*属性中的数据
alert( $( "body" ).data( "foo" ) ); alert( $( "body" ).data() ); alert( $( "body" ).data( "foo" ) ); // undefined $( "body" ).data( "bar", "foobar" ); alert( $( "body" ).data( "bar" ) ); // foobar
以上就是jquery获取元素，包裹元素和插入元素属性用法详解的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的jquery获取元素，包裹元素和插入元素属性用法详解全部内容，希望文章能够帮你解决jquery获取元素，包裹元素和插入元素属性用法详解所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。