JavaScript&jQuery基础--源动力

JavaScript是由Netscape公司开发的一种在浏览器中运行的解释性脚本语言(代码执行不进行预编译)。
在html基础上,JavaScript可以开发交互式Web网页。

image.png

JavaScript声明

基本格式:

image.png

注意:JavaScript可以出现在HTML的任意地方
JS可以放置在body
JS可以放置在head
JS可以放置在外部文件

image.png

JavaScript变量&函数

通过 var 语句来声明JavaScript变量。

image.png

变量可用的数据类型有:
1.基本数据类型(值类型):String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
2.引用数据类型(引用类型):Object 对象。

变量声明与赋值

写法1、先声明,再赋值:(正常)

var a;
a = 100;
console.log(a); // 打印结果:100

写法2、不声明,只赋值:(正常)

a = 100;
console.log(a); // 打印结果:100

写法3、只声明,不赋值:(注意,打印 undefined)

var a;
console.log(a); // 打印结果:undefined

写法4、不声明,不赋值,直接使用:(会报错)

console.log(a); // 会报错

变量的命名规范

大写字母是可以使用的,并且大小写敏感。也就是说A和a是两个变量。

var A = 250;    //变量1
var a = 888;    //变量2

整理一下变量的命名规范:

只能由字母(A-Z、a-z)、数字(0-9)、下划线(_)、美元符( $ )组成

不能以数字开头。也就是说,必须以字母(A-Z、a-z)、下划线(_)或者美元符( $ )开头。变量名中不允许出现空格。

不用使用 JS 语言中保留的「关键字」和「保留字」作为变量名。

建议用驼峰命名规则。比如getElementById、matherAndFather、aaaOrBbbAndCcc

变量名会区分大小写(javascript 是区分大小写的语言)。

变量名长度不能超过255个字符。

汉语可以作为变量名。但是不建议使用,因为编码问题。

标识符、关键字、保留字

标识符:在JS中所有的可以由我们自主命名的都可以称之为标识符
例如:变量名、函数名、属性名、参数名都是属于标识符。通俗来讲,标识符就是我们写代码时为它们起的名字。

标识符的命名规则和变量的命令规则是一样的。看上面一段就可以了。

注意:标识符不能使用语言中保留的关键字及保留字。如下

js中的关键字:
break、continue、case、default、if、else、switch、for、in、do、while、try、catch、finally、throw、var、void、function、return、new、this、typeof、instanceof、delete、with、true、false、null、undefined

js中的保留字:
abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

运算符

image.png
image.png

变量的类型转换

显式类型转换:
toString()
String()
Number()
parseInt(string)
parseFloat(string)
Boolean()

隐式类型转换:
isNaN ()
自增/自减运算符:++、—-
正号/负号:+a、-a
加号:+
运算符:-、*、/

流程控制语句

顺序结构
选择结构:if 语句、switch 语句
循环结构:while 语句、for 语句

image.png

for循环结构

image.png

while..;do..while循环

image.png

循环中断



break执行结果:


image.png

continue执行结果:


image.png

函数

函数:
就是将一些功能或语句进行封装,在需要的时候,通过调用的形式,执行这些语句。

函数也是一个对象,使用typeof检查一个函数对象时,会返回function

函数的作用:
1.将大量重复的语句抽取出来,写在函数里,以后需要这些语句的时候,可以直接调用函数,避免重复劳动。
2.简化编程,让编程模块化。高内聚、低耦合。

注意:
1.将脚本编写为函数,就可以避免页面载入时执行该脚本。
2.函数通常在部分或.js文件中定义。
3.函数必须先定义后使用,否则将出错。

函数一般格式:


image.png

函数示例1:


image.png

函数调用方式:

方式1:普通函数的调用
调用语法:
函数名();或者 函数名.call();

function fn1() {
    console.log('我是函数体里面的内容1');
}
function fn2() {
    console.log('我是函数体里面的内容2');
}
fn1(); // 调用函数
fn2.call(); // 调用函数

方式2:通过对象的方法来调用

var obj = { a: 'qianguyihao',
    fn2: function() {
        console.log('千古壹号,永不止步!');
    },
};
obj.fn2(); // 调用函数

方式3:绑定事件函数

内置常规函数

alert 函数:显示一个警告对话框。
confirm 函数:显示一个确认对话框。
prompt 函数:显示一个提示输入对话框。
parseInt 函数:将符串转换成整数数字形式(可指定几进制)。
parseFloat 函数:将字符串转换成符点数字形式。
eval 函数:可计算某个字符串,并执行其中的的JS代码的结果。
isNaN 函数:测试是(true)否(false)不是一个数字。

