JavaScript基础和jquery

已于 2022-08-14 01:22:29 修改
阅读量402 收藏 2
点赞数 1
分类专栏： JavaScript 前端 文章标签： javascript jquery 前端
于 2022-05-10 00:20:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62935155/article/details/124678758
版权

Javascript（网站的行为）

1. javascript是一门编程语言

  • DOM和BOM是javascript的内置模块
  • jqurey相当于编程语言的第三方模块

2.javascript

javascript的意义是什么呢：就是让你的网页动起来，让网页含有动态效果

初步的了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="header" onclick="myFunc()">标题</div>
    <div class="item">内容</div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    function myFunc(){
        // alert("你好呀");
        confirm("是否要继续？")
    }
</script>
</body>
</html>

3.JavaScript作用区域

  • 直接写在html中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
    <script type="text/javascript">
        //编写javascript的代码（位置1）不推荐影响效率
    </script>
</head>
<body>
<div class="menus">
    <div class="header">标题</div>
    <div class="item">内容</div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
    //编写javascript代码（位置2）推荐
</script>
</body>
</html>
  • 写一个js文件然后导入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="header" onclick="myFunc()">标题</div>
    <div class="item">内容</div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script src="bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script src="存在形式.js"></script>
</body>
</html>

4.javascript的注释

  • html的注释
<!--注释内容-->
  • css的注释
/* 注释内容 */
  • JavaScript的注释
//注释内容
/* 注释内容*/

5.javascript基础

5.1 变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
<script type="text/javascript">
    var name = "love";  //定义一个字符串
    console.log(name);   //输出,要在f12里查看
</script>
</body>
</html>
5.1.1 字符串类型
//声明
var name = "love";
var name = String("love");

//常见功能
var name = "love"

var v1 = name.length;
//按索引取值
var v2 = name[0]
var v22 = name.charAt(0)
//去空格
var v3 = name.trim()
//切片（前取后不取）
var v4 = name.substring(0, 2)
案例：跑马灯
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<span id="txt">中国联通</span>
<body>
<script type="text/javascript">
    function show() {
        //去html中的标签获得内容（DOM）
        //获取标签对象
        var tag = document.getElementById("txt");
        //从对象中获取字符串
        var dataString = tag.innerText;
        //动态起来，把第一个字母放到最后面
        var firstChar = dataString[0];
        var otherString = dataString.substring(1, dataString.length);
        var newText = otherString + firstChar;
        //在html中更新我们的内容
        tag.innerText = newText;
    }

    //BOM中的一个定时器,每一秒执行一次show函数
    setInterval(show, 1000);
</script>
</body>
</html>

5.2 数组

//定义
var v1 = [11,22,33,44];
var v2 = Array[11,22,33,44];

//常见操作
<script type="text/javascript">
    var v1 = [11, 22, 33, 44];

    //按索引取值
    var v2 = v1[1];

    //按索引修改
    v1[0] = "love";

    //添加和删除
    v1.push(99); //在尾部添加
    v1.unshift(88); //在头部添加
    v1.splice(1, 0, 77) //在特定位置添加(索引,0,要添加的元素)
    v1.pop() //在尾部删除
    v1.shift() //在头部删除
    v1.splice(2, 1) //索引为2的元素删除(索引,1)

    //循环
    var v3 = [11, 22, 33, 44]
    for (var item in v3) {
        //item为索引
        //拿数据
        var data = v3[item]
    }
    //循环方法2
    var v4 = [11, 22, 33, 44]
    for (var i = 0; i < v4.length; i++) {
        var data2 = v4[i]
    }
</script>
案例 动态数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
<ul id="city"></ul>
<script type="text/javascript">
    var cityList = ["北京", "上海", "深圳", "成都"];
    for (var idx in cityList) {
        var text = cityList[idx];
        //创建一个li标签（DOM）
        var tag = document.createElement("li");
        //在li标签中写入内容
        tag.innerText = text
        //添加到id为city的ul标签中（DOM）
        var parentTag = document.getElementById("city");
        parentTag.appendChild(tag);
    }
