JQuery写法与JQuery和JS的关系以及JQuery得方法

最新推荐文章于 2023-03-06 14:45:03 发布

郑怪兽

最新推荐文章于 2023-03-06 14:45:03 发布

阅读量231

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46285142/article/details/107368704

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JQuery写法的特点：
1、方法函数化/原生JS的很多操作都变成函数
2、链式操作
3、取值赋值一体化
JQ和JS的关系：
1、JQ完全兼容JS
2、JS和JQ 可以共存，但是不能混用

                $().innerHTML 错误
                $().html();   正确
     

        //$() 调用的结果，实际上是一个构造函数的实例。
        //$() 返回的是一个JQuery的对象，只能调用JQ添加的方法。

 find() //专门用于查找子节点
 has()  //拥有
 not()     //not 是 filter的反义词
filter()  //过滤
index()  //找到当前节点中，兄弟节点中的下标，必须是同级
attr() //操作元素节点的行间属性
addClass() //向被选元素添加一个或多个类
removeClass() //从被选元素删除一个或多个类
width()                      height()
innerWidth()                 innerHeight()
outerWidth()                 outerHeight()
outerWidth(true)             outerHeight(true)
.$(function(){
// console.log($("#div1").css("width"));
console.log($("#div1").width()); //直接获取当前节点的width
console.log($("#div1").innerWidth()); //width + padding
console.log($("#div1").outerWidth()); //width + padding + border
console.log($("#div1").outerWidth(true)); //width + padding + border + margin
 })
• insertBefore()     before()
• insertAfter()      after()
• appendTo()         append()
• prependTo()        prepend()          
• remove()
$(function(){
//找到span节点，插入到div节点的前面
$("span").insertBefore($("div"))
.css("backgroundColor", 'red');

//div前面是span
$("div").before($("span")).css("backgroundColor", 'red');

//找到div节点，插入到span节点的后面
$("div").insertAfter($("span"));

//找到span节点，插入到div节点子节点的末尾
$("span").appendTo($("div"));

//找到span节点，插入到div节点子节点的首位
$("span").prependTo($("div"));

//删除节点
$("span").remove();
})

on 进行事件绑定
off 进行事件解绑

            

<script>
            /*
                on   进行事件绑定
                off  进行事件解绑
            */

            $(function(){
                /*
                $("div").click(function(){
                    console.log(1);
                })
                $("div").click(function(){
                    console.log(2);
                })
                */

                //1、给单个事件绑定单个函数
                /*
                $("div").on("click", function(){
                    console.log("点击");
                })  
                var i = 0;

                //2、多个事件添加同一个函数
                $("div").on("click mouseover", function(){
                    $(this).html(i++);
                })
                */


                function show(){
                    console.log("hello world" + i++);
                }

                var i = 0;

                $("div").click(show);
                //3、给不同的事件，添加不同的函数
                $("div").on({
                    click: function(){
                        console.log("单击" + i++);
                    },
                    mouseover: function(){
                        $(this).css("backgroundColor", 'orange');
                    },
                    mouseout: function(){
                        $(this).css("backgroundColor", 'blue');
                    }
                })


                //4、实现事件委托
                // $("ul").on("click", "li,div", function(){
                //     $(this).css("backgroundColor", 'red');
                // })


                $("button").click(function(){
                    // $("div").off(); //解绑所有事件和所有函数
                    // $("div").off("click");  //解绑指定的事件类型  
                    $("div").off("click", show); //解绑指定的事件下的指定的函数，这个函数必须有函数名
                })
            })


        </script>
    </head>
    <body>
        <button>解绑事件</button>
        <div></div>
        <div></div>
        <div></div>
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <div>444</div>
            <div>555</div>
        </ul>
    </body>

                offset()
                    offset().left
                    offset().top
                    【注】直接获取当前元素，距离边框的距离。  

                position()
                    position().left
                    position().top
                    【注】获取当前元素，距离第一个有定位的父节点的距离。


                offsetParent()
                    【注】找到第一个有定位的父节点。
                   
• val()  html()  text()   设置/获取输入框的value值。
• size()    用来获取已经获取到的元素的个数
• each()      遍历

郑怪兽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery写法与JQuery和JS的关系以及JQuery得方法

JQuery写法的特点：1、方法函数化/原生JS的很多操作都变成函数2、链式操作3、取值赋值一体化JQ和JS的关系：1、JQ完全兼容JS2、JS和JQ 可以共存，但是不能混用 $().innerHTML 错误 $().html(); 正确 //$() 调用的结果，实际上是一个构造函数的实例。 //$() 返回的是一个JQuery的对象，只能调用JQ添加的方法。 find() //
复制链接

扫一扫