海阔天空

2020javaweb教程之jQuery效果

显示、隐藏、显示及隐藏

<div id="box">这是个内容</div>
<style>
    #box{width:500px;height:300px;border:1px solid red;}
</style>
<button id="btn1">3秒隐藏div</button>
<button id="btn2">5秒显示div</button>
<button id="btn3">5秒显示/隐藏div</button>
<script>
$(function(){
    $("#btn1").click(function () {
        $("#box").hide(3000);//3秒隐藏
 （更多…）

2020javaweb教程之jQuery事件

jQuery获得焦点和失去焦点

<input type="text" id="user">
<script>
    $(function(){
        $("#user").focus(function(){//获得焦点
            $(this).css("backgroundColor","red")
        }).blur(function(){         //失去焦点
            $(this).css("backgroundColor","orange")
        })
    })
</script>

单击、双击、鼠标移入和移出

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>
<script>
    $(function(){
        $("p").click(function(){//单击事件
            $(this).css("color","red");
        })
        $("p").dblclick(function () {//双击事件
            $(this).css("fontSize","50px")
        })
        $("p").hover(function(){//鼠标移入
            $(this).css("color","orange")
        },function () {         //鼠标移出
            $(this).css("color","black")
        })
    })
</script>

鼠标按下和鼠标松开

<p>你点我干哈</p>
<script>
    $(function(){
        $("p").mousedown(function(){
            $(this).text("你点击了我")
        }).mouseup(function () {
            $(this).text("你点我干哈")
        })
    })
</script>

2020javaweb教程之jQuery和jQuery选择器

概述：
jQuery是一个快速、简洁的JavaScript框架。
jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。

什么是jQuery？
jQuery是一个JavaScript函数库

下载jQuery：
1 jQuery.com 下载jQuery库
2.从CDN中载入jQuery

语法：<script src=”uri”></script>
（更多…）

2020javaweb教程之Ajax效验用户名

固定值测试数据

<form action="reg" method="post">
    username : <input type="text" name="username" onchange="check(this)">
    <span id="sp"></span><br>
    password : <input type="password" name="password"><br>
    <input type="submit" value="注册">
</form>

通过数据库查询 数据

2020javaweb教程之Ajax

概述

AJAX 是一种在无需重新加载整个网页的情况下，能够实现局部更新的技术。

什么是ajax？

AJAX = 异步 JavaScript 和 XML。 (Asynchronized JavaScript And XML)

AJAX 是一种用于快速创建动态网页的技术。

AJAX工作原理

（更多…）

2020javaweb教程之JavaScript的json对象

json概述

json(JavaScript object notation)JavaScript对象表示，是一种轻量级的数据交换格式。

json语法：

[] ：表示数组
{} : 表示对象
” ” ：表示是属性名或字符串类型的值
: 表示属性和值之间的间隔符
,  表示多个属性的间隔符或者是多个元素的间隔符 （更多…）

2020javaweb教程之JavaScript的DOM2

DOM概述：

通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

浏览器加载 HTML 时,会将所有的 HTMl 标签封装成对象(标签对象),称为节点(Node),并悬挂在树状结构中

在HTML中，一切都是节点 （更多…）

2020javaweb教程之JavaScript的BOM1

1.window对象

window尺寸

innerWidth、innerHeight 浏览器窗口的内部宽高，不包括滚动条，菜单栏，工具栏。

//获取浏览器宽度
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
//获取浏览器高度
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

屏幕的尺寸 （更多…）

2020javaweb教程之JavaScript正则表达式

正则表达式

语法：
var patt=/pattern/modifiers;

如：
var re=/\w+/;

修饰符：
修饰符用于执行区分大小写和全局匹配，默认区分大小写。

i：大小写不敏感
g：全局匹配
m：多行匹配，适用于文本域

方法：
（更多…）

2020javaweb教程之JavaScript字符串

创建字符串语法

var s=new String(s);
var s1=String(s);

返回值:

当 String() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 String 对象，存放的是字符串 s 或 s 的字符串表示。

当不用 new 运算符调用 String() 时，它只把 s 转换成原始的字符串，并返回转换后的值。

属性：length

方法：
（更多…）