2021-08-20 WEB前端课堂笔记Day06

1 BOM(浏览器对象模型)

BOM 提供了独立于内容,可以与浏览器窗口进行互动的对象结构

对象层级:
请添加图片描述

1.1 BOM的作用

  • 弹出新的浏览器窗口
  • 移动和关闭窗口以及调整窗口大小
  • 页面的前进和后退

1.2 常用属性

history 关于客户访问过的URL信息

location 当前的URL信息

// 使用语法
window.属性名 = "属性值";
window.location = "http://www.baidu.com";

2.3 常用方法

名称描述
prompt()提示用户输入的对话框
alert()显示一个带有提示信息和确定按钮的警告框
confirm()显示一个带有提示信息 确定 取消按钮的对话框
close()关闭浏览器窗口
open()打开一个新的浏览器窗口 加载给定的URL所指定的地址
setTimeout()在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(毫秒) 来调用函数或表达式

alert()、prompt()、confirm()的区别

alert 有一个参数,仅起警告作用,无返回值,不改变脚本

prompt 有两个参数,收集用户关于特定问题的信息反馈,有确认和取消按钮,有返回值

confirm 一个参数 ,对用户的操作进行二次确认,有确定和取消按钮,有返回值

2.4 History对象

常用方法

名称描述
back()加载history对象列表中的前一个url
forward()加载history对象列表中的下一个url
go()加载history对象列表中的某个具体的url

histiry.back()------等价于----history.go(-1) 就是浏览器的后退

history.forward()-----等价于-----history.go(1) 就是浏览器的前进

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页 (重新加载当前页面的url)</a>  
//控制超链接a不跳转页面  取消的默认行为
href="javascript:void(0)"(推荐)
href="#"

2.5 定时器

setTimeout

setInterval

 //  在指定的时间(3000毫秒)之后 执行函数  而且只执行一次
            setTimeout("alert('3 seconds')",3000);
           //  在指定的时间(3000毫秒)之后 执行函数   会循环执行 两次执行之间的时间间隔为(3000毫秒)
            setInterval("alert('3 seconds')",3000);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script>

        function getTime(){
            var now = new Date();//获取系统当前时间
            var  h = now.getHours();
            var m = now.getMinutes();
            var s = now.getSeconds()
            document.getElementsByTagName("h1")[0].innerHTML ="现在是北京时间:" +h+":"+m+":"+s;
        }
        // 设定定时器并开始计时
        var clock = setInterval("getTime()",1000);
        // 如果定时器是setTimeout定时器  则取消定时器使用clearTimeout();
        function endTime(){
                clearInterval(clock);
        }
    </script>
</head>
<body>
    <input type="button" value="结束" onclick="endTime()">
    <h1></h1>
</body>
</html>

3 JQuery

是目前最流行的JavaScript类库,是对JavaScript对象和函数的封装

版本:压缩版(实用环境)未压缩版(开发环境)

各版本的差异:

JQuery 1.X 兼容性强,兼容IE 5/6/7/8

JQuery 2.X 不再支持IE 5/6/7/8

JQuery 3.X 全面支持HTML5和CSS3

JQuery 2.0以上版本都不再支持IE 6/7/8

3.1 JQuery的使用

第一种:使用网络资源

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

第二种:使用本地资源

请添加图片描述

3.2 JQuery的作用

  • 访问和操作DOM元素
  • 控制页面
  • 对页面事件进行处理
  • 扩展新的JQuery插件
  • 与AJAX技术完美结合

3.3 优势

  • 体积小,压缩后小于100k
  • 强大的选择器
  • 出色的DOM封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性
  • 可以使用隐式迭代简化编程
  • 插件丰富

JQuery的入口函数

   $(document).ready(function(){
        $("li:even").css("background-color","#e8f0f2");
        $("li:odd").css("background-color","red");
    })
// 简化写法
     $(function(){// window.οnlοad= function(){}
         $("li:even").css("background-color","#e8f0f2");
         $("li:odd").css("background-color","red");
     })

3.4 $(document).ready 和 window.onload 的区别

window.onload$(document).ready
执行时机必须等待网页中所有的内容(图片 视频 flash等)加载完毕后才能执行网页中所有的DOM文档结构绘制完毕即刻执行
编写的个数在一个页面中不能同时编写多个同一页面中可以同时编写多个
简化形式$(function(){ })

3.5 语法结构

$(选择器).action()

工厂函数$():将DOM对象转换为JQuery对象

选择器selector:获取需要操作的DOM元素

方法action():JQuery提供的方法,包括时间处理方法

3.6 页面元素的操作

