JAVA前端———JavaScript—表单—jQuery

表单(验证)

  • 定义:form标签
  • 作用:将用户输入或选择的数据提交给指定的服务器(提交信息
<form action="post">
    <p>
        <span>用户名:span><input type="text" id="username">
    p>
    <p>
        <span>学历:span>
        <input type="radio" name="school" value="ben" id="本科">本科
        <input type="radio" name="school" value="bo" id="博士">博士
    p>
form>

获得或修改提交的信息

var username = document.getElementById('username')
username.value
"你好啊"
username.value = '加油2020' —————— 修改输入的值
"加油2020"
var ben = document.getElementById('本科')
ben.value
"本科"
var bo = document.getElementById('博士')
bo.value
"博士"
  • 1. 多选框的值就是定义好的value
  • 2. 单选框 多选框等固定的值 使用 ben.value 只能获得指定的值

获得单选框或者多选框选中的值 需要用判断

ben.checked
false   ———————— 未被选中
bo.checked
true  ———————— 被选中

提交表单

<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
——————————————表单绑定提交事件
    <p>
        <span>用户名:span><input type="text" id="username" name="username">
    p>
    <p>
        <span>密码:span><input type="password" id="pwd">
    p>
    <input type="hidden" id="md5-pwd" name="password">  
    <button type="submit">提交button>
form>
  • onsubmit = 绑定一个提交检测的函数 返回结果true 或者false
  • true ———— 通过提交 false ———— 阻止提交

使用md5加密

    <script>
        function aaa() {
            alert(1);
            var uname = document.getElementById('username');
            var pwd = document.getElementById('pwd');
            var md5pwd = document.getElementById('md5-pwd');
            md5pwd.value = md5(pwd);
            return true;
        }
    </script>

jQuery

  • 定义:简洁而快速的JavaScript库 (JavaScript框架)
  • 作用:用于简化事件处理,HTML文档遍历,Ajax交互和动画 简化javascript的各种操作以及解决各种浏览器之间的兼容性
  • 简介:jquery 是基于 javascript 类库的框架, 它里面提供了许多 javascript 类库,和一些css样式表的封装, 使用起来比较方便, 简化了用户与浏览器的交互, 提高了系统的性能和开发效率
  • jQuery 设计的宗旨是 “write Less,Do More”—— 写更少的代码,做更多的事情
  • 公式:$( 选择器 ) . 事件(事件函数)

获得jQuery

<a href="" id="test-jquery">点我a>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/core.js">
  		 $('#jquery').click(function () {
        		alert('你好啊 jQuery');
   		 })
  </script>

选择器

 	$('p').click();  —————— 标签选择器
    $('#id1').click();  —————— id选择器
    $('.class1').click(); —————— class选择器

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.4.1.js"></script>
    <style>
        #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>

操作DOM

  • 1. 节点文本操作
$('#test-ul li[name=python]').text();   —————— 获得值
$('#test-ul li[name=python]').text('设置值');   —————— 设置值 
$('#test-ul').html();   —————— 解析html值
$('#test-ul').html('123');   —————— 设置html值
  • 2. css的操作
 $('#test-ul li[name=python]').css({"color","red"})
  • 3. 元素的显示和隐藏
$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()
  • 4. 其他测试
$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

你可能感兴趣的:(JAVA前端———JavaScript—表单—jQuery)