</script>
</body>
</html>

5.3 对象

info={
    "name":"love",
    "age":18.
}

info={
    name="love",
    age=18
}

<script type="text/javascript">
    info = {
        name: "love",
        age: 18,
    }

    //根据对象的key来取值和修改值
    var userName = info.name
    info.age = 19

    //第二种写法
    var userName2 = info["name"]
    info["age"] = 20

    //删除对象的值
    delete info["age"]

    //对对象循环
    for (var key in info) {
        var data = info[key]
    }
</script>
案例：动态表格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody id="body">

    </tbody>
</table>
<script type="text/javascript">
    var dataList = [
        {id: 1, name: "love", age: 18},
        {id: 2, name: "love", age: 18},
        {id: 3, name: "love", age: 18},
        {id: 4, name: "love", age: 18},
        {id: 5, name: "love", age: 18},
        {id: 6, name: "love", age: 18},
    ];
    for (var idx in dataList) {
        var info = dataList[idx];
        var tr = document.createElement("tr");
        for (var key in info) {
            var text = info[key];
            var td = document.createElement("td");
            td.innerText = text;
            tr.appendChild(td);
        }
        var bodyTag = document.getElementById("body");
        bodyTag.appendChild(tr)
    }
</script>
</body>
</html>

5.3 条件语句

if(条件){
    
}else{
   
}    

if(条件){
    
}else if(条件){
    
}else if(条件){
    
}else{
    
}

5.4 函数

funtion func(){
    .....
}

func()

6. DOM

DOM是一个模块，可以结和javascript对html的标签进行操作

<div id="dom">欢迎使用javascript的</div>
<script type="text/javascript">
    //创建标签
    var div = document.createElement("div");
    //根据id获取标签
    var tag = document.getElementById("dom");
    //获取标签中的文本
    tag.innerText;
    //设置标签中的文本
    div.innerText = "DOM";
    //添加标签在html中
    tag.appendChild(div);
</script>

6.1 事件的绑定

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()"/>
<ul id="city">

</ul>
<script>
    function addCityInfo() {
        var newTag = document.createElement("li");
        newTag.innerText = "中国";
        var tag = document.getElementById("city");
        tag.appendChild(newTag);
    }
</script>
</body>
</html>

进阶案例输入添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
</head>
<body>
<input type="text" placeholder="请输入内容:" id="userTxt"/>
<input type="button" value="点击添加" onclick="addCityInfo()"/>
<ul id="city">

</ul>
<script>
    function addCityInfo() {
        var txtTag = document.getElementById('userTxt');
        var newString = txtTag.value;
        if (newString.length > 0) {
            var newTag = document.createElement("li");
            newTag.innerText = newString;
            var tag = document.getElementById('city');
            tag.appendChild(newTag);
            txtTag.value = '';
        }else {
            alert("输入不能为空") //BOM
        }
    }
</script>
</body>
</html>

6.2 注意

DOM还有很多功能

DOM可以实现很多功能，但是比较繁琐
我们后期会用一个类库jqurey来实现
或者后期会用VUE.js/react.js来实现

7. jqurey

jqurey是JavaScript的一个第三方模块

  • 基于jqurey，自己开发一个功能
  • 现成的工具依赖jqurey eg：bootstrap动态效果

7.1 快速上手

7.1.1 下载jquery
https://jquery.com/
7.1.2 应用jquery
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>

7.2 初识jquery

<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //利用jquery的功能实现我们的效果
    $('#txt').text("四川联通");
    //利用DOM
    document.getElementById('txt').innerText="四川联通";
</script>

两种方法对比实现同一个功能jQuery会比DOM简单

7.3 寻找标签（直接寻找）

  • id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>

</head>
<h1 id="txt">中国联通</h1>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('txt')
</script>
</body>
</html>

通过id寻找标签

  • 样式选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>

</head>
<h1 class="c1">中国联通</h1>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('.c1')
</script>
</body>
</html>

