JQuery笔记总结【一】--介绍、核心函数-CFANZ编程社区

文章目录

- - JQuer 介绍
  - jquery核心函数

JQuer 介绍

什么是jQuery?

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。
jQuery，顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。
jQuery核心思想：它的核心思想是write less, do more (写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery流行程度：jQuery现在已经成为最流行的JavaScript库，在世界前10000 个访问最多的网站中，有超过55%在使用
jQuery好处：jQuery是免费、开源的，jQuery 的语法设计可以使开发更加便捷，
例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    下载安装JQuery
        IDEA中光标在网址中间，Alt + Enter 组合键导入-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--    百度CDN引入JQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        //动态绑定点击事件
        // window.onload = function () {
        //     var btnObj = document.getElementById("btnId");
        //     btnObj.onclick = function () {
        //         alert("js 原生的点击事件")
        //     }
        // }

        //表示页面加载完成 之后，相当于window.onload = function () {}
        // $ 是一个函数
        $(function () {
            //jquery 习惯在变量命名时加上$
           var $btnObj =  $("#btnId"); //表示按id查询标签对象
            $btnObj.click(function () { //绑定单击事件
                alert("jquery 的单击事件");
            });
        });
    </script>
</head>
<body>

    <button id="btnId">SayHello</button>
</body>
</html>

jquery核心函数

JQuery核心函数
$ 是JQuery的核心函数，能完成jQuery的很多功能。$()就是调用 $ 这个函数
作用：
1、传入参数为[函数]时:
- 表示页面加载完成之后。相当于window.onload = function(){}
2、传入参数为[HTML 字符串]时:
- 会为我们创建这个html标签对象
3、传入参数为[选择器字符串]时:
- $("#id属性值")： id选择器，根据id查询标签对象
- $(“标签名”)：标签名选择器，根据指定的标签名查询对象
- $(".class属性值")：类型选择器，可以根据class属性查询标签对象
4、传入参数为[DOM对象 ]时:
- 会把这个dom对象转化为jQuery对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
//      1、传入参数为[函数]时:
        $(function () {
            alert("页面加载完成后，自动调用");
//      2、传入参数为[HTML 字符串]时:
            $("<div>" +
                "        <span>div-span1</span>" +
                "        <span>div-span2</span>" +
                "    </div>").appendTo("body");
//      3、传入参数为[选择器字符串]时:
        alert($("button").length);
//      4、传入参数为[DOM对象 ]时:
        var btnObj = document.getElementById("btn1");
        alert(btnObj);
        alert($("btnObj"));
        });

    </script>
</head>
<body>
    <button id="btn1">btn1</button>
    <button>btn2</button>
    <button>btn3</button>
</body>
</html>