JQuery笔记

JQuery基础

JQuery概念

  • 概念:一个JavaScript框架,简化JS开发。
  • jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
  • 本质:本质上就是一些js文件,封装了js原生的代码而已。

快速入门

基本步骤

  • 下载jQuery文件:https://jquery.com/
    • js与min.js的区别: jquery-xxx.js为开发版本具有良好的缩进和注释;jquery-xxx.min.js是生产版本,程序加载快
  • 导入jquery文件的js文件
  • 使用jquery
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        var div1 = $("#div1");
        var div2 = $("#div2");

        alert(div1.html());
    </script>
</body>

</html>

JQuery和JS对象的区别与转换

    <script>
        //js的方式获取全部的div所有元素对象
        var divList = document.getElementsByTagName("div");
        alert(divList.length);
        
        //jquery的方式获取
        var divs = $("div");
        alert(divs);
        //divs.html("bbb");

        //js-->jquery
        var $div = $(divList);
        $div.html("ccc");

        //jquery-->js:object[index] or object.get()

        /*
         * 1.都可以当做数组使用
         * 2.jquery对象在操作时更加方便
         * 3.jquery对象和js对象的方法是不通的
         */

    </script>

基本语法学习

事件绑定

<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" id="b1" value="点我">

    <script>
        var button = $("#b1");
        button.click(() => {
            alert("wdnmd");
        });

    </script>
</body>

入口函数

<script>
    //dom文档加载完成之后来执行
    //与window.onload的区别是window.onload只能定义一次
    //而jquery当中的入口函数可以绑定多次并且都会执行
    //window.onload后面的将会覆盖前面的
    $(() => {
        alert("wdnmd");
    });
</script>

样式控制

    <script>
        var div = $("#div1");
        //key value
        div.css("background-color", "yellow");
        div.css("backgroundColor", "pink");
    </script>

选择器

  • 作用:用来筛选具有相似特征的元素(标签)

你可能感兴趣的:(web前端,jquery)