JavaScript 学习笔记（九）认识jQuery 和 jQuery的基本操作_javascript和jquery是如何工作的我-CSDN博客

本文链接：https://blog.csdn.net/weixin_43969648/article/details/123795799

一、认识jQuery

jQuery 是一个大型的简单的第三方类库。或者说是JavaScript中最流行的一种框架。

引用 jQuery：

<script src="js/jquery.min.js"></script>

//或者
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>　　//Google

//或者
<script src="http://code.jquery.com/jquery-1.6.min.js"></script> 　　//jQuery 官方

当引用 jQuery文件后，会在全局暴露两个变量名，$ 和 jQuery。

二、jQuery 的DOM操作

1. jQuery 的选择器

语法： $('选择器')

<body>
    <ul>
        <li>1</li>
        <li class="a">2</li>
        <li>3</li>
        <li class="b">4</li>
        <li>5</li>
        <li class="a">6</li>
        <li>7</li>
        <li id="box">8</li>
        <li>9</li>
    </ul>

    <script>
        //id选择器
        console.log($('#box'))

        //类名选择器
        console.log($('.a'))

        //标签选择器
        console.log($('li'))

        //结构选择器
        console.log($('li:nth-child(odd)')) //奇数选择器
        console.log($('li:nth-child(even)')) //偶数选择器
    </script>

</body>

2. jQuery 的筛选器

语法：$('选择器').筛选器名称()

jQuery 的筛选器有

first()	next()	prev()	parent()	siblings()
last()	nextAll()	prevAll()	parents()	find()
eq()

<body>
    <ul>
        <li>1</li>
        <li>2
        <i>子级1</i></li>
        <li>3</li>
        <li>4</li