欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery DOM/属性/CSS操作

程序员文章站 2023-11-17 22:15:04
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 添加元素 .append() 在 a 标签里面添加内容是b的p标签 JSBin 其他例子 .appendTo() 相反,把对象插入到目标元素尾部。即在 a 标签 里面添加内容是b的p标签 JSBin ......

jQuery DOM 操作

创建元素

只需要把DOM字符串传入$方法即可返回一个 jQuery 对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

 

添加元素

.append()

在 a 标签里面添加内容是b的p标签

$( "a" ).append( "<p>b</p>" )

其他例子

$( ".inner" ).append( "<p>Test</p>" )
$( "p" ).append( "<strong>Hello</strong>" )
$( "p" ).append( $( "strong" ) )

.appendTo()

相反,把对象插入到目标元素尾部。
即在 a 标签 里面添加内容是b的p标签

$( "<p>b</p>" ).appendTo( "a" )



.prepend()

向对象头部追加内容,用法和append类似,内容添加到最开始

$( ".inner" ).prepend( "<p>Test</p>" )

.prependTo()

也是相反,把对象插入到目标元素头部。用法和prepend类似

$( "<p>Test</p>" ).prependTo( ".inner" )

 

.before()

在对象前面(不是头部,而是外面,相当于插入进来变成邻居)插入内容。传递参数和append类似

$( ".inner" ).before( "<p>Test</p>" )

.insertBefore()

相反,把<p>Test</p>对象插入到.inner之前(同样不是头部,是同级)

$( "<p>Test</p>" ).insertBefore( ".inner" )



.after()

before相反,在对象后面(不是尾部,而是外面,和对象并列同级)插入内容。参数传递和append类似

$( ".inner" ).after( "<p>Test</p>" )

..insertAfter()

<p>Test</p>插入到.inner之后,同前面的.insertBefore用法

$( "<p>Test</p>" ).insertAfter( ".inner" )



删除元素

.remove()

删除被选元素(及其子元素)

$("#div1").remove();

也可以添加一个可选的选择器参数来过滤匹配的元素

$('div').remove('.test')



.empty()

清空被选择元素内所有子元素

$('body').empty()

 

.detach()

.detach() 和.remove()一样,但 .detach()保存所有 jQuery 数据和被移走的元素相关联。
当需要移走一个元素,不久又将该元素插入DOM时,这种方法很有用。

包裹元素

.wrap()

为每个对象包裹一层HTML结构

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</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">World</div>
  </div>
</div>

 

.wrapAll()

把所有匹配对象包裹在同一个HTML结构中

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</div>
</div>

包裹元素

$( ".inner" ).wrapAll( "<div class='new' />")

查看结果

<div class="container">
   <div class="new">
      <div class="inner">Hello</div>
      <div class="inner">World</div>
   </div>
</div>

 

.wrapInner()

把匹配对象里层包裹一个HTML结构

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">World</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">World</div>
  </div>
</div>

 

.unwrap()

把DOM元素的parent移除,但保留HTML内容。

关于 Text 和 Html

.html()

这是一个读写两用的方法,用于获取/修改元素的innerHTML

  • 当没有传递参数的时候,返回元素的innerHTML
  • 当传递了一个string参数的时候,修改元素的innerHTML为参数值

范例

$('div').html()

$('div').html('123')

 

 
jQuery DOM/属性/CSS操作



 

.text()

.html()类似,操作的是对应原生DOM里面的innerText

$('div').text()
$('div').text('123')

 
jQuery DOM/属性/CSS操作



.html() 和 .text() 的区别

即和原生DOM操作中innerHTMLinnerText的区别类似

innerHTML属性作用和innerText类似,但是不是返回元素的文本内容,而是返回元素的HTML结构
innerText是一个可写属性,返回元素内包含的文本内容,在多层次的时候会按照元素由浅到深的顺序拼接其内容。

innerHTML容易产生安全问题,即 xss 攻击。

 

jQuery 属性/CSS操作

属性相关

.val()

是一个读写双用的方法,用来处理inputvalue,当方法没有参数的时候返回inputvalue值,当传递了一个参数的时候,方法修改inputvalue值为参数值

$('input').val()

$('input').val('newValue')

 

.attr()

获取元素特定属性的值

$( "em" ).attr( "title" )   //获取em标签的titile属性值

为元素属性赋值

$( "#greatphoto" ).attr({
  alt: "Beijing Brush Seller",
  title: "photo by Kelly Clark"
});

 

.removeAttr()

为匹配的元素集合中的元素移除一个属性(attribute)

$('div').removeAttr('id')  //移除div标签的id属性

.removeAttr()方法使用原生的 JavaScript removeAttribute()函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法,并且它解决了跨浏览器的属性名不同的问题。

.prop() / .removeProp()

这两个方法是用来操作元素的property的,propertyattibute是非常相似的概念,详情参考 

CSS 操作

.css()

.css(propertyName) / .css(propertyNames)

使用和attr相似,用来处理元素的css
获取元素style特定property的值

var color = $( this ).css( "background-color" )

var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
])

.css(propertyName,value)

设置元素style特定property的值

$( this ).css( "background-color", "yellow" )

$( this ).css({
  "background-color": "yellow",  //有中横线的也可以使用驼峰命名法,但不能在外层加""
  "font-weight": "bolder"
})

 

.addClass() / .removeClass()

.addClass()

为元素添加class,不是覆盖原class,是追加,也不会检查重复

$( "p" ).addClass( "active" )   //给p标签添加active css样式

.removeClass()

移除元素单个/多个/所有class

$( "p" ).removeClass( "active" )   //给p标签移除active css样式

 

.hasClass()

检查元素是否包含某个class,返回true / false

$( "#mydiv" ).hasClass( "active" )  //检查id为mydiv的元素是否包含active css样式

 

.toggleClass()

toggle是切换的意思,方法用于切换

<div class="test">hello world</div>

第一次执行

$( "div.test" ).toggleClass( "new" )

<div class="test new">hello world</div>

第二次执行

$( "div.test" ).toggleClass( "new" )
<div class="test">hello world</div>

 

使用案例

实现播放器ICON按钮切换效果