jQuery的DOM操作

创建节点

JavaScript方法

• var newDiv = document.createElement('div');
• newDiv.innerText = ' 新建节点';

jQuery方法

• $('<div>新建节点</div>’);

// JS方法创建节点
var newSpan = document.createElement('span')
newSpan.innerText = '新建节点'

// jQuery方法创建节点
var jq = $('<span>这只是个单纯的span标签</span>') 

添加元素

JavaScript方法

• var Newp = document.createElement('p');
• document.body.appendChild(Newp);

// JS方法插入节点
var show = document.querySelector('.show')
show.appendChild(newSpan)

jQuery方法

append方法

语法：jQuery对象.append(参数)

传入一个jQuery对象

<div id="box"></div>
<div></div>
    
<script>
var $span = $("<span>这是一个span元素</span>");
$("#box").append($span);
</script>

<!-- js代码运行完毕的结果 -->
<div id="box">
    <span>这是一个span元素</span>
</div>
<div></div>

如果添加已经存在的元素，会有剪切的效果

<div></div>
<p></p>

<script>
var $p = $('p');
$('div).append($p);
</script>

<!-- js代码运行完毕的结果 -->
<div>
    <p></p>
</div>

传入一个html形式的字符串

<div></div>

<script>
$('div').append('<span>这是一个span元素</span>');
</script>
    
<!-- js代码运行完毕的结果 -->
<div>
    <span>这是一个span元素</span>
</div>

传入一个dom对象

也会有剪切效果

<div></div>
<p id="p"></p>

<script>
var p = document.getElementById('p');
$('div').append(p);
</script>

<!-- js代码运行完毕的结果 -->
<div>
  <p></p> 
</div>

其他跟 append 类似的方法

• prepend，在前面添加子元素
• after，放到自己的后面(变为兄弟元素)
• before，放到自己的前面(变为兄弟元素)

调用html方法

语法：jQuery对象.html('html形式的字符串')

注意：该方法会产生覆盖的效果

<div>
    div里面的文本
	<p></p>
</div>

<script>
$('div').html('<span>这是一段内容</span>');
</script>
    
<!-- js代码运行完毕的结果 -->
<div>
    <span>这是一段内容</span>
</div>

小结:

• append(jQuery对象/ 'html字符串'/DOM对象) 有剪切效果
• html('html字符串') 会覆盖以前的内容

html方法的其他作用

html() 不传参数 用于获取内容

//html
<div>
    <p></p>
	<span></span>
	文本
</div>

<script>
$('div').html()
</script>

<!-- js代码运行完毕的结果 -->
<p></p> 
<span></span>
文本

html('') 传入一个空的字符串

不推荐使用,因为子元素的事件没有被清除,会造成内存泄露

语法：jQuery对象.html('')，传递进来一个空的字符串

//html
<div>
    <p></p>
	<span></span>
</div>

<script>
    $('div).html('');
</script>

<!-- js代码运行完毕的结果 -->
<div></div>

清空元素

empty方法

清空指定节点的所有子节点 (推荐使用，会清除子元素上绑定的内容)

语法：jQuery对象.epty()

<div>
    <p></p>
	<span></span>
</div>

<script>
$('div).empty();
</script>

<!-- js代码运行完毕的结果 -->
<div></div>

删除节点

JavaScript方法

• var b = document.getElementById('test');
• var c = b.parentNode;
• c.removeChild(b)

jQuery方法

• $('#test').remove()，把自己删除掉
• $('#test').empty()，把自己内部的节点删除掉
• $('#test').detach()，移除被选元素，包括所有的文本和子节点，返回移除元素的副本

// JS方法删除节点
var b = document.querySelector('.active') // 获取 active 节点
var c = b.parentNode // 查找 active 的父元素
c.removeChild(b) // 让 active 的父元素删除其子元素 active

// jQuery方法删除节点
$('.show').remove() // 删除 show 节点
$('.content').empty() // 删除 content 节点内部所有的节点（清空节点）
var detach = title.detach() // 删除 title 内部所有节点，并将移除的元素的副本返回
console.log(detach[0]); // div#box

替换节点

JavaScript方法

• parent.replaceChild(newNode, oldNode);

jQuery方法

• $('<p>替换 </p>').replaceAll('#test1');

// JS方法替换节点
title1.replaceChild(newSpan,oldNode) 
// 将 title1 内部的 oldNode 节点替换成 newSpan

// jQuery方法替换节点
$('<span>选项x</span>').replaceAll('.oldNode1') 
// 将 span节点 替换成与 oldNode1 节点

克隆节点

JavaScript方法

• var clonep = document.querySelector("p").cloneNode(true);
• document.body.appendChild(clonep);

jQuery方法

语法：jQuery对象.clone([boolean])

• 默认值是 false，会复制所有内容，但是不包括事件

// JS复制节点
var btn2 = btn.cloneNode(true) //将 btn 节点进行深复制
document.body.appendChild(btn2) // 在 body 节点中插入需要复制的btn节点

// jQuery方法复制节点——不传参数
<div id="box"></div>
<p>
    <span>span元素</span>
</p>
<script>
var newP = $('p').clone();
$('#box').append(newP);
</script>
    
<!-- js代码运行完毕的结果 -->
<div id="box">
   <p>
     <span>span元素</span>
   </p> 
 </div>
<p>
    <span>span元素</span>
</p>

• 当参数为 true 时，会克隆所有内容，并且注册的事件也会一起克隆下来，无法克隆原生方式注册的事件

//html
<div id="box"></div>
<p>
    <span>span元素</span>
</p>

<script>
$span = $('span');
$span.on('click', function(){
      console.log('span')
})
var newP = $('p').clone(true);
$('#box').append(newP);
</script>

<!-- js代码运行完毕的结果 -->
<div id="box">
   <p>
     <span>span元素</span> // 点击会打印span
   </p> 
 </div>
<p>
    <span>span元素</span> // 点击会打印span
</p>

其他方法

• children() ，获得匹配元素集合中每个元素的所有子元素

// 获得匹配元素集合中每个元素的所有子元素
$('.title').children().css('color', 'red') // 获得 title 的子元素，在其子元素上设置css样式

• next()、prev()，获得匹配元素的兄弟元素

// 获得匹配元素的兄弟元素
$('.show').prev().css('color', 'orange') // 获得 show 的上一个兄弟元素
$('.show').next().css('color', 'green') // 获得 show 的下一个兄弟元素

• parent()，获得当前匹配元素集合中每个元素的父元素

// 获得当前匹配元素集合中每个元素的父元素
$('.oldNode').parent().css('border', '1px solid black') // 获得 oldNode 的父元素

• closest(parent)，当前元素开始，返回最先匹配到的符合条件的祖先元素

// 从当前元素开始，返回最先匹配到的符合条件的祖先元素
$('.active').closest().css('border', '1px solid pink') // 不设置，不匹配任何元素
$('.active').closest('.tab').css('border', '1px solid pink') // 从 active（子元素） 开始寻找匹配的祖先元素

• find(child)，获得当前匹配元素集合中每个元素的后代

// 获得当前匹配元素集合中每个元素的后代
$('.content').find('p').css('color', 'blue') // 从 content（父元素） 开始寻找匹配的子元素

• end()，将当前元素的节点状态变为前一次的状态

//  从 content（父元素） 开始寻找匹配的子元素 p 将其的字体颜色设置为蓝色，将当前元素的状态变为前一次的状态，然后修改 选中元素的 css 样式（类似改变this指向）
$('.content').find('p').css('color', 'blue').end().css('color', 'yellow') // 将匹配的元素变为前一次的状态

• siblings()，获得匹配元素集合中所有元素的同辈元素

//  获得匹配元素集合中所有元素的同辈元素
$('.oldNode1').siblings().css('fontSize', '19px') // 获得匹配元素集合中的所有同辈元素
$('.oldNode1').siblings('span').css('color', 'brown') // 获得匹配元素集合中的所有同辈元素

• eq()，匹配元素集合中的指定索引的一个元素

// 匹配元素集合中的指定索引的一个元素
$('.title1 span').eq(2).css('color', 'pink') // 匹配 title1 里面的所有 span 元素集合中索引为 2 的元素
$('.title span:eq(2)').css('color', 'pink') // 这种书写方式，eq内部不能放变量

• index()，返回指定元素相对于其他指定元素的 index 位置

// index() 返回指定元素相对于其他指定元素的 index 位置
console.log($('.oldNode1').index()); // 返回元素相对于父元素的索引位置
console.log($('.index2').index());

• each() ，循环，为每个匹配的元素执行函数

// each() 循环，为每个匹配的元素执行函数
$('.title span').each(function (index, dom) {
// index 当前遍历的元素的索引
// dom 当前遍历的元素
$(this).click(function () { // 为当前遍历的元素添加点击事件
    console.log(index); // 点击当前元素时，打印元素的索引
})
})

• is()，根据选择器、元素或 jQuery 对象来检测，如果有元素匹配给定的条件，则返回 true

// is() 根据选择器、元素或 jQuery 对象来检测，如果有元素匹配给定的条件，则返回 true
$('.title1').children().click(function () { // 选中 title1 中的所有子元素，并且给子元素添加点击事件
if ($(this).is('.oldNode')) { // 判断 当前的元素与 oldNode 是否相同
    $(this).css('color', 'green') // 为 true 则将字体颜色改为绿色
} else {
    $(this).css('color', 'blue') // 为 false 则将字体颜色改为蓝色
}
})

• addClass() ，为每个匹配的元素添加指定的类名

// 为每个匹配的元素添加指定的类名
$('.active').addClass('red') // addClass() 添加一个类名
$('.show').addClass('yellow green') // addClass() 添加两个类名

• removeClass() 从匹配的元素中删除全部或者指定的类

$('.show').removeClass('blue') // removeClass() 删除一个类名

• toggleClass()，反转类名，对传入的值进行判断，有此类名则删除，没有则添加

// toggleClass() 反转类名，对传入的值进行判断，有此类名则删除，没有则添加
$('.oldNode').toggleClass('pink')
$('.oldNode1').toggleClass('pink')

• hasClass()，检查元素是否含有某个特定的类，有则返回true

// hasClass() 检查元素是否含有某个特定的类，有则返回true
$('.title1').children().click(function () {
    if ($(this).hasClass('pink')) {
        console.log('我这里有pink哦~~~亲！');
    } else {
        console.log('我这里没有pink哦~~~亲！');
    }
})

• attr()、prop()
  • prop() 方法应该用于检索属性值，例如 DOM 属性（如 tagName, nodeName, nodeType, checked 等）。
  • 如需检索 HTML 属性，请使用 attr() 方法代替。

// attr() 用于操作元素标签上的属性 设置或返回被选元素的属性和值
console.log( $('.box').attr('id') ); // 获取元素的 id 属性和值
$('.box').attr('haha','哈哈') // 设置属性和值

// prop() 用于检索属性值 设置或返回被选元素的属性和值
$('.box').click(function(){
    // 判断勾选状态
    if ( $('input').eq(0).prop('checked') ) { // 判断 input 中索引为 0 的是否被勾选
        console.log( '您已勾选哦~~~' ); // 返回 true 则表示已勾选
    } else {
        console.log( '您还未勾选呢~~~' ); // 返回 false 则表示未勾选
    }
    $('input').eq(2).prop( 'checked',true ) // 给 inpu 中索引为 2 的元素设置成点击状态
})

• removeAttr()，匹配的元素中 删除一个指定的属性

$('.box').removeAttr('hehe') // 从匹配的元素中 删除一个指定的属性

• html() 设置或取得第一个匹配元素的html内容
• text() 设置或取得第一个匹配元素的文本内容

console.log( $('.show').text() ); // 获取第一个匹配元素其中的 文本 内容
console.log( $('.show').html() ); // 获取第一个匹配元素其中的 html 内容
$('.show').text('没错，我就是猴子请来的救兵') // 设置第一个匹配元素的 文本 内容，会覆盖之前的内容
$('.show').html('<h3>我才是猴子请来的救兵</h3>')// 设置第一个匹配元素的 html 内容，会覆盖之前的内容

• val()，设置或返回匹配元素的值(表单元素)

// val() 设置或返回匹配元素的值(表单元素)
$('.ipt').val('请输入手机号码') // 设置值
console.log( $('.ipt').val() ); // 当 val 不设置值时，则为获取值

• css() ，设置或返回匹配元素的样式属性

// css()  设置或返回匹配元素的样式属性
console.log( $('.box').css('width') ); // 获取元素的指定 css 属性值
var box = document.querySelector('.box')
console.log( getComputedStyle(box).width ); // 获取元素的指定 css 属性值
$('.box').css('color','white') // 设置元素的单个 css 属性
$('.box').css({ // 设置多个属性的值
    width:'400px',
    height:'400px'
})

• width()、height()，设置或返回匹配元素的宽度(宽度)

//width()  height() 设置或返回匹配元素的宽度(宽度)
console.log( $('.box').width() ) // 获取元素的宽度 返回的是数值类型
console.log( $('.box').height() ) // 获取元素的高度 返回的是数值类型
$('.box').width(500) // 设置元素的宽度
$('.box').height(500) // 设置元素的高度

• scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
• scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移
• position() 获取匹配元素相对于定位父元素的偏移 {left: 40, top: 50}
• offset() 获取或设置匹配元素在整个页面的相对偏移 {left: 40, top: 50}
• wrap() 使用指定的 HTML 元素来包裹每个被选元素 $("p").wrap("
  "); // 给每个P元素包裹一个div元素
• $.trim( str ) 移除字符串开始和末尾处的所有空白字符
• $.each() 遍历数组