标签：console log 老王 jq li prev 选择器 隔壁
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>
标签：console,log,老王,jq,li,prev,选择器,隔壁 来源： https://blog.csdn.net/miaopasi_poi/article/details/116461176
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。