jQuery地址
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
一、获取节点
1. js获取节点
- document.querySeletor(); 获取一个
- document.querySeletorAll(); 获取多个
- document.getElementById();
- document.getElementsByClassName();
<body>
<div id="app">appppppppppppp</div>
<div class="box">appppppppppppp</div>
<script>
var _app = document.getElementById('app');
var _app = document.getElementsByClassName('box');
var _app = document.querySelector('.box');
var _app = document.querySelector('#app');
</script>
</body>
2.jQ获取节点
<body>
<div id="aa">appppppppppppp</div>
<div class="bb">boxxxxxxxxx</div>
<ul class="list">
<li class="item">1xxxx</li>
<li class="item">2xxxx</li>
<li class="item">3xxxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取第一个div对象
var $aa = $('#aa');
// 获取第二个div对象
var $bb = $('.bb');
// 获取所有li节点
var $list = $('.list .item');
</script>
</body>
二、原生js dom节点对象和jquery节点对象互转
- 只有jquery对象才可以使用jquery提供的方法, 所以有些时候需要将原生js dom对象转成jquery dom对象
- 原生转jq: $(原生dom节点对象);
- jq转原生 jq对象[0];
<body>
<div id="aa">appppppppppppp</div>
<div class="bb">boxxxxxxxxx</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//js转jQ
var $aa = $('#aa');
var _aa = $aa[0];
//jQ转js
var _bb = document.querySelector('.bb');
var $bb = $(_bb);
</script>
</body>
三、 jquery对象获取元素节点
- $('ul li:first-child')获取第一个li元素节点
- siblings()获取元素的所有兄弟节点
- parent()获取元素的父节点
- parents()获取元素的所有长辈节点
- closest('xx')获取元素最近的某个长辈节点
- index() 获取元素的下标
- find('xx')查找元素的某个后代节点
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li class="item">3.xxx</li>
<li>4.xxx</li>
<li>5.xxx</li>
</ul>
<div class="cc xx">
<div class="aa">
<div class="bb">
<div class="cc yy">
<div class="dd">dd</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取第一个li的jq对象, 命名为$first
var $first = $('ul li:first-child');
console.log('$first', $first);
// 获取$first的所有兄弟节点
var $siblings = $first.siblings();
console.log('$siblings', $siblings);
// 获取$first的某个兄弟节点
var $siblings = $first.siblings('.item');
console.log('$siblings', $siblings);
// 获取$first的父节点
var $parent = $first.parent();
console.log('$parent', $parent);
// dd元素
var $dd = $('.dd');
var $parents = $dd.parents(); // 所有长辈
var $parents = $dd.parents('div'); // 所有div长辈
console.log('$parents', $parents);
var $aaa = $dd.closest('.cc'); // 离$dd最近的.cc长辈
console.log('$aaa', $aaa);
// 获取$first的下标
var index = $first.index();
console.log('index', index);
// 获取第三个li元素的下标
var $second = $('ul li:nth-child(3)');
console.log($second.index());
</script>
</body>
四、获取和修改dom节点的内容
1.原生js获取和修改内容
- innerText 获取文本内容
- innerHtml 获取全部内容（包括文本和标签）
- value 获取输入框内容
- document.querySelector('input').value = '11' 修改内容
<body>
<div class="box">
<button>aaa</button>
</div>
<div class="box2">
qqqqqq
</div>
<input type="text" value="1380000000000">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
//获取box标签
var _box = document.querySelector('.box');
console.log(_box);
//获取box里面的文本
var _boxText = _box.innerText;
console.log(_boxText);
//修改box2内容
document.querySelector('.box2').innerText = 'aaaaa';
//获取box里面的元素（包含标签和文本)
var _boxHtml= _box.innerHTML;
console.log(_boxHtml);
//获取输入框的内容
var a = document.querySelector('input').value;
console.log(a);
//修改输入框的内容
document.querySelector('input').value = '11111111111111';
</script>
</body>
2.jQuery获取和修改内容
- text() 获取文本内容
- html() 获取所有内容(包含文本和标签)
- val() 获取输入框的值
<body>
<div class="box">
<button>aaa</button>
</div>
<input type="text" value="1380000000000">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取.box的jq对象, 命名为$box
var $box = $('.box');
// 获取$box的文本
var text = $box.text();
console.log('text',text);
// 获取$box的内容(包含文本和标签)
var htmlText = $box.html();
console.log('htmlText',htmlText);
// 获取输入框的jq对象
var $input = $('input');
// 获取输入框的值
var value = $input.val();
console.log('输入框的值',value);
// 修改输入框的值为'我爱codeing'
$input.val('我爱codeing');
// 修改内容: 找到并修改button的内容为'立即登录'
$box.find('button').text('立即登录');
// 把$box的内容变成一个列表(多个li)
$box.html(`
<li>xxxxxx</li>
<li>xxxxxx</li>
<li>xxxxxx</li>
<li>xxxxxx</li>
<li>xxxxxx</li>
`);
</script>
</body>
五、获取和修改dom节点的属性
1.原生js获取和修改节点属性
<body>
<a href="http://baidu.com">百度</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取a标签节点对象
var _a = document.querySelector('a');
// 获取a标签的属性href方法1
var href1 = _a.href;
// 获取a标签的属性href方法2
var href2 = _a.getAttribute('href');
console.log('href2', href2);
// 修改a标签的href属性为'http://sina.com' (两种方法)
_a.href = 'https://www.jianshu.com/'; // 方法1
_a.setAttribute('href','https://www.jianshu.com/');
</script>
</body>
2.jQuery获取和修改节点属性
<body>
<a href="http://baidu.com">百度</a>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取a标签的jq对象
var $a = $('a');
// 获取a标签的属性href
var href = $a.attr('href');
console.log('href', href);
// 修改a标签的属性href和文本
$a.attr('href','https://www.jianshu.com/');
$a.text('简书');
</script>
</body>
六、获取和修改dom节点样式
1.原生js获取和修改节点样式
- _box.style.color 获取样式的颜色(行内样式)
- window.getComputedStyle 获取样式的颜色(非行内样式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
boxxxxxxxxxxxxxxxxxxx
</div>
<script>
var _box = document.querySelector(".box");
// 只能获取内联样式
var fontSize = _box.style.fontSize; // 获取不到
console.log('fontSize1',fontSize);
//元素.style.样式名称操作行内样式,非行内样式需要使用window.getComputedStyle来操作
var _boxStyle = window.getComputedStyle(_box);
var fontSize2 = _boxStyle.fontSize;
console.log('fontSize2',fontSize2);
</script>
</body>
</html>
2. jQuery获取和修改节点样式
- css('fontSize') 获取节点样式
- css('fontSize','25px') 修改节点样式
- show() 显示
- hide() 隐藏
- addClass()增加类
- removeClass()去除类
- toggleClass()没有添加类的元素添加类
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box {
color: red;
font-size: 20px;
}
.red {
color: red;
}
.bred {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
boxxxxxxxxxxxxxxxxxxx
</div>
<hr>
<h3 class="box2">隐藏</h3>
<hr>
<div class="text-box">
<p>我爱codeing</p>
<p>我爱codeing</p>
<p>我爱codeing</p>
<p>我爱codeing</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取.box的jq对象
var $box = $('.box');
// 获取颜色和字体
var color = $box.css('color');
var fontSize = $box.css('font-size');
console.log('color', color);
console.log('fontSize', fontSize);
// 修改背景样式
$box.css('background-color', 'gray');
// 链式调用
$box.css('border', '1px solid red').css('font-size', '30px').css('color', '#fff');
// 添加事件, 实现text-box的显示和隐藏
// 显示时, 给.box标签添加类red, 隐藏时移除类red
// 显示时, 给hr标签添加类bred, 隐藏时移除类bred
$('.box2').on('click', function () {
// .box使用toggleClass
$('.box2').toggleClass('red');
var display = $('.text-box').css('display');
if (display === 'block') {
//隐藏状态
$('.text-box').hide();
$('.box2').text('显示');
//不使用toggleClass,使用这个也可以
// $('.box').removeClass('red');
} else {
// 显示的状态
$('.text-box').show();
$('.box2').text('隐藏');
//不使用toggleClass,使用这个也可以
// $('.box').addClass('red');
}
})
</script>
</body>
</html>
七、增加和删除节点
1. 原生js添加和删除节点
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
</ul>
<script>
//获取li节点
var li = document.createElement('li');
//给li节点添加内容和样式
li.innerText = '4.xxxx';
//获取ul节点
var _ul = document.querySelector('ul');
//创建li节点//把li节点插入到ul里
_ul.appendChild(li);
// 获取第2个li节点
var _second = document.querySelector('ul li:nth-child(2)');
// 删除
_second.remove();
</script>
</body>
给没有jQuery的网站添加jQuery.js
var script = document.createElement('script');
script.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js';
'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
document.body.appendChild(script);
2. jq添加,删除,移动,克隆节点
-
append()
- 内部最后添加一个元素 (作为子代元素添加)
- 移动元素
- prepend() 内部前面添加一个元素 (作为子代元素添加)
- before() 外部前面添加一个元素 (作为兄弟元素添加)
- after() 外部后面添加一个元素 (作为兄弟元素添加)
- clone() 克隆一个元素
添加 删除
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
var $ul = $('ul');
// 在ul的底部添加一个li节点
$ul.append('<li>4.xxx</li>');
// 在ul的顶部添加一个li节点
$ul.prepend('<li>0.xxx</li>');
// 在ul后面添加兄弟节点div.box
$ul.after('<div>box</div>');
// 在ul后前面添加兄弟节点p.box
$ul.before('<p>p.box</p>');
// 删除第二个li元素
$ul.find('li:nth-child(2)').remove();
</script>
</body>
</html>
移动 克隆
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
border: 1px solid;
}
</style>
</head>
<body>
<ul>
<li>1.xxx</li>
<li>2.xxx</li>
<li>3.xxx</li>
<li>4.xxx</li>
</ul>
<div class="box"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取第一个li节点
var $li1 = $('li:first-child');
// 把第一个li节点移动到.box内
$('.box').append($li1);
// 克隆最倒数第二个li节点
var $li2 = $('ul li').eq('-2').clone();
$('ul').append($li2);
// 把节点插入到.box内
$('.box').append($li2);
</script>
</body>
</html>
