【web开发】4、JavaScript与jQuery

TechMasterPlus

已于 2023-09-15 12:20:11 修改

阅读量1.1k

点赞数 6

分类专栏： web开发 python工具包的简单应用文章标签：前端 javascript jquery

于 2023-09-08 22:13:52 首次发布

本文链接：https://blog.csdn.net/qq_46644680/article/details/132762609

版权

python工具包的简单应用同时被 2 个专栏收录

9 篇文章 1 订阅

订阅专栏

web开发

6 篇文章 0 订阅

订阅专栏

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

一、JavaScript与jQuery

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

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

二、JavaScript常用的基本功能

1.插入位置

在head体中

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

在body体中

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

2.注释

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

<!--- html   --->

/* CSS  */

//JS  
/*  JS */

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>

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>

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>

三、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>

法二：去官网下载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>

注意：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>Title</title>
</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 = $("<li>").text(dataString);
        //3.把创建的li标签添加到ul里面
        $("#view").append(newli);
    }
</script>
</body>
</html>

4.表格删除案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>aa</td>
            <td>
                <input type="button" value="删除" class="delete"/>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>bb</td>
            <td>
                <input type="button" value="删除" class="delete"/>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>cc</td>
            <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>

5.绑定事件案例

以remove为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</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>

6.菜单切换案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

TechMasterPlus

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
【web开发】4、JavaScript与jQuery

JavaScript常用的基本功能：1.插入位置、2.注释、3.变量、4.数组、5.滚动字符三、jQuery常用的基本功能：1.引入jQuery、2.寻找标签、3.val、text、append的使用举例、4.表格删除案例、5.绑定事件案例、6.菜单切换案例
复制链接

扫一扫