什么是 jQuery 前端的一个方法库/函数库
将很多过功能,封装好,我们可以直接使用
官网 https://jquery.com/
中文 https://jquery.cuishifeng.cn/
jQuery的三大优点
1,强大的选择器机制 --- 可以支持所有语法方式获取标签对象
2,优质的隐式迭代 --- 获取对获取的所有标签对象都进行操作
3,无所不能的链式编程 --- 一行代码搞定所有操作
如何使用jQuery
1,通过外部文件加载 jQuery 文件
2,通过 $ 或者 jQuery 语法形式 来调用 jQuery文件中定义的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1" class="div2" index="1">123</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="./jquery.min.js"></script>
<script>
// 选择器:获取标签对象的方法
// 所有选择器的方法,获取的标签对象,都是一个伪数组
// 伪数组不要使用forEach 和 for...in 循环遍历
// jQuery 有自己的循环遍历 语法
// $() jQuery() 获取标签对象
// ()中可以定义任意 html和css 支持的语法形式
// 标签名称
// $('div')
// console.log( $('div') );
// id名称
// $('#div1')
// console.log( $('#div1') );
// class名称
// $('.div2')
// console.log( $('.div2') );
// 属性=属性值
// $('[index="1"]')
// console.log( $('[index="1"]') );
// 通过标签结构获取
// 兄弟关系
// $('div~ul') $('div+ul')
// console.log( $('div~ul') );
// 后代关系
// $('ul>li') $('ul li')
// console.log( $('ul>li') );
// 后代第一个
// console.log( $('ul>li:first') );
// 后代最后一个
// console.log( $('ul>li:last') );
// 按照标签是第几个找
// 纯css语法
console.log( $('ul>li:nth-child(2)') );
console.log( $('ul>li:nth-child(odd)') );
console.log( $('ul>li:nth-child(even)') );
// 纯jQuery语法 都是按照索引下标找
// 后代 奇数索引标签对象 odd
// css是按照个数找 jQuery是按照索引找
console.log( $('ul>li:odd') );
// 后代 偶数索引标签对象 even
// css是按照个数找 jQuery是按照索引找
console.log( $('ul>li:even') );
// 按照标签的索引下标找
console.log( $('ul>li:eq(2)') );
// 相互转化
// 要使用 js 语法操作 jQuery标签对象(伪数组)
// 必须使用[]语法,获取某一个对应的标签
$('ul>li:eq(2)')[0].style.color = 'red';
const oDiv = document.querySelector('div');
// $(oDiv) jQuery(oDiv) 就是 jQuery标签对象(伪数组)
console.log($(oDiv))
console.log(jQuery(oDiv))
// 总结:
// 1,获取的标签对象,都是伪数组
// 2,伪数组不要使用 forEach 和 for...in 循环
// 3,jQuery 有自己的循环语法
// 4,jQuery支持所有的html,css语法形式获取标签对象
// 5,定义的方法是纯css语法,按照css语法原则执行 :nth-child(2) 第二个
// 6,定义的方法是纯jQuery语法,按照索引下标原则执行 :eq(2) 索引下标是2
// 7,jQuery 语法获取的标签对象,不支持所有的 js 语法操作
// 因为你获取到的是一个伪数组
// 可以通过[]语法,从伪数组中,获取一个标签对象,使用js语法进行操作
// 8,js语法获取的标签对象,如果想要使用jQuery的方法操作
// 必须要先转化为 jQuery标签对象(伪数组)
// $(js标签对象) jQuery(js标签对象)
</script>
</body>
</html>