jQuery基础（jq对象获取、相关方法）

jQuery

它对我们常见的js *** 作dom进行封装是我们开发更加方便

（新建.min.js文件，复制Download the compressed, production jQuery 3.6.0中的代码到里面，再在工程中引入就行了）

        // 2.  等着页面DOM加载完毕再去执行js 代码，入口函数

        $(function() {

            $('div').hide();

        })

$是jQuery的别称 +-

jq对象和dom对象的区别

jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装；不能混用

dom对象转jq对象：$('video');

jq对象转dom对象：$('video')[0].play()或者 $('video').get(0).play()

$(“选择器”)选择器的写法和原生的差不多

修改属性和样式：$("div").css("属性", "样式");隐式迭代：就是把匹配的所有元素内部进行遍历循环，给每一个元素都添加属性样式。

筛选选择器：

如果中间是类选择器的话记得加.符号，不然没办法选中元素。

jq里面的排他思想：重点就是siblings（）的使用

        $(function() {

            // 1. 隐式迭代 给所有的按钮都绑定了点击事件

            $("button").click(function() {

                // 2. 当前的元素变化背景颜色

                $(this).css("background", "pink");

                // 3. 其余的兄弟去掉背景颜色 隐式迭代

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

            });

        })

jq中得到当前索引号的方法：

$(‘div’).index()

jq可以使用css方法来修改样式；也可以 *** 作类，修改多个样式

参数只写属性，则返回的是属性值参数是属性名，属性值，中间用逗号隔开，值如果是数字可以不用跟单位和引号参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，如果是复合属性采用驼峰命名法

设置类样式方法：

添加类：元素.addClass（”类名”）

删除类：元素.removeClass（”类名”）

切换类：元素.toggleClass（”类名”）

jq效果：

事件切换效果：

hover([over,]out)

over：鼠标移入元素要触发的效果

out：鼠标移出元素要触发的函数

            1. 事件切换 hover 就是鼠标经过和离开的复合写法

             $(".nav>li").hover(function() {

                 $(this).children("ul").slideDown(200);

             }, function() {

               $(this).children("ul").slideUp(200);

            });

             2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

            $(".nav>li").hover(function() {

                $(this).children("ul").slideToggle();

            });

动画或者效果队列

动画或者效果一旦被触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

所以需要停止排队：stop（）

$(this).children("ul").stop().slideToggle();

.fadeto（1000，0.5）

animate自定义动画：

如果第一个属性需要写多个样式可以使用对象的方式进行存储！！！！

prop可以获取dom元素属性值，也可以修改属性值

用户自己给元素添加属性：

attr(“属性”) 类似原生js中的getAttribute（） attr（”属性”，”属性值”）setAttribute（）

data（）方法可以在指定元素上存取数据，并不会修改dom元素的结构。一旦页面刷新，之前存放的数据都会被移除

            //1. element.prop("属性名") 获取元素固有的属性值

            console.log($("a").prop("href"));

            $("a").prop("title", "我们都挺好");

            $("input").change(function() {

                console.log($(this).prop("checked"));



            });

            // console.log($("div").prop("index"));

            // 2. 元素的自定义属性 我们通过 attr()

            console.log($("div").attr("index"));

            $("div").attr("index", 4);

            console.log($("div").attr("data-index"));

            // 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面

            $("span").data("uname", "andy");

            console.log($("span").data("uname"));

            // 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型

            console.log($("div").data("index"));

：checked可以找到被选中的复选框个数

以下代码跳不出函数体的原因：含有隐式迭代跳不出函数体：

    $(".j-checkbox").change(function() {

        if ($(".j-checkbox").prop("checked") === 'false') {

            $(".checkall").prop("checked", "false");

            return

        }

        $(".checkall").prop("checked", 'true');

        console.log(111);

})

以下是重点jq *** 作常用：

html（）获取元素的内容！

text（）获取元素的文本内容

val（）获取value值

