javaWeb学习第四天

编程入门行业动态更新时间:2024-10-21 15:26:54

javaWeb学习<a href=https://www.elefans.com/category/jswz/34/1765803.html style= 第四天"/>

javaWeb学习第四天

今天的学习内容：

文章目录

JavaScript事件的补充
- js中的事件：
- - 键盘事件：
- 省级联动的实现：（onchange事件的应用）
DOM和BOM
- DOM：文本对象模型
- BOM：浏览器对象模型
- - BOM 与DOM 之间的关系
jquery介绍和使用
- jquery是什么？
- jquery的使用：
- jquery 准备函数
- jquery 获取节点的三种方式
- JavaScript和jQuery的转换
jquery 常用的方法
jQuery事件
- jQuery事件和JavaScript事件的区别：
- - 使用jq实现表单功能
jquery 提供的常规的方法：
- 使用jq实现广告弹出效果
jquery 的选择器
- 层次选择器(父子或者是兄弟关系的)
- 过滤选择器
- 针对input标签的属性选择器
jquery 操作样式

JavaScript事件的补充

js中的事件：

onchange 当输入框发生改变的时候
onmouseover 移动到某一个元素的时候触发
onmouseout 移出某一个元素的时候 (前提是在移入的状态下)

键盘事件：

onkeydown 表示按下的时候
onkeyup 松开的时候
onkeypres 表示按下挥着长按的时候都会触发

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>键盘事件</title>
</head>
<body >
<h1>123456789</h1>
<!--onkeydown="alert('你点了我')"可以重复触发-->
<!--onkeyup="alert('键盘抬起了')" 可以重复触发-->
<!--onkeypress="alert('长按或按下触发')" 可以重复触发-->
</body>
</html>

省级联动的实现：（onchange事件的应用）

注意问题：代码中的this.value 表示获取当前select标签中选择的内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>省级联动</title>
</head>
<body>
<select onchange="show(this.value)"><!--this.value 当前对象select的option的value值--><option>-------请选择-----</option><option value="0">上海</option><option value="1">北京</option><option value="2">广州</option>
</select>
<select id="tv"><option>--------请选择-----</option>
</select>
<script>//使用onchangse实现省级联动function show(index) {//将获取到的value值传进来var arr = new Array(3);//定义一个数组arr[0] = ["1", "2", "3"];//将要联动显示的内容加进来arr[1] = ["4", "5", "6"];arr[2] = ["7", "8", "9"];var tv=document.getElementById("tv");//获取联动显示的select标签var arrs=arr[index];//把当前对象的value作为数组下标转进来，找到指定的联动内容var tem="<option>--------请选择-----</option>";for(var i=0;i<arrs.length;i++){tem+="<option>"+arrs[i]+"</option>";//使用字符拼接，把全部的内容和option便签拼接到一个字符串里面}tv.innerHTML=tem;//使用innerHtml往第二个select里面注入内容}
</script>
</body>
</html>

DOM和BOM

DOM：文本对象模型

DOM是整个页面映射为一个多层节点结构的节点树，是把HTML标签节点还有属性节点文本节点封装成了一个对象，
HTML页面中的每个组成部分都是某种类型的节点。借助DOM提供的方法和属性，可以进行删除、添加、替换或修改任何节点。

DOM的三个重要的节点：（html在浏览器内存里都加载成一个DOM 树）

标签节点
文本节点(空格也是文本)
属性节点

DOM注意问题：

一个html 只能存在一个根标签,并且根标签没有父元素
标签可以存在兄弟元素，以及父元素

DOM节点图：

BOM：浏览器对象模型

浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。

BOM 与DOM 之间的关系

BOM 表示浏览器对象既window(窗口对象) DOM表示节点对象
BOM 包含DOM 对象

jquery介绍和使用

jquery是什么？

就是对js的代码的底层的封装，实现同样的功能，使用简单的代码来实现
jquery 做了很多css的适配

jquery的使用：

在项目中导入jquery文件
引入jquery文件(一般在头部)

<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.js"></script>
</head>

