2020javaweb教程之jQuery添加元素和删除元素
添加元素
<p id="p1">这是条默认的文本</p> <button>在默认文本内部前面添加文本</button> <button>在默认文本内部后面添加文本</button><br> <button>在默认文本外部上面添加元素</button> <button>在默认文本外部后面添加元素</button> <script> （更多…）
2020javaweb教程之jQuery设置属性、获取属性
获取
DOM：document.getElementById(“ele”);
jquery：$(“#ele”)
DOM:操作的是JavaScript原生对象
jQuery：操作的是自己封装的对象，当中包含了原生对象
注意：只有jQuery对象才可以操作jQuery函数
获得内容
<p>这是第一段文本</p> <p><span>这是第二段文本</span></p> <p>这是第三段文本</p> <input type="password" id="pwd"><br> <button id="btn1">获取第一段文本内容</button> <button id="btn2">获取第二段文本html内容</button> <button id="btn3">获取密码框内容</button> （更多…）
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;
屏幕的尺寸 （更多…）
