首页 前端知识 Web服务端技原理及应用:JavaScript (JS)和 jQuery

Web服务端技原理及应用:JavaScript (JS)和 jQuery

2025-02-26 11:02:42 前端知识 前端哥 894 696 我要收藏

1 JavaScript : <script> </script>

1.1 简介

概念

        JavaScript是一种运行于浏览器端上的脚本语言,可以实现网页如文本内容更新,数据动态变化和动画特效等。

作用     

        JavaScript 操作HTML页面元素元素属性事件,使页面具有动态效果

功能

        数据校验

        页面内容的动态处理

        页面动画

        控制浏览器行为

与HTML、CSS的关系

        HTML可以用于制作网页的主体结构

        CSS用于给网页做美化

        JS用于在网页上绑定事件,添加动态效果

组成部分

90d9b6aff4ec4bcf82cd6380102ac97f.png

        ECMAScript理解为JS的基础语法部分

        DOM简单理解为,使用document对象操作文档内容的编程         

        BOM理解为,使用window对象操作浏览器行为的编程

引入方式

f89176742a0f4a4d8c4dcd11368eb0c6.png

1.嵌入式引入

        代码复用度低,可维护性低 可阅读性差

2.链接式引用

        代码复用度高,更易于维护

注意:

        可以多次引入

        每次引入使用单独的script标签

        内嵌式和链接式不能混写

1.2 JavaScript基本语法

        变量:一小块存储数据的内存空间

        语法:

                var 变量名 = 初始化值;        

                typeof运算符:获取变量的类型。  

        注:null运算后得到的是object

特殊语法:

        语句以;结尾,

        如果一行只有一条语句则 ;可以省略 (不建议)

        变量的定义使用var关键字,也可以不使用

                主要区别在于作用域属性管理

                1:作用域

                使用var,函数内部,局部变量 ; 函数外部,全局变量。

                不使用var,全局变量。

                2:属性管理

                体现在变量是否具有可删除性。

JavaScript数据类型

        1.number:数字。 整数/小数/NaN(not a      number 一个不是数字的数字类型)

        2.string:字符串。 字符串  "abc" "a" 'abc'

        3.boolean: true和false

        4.null:一个对象为空的占位符

        5.undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

JavaScript数据类型特点

        JS是弱类型的脚本语言,所有的变量对象的数据类型的都可以声明是var

        变量赋值时确定变量数据类型

        当给一个变量赋值为null时,变量的类型为 object

        变量只声明不赋值的情况下,数据和数据类型都显示 undefined

        JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突

JavaScript流程控制 && 编程!!!

cfdea6c14af04533a9da93385fc6c00e.png

1.3 基本对象

1.数组Array

5f27f9ebf60744c19c46b4821a6620b4.png

 遍历方式

        普通for循环遍历数组

        foreach循环遍历数组

修改长度

        通过修改length属性来改变数组长度

        通过索引(添加元素)改变数组的长度

常用方法

     2f6a283bae504f8a9a8b385846d5cf7e.png  

2.数组String

charAt() 

返回在指定位置的字符。

charCodeAt() 

返回在指定的位置的字符的 Unicode 编码。

startsWith() 

查看字符串是否以指定的子字符串开头。

substring() 

提取字符串中两个指定的索引号之间的字符。

indexOf() 

返回某个指定的字符串值在字符串中首次出现的位置。

includes() 

查找字符串中是否包含指定的子字符串。 

trim() 

去除字符串两边的空白。

match() 

查找找到一个或多个正则表达式的匹配。 

repeat() 

复制字符串指定次数,并将它们连接在一起返回。

replace() 

在字符串中查找匹配的子串, 并替换与正则表达式匹配的子串。 

split() 

把字符串分割为字符串数组。 

3.数组Math

408c015cc6754f8bb13863f610fdf170.png

Math.random()产生随机数,范围[0,1),怎么利用函数生成[1,100]的整数?

b34ac9e02e424643b971bba43223024c.png

2 jQuery

2.1 概念及作用

        jQuery 是⼀套兼容多浏览器的 javascript 脚本库。用于简化HTML文档的遍历、事件处理、动画和Ajax交互,以便快速进行网页开发。核⼼理念是写得更少,做得更多。

优点

(1)提供了强⼤的功能函数

(2)实现丰富的 UI 和插件

(3)解决浏览器兼容性问题

(4)纠正错误的脚本知识

JQuery核心

        $ 符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核⼼对象。通过该对象可以获取jQuery对象,调⽤jQuery提供的⽅法等。只有jQuery对象才能调⽤jQuery提供的⽅法

2.2 选择器

1.基础选择器

134cb40d5d634983bd27286b17347cd3.png

2.层次选择器

2a1232deb13a44308d203fb671013d44.png

2.3 事件

1.入口函数

b9542d60b8dd4def8d2992b61fa53502.png

2.事件绑定

a1ec3f14bb6a4a3297de3b1b114c56f4.png

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/21557.html
标签
评论
发布的文章

库制作与原理

2025-02-26 11:02:28

仿12306项目(1)

2025-02-26 11:02:27

2.25 链表 2 新建链表 82

2025-02-26 11:02:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!