jQuery——js库

官网学习：https://www.runoob.com/jquery/jquery-examples.html

开头引入jQuery

(https://code.jquery.com/jquery-3.4.1.min.js)
创建一个jquery.min.js文件，然后将代码复制粘贴在里面
创建一个HTML文件，插入
script src=“jquery.min.js”></script

一、入口函数：

方法一：
      //等着页面DOM加载完毕再去执行 js 代码
       $(document).ready(function(){
           $('div').hide();
       })
方法二：
       $(function(){
           //此处为DOM加载完成的入口
           $('div').hide();//jquery选择器里面的hide方法
       })

二、jQuery选择器

(1)基础选择器

名称	用法	描述
ID选择器	$("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	$(".class")	获取同一类class的元素
标签选择器	$(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交际元素

(2)层级选择器

名称	用法	描述
子代选择器	$(“ul>li”)	使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”)	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

（3）筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中，选择索引号为偶数的元素

(4) 隐式迭die代：就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css方法，就不用for循环来实现了

jQuery设置样式：$('div').css('属性'，'值')

范例：
//点击的button按钮变红
$("button").css("background","red");
//其余兄弟去掉背景颜色,this指代当前点击的button对象
$(this).siblings("button").css("background","");

上面代码可以用链式编程：（也就是点点点）

$(this).css("background","red").siblings().css("background","");

三、DOM对象和jQuery对象相互转换

1、DOM对象转换为jQuery对象：$(DOM对象)

$(‘div’)

2、jQuery对象转换为DOM对象

方法一：

$(‘div’)[index] index是索引号

方法二：

$(‘div’).get(index) index是索引号

例如：

<body>
   <video src="./黑子.mp4" muted></video>
   <script>
        // 1、DOM对象转换为 jQuery对象
        // $('video');
        //也有可能是这种: $(myvideo)
        var myvideo = document.querySelector('video');
        $(myvideo).play(); jQuery里面没有这个play播放方法
        // 2、 jQuery 对象转换为DOM对象
        // myvideo.play();
        $('video')[0].play();
            或者： $('video').get(0).play();
    </script>
</body>

四、jQuery样式操作与效果操作

1、普通的

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保失败,源站可能有防盗链机制,建议将图片保存下来直接上传存上传(imYshlZ2aRGr-1628173097476)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628168349193.png)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628168349193.png)]$

2、可以利用类样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qPYJSqKI-1628173097478)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628168474855.png)]$

3、效果操作

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePen13k7-1628173097480)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628168696465.png)]$

事件切换效果

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XNxMihL0-1628173097483)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628168978328.png)]$

动画排队效果

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行，也就是当你操作的速度很快时，就会出现问题。

动画排队解决办法： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7dIF0GxO-1628173097484)(C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\1628169295736.png)]$

五、jQuery属性、属性值操作

prop

prop(“属性名”) //获取属性

prop(“属性”，“属性值”) //设置属性

实现全选操作：

<body>
    <div>
        <input type="checkbox" class="checkall">全选
        <input type="checkbox" class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
    </div>
    <script>
        $(function () {
            // 1、全选 全不选功能，使用change事件实现
            $(".checkall").change(function () {
                //    console.log($(this).prop("checked"));
                // 点击全选按钮，小框自动勾选，属性值改变
                // 方法一：
                // if ($(this).prop("checked") == true) {
                //     $('.j-checkbox').prop("checked", true);
                // } else {
                //     $('.j-checkbox').prop("checked", false)
                // }
                // 方法二：（这是我没有想到的）
                $('.j-checkbox').prop("checked", $(this).prop("checked"));
            })
            //2、如果小框全部勾选，那么全选按钮实现自动勾选
            $(".j-checkbox").change(function () {

                if ($('.j-checkbox:checked').length == 4) {
                    $(".checkall").prop("checked", true);

                } else {
                    $(".checkall").prop("checked", false);

                }
            })

        })
    </script>
</body><body>
    <div>
        <input type="checkbox" class="checkall">全选
        <input type="checkbox" class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
        <input type="checkbox" checked class="j-checkbox">
    </div>
    <script>
        $(function () {
            // 1、全选 全不选功能，使用change事件实现
            $(".checkall").change(function () {
                //    console.log($(this).prop("checked"));
                // 点击全选按钮，小框自动勾选，属性值改变
                // 方法一：
                if ($(this).prop("checked") == true) {
                    $('.j-checkbox').prop("checked", true);
                } else {
                    $('.j-checkbox').prop("checked", false)
                }
                // 方法二：（这是我没有想到的）
                $('.j-checkbox').prop("checked",$(this).prop("checked"));
            })
        })
    </script>
</body>