[jquery] 元素内容---html() , 元素尺寸---innerWidth(),元素偏移量---offset( ) position( ),插入元素 ---append, 克隆 clone

1 . jQuery 操作元素内容 :

<div>
  hello
  <p>你好 世界</p>
  world
</div>
 
<input type="text">
 
<script src="./jquery/jquery.min.js"></script>

1. html( )

• 等价于原生 js 的 innerHTML

1-1. html 获取 :

console.log($('div').html())

1-2. html 设置 :

$('div').html('<h1>你好 世界</h1>')

2. text( )

• 等价于原生 js 的 innerText

2-1. text 获取

console.log($('div').text())

2-2. text 设置

$('div').text('<h1>你好 世界</h1>')

3. val( )

• 等价于原生 js 的 value

3-1. val 获取

console.log($('input').val())

3-2. val 设置

$('input').val('hello world')

2 . jQuery 获取元素尺寸 :

• 获取元素占地面积
• 原生 JS 如何获取元素尺寸
  => offsetWidth 和 offsetHeight: 内容 + padding + border
  => clientWidth 和 clientHeight: 内容 + padding

<div></div>
<script src="./jquery/jquery.min.js"></script>

* {
  margin: 0;
  padding: 0;
}
 
div {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 20px solid pink;
  background-color: skyblue;
  background-clip: content-box;
  margin: 20px;
}

// 1. width() 和 height()
// 内容 
console.log('宽度 : ', $('div').width())
console.log('高度 : ', $('div').height())
console.log('----------------------------')


// 2. innerWidth() 和 innerHeight()  
// 内容 + padding
console.log('宽度 : ', $('div').innerWidth())
console.log('高度 : ', $('div').innerHeight())
console.log('----------------------------')


// 3. outerWidth() 和 outerHeight()
// 内容 + padding + border 
console.log('宽度 : ', $('div').outerWidth())
console.log('高度 : ', $('div').outerHeight())
console.log('----------------------------')


// 4. outerWidth(true) 和 outerHeight(true)  
// 内容 + padding + border + margin 
console.log('宽度 : ', $('div').outerWidth(true))
console.log('高度 : ', $('div').outerHeight(true))

3 . jQuery 获取元素偏移量 :

1. offset( ) 元素相对页面的位置

// 获取 div 相对页面的位置
$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }
​
// 给 div 设置相对页面的位置
$('div').offset({ left: 100, top: 100 })

2. position( ) 元素相对于父元素的偏移量

// 获取 div 相对于父元素的偏移量（定位的值）

$('div').position()

4 . jQuery 操作元素节点 :

<div>
  <p>我是 div 内部本身的 p 标签</p>
  <span>我是 div 内部的 span 标签</span>
</div>
 
<script src="./jquery/jquery.min.js"></script>

1. 创建一个元素

var div = $('<div></div>')

2. 内部插入元素 — 父子关系

// 父节点.append(子节点)
// 向 div 元素中插入一个 p 元素，放在最后
$('div').append($('<p></p>'))
​

//子节点.appendTo(父节点)
// 把 p 元素插入到 div 中去，放在最后
$('<p>hello</p>').appendTo($('div'))
​

//父节点.prepend(子节点)
// 向 div 元素中插入一个 p 元素，放在最前
$('div').prepend($('<p></p>'))
​

// 子节点.prependTo(父节点)
// 把 p 元素插入到 div 中去，放在最前
$('<p>hello</p>').prependTo($('div'))

3. 外部插入元素 — 兄弟关系

// 已知节点.after(插入节点)
// 在 div 的后面插入一个元素 p
$('div').after($('<p></p>'))
​

// 已知节点.before(插入节点)
// 在 div 的前面插入一个元素 p
$('div').before($('<p></p>'))
​

//插入节点.insertAfter(已知节点)
// 将p插入到div的后面
$('<p></p>').insertAfter($('div'))
​

//插入节点.insertBefore(已知节点)
// 将p插入到div的前面
$('<p></p>').insertBefore($('div'))

4. 替换元素

// 把 div 元素替换成 p 元素
$('div').replaceWith($('<p></p>'))
​

// 用 p 元素替换掉 div 元素
$('<p></p>').replaceAll($('div'))

5. 删除元素

// 删除元素下的所有子节点
$('div').empty()
​

// 把自己从页面中移除
$('div').remove()

6. 克隆元素

// 克隆一个 li 元素
// 接受两个参数
//   参数1： 自己身上的事件要不要复制，默认是 false
//   参数2： 所有子节点身上的事件要不要复制，默认是 true
$('li').clone()

  <div>
    <button>按钮</button>
  </div>

  <hr>

  div {
    width: 300px;
    height: 300px;
    background-color: pink;
  }

  $('div').click(() => console.log('div 的事件'))
  $('button').click(() => console.log('button 的事件'))

  // 表示克隆 div 自己本身的事件   将克隆后的节点插入到hr后面
  $('div').clone(true).insertAfter($('hr'))

---

参考：

前端 _ jQuery 之 小白版 ( 中 )

JavaScript学习笔记（三十二）-- jQuery（中）