jQuery基础

最新推荐文章于 2024-05-07 14:42:48 发布

Mode Cheng

最新推荐文章于 2024-05-07 14:42:48 发布

阅读量329

点赞数

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

本文链接：https://blog.csdn.net/weixin_43885080/article/details/84756505

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery跟JS的比较

js对象和jQuery对象是不能相互使用的
js对象不能使用jQuery的方法
jQuery对象不能使用js的方法

<div id="container"></div>
<button id="Toggle">ToggleDiv</button>
</body>
<script src="../js/jquery-3.1.1.js"></script>//引入jQuery库
<script>
    //js
    var btn = document.getElementById("Toggle");
    var con = document.getElementById("container");

    btn.onclick = function () {
        if(con.style.display == "none"){
            con.style.display = "block";
        } else {
            con.style.display = "none";
        }
    }
    //jQuery
    $("#Toggle").click(function () {
        $("#container").toggle();
    })
</script>

就绪函数

js和jQuery文档就绪函数的区别

1.执行的时机不一样
js是等dom加载完毕，并且完全显示后执行
jQuery是等dom加载完毕后执行（执行的时机会提前）
2.js文档就绪函数不能重复执行
jQuery的可以重复定义
3.jQuery函数可以简写
js不能简写

<script src="../js/jquery-3.1.1.js"></script>
    <script>
        //jQuery
        $(document).ready(function () {
            $("#button").click(function () {
                console.log(1);
            })
        });
        //简写
        $(
                function () {
                    $("#button").click(
                            function () {
                                console.log("简写");
                            }
                    )
                }
        );
        //js
        window.onload = function () {
            document.getElementById("button").onclick = function () {
                console.log(2);
            }
        };
    </script>
</head>
<body>
<button id="button">Button</button>

JS对象跟jQuery对象的相互转化

<button id="btn">Button</button>
</body>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
    //jQuery对象
    var jQ=$("#btn");
    jQ.click(function () {
        console.log("jQ1");
    });

    //js对象
    var JS=document.getElementById("btn");
    JS.onclick = function () {
        console.log("JS1");
    };

    //JS---->jQuery   $():jQuery对象的加工厂
    var jQbtn = $(JS);//转化

    jQbtn.click(function () {
        console.log("jQ2");
    });

    //jQuery--->JS
    var jsbtn = jQ[0];

    jsbtn.onclick = function () {
        console.log("JS2");
    }
</script>

jQuery解决多库冲突

<script src="../js/prototype.js"></script>
<script src="../js/jquery-3.1.1.js"></script>
<script>
    var $j = jQuery.noConflict();//jQuery放弃$符，重新赋值一个。
    //1
    jQuery("#div").click(function () {

    });

    //2
    $j("#div").click(function () {

    });
    //3
    //匿名函数的自调用
    !function ($) {
        $("div").click(function () {

        })
    }(jQuery);
</script>

#代码规范

命名规则（驼峰命名法）：

1.所有的变量命名要有意义看到名字就知道变量存储的数据
2.大驼峰：Person Animal Student 类名
3.小驼峰：name age height add weight showInfo 变量名，方法名
4.全驼峰：PI ID NAME SCHOOL

代码缩进

四个概念

<div id="div" style="color: red">JREDU</div>

1.元素 element ele

<div id="div" style="color: red">jredu</div>

2.标签 markup

 <div></div>

3.属性 attribute

 id style

4.内容 content

JREDU

Mode Cheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础

jQuery跟JS的比较
复制链接

扫一扫

专栏目录