找到当前元素所有的父级parents（）里面可以加选择器返回指定的祖先元素

toFixed（2）保留两位小数可以更改值

遍历元素：

$(“div”).each(function(index,domEle){})

each（）方法遍历匹配的每个元素，主要用于dom处理。each每一个

会调函数有两个参数：index是每一个元素的索引号；domEle是每个DOM元素，不是jq对象

想使用jq方法需要使用$符号将其转换。

$.each()可以遍历任何一个对象，主要用来遍历数据、、处理数据

$.each($(“div”)，function（I,ele）{})可以遍历数组对象，功能强大。

创建元素：内部添加

 let li=$(“”)

            $("ul").append(li);  内部添加并且放到内容的最后面

            $("ul").prepend(li); // 内部添加并且放到内容的最前面

外部添加：

            $(".test").after(div);

            $(".test").before(div);

删除元素：

            $("ul").remove(); 可以删除匹配的元素 自杀

            $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子

            $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子

事件

jq的事件注册：

事件处理：

优势一：on绑定一个或者多个 *** 作，还是类似将每个事件存放到一个对象中

$("div").on({

  mouseenter: function() {

    $(this).css("background", "skyblue");

 },

 click: function() {

      $(this).css("background", "purple");

   },

   mouseleave: function() {

      $(this).css("background", "blue");

   }
});

优势二：可以事件委派 *** 作，就是把原来给子元素身上的事件绑定在父元素身上，就是事件委托给父元素。

            $("ul").on("click", "li", function() {

                alert(11);

            });

            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的li

优势三：使用事件委托可以动态创建元素，click（）没有办法绑定事件，on（）可以给动态生成的元素绑定事件。这也是很重要的点！！！js中也是使用事件委托给动态创建的元素添加事件。

        $("ol").on("click", "li", function() {

                alert(11);

            })

            var li = $("我是后来创建的");

            $("ol").append(li);

        })

slideUp可以添加回调函数，执行完之后再去执行回调函数

      $(function() {

            $('.btn').click(function() {

                let li = $('')

                li.html($(".txt").val() + " 删除")

                $('ul').prepend(li)

                li.slideDown()

                $('.txt').val('')

            })

            $('ul').on('click', 'a', function() {

                $(this).parent().slideUp(function() {

                    $(this).remove()

                })

            })

        })

  

事件解除：off（）one（）

            $("div").off();  // 这个是解除了div身上的所有事件

            $("div").off("click"); // 这个是解除了div身上的点击事件

            $("ul").off("click", "li");//解除事件委托

            // one() 但是它只能触发事件一次触发一次之后立刻解绑

            $("p").one("click", function() {

                alert(11);

            })

自动触发事件：

           // 1. 元素.事件()

            // $("div").click();会触发元素的默认行为

            // 2. 元素.trigger("事件")

            // $("div").trigger("click");会触发元素的默认行为

            $("input").trigger("focus");

            // 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为

            $("div").triggerHandler("click");

最后一种方法不会触发事件的默认行为，例如文本框获得焦点的时候会有光标在闪烁，前两种方法都是触发这一默认行为。

jq的事件对象

事件被触发就会有默认行为的产生，在回调函数funciton（）里面的e就是事件对象；

阻止默认行为：event.preventDefault()或者return false

阻止冒泡：event.stopPropagation()

jq拷贝对象

$.extend(target, obj);默认的是浅拷贝，和js的Object.assign（）类似

如果拷贝对象有属性，拷贝之后会覆盖之前对象的数据

复杂类型数据的拷贝：浅拷贝只是把原来对象复杂数据类型的地址拷贝给新的对象

只需要在参数最前面添加一个属性true就可以实现深拷贝

$.extend(true, targetObj, obj);直接可以实现深拷贝

jq的多库共存问题：

$符号的复用：解决方案可以将$统一改成jQuery或者是还可以将自定义var xx=$.noConflict()可以实现。