zoukankan      html  css  js  c++  java
  • 自学JavaWeb第四天JavaScript进阶和jQuery入门

    第四讲JavaScript进阶和jQuery入门

    一、BOM模型

      

    BOM对象: 即浏览器对象模型;

    作用:

    用来执行浏览器的相关操作(浏览器地址栏, 弹出消息);

     

    BOM对象有一个核心对象: Window, 它还包含了6个核心模板:

     

    Document: 文档对象模型

    Frames: HTML自身框架(基本不用)

    History: 页面的历史记录(了解)

    Location: 即当前的地址(重点强调)

    Navigator: 包含浏览器相关的操作(基本不用)

    Screen: 用户显示屏幕的相关信息(基本不用)

    注意:

    所有的浏览器都支持window对象,它表示浏览器窗口, 调用函数时window可以省略;

    (一)window定时器

    定时器包含两种定时器:

    1. 循环定时器

    定义: 是调用一次循环定时器并循环创建并执行一个定时器, 可以是执行多次;

    启动:

    Var timeId = Window.setInterval(参数1, 参数2);

    参数:

    参数1: 要执行的方法

    参数2: 毫秒值

    停止:

    clearInterval(timeId);

     

    1. 一次性定时器

    定义: 是调用一次就会创建并执行一次定时器, 只能执行一次;

    启动:

    Var timeId = Window.setTimeOut(参数1, 参数2);

    参数:

    参数1: 要执行的方法

    参数2: 毫秒值

    停止:

    clearTimeout(timeId);

     

    补充:

    页面加载方式: onload事件

    有两种加载方式:

    第一种:

     

    第二种:

     

    1、案例-轮播图

    需求说明: 实现轮播图案例

     

    需要编写程序,完成自动切换图片功能。

    2 秒切换一次图片。

    代码准备: 页面原型详见(资料)

     

    2、案例-定时显示图片

    需求说明:

    网站顶部在页面打开两秒后显示广告图

    广告图展示两秒后关闭广告图

     

    代码准备: 页面原型详见(资料)

    .hiddenImg {

    display: none;// 隐藏

    display: inline-block;//显示

    }

     

    3、案例-显示系统当前时间

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8" />

    <title>显示系统当前时间</title>

    </head>

    <body>

    <div id="time"></div><br />

    <input type="button" id="btn" value="停止刷新" onclick="stopTime()" />

    </body>

    </html>

     

    (二)window弹出框

    window 对象有三种类型的弹出框:警告框、确认框和提示框。

    通常在书写时可以省略前面的 window 前缀。

    函数名

    描述

    alert()

    显示带有一段消息和一个确认按钮的警告框

    confirm()

    显示带有一段消息以及确认按钮和取消按钮的确认框

    prompt()

    显示可提示用户输入的提示框

    点击确定获得用户输入数据

    代码准备

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>window弹框</title>

    </head>

    <body>

    <input type="button" value="警告框"  onclick="fun1()"/>

    <input type="button" value="确认框" onclick="fun2()"/>

    <input type="button" value="提示框" onclick="fun3()"/>

    </body>

    </html>

     

    (三)Window其它对象

    1、Window Location

    window.location 对象可用于获取当前页面地址(URL)并把浏览器重定向到新页面

     

    地址栏:

     

    如何获取地址栏地址:

    如何设置地址栏地址:

     

    2、Window History

    window.history 对象包含浏览器历史

    方法

    描述

    history.back()

    等同于在浏览器点击后退按钮

    history.forward()

    等同于在浏览器中点击前进按钮

    浏览器内置好了历史记录;

    3、Window Screen

    Screen: 包含有关用户屏幕的信息(相当于屏幕分辨率)

    方法

    描述

    screen.availWidth

    可用的屏幕宽度,以像素计,减去界面特性,比如窗口任务栏。

    screen.availHeight

    可用的屏幕高度,以像素计,减去界面特性,比如窗口任务栏。

     

    4、Window Document

    方法

    描述

    document.body.offsetWidth

    网页可见区域的宽度(包括连线的宽)

    document.body.offsetHeight

    网页可见区域的高度(包括连线的高)

     

    (四)扩展案例-桌面弹球

    需求:

    编写一个小球, 让小球左右移动, 实现桌面弹球的效果

     

     

     

     

     

     

    二、jQuery基本介绍

    (一)jQuery简介

     

    jQuery是一个优秀的JS框架(js)

    特点:

    它兼容css, 还兼容各种浏览器

    文档说明很全(API/菜鸟教程)

    应用很详细, 成熟插件较多;

    例如: Bootstrap, jQuery-invalidate插件, EasyUI;

    (二)jQuery使用步骤

    1、jQuery下载

    下载地址:https://jquery.com/

     

    点击下载后进入下载页面

     

    解压后的jQuery文件:

     

    压缩版和未压缩版的区别:

    功能上没有任何区别;

    区别: 压缩版将空格, 注释, 换行全部删掉了(文件大小变小了)

    压缩版有什么好处:

    1. 由于压缩版做了简单的加密, 可以保护js不会被泄露;
    2. 压缩版的体积变小, 网页加载速度提升了;

    2、jQuery引入

     

    jQueryjs文件未引入;

     

    3、jQuery基本语法

    写法格式:

    1. jQuery(选择器)
    2. $(选择器)(此方法用的最多)

    jQuery等价于$;

     

    4、jQuery页面加载

    jQuery提供了ready()函数,用于页面加载成功后执行。与window.onload函数作用一致。写法有以下三种:

     

    (三)DOM对象和jQuery对象转换

    获取js对象: document.getElementById("username");

    获取jQuery对象: $("#username")

    在实际开发中:

    Js代码和jQuery代码时同时存在的; js对象不能调用jQuery的方法, jQuery对象不能调用js的方法;

    相互转换:

    jQuery对象转DOM对象:

    写法格式:

    Var js对象 = jQuery对象[index];

     

    DOM对象转jQuery对象:

    写法格式:

    Var jQuery对象 = $(js对象)

     

    三、jQuery选择器

    jQuery 选择器是 jQuery 强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。从而完成元素属性和行为的处理。

    (一)基本选择器

    基本选择器是我们使用频率最高的选择器。

    标签选择器,  id选择器,  类选择器,  全局选择器

    代码准备

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>选择器</title>

    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>

    </head>

    <body>

    <p id="title" class="first">我是p标签1</p>

    <p class="first">我是p标签2</p>

    <p>我是p标签3</p>

    </body>

    </html>

     

    (二)层级选择器

    层级选择器指按节点树的层级关系获取元素。通俗一点讲就是子孙元素/父子元素/兄弟元素的关系。

    主要有:

    A B 使用空格隔开。获得 A 元素内部的所有的 B 元素。 (父子关系/爷孙关系)

    A>B 使用>符号隔开。获得 A 元素下面的所有 B 子元素。(父子关系)

    A+B 使用+隔开。获得 A 元素同级下一个 B 元素(兄弟关系, 同级)

    A~B 使用~隔开。获得 A 元素之后的所有 B 元素(兄弟关系, 所有弟弟)

    代码准备

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>层级选择器</title>

    <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

    <script type="text/javascript">

    $(function(){

    //1、获取idmainspan标签 内 所有的div标签

     

    //2、获取idmainspan标签 内 子元素div标签

     

    //3、获取idmainspan标签 后 第一个div兄弟标签

     

    //4、获取idmainspan标签 后 所有的div兄弟标签

     

    });

    </script>

    </head>

    <body>

    <span id="main">

    <div>111111</div>

    <div>222222</div>

    <div>333333</div>

    <span>

    <div>44444</div>

    </span>

    </span>

    <div>55555</div>

    <span>

    <div>66666</div>

    </span>

    <div>77777</div>

    </body>

    </html>

     

     

     

    (三)过滤选择器

    过滤选择器是从获取的对象列表中再次筛选想要的元素。

    常用的过滤选择器有:

    :first 第一个

    :last 最后一个

    :eq(index)  指定索引的元素

    :gt(index)  大于index索引的元素

    :lt(index)  小于index索引的元素

    :even 偶数   索引都是从0开始

    :odd 奇数

    :not() 除了** 之外   abcd  :not(ab)==>cd

    代码准备

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>过滤选择器</title>

    <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

    <script type="text/javascript">

    $(function(){

    //1、在所有DIV标签中,获取第一个div

     

    //2、在所有DIV标签中,获取最后一个div

     

    //3、在所有DIV标签中,获取所有偶数位的div

     

    //4、在所有DIV标签中,获取所有奇数位的div

     

    //5、在所有DIV标签中,获取除了第一位以外所有的div

     

    //6、在所有DIV标签中,获取索引等于1div

     

    //7、在所有DIV标签中,获取索引大于1div

     

    //8、在所有DIV标签中,获取索引小于1div

     

    });

    </script>

    </head>

    <body>

    <div>11111111,索引是0</div>

    <div>22222222,索引是1</div>

    <div>33333333,索引是2</div>

    <div>44444444,索引是3</div>

    <div>55555555,索引是4</div>

    <div>66666666,索引是5</div>

    <div>77777777,索引是6</div>

    <div>88888888,索引是7</div>

    </body>

    </html>

     

     

    (四)属性选择器

    <input type="text" name="username" id="username" />

    我们可以通过属性选择器以属性名或者属性值来匹配对应标签 

    [属性名] 获得有 指定属性名 的标签对象。   $(“[name]”)

    [属性名=] 获得 指定属性名等于指定值 的标签对象  $(“[name=’username’]”)

    [属性名*=] 获得 指定属性名 含有 指定值 的标签对象  $(“[name *= n]”)

    注意:

    多个属性选择器可以组合使用

    [选择器 1][选择器 2][选择器 3] 可以多个属性同时过滤。

    代码准备

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>属性选择器</title>

    <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

    <script type="text/javascript">

    $(function(){

    //1、获取所有存在type属性的标签

     

    //2、获取所有type属性为radio的标签

     

    //3、获取所有type属性含有o的标签

     

    //4、获取所有input标签中的单选框,且namesex的标签

     

    });

    </script>

    </head>

    <body>

    用户名:<input type="text" name="uname" value="小刘"/><br />

    密码:<input type="password" name="pwd" value="123"/><br />

    性别:<input type="radio" name="sex" value="man" />

    <input type="radio" name="sex" value="woman" /><br />

    是否VIP<input type="radio" name="vip" value="no" />不是

       <input type="radio" name="vip" value="yes" /><br />

    </body>

    </html>

     

    (五)表单选择器

    表单选择器分为基本表单选择器和表单过滤器。

    基本表单选择器:

     

    表单过滤器:

     

    代码准备:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>表单选择器</title>

    <script type="text/javascript" src="js/jquery-3.4.1.js" ></script>

    <script type="text/javascript">

    $(function(){

    //获取可用的表单输入项

     

    //获取不可用的表单输入项

     

    //获取选中的复选框

     

    //获取国家下拉框中,被选中的option

     

    });

    </script>

    </head>

    <body>

    <h1>不可用的表单输入项</h1>

    <input type="text" disabled="disabled" />

    <input type="button" value="不可用按钮" disabled="disabled" />

    <h1>复选框</h1>

    <input type="checkbox" name="hobby" value="code"/>编程

    <input type="checkbox" name="hobby" value="swimming" checked="checked"/>游泳

    <input type="checkbox" name="hobby" value="reading" checked="checked"/>阅读

    <hr />

    <h1>下拉选择框</h1>

    城市:<select id="city">

    <option value="">请选择</option>

    <option value="bj">北京</option>

    <option value="sh">上海</option>

    </select>

    <hr />

    国家:<select id="country" multiple="multiple">

    <option value="China" selected="selected">中国</option>

    <option value="America" selected="selected">美国</option>

    <option value="Russia">俄罗斯</option>

    <option value="England">英国</option>

    </select>

    </body>

    </html>

     

    (六)this

    This: 表示获取当前正在操作的元素对象

    案例:

     

  • 相关阅读:
    MSBuild最佳实践
    Javascript:阻止浏览器默认右键事件,并显示定制内容
    zeptoJS:如何像jQuery一样,让滚动变得优雅?
    Javascript:DOM表格操作
    Javascript:getElementsByClassName
    Javascript:DOM动态创建元素实例应用
    Javascript:倒计时
    Javascript:sort()方法快速实现对数组排序
    探究css !important的应用之道
    Javascript:splice()方法实现对数组元素的插入、删除、替换及去重
  • 原文地址:https://www.cnblogs.com/masterhxh/p/13646723.html
Copyright © 2011-2022 走看看