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

循环中断

<script type="text/javascript">
var i=0;
for(i=0;i<=5;i++){
    if(i==3){
                   continue;
           //break;
       }
  document.write("这个数字是："+i+"<br/>");
}
</script>

break执行结果：


image.png

continue执行结果：


image.png

函数

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

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

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

注意：
1.将脚本编写为函数，就可以避免页面载入时执行该脚本。
2.函数通常在<head>部分或.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 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
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> 每出现一次，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的相关信息：

学习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强大的体现，它提供了一组方法，让我们更加方便的获取到页面中的元素。
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 spanNode1 =("<span>我是一个span元素</span>"); // 类似于 原生 js 中的document.createElement("标签名");
2)var node = $("#box").html("<li>我是li</li>");//类似于 原生 js 中的innerHTML。

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

// 方式一：在(selector)中追加node
$(selector).append($node); //参数是 jQuery对象
// 方式二：在(selector)中追加div元素， `(selector).append('<div></div>');` //参数是 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对象）

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,496评论 6赞 501
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,407评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,632评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,180评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,198评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,165评论 1赞 299
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,052评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,910评论 0赞 274
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,324评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,542评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,711评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,424评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,017评论 3赞 326
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,668评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,823评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,722评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,611评论 2赞 353

推荐阅读更多精彩内容

  • jQuery基础的基础的基础
    jQuery必会的东西............感觉最近这几天都懵懵的 还是记录一下 防止随着年龄的增长记忆力退化...
    const_express阅读 215评论 0赞 3
  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,336评论 0赞 8
  • jQuery基础——事件篇
    第1章 鼠标事件 1-1 jQuery鼠标事件之click与dbclick事件 用交互操作中，最简单直接的操作就是...
    mo默22阅读 1,275评论 0赞 6
  • jQuery基础知识
    整理自撩课学院www.itlike.com 一、jQuery简介&集成 1、JS的问题? 1）onload事件：只...
    冰河_295d阅读 376评论 0赞 0
  • Web基础之jQuery（一）
    概述：1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。2）jQuery利用选择器（借鉴了C...
    南山伐木阅读 235评论 0赞 1