jquery 版本： jquery-1.8.3.js（比较常用,稳定性比较好）其中jquery-1.8.3.min.js
代码都是一样的, min.js 属于压缩版(只是去除了空格与换行) 占的空间比较小(上线的项目==>打包的项目越小越好)
jquery-1.8.3.js 标准版本适合学习,适合查看相关的源代码

jquery 准备函数

<head><script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<script>//第一种准备函数$(function () {//在这里写执行的代码});//第二种准备函数$(document).ready(function () {//在这里写执行的代码})
//$==>表示的就是jquery
</script>
</body>

jquery 获取节点的三种方式

<body>
<input type="text" id="tv_text" class="tv_text_class">
<script>//第一种准备函数$(function () {var jQobject=$("input");//通过便签选择器获取JQ节点对象var jQobject2=$("#tv_text");//通过id选择器获取JQ节点对象var jQobject3=$(".tv_text_class");//通过类选择器获取});</script>
</body>

注意事项:

1.选择器获取的时候小括号才用"" ==> $("#tv_input")
2.变量的时候都不需要加""
注意错误提示： $ is not defined ==> 表示jquery文件没有引入

JavaScript和jQuery的转换

jquery 与js 中的属性与方法能不能相互调用

jquery ==> 转换成js 对象：(jquery 其实就是js 的一个数组)

$tv_input[0];//此时表示JavaScript对象
js ==> 转换成jquery 对象：

var tv_input= document.getElementById(“tv_input”);==>$(tv_input)；//不需要双引号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.js"> </script>
</head>
<body>
<input type="text" class="cla" id="id_cla" value="确定">
<script>//jq的预加载方式一$(function () {//如果不导入jq包会报$符号为未定义//jq三种选择器：// alert($("input").val());
// alert($("#id_cla").val())
//         alert($(".cla").val());
//         jq不能使用js的定义的方法和属性，所以需要转化//         var tem=$("#id_cla");//jq节点对象转换为js节点对象
//        alert(tem[0].value) ;//jq对象就是js对象的数组，这里只有一个input直接使用下标0代表这个js对象var tv_id= document.getElementById("id_cla");//js获取节点对象alert($(tv_id).val());//js节点对象转换为jq节点对象，注意不需要双引号，传进去的对象变量})
//alert()方法是window对象的成员方法</script>
</body>
</html>

jquery 常用的方法

val()==>获取input 标签的value值

$("#tv_input").val(“您好”); 给value赋值
html() ==> 获取标签的value 值

$("#tv_main").html(“您好,哈哈”) ==》不会识别标签也就是不能忽略便签于文本，会把标签和文本一起获取到 ==>这都是方法,不是属性()

text() 获取纯text文本，会忽略标签