通过类选择

  • 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>

</head>
<h1 class="c1">中国联通</h1>
<div></div>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('div')
</script>
</body>
</html>

通过标签找到标签

  • 层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<div class="c1">
    <div class="c2">
        <a></a>
    </div>
</div>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('.c1 .c2 a')
</script>
</body>
</html>
  • 多选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<div class="c1">
    <div class="c2">
        <a></a>
    </div>
</div>
<div class="c3">
</div>
<body>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('.c1,.c3')
</script>
</body>
</html>

用逗号隔开

7.4 间接寻找

  • 找到上一个兄弟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
<div>
    <div>北京</div>
    <div id="c1">上海</div>
    <div>成都</div>
    <div>深圳</div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('#c1').prev(); //找到上一个---北京
    $('#c1');
    $('#c1').next(); //找到下一个---成都
    $("#c1").next().next()  //下一个的下一个----深圳
    $("#c1").siblings()  //所有的兄弟
</script>
</body>
</html>
  • 找父子
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
</head>
<body>
<div id="c1">
    <div id="c2">
        <div>北京</div>
        <div id="c3">上海</div>
        <div>成都</div>
        <div>深圳</div>
    </div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $('#c3').parent(); //父亲id=c2的div
    $("#c3").parent().parent(); //父亲的父亲id=c1的div
    $('#c1').children() //获取所有的孩子
    $("#c1").children("#c2")    //获取id=c2的孩子
    $("#c1").find("#c3")    //找到id=c3的子孙
</script>
</body>
</html>

7.5 案例：菜单切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>
        .menus {
            width: 200px;
            height: 800px;
            border: 1px solid red;
            text-align: center;
        }

        .menus .item .header {
            background-color: gold;
            padding: 10px 5px;
            cursor: pointer;
        }

        .menus .item .content a {
            display: block;
            padding: 10px 5px;
            border-bottom: 2px dotted greenyellow;
        }

        .hide {
            display: none;
        }
    </style>
</head>
<div class="menus">
    <div class="item">
        <div class="header" onclick="clickMe(this)">上海</div>
        <div class="content hide">
            <a>宝山区</a>
            <a>青浦区</a>
            <a>浦东新区</a>
        </div>
        <div class="item">
            <div class="header" onclick="clickMe(this)">北京</div>
            <div class="content hide">
                <a>海淀区</a>
                <a>昌平区</a>
                <a>大兴区</a>
            </div>
        </div>
    </div>
</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function clickMe(self) {
        //获取onclick下一个标签的hide属性
        var hasClass = $(self).next().hasClass("hide")
        //判断属性是否存在
        //如果存在移除
        if(hasClass){
            $(self).next().removeClass("hide")
        }
        //不存在就加入hide属性
        else {
            $(self).next().addClass("hide")
        }
    }
</script>
</body>
</html>

7.5 值的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<div id="c1">内容</div>
<input type="text" id="c2">
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("#c1").text();         //获取文本内容
    $("#c1").text("内容");      //设置文本内容
    $("#c2").val();         //获取用户输入的内容
    $("#c2").val("内容")      //设置内容
</script>
</body>
</html>
7.5.1 案例：动态创建数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<input type="text" id="textUser" placeholder="用户名"/>
<input type="text" id=textEmail placeholder="邮箱"/>
<input type="button" value="提交" onclick="getInfo()">
<ul id="view">

</ul>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function getInfo() {
        //获取用户输入的内容
        var userName = $("#textUser").val();
        var userEmail = $("#textEmail").val();
        var dataString = userName + "----" + userEmail;
        //创建li标签并写入内容
        //创建li标签
        var newLi = $("<li>").text(dataString);

        //将li标签放入ul中
        $("#view").append(newLi);
    }
</script>
</body>
</html>

7.6 jquery中的绑定事件

DOM的绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>

<input type="button" value="提交" onclick="getInfo()">

<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    function getInfo() {

    }
</script>
</body>
</html>

