今日天气
jQuery在线链接地址:<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1.jQuery节点操作和绑定事件
1-1.jQuery相关方法
(1)$(' ') // 获取DOM节点对象
(2)jq和原生js对象相互转换
原生转jq: $(原生dom节点对象);
jq转原生 jq对象后面加上[0];
(3)siblings() // 获取元素的兄弟节点
(4)parent() // 获取元素的父节点
(5)parents() // 获取元素的所有父节点
(6)closest() // 获取元素最近的父节点
(7)index() // 获取元素的下标
(8)find() // 查找后代元素
(9)text() // 获取元素的文本
(10)html() // 获取元素的内容(包括文本和标签)
(11)val() // 获取输入框的值
(12)attr() // 获取标签的属性
(13)css() // 获取节点样式(可以采用链式写法),例css().css()...
2.原生JS节点操作和绑定事件
2-1.原生js获取和修改节点属性
getAttribute()获取属性和setAttribute()修改属性
<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 = 'http://sina.com'; // 方法1
_a.setAttribute('href','http://huruqing.cn');
</script>
</body>
2-2.原生JS获取节点样式
元素.style.样式名称操作行内样式,非行内样式需要使用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);
var _boxStyle = window.getComputedStyle(_box);
var fontSize2 = _boxStyle.fontSize;
console.log('fontSize2',fontSize2);
</script>
</body>
</html>