<body>
<div id="tv"><span>123</span></div>
<input type="text" value="123">
<script>$(function () {alert($("#tv").html());//返回id选择器里面的包括子标签在内的内容，<span>123</span>alert($("#tv").text())//返回纯文本123alert($("input").val())//返回value的值})
</script>
</body>

jQuery事件

jQuery事件和JavaScript事件的区别：

没有前缀on
对同一个节点给不同事件，可以连着写
主要在html中命名不适用

常用事件：clik（）点击事件,blur（）,失去焦点事件，focus（）获取焦点等

使用jq实现表单功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.js"></script>
</head>
<body><p>请输入用户名：<input type="text" id="tv_id"><span id="tv_id_span"></span></p>
<p>请输入密码：<input type="password" id="tv_pass"><span id="tv_pass_span"></span></p>
<p>确认密码：<input type="password" id="tv_re_pass"><span id="tv_re_pass_span"></span></p>
<script>//jq里 的方法可以连续点$(function () {$("#tv_id").blur(function () {//回调函数var tv_id=$("#tv_id").val();//通过val()获取值判断是否是空if(tv_id==""||tv_id==null){$("#tv_id_span").html("输入为空");}}).focus(function () {$("#tv_id_span").html("");});//$("#tv_re_pass").blur(function () {//确认密码var tv_re_pass=$("#tv_re_pass").val();var tv_pass=$("#tv_pass").val();if (tv_re_pass!=tv_pass){$("#tv_re_pass_span").html("密码不一致");}}).focus(function () {$("#tv_re_pass_span").html("");});});
</script>
</body>
</html>

jquery 提供的常规的方法：

hide()隐藏	show()显示	toggle() 又显示又隐藏
slideUp() 隐藏	slideDown() 显示	slideToggle() 又显示又隐藏自带一个上下动画的效果
fadeOut() 隐藏	fadeIn() 显示	fadeToggle() 又显示又隐藏; 自带一个淡入淡出的效果

    <!--引入jquery 文件--><style>div{width: 200px;height: 200px;background: red;}</style>
</head>
<body><input type="button"  id="tv_hide" value="隐藏"><input type="button"  id="tv_show" value="显示"><input type="button"  id="tv_show_hide" value="显示隐藏">
<div id="tv_div">
</div>
<!--jquery 提供一组方法--><script>$("#tv_hide").click(function () {$("#tv_div").fadeOut(2000);//$("#tv_div").slideUp(2000);/* $("#tv_div").hide(2000,function () {//在隐藏操作完成后执行alert("您好")});*/});$("#tv_show").click(function () {$("#tv_div").fadeIn(2000);//$("#tv_div").slideDown(2000);/* $("#tv_div").show(2000,function () {alert("哈哈哈哈")});*/});$("#tv_show_hide").click(function () {$("#tv_div").fadeToggle(2000);// $("#tv_div").toggle(2000);// $("#tv_div").slideToggle(2000);});</script>

使用jq实现广告弹出效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.js"></script><style>body {margin: 0;padding: 0;}div {width: 500px;height: 500px;background: red;}</style>
</head>
<body>
<img id="tv_img" src="image/1.jpg" width="100%" style="display: none">//隐藏
<img src="image/2.jpg" width="100%"><script>$(document).ready(function () {//准备函数，在界面加载完后执行 jq的预加载方式二setTimeout("tv_show()", 2000);});function tv_show() {$("#tv_img").show(2000, function () {//回掉函数setTimeout("tv_hide()", 2000);});}function tv_hide() {$("#tv_img").hide(2000);}
</script>
<!--<input id="tv_hide" type="button" value="隐藏">
<input id="tv_show" type="button" value="显示">
<input id="tv_hide_show" type="button" value="既隐藏又显示">
<div id="tv_div"></div><script>$("#tv_hide").click(function () {// $("#tv_div").hide(2000);//左上角移动隐藏// $("#tv_div").slideUp(2000);//向上活动隐藏div$("#tv_div").fadeOut(2000);//渐进式隐藏div});$("#tv_show").click(function () {// $("#tv_div").show(2000);右下角移动显示div// $("#tv_div").slideDown(2000);//向下活动展示div$("#tv_div").fadeIn(2000);//渐进式显示div});$("#tv_hide_show").click(function () {// $("#tv_div").toggle(2000);// $("#tv_div").slideDown(2000);//隐藏时点击就是显示，显示时点击就是隐藏$("#tv_div").fadeToggle(2000);});
</script>-->
</body>
</html>

jquery 的选择器

层次选择器(父子或者是兄弟关系的)

A B =>$(A B) ==>获取A 标签下所有的元素(包含孙子元素)
A>B =>$(A>B) ==>获取A标签所有的元素（不包含孙子元素）
A+B =>$(A+B)==>获取A标签的兄弟元素(紧挨着的第一个兄弟元素)
A~B =>$(A~B)==>获取A标签下所有的兄弟元素

<input type="button" value="确定" onclick="getElment()">
<div id="tv_main"><div>0000</div><div>11111</div><div>222</div><div>3333</div><div>444</div><div>555</div><div>666</div><div>777</div><span><div>8888</div></span>
</div><div>9999</div><div>101010101</div><span><div>12121213131414</div></span><script>function getElment() {/*获取A 标签下所有的元素(包含孙子元素)*//*var   tv_div =  $("#tv_main div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//*获取A标签所有的元素（不包含孙子元素）*//* var   tv_div =  $("#tv_main>div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//*获取A标签的兄弟元素(紧挨着的第一个兄弟元素)*//* var   tv_div =  $("#tv_main+div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}*//* 获取A标签下所有的兄弟元素*/var   tv_div =  $("#tv_main~div");for(var  i=0;i<tv_div.length;i++){alert(tv_div[i].innerHTML);}}  </script>

过滤选择器

$(“div:even”) 表示所有偶数项的div 注意点:索引是从0 开始的
$(“div:odd”); 表示所有奇数项的div 注意点:索引是从0 开始的
$(“div:eq(4)”) 获取到索引为4 的div元素
$(“div:gt(4)”); 获取到索引大于的div元素
$(“div:lt(4)”) 获取小于4 的div元素

$(“div:not(div:odd)”) 表示取相反的结果

<input type="button" onclick="show()" value="提交"><div>00000</div><div>111111</div><div>222222</div><div>33333</div><div>444444</div><div>555555</div><div>666666</div><div>777777</div><div>888888</div><!--获取所有偶数项的div--><script>function  show() {/*  var    nums = $("div:even");*/// var    nums = $("div:odd");// var  nums =$("div:eq(4)");// var  nums =$("div:gt(4)");//var  nums =$("div:lt(4)");var  nums =$("div:not(div:odd)")for(var  i=0;i<nums.length;i++){alert(nums[i].innerHTML);}}</script>

针对input标签的属性选择器

$("[type]"); 获取存在属性type所有的节点
$("[type=text]"); 获取所有属性type=text的节点对象
$("[type*=o]") 获取type 的值中包含o的节点对象
$(“input[type=radio][id=tv_select]”) 同时满足 type=radio id=tv_select 的input标签
$(“input:disabled”); 获取input 标签禁用的value值
$(“input:checked”); 获取到单选或者复选框选中的节点

$("#tv_main>option:selected"); 获取当前select下所选中的值

<body><input type="button" value="确定" onclick="show()"><input type="text"  value="11111" disabled><input type="text"  value="222222"><input type="radio"   name=" sex" value="男"> 男<input type="radio"  id="tv_select" checked  name=" sex" value="女"> 女<select id="tv_main"><option value="0" >0</option><option value="1" selected>1</option><option value="2">2</option></select><!--获取所有存在属性为type的value值--><script>function show() {var  tv_type = $("#tv_main>option:selected");for(var i=0;i<tv_type.length;i++) {alert(tv_type[i].value);}// alert($("[type]").size())/*var  tv_type = $("[type]");for(var i=0;i<tv_type.length;i++){alert(tv_type[i].value);}*/// var  tv_type =  $("[type=text]");/*获取type 的值中包含o的节点对象*/// var tv_type =$("[type*=o]");/*     var  tv_type =$("input[type=radio][id=tv_select]")for(var i=0;i<tv_type.length;i++){alert(tv_type[i].value);*//*}*//*获取禁用的value 值*/// var tv_type =$("input:disabled");/*获取选中的value值*//*  var  tv_type =$("input:checked");for(var i=0;i<tv_type.length;i++) {alert(tv_type[i].value);}*/}</script>

jquery 操作样式

jquery 添加样式：如：$("#tv_div").addClass(“getClass”);

注意问题：1. 必须要双引号 2.不需要加.
jquery删除样式：$("#tv_div").removeClass(“getClass”);

<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.8.3.js"></script><style>.getClass{//操作的样式width: 100px;height: 100px;background:red;}</style>
</head>
<body><input type="button" onclick="addClass()"  value="添加样式"><input type="button" onclick="deleteClass()"  value="删除样式"><div id="tv_div"></div><script>function addClass() {$("#tv_div").addClass("getClass");//添加样式}function deleteClass() {$("#tv_div").removeClass("getClass");//移除样式}</script></body>

更多推荐

javaWeb学习第四天

本文发布于:2024-03-23 23:48:17，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1744279.html

上一篇： Android实战简易教程
下一篇：【WINDOWS / DOS 批处理】变量扩充

发布评论取消回复

评论列表（有 0 条评论）

javaWeb学习第四天