addClass() 给元素添加样式

    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
        // 使用ID选择器,#idName
        // 添加的样式必须在css中存在
            $("#apple").addClass("red");
        })
      </script>

css() 给元素设置样式

    <script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 使用ID选择器
            $("#apple").addClass("red");
            //元素选择器
            $("li").mouseover(function(){
                $(this).css({"background":"green","color":"yellow"});
            })
            $("li").mouseout(function(){
                $(this).css({"background":"#fff","color":"#000"});
            })
        })
	</script>

show()和hide() 设置元素的显示和隐藏

$(function(){
    //同时给li绑定鼠标进入和鼠标离开事件  链式编程
    $("li").mouseover(function(){
        $(this).css({"background":"orange"})
        $(this).children("div").show();//显示div
    }).mouseout(function(){
        $(this).css({"background":"rgb(222,0,0)"})
        $(this).children("div").hide();//隐藏div
    })

3.7 代码风格

链式操作 :

//多一个对象进行多重操作,并将操作结果返回给该对象
$("h2").css("background-color","#CCFFFF").next().show();

隐式迭代:

<script src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function(){
            // 隐式迭代
             $("li").css({"font-weight":"bold","color":"red"});
        })
      </script>

3.8 DOM对象和JQuery对象

DOM对象就是直接使用JS获取的结点对象

var li  = document.getElementById("title")

JQuery对象 使用JQuery包装DOM对象后产生的对象 就是JQuery对象 它能够是用JQuery的方法

var li  = document.getElementById("title");
var $li = $(li)  // 将dom对象转换为JQuery对象  jquer对象命名一般以$开头
var li  = document.getElementById("title")innerHTML;
$(li).html();  //  相同

在事件中 经常会使用$(this) this就是触发事件的对象

JQuery对象转换为DOM对象

JQuery对象是一个类似于数组的对象,可以通过索引[index]方法得到对应的DOM对象,除此之外 还可以使用JQuery提供的get方法来获取的相应的DOM对象

var $li = $("li");
var firstLi = $li[0];// 得到了一个DOM对象
var firstLi = $li.get(0);// 得到了一个DOM对象
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ava实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),可运行高分资源 Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现的毕业设计&&课程设计(包含运行文档+数据库+前后端代码),Java实现
C语言是一种广泛使用的编程语言,它具有高效、灵活、可移植性强等特点,被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构(如if语句、循环语句等)、函数、指针等。下面详细介绍C语言的基本概念和语法。 1. 变量和数据类型 在C语言中,变量用于存储数据,数据类型用于定义变量的类型和范围。C语言支持多种数据类型,包括基本数据类型(如int、float、char等)和复合数据类型(如结构体、联合等)。 2. 运算符 C语言中常用的运算符包括算术运算符(如+、、、/等)、关系运算符(如==、!=、、=、<、<=等)、逻辑运算符(如&&、||、!等)。此外,还有位运算符(如&、|、^等)和指针运算符(如、等)。 3. 控制结构 C语言中常用的控制结构包括if语句、循环语句(如for、while等)和switch语句。通过这些控制结构,可以实现程序的分支、循环和多路选择等功能。 4. 函数 函数是C语言中用于封装代码的单元,可以实现代码的复用和模块化。C语言中定义函数使用关键字“void”或返回值类型(如int、float等),并通过“{”和“}”括起来的代码块来实现函数的功能。 5. 指针 指针是C语言中用于存储变量地址的变量。通过指针,可以实现对内存的间接访问和修改。C语言中定义指针使用星号()符号,指向数组、字符串和结构体等数据结构时,还需要注意数组名和字符串常量的特殊性质。 6. 数组和字符串 数组是C语言中用于存储同类型数据的结构,可以通过索引访问和修改数组中的元素。字符串是C语言中用于存储文本数据的特殊类型,通常以字符串常量的形式出现,用双引号("...")括起来,末尾自动添加'\0'字符。 7. 结构体和联合 结构体和联合是C语言中用于存储不同类型数据的复合数据类型。结构体由多个成员组成,每个成员可以是不同的数据类型;联合由多个变量组成,它们共用同一块内存空间。通过结构体和联合,可以实现数据的封装和抽象。 8. 文件操作 C语言中通过文件操作函数(如fopen、fclose、fread、fwrite等)实现对文件的读写操作。文件操作函数通常返回文件指针,用于表示打开的文件。通过文件指针,可以进行文件的定位、读写等操作。 总之,C语言是一种功能强大、灵活高效的编程语言,广泛应用于各种领域。掌握C语言的基本语法和数据结构,可以为编程学习和实践打下坚实的基础。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值