了解了这些才能开始发挥jQuery的威力(4)


<div>
  <div>Hello</div>
  <div>Goodbye</div>
</div>$( ".inner" ).wrapAll( "<div />");<div>
  <div>
    <div>Hello</div>
    <div>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>
  <div>Hello</div>
  <div>Goodbye</div>
</div>$( ".inner" ).wrapInner( "<div></div>");
<div>
  <div>
    <div>Hello</div>
  </div>
  <div>
    <div>Goodbye</div>
  </div>
</div>

.unwap() 把DOM元素的parent移除

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

复制代码 代码如下:

pTags = $( "p" ).unwrap();

属性方法

.val() 获取元素的value值

Get the current value of the first element in the set of matched elements.

复制代码 代码如下:


$( "input:checkbox:checked" ).val();

.val(value) /.val(function(index,value)) 为元素设置值,index和value同样是指在为集合中每个元素设置的时候该元素的index和原value值

Set the value of each element in the set of matched elements.

复制代码 代码如下:


$( "input" ).val( ‘hello' );
$( "input" ).on( "blur", function() {
  $( this ).val(function( i, val ) {
    return val.toUpperCase();
  });
});

.attr(attributeName) 获取元素特定属性的值

Get the value of an attribute for the first element in the set of matched elements.

复制代码 代码如下:


var title = $( "em" ).attr( "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) ) 为元素属性赋值

Set one or more attributes for the set of matched elements.

复制代码 代码如下:


$( "#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 ) 获取元素某特性值

Get the value of a property for the first element in the set of matched elements.

复制代码 代码如下:


$( elem ).prop( "checked" )

.prop(propertyName,value) / .prop(propertiesJson) / .prop(propertyName,function(index,oldPropertyValue)) 为元素特性赋值

Set one or more properties for the set of matched elements.

复制代码 代码如下:


$( "input" ).prop( "checked", true );

$( "input[type='checkbox']" ).prop( "checked", function( i, val ) {
  return !val;
});

$( "input[type='checkbox']" ).prop({
  disabled: true
});

关于attribute 和 property区别可以看看 jQuery的attr与prop


.data(key,value) / .value(json) 为HTML DOM元素添加数据,HTML5元素 已有data-*属性

Store arbitrary data associated with the matched elements.The .data() method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks.

复制代码 代码如下:


$( "body" ).data( "foo", 52 );
$( "body" ).data( "bar", { myType: "test", count: 40 } );
$( "body" ).data( { baz: [ 1, 2, 3 ] } );

.data(key) / .data() 获取获取data设置的数据或者HTML5 data-*属性中的数据

Return the value at the named data store for the first element in the jQuery collection, as set by data(name, value) or by an HTML5 data-* attribute.

复制代码 代码如下:


alert( $( "body" ).data( "foo" ) );
alert( $( "body" ).data() );

alert( $( "body" ).data( "foo" ) ); // undefined
$( "body" ).data( "bar", "foobar" );
alert( $( "body" ).data( "bar" ) ); // foobar

CSS方法
.hasClass(calssName) 检查元素是否包含某个class,返回true/false

Determine whether any of the matched elements are assigned the given class.

复制代码 代码如下:

$( "#mydiv" ).hasClass( "foo" )

.addClass(className) / .addClass(function(index,currentClass)) 为元素添加class,不是覆盖原class,是追加,也不会检查重复

Adds the specified class(es) to each of the set of matched elements.

复制代码 代码如下:


$( "p" ).addClass( "myClass yourClass" );

$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

removeClass([className]) / ,removeClass(function(index,class)) 移除元素单个/多个/所有class

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

复制代码 代码如下:


$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzdys.html