jQuery

最新推荐文章于 2023-08-12 10:47:33 发布

2a3b4c

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量149

点赞数

分类专栏： Web 文章标签： jquery

本文链接：https://blog.csdn.net/lr1916417519/article/details/88936001

版权

Web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

今天想跟大家一起学习的是一个前端的框架Jquery。
刚开始学习一个框架呢，我们要先做的是从简单的学习，来逐步的了解它的使用。

首先是head标签

需要我们将jquery的引用包放在本文件的同目录下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js">
    </script>
</head>

body部分

我们先举些例子吧：比如我们要实现三个文本框，当提交按钮接收到click事件的时候会将事先确定好的值显示在文本框。
==对于事件的标记同样jquery有三种不同的标记分别是id,class和元素标记。
下面分别举了三个例子：

<body>
    姓名：<input id="name" type="text" >
    提交<input id="subm" type="button">
    <br>
    年龄：<input class="age" type="text">
    提交<input class="subm2" type="button">
    <br>
    性别：<input name="sex" type="text">
    提交<input name="subm3" type="button">
   
</body>

鼠标点击事件怎么写呢？
我们需要在’script’标签里定义好鼠标点击事件：比如第一个点击之后会显示“诸葛亮”这条数据等。
这里要注意的是，jquery和我们jsp中不同的是：
通过id来标记的获取事件的表达式：&("#id标记").click(),在click里面可以定义对应的事件作出的应答机制。
而且与jsp不同的是加入数据用的是val()

 <script>
        $("#subm").click(function(){
            $("#name").val("诸葛亮")
        });

        $(".subm2").click(function(){
            $(".age").val("12")
        });

        $("[name='subm3']").click(function(){
            $("[name='sex']").val("男")
        });
</script>

再比如我们要显示一个框,通过按钮的点击事件我们要对其作出隐藏事件：
首先是框的显示代码：

    <div id="x"style="height: 200px;
                            width: 300px;
                            border: 1px solid green">
    </div>
    <br>
    <input id="table"  type="button" value="firstone">
    <br>
    <div id="xx"style="height: 200px;
                            width: 300px;
                            border: 1px solid burlywood">
    </div>
    <input id="table2"  type="button" value="secondone">
    <br>

框中显示的数据：

$("#x").html("hello world !");
$("#xx").text("hello world !!");

对框的样式可以通过下面这些方式进行改变：

// $("#table").attr("style","width=300px;border=2px;"); 
$("#table").click(function(){
     $("#x").hide();
     // $("#table").css("diaplay","none");
 });
 $("#table2").click(function(){
      $("#xx").hide();
      //$("#table2").css("diaplay","none");
 });

2a3b4c

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

今天想跟大家一起学习的是一个前端的框架Jquery。刚开始学习一个框架呢，我们要先做的是从简单的学习，来逐步的了解它的使用。首先是head标签需要我们将jquery的引用包放在本文件的同目录下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...
复制链接

扫一扫