表单和jQuery

一.操作表单

1.表单是什么 From

文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
......

表单的目的：提交信息到后端处理

2.获得要提交的信息

<form method="post" action="#">
  <span>用户名：</span><input type="text" id="username">
  <p>
    <span>性别：</span>
    <input type="radio" name="sex" value="man" id="boy">
    <input type="radio" name="sex" value="women" id="girl">
  </p>
</form>


<script>
  //获得输入框的值
  var user = document.getElementById('username');
  var boy = document.getElementById('boy');
  var girl = document.getElementById('girl');
  //修改输入框的值
  user.value="123456";
  //得到输入框的值 动态抓取 >>user.value
  var value=user.value;

  //获得单选框的值
  boy.value
  girl.value
  //获得单选框是否被选择 ：false true
  boy.checked
  girl.checked
  //更改要选择的值：
  boy.checked = true;
</script>

　　利用 . value就可以拿到框内的值了

3.提交表单及MD5加密

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
<!--  MD5工具类-->
  <script type="text/javascript" src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit =  绑定一个提交函数 true（放行）  false（拦截）
将这个结果返回值交给表单  ，使用 onsubmit 接收
onsubmit="return fun()"
-->
<form action="https://www.baidu.com" method="post"  onsubmit="return fun()">
  <p>
    <span>用户名：</span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span><input type="password" id="password" name="password">
    <input type="hidden" id="md5" name="md5">
  </p>
<!--绑定鼠标点击事件-->
  <button type="submit">提交</button>
</form>
<script>
  function fun(){
    var name = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md = document.getElementById('md5');
    //MD5算法加密
    md.value=md5(pwd.value); // 将加密的密码返回给表单的隐藏域，由隐藏域交给后端
    console.log(md.value);
    console.log(name.value);
    console.log(pwd.value);
    return true; //false  ：拦截继续转发  true ：继续转发
  }
</script>

</body>
</html>

二.jQuery

1.初识jQuery

JavaScript和jQuery的关系：

jQuery封装了很多JavaScript的函数，本质上它们还是由JavaScript代码构成的，只不过jQuery给我们封装了很多的方法供我们使用，简化了我们的开发

jQuery开发文档：jQuery API 中文文档

公式：$(selector).action()

获取jQuery：

直接下载js文件 jQuery
引入依赖 jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始jQuery</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<!--  <script type="text/javascript" src="lib/jQuery.js"></script>-->
</head>
<body>
<a href="" id="a1" onclick="fun()">点击</a>
<script>
  // 公式 $(选择器).事件(函数)
  $('#a1').click(function (){
    alert("hello jQuery");
  })
  //等同于
  // function fun(){
  //   alert("hello jQuery");
  // }
</script>
</body>
</html>

2.jQuery选择器　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>

<script>
  // 源生的js，选择器少，麻烦不好记
  //标签
  document.getElementsByTagName();
  //id
  document.getElementById()
  //类
  document.getElementsByClassName()
  
  //jQuery  css中的选择器它全部能用
  $('p').click();       //标签选择器
  $('#id').click();     //id选择器
  $('.class').click();  //class选择器
  
  //$(selector).action()
</script>


</body>
</html>

选择器公式：$(selector).action()

3.事件

鼠标点击事件，键盘事件，其它事件

当网页元素加载完毕了以后响应事件

$(doucment).ready(function(){

})

可以简写为：

$(function(){

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <script src="lib/jQuery.js"></script>
  <style type="text/css">
    #divMove{
      width: 500px;
      height: 500px;
      border: 1px solid red;
    }
  </style>
</head>
<body>


<!--要求：获取当前的一个坐标-->
鼠标位置：<span id="mouseMove"></span>
<div id="divMove">
  鼠标移动区：



</div>
<script>
  //当网页加载完毕以后
  $(function (){
    $('#divMove').mousemove(function (e){
      $('#mouseMove').text('x:'+e.pageX+',y:'+e.pageY)
    })
  })
</script>

</body>
</html>

4.操作DOM

$('#test-ul li[name=python]').text();                //获得值
$('#test-ul li[name=python]').text('javaSE');       //设置值
  $('#test-ul').html();                             //获得值
  $('#test-ul').html('<h1>666</h1>');               //设置值

　　这里是使用jQuery对节点进行文本操作

$('#test-ul li[name=python]').css("color","red");  //更改颜色为红色

　　对节点进行风格操作jQuery有一个专门的方法.css

它的里面可以实现很多css的美化操作，比如，字体，字体颜色，背景颜色，边框等等操作都是可以的。

元素的显示和隐藏：本质就是display：none

$('#test-ul li[name=python]').show()    //展示元素

$('#test-ul li[name=python]').hide()    //隐藏元素

posted @ 2023-04-08 20:23 回忆也交给时间阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

5ran2yl