image.png

confirm确认框示例:

image.png
image.png

JavaScript对象

内置对象
就是指这个语言自带的一些对象,供开发者使用,这些对象提供了一些常用或者最基本而必要的功能(属性和方法)。

常用内置对象:
String对象
Date对象
Math对象
Array对象

1、string对象

   属性:获取字符串对称长度
            字符串对象.length
   对象方法:
           字符串对象.方法名()
   常用对象方法:
image.png

更多参考 https://www.w3school.com.cn/jsref/jsref_obj_string.asp。

2、Date对象

Date 用来处理日期和时间。
创建对象:
如果Date()不写参数,就返回当前时间对象
如果Date()里面写参数,就返回括号里输入的时间对象

格式化format
var time1 = new Date().format("yyyy-MM-dd hh:mm:ss");

注意:
Date 对象是一个构造函数 ,需要先实例化后才能使用。

image.png

3、Math对象

    Math 和其他的对象不同,它不是一个构造函数,不需要创建对象。所以我们不需要 通过 new 来调用,而是直接使用里面的属性和方法即可。
     Math属于一个工具类,里面封装了数学运算相关的属性和方法。如右图:
image.png

4、Array对象

    数组和普通对象的功能类似,也是用来存储一些值的。不同的是:
    普通对象是使用字符串作为属性名的,而数组是使用数字作为索引来操作元素。索引:从 0 开始的整数就是索引。

数组创建:
使用字面量创建数组:
var arr2 = [1, 2, 3]; // 创建带初始值的数组
使用构造函数创建数组:
var arr4 = new Array(15, 16, 17); // 参数为多个数值
属性:
length:设置或返回数组中元素的数目。


image.png

客户端对象

image.png

1、window对象

window 对象是 JavaScript 层级中的顶层对象。
window 对象代表一个浏览器窗口或一个框架。
window 对象会在 或 每次出现时被自动创建。
window对象的一些属性和方法

image.png
image.png

2、document对象

每个载入浏览器的 HTML 文档都会成为 document 对象。
document 对象可用来访问页面中的所有元素。

image.png

文档结构

image.png

访问指定节点的方法。

getElementById() 根据文档ID获取
getElementsByName() 根据文档Name获取
getElementsByTagName() 根据文档标签获取

根据层级关系访问节点

image.png

操作节点的属性
getAttribute("属性名")
setAttribute("属性名","属性值")

创建和插入节点
createElement( tagName)
A.appendChild( B)
insertBefore( A,B )
cloneNode(deep)

删除和替换节点
removeChild(N)
replaceChild(newN,oldN)

操作节点样式
HTML元素.style.样式属性="值"
document.getElementById("titles").style.color="#ff0000";//改变字体颜色
document.getElementById("titles").style.fontSize="25px ";//改变字体大小

获取元素的样式
HTML元素.className="样式名称"
document.getElementById("cart").className="cartOver"; document.getElementById("cartList").className="cartListOver";

3、Form对象

form 对象代表一个 HTML 表单。
在 HTML 文档中

每出现一次,form 对象就会被创建

image.png

BOM:浏览器对象模型

  • Window:代表整个浏览器的窗口,同时 window 也是网页中的全局对象。
  • Location:代表当前浏览器的地址栏信息,通过 Location 可以获取地址栏信息,或者操作浏览器跳转页面。
  • History:代表浏览器的历史记录,通过该对象可以操作浏览器的历史记录。由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页,而且该操作只在当次访问时有效。
  • Screen:代表用户的屏幕信息,通过该对象可以获取用户的显示器的相关信息。

1.Location 对象

封装了浏览器地址栏的 URL 信息。

Location 对象的属性
location.href;//获取当前页面的 url 路径(或者设置 url 路径)。

Location 对象的方法

  • location.assign(str);//用来跳转到其他的页面,作用和直接修改location.href一样
  • location.reload();//用于重新加载当前页面,作用和刷新按钮一样,参数true。
  • location.replace();//使用一个新的页面替换当前页面,调用完毕也会跳转页面。但不会生成历史记录,不能使用「后退按钮」后退。

2.History对象:

History对象的属性
history.length
获取浏览器历史列表中的 url 数量。注意,只是统计当次的数量,如果浏览器关了,数量会重置为1。

