小白学习Java第二十六天

最新推荐文章于 2024-07-08 16:22:29 发布

sjxxxx_

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量332

点赞数

分类专栏： Java小白文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/sjxxxx_/article/details/126786188

版权

Java小白专栏收录该内容

60 篇文章 4 订阅

订阅专栏

今日内容

BOM模型，重点定时器
jQuery简介
jQuery使用步骤
jQuery选择器
jQuery事件
jQuery中的循环

一、BOM

（一）BOM简介

1、Bom(browser object model)：浏览器对象模型。在浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
2、Bom有一个核心的对象window，window对象包含了6个核心模块
    1、Document对象:文档对象
   2、Frames对象:html的自框架
    3、History对象:页面的浏览记录
    4、Location对象:当前页面的地址
    5、Navigator对象:包含了浏览器相关信息
    6、Screen对象:显示屏幕相关信息

（二）Window

1.介绍

1、所有的浏览器都支持window对象。它表示浏览器窗口，调用函数时window可以省略。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。
2、全局变量是window对象的属性。
3、全局函数时window对象的方法。
4、比如说html dom的document也是window对象的属性之一。
window.document.getElementById(),window可以省略。

2.方法

1、弹窗方法

1. alert(); 显示带有一段消息和一个确认按钮的警告框演示
2. confirm(); 显示带有一段消息以及确认按钮和取消按钮的对话框演示
3. prompt(); 显示可提示用户输入的对话框演示

案例：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//alert()

function fun1(){

alert("我是alert");

}

//confirm():确认框

