jQuery基础及其常用方法

使用方法：

1. 使用前先引入jQuery文件

 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="box">
    aaa
    <div class="list">111</div>
    <div class="list">222</div>
    <div class="list">333</div>
</div>
<div id="box">bbb</div>
<div name="box">ccc</div>

2. 获得jQuery对象,$为主要的符号

    <script>
        //获得jQuery对象
        console.log($(".box"));
        console.log($("#box"));
        console.log($("div[name='box']"));
    </script>

3. 将jQuery对象转换成js对象

    <script>
        //将jQuery对象转换成js对象
        console.log($(".box")[0]);
        console.log($("#box")[0]);
        console.log($("div[name='box']")[0]);
    </script>

4. 将js对象转换成jQuery对象

   <script>
       //将js对象转换成jQuery对象
       let box = document.querySelector(".box");
       console.log($(box));
   </script>

jQuery常用方法：

1. css() 添加样式

$(".box").css("color","red");

如果添加多个样式：

//1. 链式调用
$(".box").css("color","red").css("font-size","30px").css("border","1px solid red");
//2. 写成对象形式
$(".box").css({
    color:"red",
    fontSize:"30px",
    border:"1px solid red"
});

2. 事件的添加

$(".box").事件名(function(){
   //函数体
});
//例如：
$(".box").click(function(){
    alert("1");
});
$(".box").mouseenter(function(){
    alert("1");
});
//其他的事件绑定方法也是如此

3. $(this).index() 获得当前对象的下标值
4. eq() 查找相应的索引值（下标值）,如：eq($(this).index())；