01-jq-入口函数
<script>
// 入口
// $(function(){ // 入口})
$(function () {
console.log('入口一')
})
// $(document).ready(function(){})
$(document).ready(function () {
// console.log('入口二')
let div = document.querySelector('div')
console.log(div)
console.log($(div))
// div.fadeIn(1000) // 原生不能调用jq对象方法
$(div).fadeIn(1000)
})
</script>
02-jq-原生对象
<body>
<div>前端小白</div>
<script>
// jq和原生js可以混合存在（不建议）
// 用原生的原因：jq没有提供相关dom的操作（radio，video）
$(function () {
// 元素js获取就是DOM对象
let div = document.querySelector('div')
let $div = $('div')
console.log(div, $div)
// 原生转jq对象$(原生DOM)
console.log($(div))
// jq转原生：$()[下标]
console.log($div[0])
// jq转原生：$().get(下标)
console.log($div.get(0))
// jq转原生：建议使用get()
// jq下的API：都记得带()
})
</script>
</body>
03-jq-基本选择器
<body>
<div>我是前端小白</div>
<div class="box">数据接口</div>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
</ul>
<ul class="current">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<li>隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<script>
// 入口
$(function () {
// 获取所有div：标签
console.log($('div'))
// 获取.box：类
console.log($('.box'))
// 所有所有li：后代（或者子代）
console.log($('ul li'))
})
// 筛选选择器
$(function () {
// css就是jq封装的一个操作样式的API：jq对象.css('样式名',样式值)
console.log($('.current li:eq(2)'))
$('.current li:eq(2)').css('backgroundColor', 'red')
// css方法对样式的识别，可以是小驼峰，也可以是中划线（中划线内部转换成小驼峰）
// 奇数行:odd
$('.current li:odd').css('backgroundColor', 'green')
// 偶数行:even
$('.current li:even').css('backgroundColor', 'yellow')
// 第一个:first
$('.current li:first').css('backgroundColor', 'skyblue')
// 最后一个:last
$('.current li:last').css('backgroundColor', 'skyblue')
})
</script>
</body>
04-jq-重点筛选方法children``find``siblings``parent``next``prev
<style>
.current {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li class="current">
<a href="">隔壁老王1</a>
<span><i>前端小白</i></span>
</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<div>我是小马哥</div>
</ul>
<ul class="item">
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<li>隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<script>
// 一次性搞定隔行变色
$(function () {
// let res = $('li:odd').css('backgroundColor', 'green')
// console.log(res)
// 链式操作：API执行后返回的结果依然是jq对象本身
$('li:odd').css('backgroundColor', 'green').next().css('backgroundColor', 'yellow')
})
// 入口
// $(function () {
// // 获取第一个li
// const $li = $('.current')
// // console.log($li)
// // 获取孩子：jq.children(['选择器'])
// // 没有参数：所有孩子
// console.log($li.children())
// // 筛选孩子
// console.log($li.children('a'))
// // 寻找后代：find(筛选器)
// console.log($li.find())
// console.log($li.find('i'))
// // 找兄弟：siblings([筛选器])
// console.log($li.siblings())
// // 筛选兄弟
// console.log($li.siblings('li'))
// // 找父元素：parent()
// console.log($li.parent())
// // 找匹配元素：eq(序号)
// console.log($('li').eq(2))
// // 下一个兄弟：next()
// console.log($li.next())
// // 前一个兄弟：prev()
// console.log($li.prev())
// // 不管怎么样：最终筛选器返回的结果都是jq对象
// })
</script>
</body>