History对象的方法

  • history.back();//用来回退到上一个页面,作用和浏览器的「回退按钮」一样。
  • history.forward();//用来跳转下一个页面,作用和浏览器的「前进按钮」一样
  • history.go( int n); // 需要整数作为参数向前/向后跳转 n 个页面。

JavaScript事件

事件:
就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说,有下面这些代表性的事件:
点击某个元素、将鼠标移动至某个元素上方、关闭弹窗等等。

JavaScript 是以事件驱动为核心的一门语言。JavaScript 与 HTML 之间的交互是通过事件实现的。
事件的三要素
事件的三要素:事件源、事件、事件驱动程序。

(1)比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯开了或者关了。
(2)再比如,网页上弹出一个广告,我点击右上角的X,广告就关闭了。这件事情里,事件源是:X。事件是:onclick。事件驱动程序是:广告关闭了。

于是可以总结出:谁引发的后续事件,谁就是事件源。
总结如下:
事件源:引发后续事件的html标签。
事件:js已经定义好了事件驱动程序:对样式和html的操作。也就是DOM。
可以在事件对应的属性中写一些js代码,当事件被触发时,这些代码将会执行。

代码书写步骤如下:
(1)获取事件源:document.getElementById(“box”); // 类似于Android里面的findViewById
(2)绑定事件: 事件源box.事件onclick = function(){ 事件驱动程序 };
(3)书写事件驱动程序:关于DOM的操作。

image.png

常用事件

image.png

jQuery基础

引入JQuery的原因:

在用 js 写代码时,会遇到一些问题:
window.onload 事件有事件覆盖的问题,因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐,代码量多。
代码很乱,各个页面到处都是。
动画效果很难实现。

image.png

什么是 jQuery
jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。
js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可。

以下是jQuery的相关信息:

  • 官网:http://jquery.com/
  • 官网API文档:http://api.jquery.com/
  • JQuery中文文档:https://www.jquery123.com/

学习jQuery,主要是学什么
初期,主要学习如何使用jQuery操作DOM,其实就是学习jQuery封装好的那些API。

这些API的共同特点是:几乎全都是方法。所以,在使用jQuery的API时,都是方法调用,也就是说要加小括号(),小括号里面是相应的参数,参数不同,功能不同。

jQuery 的两大特点
(1)链式编程:比如.show()和.html()可以连写成.show().html()。
链式编程原理:return this。
通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 this。

(2)隐式迭代:隐式 对应的是 显式。隐式迭代的意思是:在方法的内部会为匹配到的所有元素进行循环遍历,执行相应的方法;而不用我们再进行循环,简化我们的操作,方便我们调用。
如果获取的是多元素的值,大部分情况下返回的是第一个元素的值。

jQuery 的使用
使用 jQuery 的基本步骤
(1)引包
(2)入口函数
(3)功能实现代码(事件处理)

image.png

jQuery 的版本
jQuery 有三个大版本:
1.x版本:最新版为 v1.11.3。
2.x版本:最新版为 v2.1.4(不再支持IE6、7、8)。
3.x版本。
PS:开发版本一般用1.10以上。
我们以 v1.11.3版本为例,下载下来后发现,里面有两个文件:

image.png

它们的区别是:

第一个是未压缩版,第二个是压缩版。

平时开发过程中,可以使用任意一个版本;但是,项目上线的时候,推荐使用压缩版,压缩版的文件大小更小,加载更快。

jQuery 的入口函数和 $ 符号
入口函数

image.png

区别一:书写个数不同:
Js 的入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery 的入口函数,可以出现任意多次,并不存在事件覆盖问题。

区别二:执行时机不同:
Js的入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。

**jQuery的 符号原因:书写简洁、相对于其他字符与众不同、容易被记住。
jQuery占用了我们两个变量:$ 和 jQuery

jQuery 选择器
jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。
jQuery的选择器类型比较多,这里主要介绍几种常用的选择器

image.png
image.png

jQuery操作DOM

  • 样式和类操作:设置或获取元素的样式属性值。
  • 节点操作

样式操作和类操作
样式操作
1、设置样式:

 //设置单个样式:  css(属性,值);
    $("div").css("background-color","red");

    //设置多个样式:  css(json);
     $("div").css({"width":100,"height":100,"background-color":"pink"});

2、获取样式:

    //获取样式:css(属性);
    //获取的时候如果有很多个,那么获取jquery对象中的第一个
    alert($("div").css("width"));

类操作(className)
1、添加类样式:

$(selector).addClass("liItem");  //为指定元素添加类className

2、移除类样式:

$(selector).removeClass("liItem");  //为指定元素移除类 className
$(selector).removeClass();          //不指定参数,表示移除被选中元素的所有类

