今天想跟大家一起学习的是一个前端的框架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");
});