• 【web开发】4、JavaScript与jQuery


    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    一、JavaScript与jQuery

    JavaScript(简称JS)是一种广泛应用的编程语言,主要用于网页开发。它是一种多才多艺、动态性强的语言,允许开发人员为网页应用添加交互性、操作文档对象模型(DOM)并创建丰富的用户体验

    jQuery是一个流行的JavaScript库,简化了客户端Web开发。它提供了各种功能和工具,用于与HTML文档交互处理事件发起AJAX请求和创建动画。

    二、JavaScript常用的基本功能

    1.插入位置

    在head体中

     <script type="text/javascript">
            //编写位置1
        script>
    
    • 1
    • 2
    • 3

    在body体中

    <script type="text/javascript">
        function myFunc() {
        		//编写位置2
    //        alert("你好呀")
              confirm("是否要继续")
        }
    script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.注释

    总快捷键:ctrl+/
    在不同的文件类型中,注释也各有不同。

    
    
    • 1
    /* CSS  */
    
    • 1
    //JS  
    /*  JS */
    
    • 1
    • 2

    3.变量

    <script type="text/javascript">
        var name1 ="aa";
        console.log(name);
    //    声明
        var name2="中国联通";
        var name3=str("中国联通");
        var v1 =name.length;
        var v2 =name[0];  //无-1,-2说法   ==name.charAt(3)
        var v3 =name.trim()  //去空白得到新的字符串
        var v4 =name.substring(1,2)//切片 前取后不取
    script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    4.数组

    <script type="text/javascript">
      var v1 =[1,2,3,4];
      var v2 =Array([1,2,3,4]);
    <!--  操作-->
      v1[1] =[]
      v1.pash =("最重要")  //尾部追加
      v1.unshift("最重要") //前面添加
      v1.splice(1,0,"中国")// v1.splice(索引,0,元素)把“中国”放在第一个索引的位置
      v1.pop()  //尾部删除
      v1.shift() //头部删除
      v1.splice(2,1) //splice(索引位置,1) 索引为2的元素删除
      //循环
      for (var idx in v1){
        //idx =0/1/2/3/  data =v1[idx]
    
      }
      for (var i =0;i <v1.length;i++){
      }
      //存在break,countinue
    script>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    5.滚动字符

    <body>
        <span id="txt">欢迎来CSDN学习span>
        <script type="text/javascript">
            function show()
            {
    <!--1.HTML中找到某个标签并获取他的内容 DOM-->
            var tag=document.getElementById("txt");
            var dataString=tag.innerText;
    <!-- 2.动态起来 把文本中的第一个字符放字符串的最后面-->
    
            var firstChar =dataString[0];
            var otherString =dataString.substring(1,dataString.length);
            var newText =otherString + firstChar;
    <!--3.HTML中更新内容-->
            tag.innerText =newText;
            }
    <!--  定时器,每一秒执行一次show函数-->
            setInterval(show,1000);
        script>
    body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    三、jQuery常用的基本功能

    1.引入jQuery

    法一:官网提供了CDN 的支持,直接使用官网 提供的链接即可。

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
    
    • 1
    • 2

    法二:去官网下载jQuery的js文件和Bootstrap的压缩包。
    在根目录下创建static目录,并在static目录下分别创建js\css\plugins\img目录。
    将jQuery的js文件放到js目录下,将压缩包里面的文件放到plugins目录下。如下图:
    在这里插入图片描述

    <script src="static/js/jquery-3.7.0.min.js">script>
    <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js">script>
    
    • 1
    • 2

    注意:BootStrap 依赖JavaScript的类库, (jquery须在bootstrap的前方)

    2.寻找标签

    直接寻找标签
    Id选择(id=”txt”) : $(“#txt”)
    样式选择(class=”c1”): $(“.c1”)
    标签选择器(h1,div) : $(“h1”)
    层级选择器 : $(“.c1 .c2 a”)
    多选择器 : $(“#txt,#c1,li”)
    属性选择器 : $(“input[name=“n1”]”)

    间接寻找标签
    兄弟关系中
    找到上一个 : $(“#txt”).prev()
    找到下一个 : $(“#txt”).next()
    找到下下一个 : $(“#txt”).next().next()
    所有兄弟 : $(“#txt”).siblings()
    父子关系中
    $(“#txt”).parent()
    $(“#txt”).children()
    $(“#txt”).children(“.p10”) //儿子中找寻class=p10

    3.val、text、append的使用举例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    <input type="text" id="txtUser" placeholder="用户名">
    <input type="text" id="txtEmail" placeholder="邮箱">
    <input type="button" value="提交"  onclick="getInfo()"/>
    <ul id="view">
    ul>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">script>
    <script>
        function getInfo(){
            //1.获取
            var username = $("#txtUser").val();
            var email = $("#txtEmail").val();
            var dataString =username +"-" +email;
           // 2.创建且写入
            var newli = $("
  • ").text(dataString); //3.把创建的li标签添加到ul里面 $("#view").append(newli); } script> body> html>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
  • 4.表格删除案例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
        <table border="1">
            <thead>
            <tr>
                <th>IDth>
                <th>姓名th>
                <th>操作th>
            tr>
            thead>
            <tbody>
            <tr>
                <td>1td>
                <td>aatd>
                <td>
                    <input type="button" value="删除" class="delete"/>
                td>
            tr>
            <tr>
                <td>2td>
                <td>bbtd>
                <td>
                    <input type="button" value="删除" class="delete"/>
                td>
            tr>
            <tr>
                <td>3td>
                <td>cctd>
                <td>
                    <input type="button" value="删除" class="delete"/>
                td>
            tr>
            tbody>
        table>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
        <script>
            $(function () {
                //找到所有class=delete 的标签 绑定事件
                $(".delete").click(function () {
                    ($(this)).parent().parent().remove();
    
                });
            })
        script>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    5.绑定事件案例

    以remove为例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    <ul>
        <li>百度li>
        <li>谷歌li>
        <li>搜狐li>
        <li>必应li>
    ul>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
    <script>
        $(function(){
    
            $("li").click(function () {
            var text = $(this).text();
            var text = $(this).remove();//鼠标点击后去除
            })
        })             //当页面框架加载完成,自动执行
    script>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    6.菜单切换案例

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            .menus{
                width:200px;
                height:800px;
                border:1px solid red;
            }
            .menus .header{
                background:gold;
                padding:10px 5px;
                border:1px solid gray;
    
                cursor: pointer;
            }
            .menus .content a{
                display: block;
                padding:5px 5px ;
                border:1px solid gray;
            }
            .hide{
                display: none;
            }
        style>
    head>
    <body>
        <div class="menus">
            <div class="item">
                <div class="header"  onclick="clickMe(this);">div>
                <div class="content hide">
                    <a >湖南a>
                    <a >云南a>
                    <a >河南a>
                    <a >西南a>
                div>
            div>
            <div class="item">
                <div class="header"  onclick="clickMe(this);">div>
                <div class="content hide">
                    <a >湖北a>
                    <a >云北a>
                    <a >河北a>
                    <a >西北a>
                div>
            div>
        div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js">script>
        <script>
            function clickMe(self) {
                //展示自己下面的功能
                $(self).next().removeClass("hide");
                //找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找class=content 添加hide样式
                $(self).parent().siblings().find(".content").addClass("hide");
    
                if(hasHide){
                     $(self).next().removeClass("hide");
                }else{
                     $(self).next().addClass("hide");
                }
            }
        script>
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
  • 相关阅读:
    Java新手小白入门篇 Java面向对象(九)
    4┃音视频直播系统之浏览器中通过 WebRTC 进行桌面共享
    Nginx概念
    华为OD机考题HJ17 坐标移动
    SQL日期函数
    整理了25个Python文本处理案例,收藏!
    【新功能】Ambire 钱包集成了 Metis 网络
    CVE-2022-22954-VMware Workspace ONE Access SSTI远程代码执行流量特征
    int、Integer、new Integer和Integer.valueOf()的 ==、equals比较
    有没有适用的kafka镜像
  • 原文地址:https://blog.csdn.net/qq_46644680/article/details/132762609