function fun2(){

var flag = confirm("是否确定要删除？");

console.log(flag);

if(flag){

alert("删除成功");

}else{

alert("删除失败");

}

//prompt() 接收框

function fun3(){

var name = prompt("请输入姓名：","");

console.log(name);

}

</script>

</body>

</html>

2、打开关闭方法

1、var win = open(”打开窗口的路径“); 打开一个新的浏览器窗口
2、win .close(); 关闭浏览器窗口

3、定时器方法

生活定时器：

秒表闹钟定时炸弹

JS中的定时器函数有两种：
    1、周期定时器：按照指定的周期来调用函数或代码串，执行多次。
    var timeid=window.setInterval(code,millisec);
    window.clearInterval(timeid);清除定时器，使定时器停止执行函数或代码串。
    参数说明：
    code:要调用的函数或要执行的代码串。
    millisec:周期性执行或调用 code 之间的时间间隔，以毫秒为单位。
案例：

轮播图案例：

<!DOCTYPE html>

<head>

</head>

<body>

//控制图片下标

var i = 0;

//切换图片

function changeImg(){

//找到图片标签

var img = document.getElementsByTagName("img")[0];

i++;

if(i==6){

i=1;

}

//改变图片路径

img.src = "img/focus"+i+".jpg"

}

//停止轮换

function mystopimg(){

clearInterval(id);

}

//继续轮换

function mystartimg(){

id = setInterval(changeImg, 1000);

}

//调用定时器

var id = setInterval(changeImg, 1000);

</script>

</body>

</html>

         2、超时定时器：在指定的毫秒数后调用函数或代码串，只执行一次。
    var timeid=window.setTimeout(code,millisec);
    window.clearTimeout(timeid);清除定时器,可以阻止定时器的执行。
    参数说明：
    code:要调用的函数或要执行的代码串。
    millisec:在执行代码前需等待的毫秒数。

案例：

<!DOCTYPE html>

<head>

<title>超时定时器</title>

</head>

<body>

function fun(){

console.log("炸弹爆炸");

}

//停止函数

function mystop(){

clearTimeout(id);

}

var id = setTimeout(fun, 3000);

</script>

</body>

</html>

3.属性

History

1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back() - 等同于在浏览器点击后退按钮
（2）history.forward() - 等同于在浏览器中点击前进按钮
3、想要出现前进后退的效果，必须存在路径的跳转！

Location

window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
2、方法:reload():刷新当前页面
3、属性href:获取请求的URL/跳转指定的URL地址中

二、Jquery基本介绍

（一）Jquery简介

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

（二）使用步骤

1. 下载

地址:https://jquery.com/
进入主页如下:

下载后的文件:
jquery-3.6.0.min.js 压缩版
jquery-3.6.0.js 未压缩版
区别:
1.由于压缩版本做了简单的加密，可以保护JS不会被泄露
2.压缩版本文件体积小，网页加载速度快
3.未压缩版JS被格式化

2. 引入

之前JavaScript课程我们讲过外部js文件的引入，如下:
<script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>

3. 使用

在jQuery中，标识符$与jQuery是等价的，即jQuery == $，为了书写简单方便，我们通常使用$替代jQuery。但jQuery是严格区分大小写的。

$() jQuery() 工厂函数

例如：我们可以通过jQuery(选择器) 或 $(选择器)来查找元素。
<!DOCTYPE html>
<html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Jquery的使用</title>
   </head>
   <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
   <script>
   $(function() {
   console.log($("div").html());
      });
   </script>
   <body>
   <div>Hello Jquery</div>
   </body>
</html>

当页面加载的时候会在浏览器输出div标签的内容

二、页面加载

jQuery提供了ready()函数，用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种：
代码示例：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery加载就绪函数</title>
        <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
        <script type="text/javascript">
            /*第一种写法*/
            jQuery(document).ready(function(){
                alert(1);
            })
            /*第二种写法*/
            $(document).ready(function(){
                alert(2);
            })
            /*第三种简化写法*/
            $(function(){
                alert(3);
            })
       </script>
    </head>
    <body>
    </body>
</html>

JQuery的ready()与window.onload的区别：

1.执行时间不同
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
由此可见，$(document).ready()的执行时机要早于window.onload。

2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload，只会执行一个。
$(document).ready()可以同时编写多个，并且都可以得到执行。

3.简化写法
window.onload没有简化写法。
$(document).ready(function(){})可以简写成$(function(){});

三、JS对象与JQuery对象

DOM对象：就是通过原生JavaScript方法获取到的对象就是DOM对象。

document.getElementById()
jQuery对象：就是通过jQuery包装DOM对象后产生的对象。

$(选择器) $(DOM对象)

jQuery对象和DOM对象可以进行相互转换，但是切记两个对象的属性和函数不能彼此混搭使用
DOM对象转jQuery对象，语法：jQuery(DOM对象); 或 $(DOM对象);
jQuery对象转DOM对象，语法：jQuery对象[index]; 或 jQuery对象.get(index);

案例：

<!DOCTYPE html>

<head>

<title>DOM与JQUERY对象</title>

$(function(){

//通过js获取页面中元素内容

/* var domobj = document.getElementById("box");

console.log(domobj.innerText);

var domtxt = document.getElementById("uname");

console.log(domtxt.value); */

//通过jquery获取页面内容

var $jobj = $("#box");

console.log($jobj.text());

var $jtxt = $("#uname");

console.log($jtxt.val());

//DOM--JQUERY

/* console.log($(domobj).text());

console.log($(domtxt).val()); */

//jquery--DOM

console.log($jobj[0].innerText);

console.log($jtxt.get(0).value);

})

</script>

</head>

<body>

</body>

</html>

特殊说明：
1. text()和text(content);分别用来获取或设置类似于div、h*标签等中间的文本内容。
2. val()和val(value);分别用来获取或设置具有value属性的标签的value值。

四、jQuery选择器

jQuery选择器是jQuery强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的定位，从而完成元素属性和行为的处理。
jQuery选择器的分类：
1.基本选择器
2.层级选择器
3.属性选择器
4.过滤选择器
5.表单选择器

（一）基本选择器

基本选择器是我们使用频率最高的选择器。
主要有：标签选择器、ID选择器、类选择器。同css基本选择器。

（二）层级选择器

层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。
主要有：后代选择器、子选择器。
1.后代选择器：parent child, 使用空格隔开。获得父元素内部的所有儿子、孙子...元素。（祖孙关系）
2.子选择器：parent > child ,使用>符号隔开。获得父元素下面的子元素。（父子关系）

（三）属性选择器

根据属性或属性的值进行筛选。
[attribute]              所有带有 attribute属性的元素
[attribute=value]        所有 attribute属性的值等于value的元素
[attribute^=value]          所有 attribute属性的值以value开头的元素

[attribute$=value] 所有 attribute属性的值以value结尾的元素

[attribute*=value] 所有 attribute属性的值包含value的元素

（四）过滤选择器

过滤选择器是从获取的对象列表中再次筛选想要的元素。常用的过滤选择器有：
:first            第一个
:last            最后一个
:eq(index)        指定索引的
:gt(index)         大于索引的
:lt(index)          小于索引的
:odd        奇数
:even         偶数
:not()          除了**
:header          匹配标题,比如h2,h3...

（五）表单属性选择器

表单过滤器：

:selected主要针对下拉列表框被选择的项

（2）:checked主要针对单选按钮和复选框被选中的项

（3）:enabled所有被激活的input元素

（4）:disabled所有被禁用的input元素

五、jQuery事件

（一）jQuery事件绑定

jQuery中的事件与javaScript中的事件类似，只是事件名不再以on开头，在javaScript事件名的基础上去掉on就是jQuery事件。

1、语法介绍

给页面中的某个标签绑定事件，首先需要通过jQuery选择器获取到该元素，然后通过点(.)操作符给该元素绑定不同类型的jQuery事件方法，方法内部是通过事件函数来完成具体的功能。

基本语法：

$(“选择器”).事件方法名(function(){

函数体；

});

例如，我们我要给一个id为btn的按钮绑定一个单击事件，则写法如下：

$(“#btn”).click(functionI(){ 函数体 });

2、常见事件

javaScript事件	jQuery事件	说明
onclick	click()	鼠标单击事件
ondblclick	dblclick()	鼠标双击事件
onmouseover	mouseover()	鼠标悬浮事件
onmouseleave	mouseout()	鼠标离开事件
onkeydown	keydown()	键盘按下事件
onkeyup	keyup()	键盘释放事件
onsubmit	submit()	提交表单事件
onchange	change()	元素值发生改变事件
onfocus	focus()	获得焦点事件
onblur	blur()	失去焦点事件