jquery的事件绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //给所有的li标签绑定所有的事件
    $("li").click(function (){
        //点击li标签时自动执行这个函数
        //$(this)  当前你点击的标签
    })
</script>
</body>
</html>
7.6.1 案例：绑定事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //给所有的li标签绑定所有的事件
    $("li").click(function () {
        var text = $(this).text();
        console.log(text)
    })
</script>
</body>
</html>
7.6.2 删除标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<div id="c1">内容</div>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("#c1").remove();
</script>
</body>
</html>
7.6.3 案例加删除标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    //给所有的li标签绑定所有的事件
    $("li").click(function () {
        $(this).remove();
    })
</script>
</body>
</html>
7.6.4 当页面框架执行完成后自动执行的函数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>百度</li>
    <li>谷歌</li>
    <li>搜狗</li>
</ul>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("li").click(function () {
            $(this).remove();
        })
    })

</script>
</body>
</html>

7.7 案例：表格操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <style>

    </style>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>操作</td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>zxr</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>zxr</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>zxr</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>zxr</td>
        <td>
            <input type="button" value="删除" class="delete">
        </td>
    </tr>
    </tbody>
</table>
<script src="bootstrap/bootstrap-3.4.1-dist/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $(function () {
        //找到所有class标签并绑定事件
        $(".delete").click(function () {
            //删除当前行数据
            $(this).parent().parent().remove();
        })
    })