3、判断有没有类样式:

$(selector).hasClass("liItem");   //判断指定元素是否包含类 className

4、切换类样式:

$(selector).toggleClass(“liItem”);    //为指定元素切换类 className,该元素有类则移除,没有指定类则添加

样式操作和类操作的比较

  • 操作的样式非常少,那么可以通过.css()实现。
  • 操作的样式很多,建议通过使用类 class 的方式来操作。
  • 如果考虑以后维护方便(把CSS从js中分离出来)的话,推荐使用类的方式来操作。

jQuery 的节点操作
动态创建元素
创建的是 jQuery 对象。
1)var ("我是一个span元素"); // 类似于 原生 js 中的document.createElement("标签名");
2)var node = $("#box").html("

  • 我是li
  • ");//类似于 原生 js 中的innerHTML。

    添加元素
    jQuery 添加元素的方法非常多,最重要的方法是append(),在盒子里的最末尾添加元素。格式如下:

    // 方式一:在node
    $(selector).append($node); //参数是 jQuery对象
    // 方式二:在(selector).append('

    ');` //参数是 htmlString

    其他添加方式:
    $(selector).appendTo(node); //同append(),只不过是反着写的。
    $(selector).prepend(node); //在元素的第一个子元素前面追加内容或节点。
    $(selector).after(node); //在被选元素之后,作为兄弟元素插入内容或节点。
    $(selector).before(node); //在被选元素之前,作为兄弟元素插入内容或节点。

    清空元素
    $(selector).empty(); //清空指定元素的所有子元素
    $(selector).html(""); //同上
    $(selector).remove(); //把自己以及所有的内部元素从文档中删除掉。

    复制元素
    复制的新元素 = $(selector).clone();//是深层复制

    jQuery 属性操作:
    设置属性:$(selector).attr("title", "这是一个标题");
    获取属性:$(selector).attr("title");
    移除属性:$(selector).removeAttr("title");
    form表单中的 prop()方法:针对checked、selected、disabled属性,要使用 prop()方法,而不是其他的方法。

    val()方法和 text()方法
    $(selector).val(); //设置或返回 form 表单元素的value值,例如:input、select、textarea 的值。
    $(selector).text(); //设置或获取匹配元素的文本内容。不带参数表示,会把所有匹配到的元素内容拼接为一个字符串,不同于其他获取操作。
    $(selector).text("我是内容"); //设置的内容包含html标签,那么text()方法会把他们当作纯文本内容输出。

    jQuery的事件机制

    • click(handler) 单击事件。
    • blur(handler) 失去焦点事件。
    • mouseenter(handler) 鼠标进入事件。
    • mouseleave(handler) 鼠标离开事件。
    • dbclick(handler) 双击事件。
    • change(handler) 改变事件,如:文本框值改变,下拉列表值改变等
    • focus(handler) 获得焦点事件。
    • keydown(handler) 键盘按下事件。

    全部事件参考链接:http://www.w3school.com.cn/jquery/jquery_ref_events.asp

    on方式绑定事件
    最早采用的是 bind、delegate等方式绑定的。jQuery 1.7版本后,jQuery用on统一了所有的事件处理的方法;

            $(document).on("click mouseenter", ".box", {"name": 111}, function (event) {
                console.log(event.data);      //event.data获取的就是第三个参数这个json。
                console.log(event.data.name); //event.data.name获取的是name的值。
            });
    

    参数解释:

    第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)。上方代码绑定的是单击事件和鼠标进入事件。
    第二个参数:selector, 执行事件的后代元素。
    第三个参数:data,传递给事件处理函数的数据,事件触发的时候通过event.data来使用(也就是说,可以通过event拿到data)
    第四个参数:handler,事件处理函数。

    off方式解绑事件
    $(selector).off(); // 解绑匹配元素的所有事件
    $(selector).off("click"); // 解绑匹配元素的所有click事件
    $(selector).off( "click", "**" ); // 解绑所有代理的click事件,元素本身的事件不会被解绑

    each的用法
    大部分情况下是不需要使用each方法的,因为jQuery的隐式迭代特性。
    但是,如果要对每个元素做不同的处理,这时候就用到了each方法。
    $(selector).each(function(index,element){});

    参数解释:
    参数一:表示当前元素在所有匹配元素中的索引号
    参数二:参数二表示当前元素(是js 中的DOM对象,而不是jQuery对象)

    你可能感兴趣的:(JavaScript&jQuery基础--源动力)