</script>
</body>
</html>
凸头拯救地球
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于jQuery架构javascript基础体系
10-28
jQuery毕竟还只是一个基础的最底层的工具集，封装元素选择器，事件等等，基本上能满足一般的需求，但要从整体的WEB的周度来看，为了提高javascript开发的效率与可重用性，就需要有一个整体的布局
JavaScript和jQuery的基础知识和使用
qq_42839595的博客
02-24 3121
首先对于JavaScript和Java两种语言，除了语法和Java有些类似，其他部分没有任何关系。由于当时Java很火，为了推广才在名字中加了Java，也就是所谓的蹭热度。 前端三大基石：HTML、CSS、JavaScript。严格意义上，其中只有JavaScript称得上编程语言，其他两种都只是标记语言，JS作为行为层，对用户和浏览器之间的交互进行编程。 JS与其他语言最不同的一点就在于JS是弱类型语言，没有具体数据类型的声明区别
JQuery快速入门教程
一个双子座的Java攻城狮
08-20 3316
1.3、小结 jQuery 是一个 JavaScript 库。 说白了就是定义好的一个 JS 文件，内部封装了很多功能，可以大大简化我们的 JS 操作步骤。 jQuery 官网：https://www.jquery.com。 要想使用，必须要引入该文件。 jQuery 的核心语法 $(); 2、JQuery基本语法 2.1、JS对象和JQuery对象转换 jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DO
第1章 认识JavaScript语言和jQuery
世界那么大，我要学编程看看！
09-05 60
JavaScript（简称 JS）是一种广泛用于网页和服务器端开发的编程语言。它是一种高级、解释性的语言，具有动态类型和面向对象的特性。JavaScript可用于为网页添加交互性和动态效果，在网页开发中经常用于操作 HTML 元素、处理用户输入、发送网络请求以及实现动画效果等功能。同时，JavaScript也可以在服务器端运行，通过 Node.js 等运行时环境提供后端开发能力。由于其广泛应用和灵活性，JavaScript 已经成为现代 Web 开发中的重要技术之一。
js和jquery
wsy86775638的博客
11-02 163
2022/11.2
python-web开发[13]之前端js
Jasminexjf的博客
10-22 610
python-web开发系列文章
jQuery+Javascript基础知识汇总
洛江清的博客
09-29 1253
jQuery是一个Javascript库，里面提供了很多快速方便操作DOM的函数（方法）。学习jQuery的本质就是学习调用这些函数（方法）。
jQuery(JavaScript框架)基础讲解
最新发布
04-18
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。...
【JavaScript】JQuery基础知识及应用
08-10
实例：元素的隐藏显示和选项卡
Web编程基础 CSS、JavaScript、jQuery
01-10
Web编程基础 CSS、JavaScript、jQuery 使用超星阅读器才能打开
jQuery基础.pptx
05-20
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前，需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...
JavaScript与前端框架jQuery
吃不胖.
09-24 217
随着web技术的不断发展，JavaScript也逐渐成为了一种全面的编程语言，在前后端开发、移动应用等各个领域都有广泛的应用。JavaScript可以用于实现页面中的各种效果，例如轮播图、Tab切换、下拉菜单等，同时也可以用于数据验证，例如表单提交之前的检查、输入框的自动补全等。JavaScript中的流程控制语句包括条件语句、循环语句、跳出语句等，可以控制程序的执行流程以达到特定的业务逻辑。② JavaScript可以与HTML、CSS进行无缝的集成，可以实现动态交互、数据验证、表单提交等功能。
JavaScript与jQuery
INTJ
07-26 1831
JavaScript与jQuery
JavaScript基础知识之jQuery
qq_38652677的博客
11-03 2242
网址：jquery 点击下载后将代码复制，新建一个json文件，将复制的内容粘贴过去 jQuery的入口函数 ①等着DOM结构熏染完毕即可执行内部代码，不必等到所有资源加载完成，jQuery帮我们完成了封装 ②相当于我们原生js中的DOMContentLoaded ③不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码 3.jQuery的顶级对象 其中是jQuery的别称，在代码中可以使用jQuery来代替,但一般为了方便，通常直接使用 是jQuery的
JavaScript与jQuery - 快速入门指南
Java攻城狮修炼中
11-25 908
文章目录一、什么是 JavaScript二、快速入门三、数据类型四、函数五、内部对象六、面向对象编程七、操作 BOM 对象（重点）八、操作 DOM 对象（重点）九、操作表单（验证）十、jQuery 笔记记录自狂神老师的B站教学视频，主要记录了 操作 BOM 之后的笔记（其余有空在扩充，，估计没空） 第三章记录自 FreeCodeCamp，特别棒的学习社区推荐一下~ 一、什么是 JavaScript 概述 JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然
JQuery/JavaScript基础
黄倩的博客
05-24 179
JavaScript基础 一.JavaScript是一种描述性语言，也是一种基于对象和事件驱动的，并具有安全性能的脚本语言。 二.JavaScript的特点：               1.JavaScript主要用来向HTML页面中添加交互行为               2.JavaScript是一种脚本语言，语法和Java类似               3.JavaScript
JQuery基础知识
谢鑫的博客
08-27 402
 1.1基本概念 JQuery是一个JS库，能够帮助我们轻松实现一些原本可能比较麻烦的功能。 JQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。 JQuery实际上就是一个js文件，加载到页面就可以直接使用了。 script src="jquery-3.2.
JavaScript / jQuery基础知识
MD_ASCE的博客
09-26 306
js/jquery     1.基本的概念:         ①js语言是一种解析(浏览器解析)型的脚本语言         ②js语言实现页面元素的操作,window对象的操作从而实现网页特效         ③js是众多库的基础 jQuery/bootstrap/vue/node.js/react....         ④js是严格区分大小写的语言         ⑤js的命名习惯遵循驼峰命...
JavaScript基础知识和jQuery基础知识简介
m0_53821599的博客
09-10 482
文章目录JavaScript引入JavaScript基本语法数据类型严格检查模式流程控制Map和Setiterator函数函数定义变量的作用域方法内部对象DateJOSN面向对象编程原型对象class继承操作BOM对象***操作DOM对象***操作表单（验证）jQuery JavaScript 引入JavaScript 内部标签 <script> //... </script> 外部引用 <script src="js文件路径"></script&gt
20.JavaScript和JQuery的区别
03-31
2. JavaScript可以实现更多的功能，而JQuery是在JavaScript基础上的一个工具库，主要用于简化DOM操作和事件处理等。 3. JavaScript需要更多的代码来实现一些功能，而JQuery提供了许多可重用的代码片段和函数来处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值