JavaScript and jQuery and JSON


JavaScript

JavaScript:是一种计算机编程语言,可以像其他编程语言那样定义变量、执行循环等。

JavaScript使用关键字var声明变量。

JavaScript是弱类型语言,弱类型并不是说数据本身没有类型,而是变量没有类型,可以把任何类型的数据重复赋
值给同一个变量。

变量的作用域并不是按照代码块划分的,只是简单的分为全局变量和局部变量。在函数外定义的变量都是全局变量,
对整个页面的JavaScript代码都有效。

数据类型:
JavaScript定义了6种数据类型,其中5中原始类型(Boolean、Number、String、Null、Undefined)和1中对象
类型(Object)。
原始类型的值是不可改变的;Object类型的值是可以改变的。

运算符和表达式:
	* 算术运算符:+ - * / %(++-- +=-= *=/= %=)
	* 比较运算符:> >= < <= == === != !==
	* 逻辑运算符:|| && !
	* 位运算符:| & ~ << >> >>>
	* 字符串连接符:+
	* 其他:typeof instanceof new

表达式:由运算符和操作数组成,一个表达式经过运算后一定会有一个结果,特别的,如果创建对象、调用函数等都
属于表达式。

严格比较===
两个操作数的数据类型以及值都相同时比较结果才为true。

标准比较==
先把两个操作数转换为数据类型相同的值,再进行严格比较。

typeof用来判断值的数据类型,返回字符串形式的类型描述。

判断一个对象是否是某个类的对象instanceofnew用来创建对象。
注意:new Xxx()可以简写为new Xxx。

关键字:已经在使用的含有特殊含义的单词:如breakcaseclasscatchforfunctionifvarthisdoelse等。

保留字:将来可能会使用其作为特定用途的单词:如enumstatic、boolean、byte、final、goto、volatile等。

流程控制语句:
分支语句:ifif elseswitch
循环语句:whiledo whileforfor in
其他:breakcontinuereturn
注意:在if、循环等语句中,0null、undefined相当于false,其他值包括对象相当于true。

预定义类:Object、Boolean、String、Array、Date、RegExp等。

预定义对象:arguments数组对象、parseInt()、eval()、isNaN()等。

Object是JavaScript最基本的类,用来创建普通对象,以便存储数据。

JSON(JavaScript Object Notation),即JavaScript对象表达式,也就是说JavaScript在内存中按照JSON格
式表示对象。
JSON语法:
	1. 一对{
    
    }表示一个对象,等同于new Object()
	2. 对象中可以包含若干属性,属性使用键值对表示,key的类型必须是String,value的类型任意,key和
	value之间使用冒号连接,多个键值对之间使用逗号分隔
	3. 一对[]表示一个数组,数组中元素之间使用逗号分隔

注意:由于key的类型只能是String,有些情况下省略掉双引号或者使用单引号代替也能正确处理,但另外一些情况
下会出错,所以最好在任何情况下key都使用双引号。

Array表示数组,所以支持索引操作,并且数组长度可变。
Array类的一些操作元素的方法:
push()末尾添加;unshift()开头添加;pop()删除末尾;shift()删除开头。

String类:length属性:字符串长度;charAt(index):获取指定索引位置的字符串;split(str):使用指定字符
串切分,返回字符串数组。

Date:用来处理日期和时间,内部基于197011日起的毫秒数(时间戳);var now=new Date();//当前时间

Math:用来执行数学任务,可以直接调用其属性和函数。
Math.random()//返回0和1之间的伪随机数

RegExp:用来处理正则表达式。
var reg=new RegExp("\\d+");var reg=/\\d+/;
test()用来执行校验,但只需要目标字符串中的一部分匹配正则就会返回true,想要完全匹配,需要在正则前后加上
^和$。
exec()用来执行查找,可以返回长字符串中匹配正则的子字符串。
g表示全局匹配,也就是找到一处匹配后会继续查找。

函数:声明1function 函数名(参数列表){
    
    函数体}
声明一个函数就是创建一个Function类的对象。浏览器在开始执行JavaScript代码前,会先扫描以这种方式创建的函
数,并统一管理起来,函数声明和函数调用不要求先后顺序。
声明出来的函数其实是JavaScript中window全局对象的属性,函数名就是属性名。
如果使用这种方式声明了多个同名函数,后面声明的会覆盖前面的。

声明2var 变量名=function(参数列表){
    
    函数体}
这种方式声明的是匿名函数,并把函数对象赋值给一个变量,调用方式也是在变量名后紧跟一对小括号并传入实际参。
数浏览器不会实现扫描并管理匿名函数,所以函数声明必须在函数调用之前,而且一个变量指向的匿名函数在重新给
这个变量赋值之前一直都是有效的,不会提前发生覆盖。

匿名函数可以直接调用,但这个匿名函数只能被调用一次。
也可以把函数赋值给某个对象的属性,这时可以说该对象有该函数,调用方式也相同。

预定义函数:alert()提示框;confirm()确认对话框;prompt()输入对话框;close()关闭当前页面;open()打开
新页面;setTimeout()、clearTimeout()设置、清除定时器;setInterval()、clearInterval()设置、清除周期
性的定时器;encodeURI()对字符串进行URL编码;decodeURI()对编码后的URL解码。

window对象:表示整个浏览器窗口(标签页),内部主要包含了location地址栏对象和document页面文档对象,而
且在JavaScript代码中声明的全局变量和函数都被作为window对象的属性统一管理。
window对象的属性在访问时可以省略window。

函数内有两个隐含对象:arguments和this

arguments相当于一个数组,包含了函数调用时实际传入的所有参数。
其实函数调用时实际传入的参数个数可以和函数声明时的参数个数不一致,通过arguments总可以正确获得所有实际
参数。

this表示此函数所属的对象,即如果直接声明了一个函数,则this表示window对象,如果把该函数赋值给某个对象
的属性,则this表示该对象。
可以把JavaScript代码提取出来放在单独的文件中,并使用。

DOM(Document Object Model),文档对象模型,其实是JavaScript的一部分,用来操作页面内容。
DOM使用节点树描述整个HTML页面,页面中的元素、属性、文本都是节点。
DOM编程的思路为:使用JavaScript语法控制程序执行逻辑,再由DOM API查找获取目标元素,进而对目标元素进行
想要的操作。

节点树
一个页面文档的结构可以使用一个节点树表示,节点的类型主要有Document、Element、Attr和Text,它们的共同
父类是Node。

document对象表示整个当前页面,是DOM的核心对象,是连接JavaScript和DOM的桥梁,也是window对象的一个属性。

getElementById()根据元素id属性值查找元素,返回一个元素。
getElementsByName()根据元素的name属性值查找元素,返回节点集合。
getElementsByTagName()根据标签名查找元素,返回页面元素集合。
createElement(tagName)创建出指定的新标签,然后加入DOM中。

Element元素类
Element类的对象表示元素节点,可以通过Element操作其内部属性、子节点和文本内容。
操作元素属性:
1、直接使用element.attrName的方式,但只能操作元素的标准属性,不能操作自定义属性
2、以下三种方式还可以操作自定义属性
getAttribute(attrName)获得指定属性的值。
setAttribute(attrName,attrValue)设置指定属性的值。
removeAttribute(attrName)删除指定属性的值。
在HTML中,某些属性的值和属性相同,比如checked="checked"等,但在JavaScript中习惯上使用truefalse。

操作样式属性
Element的style属性值是CSSStyleDeclaration的对象,可以通过该对象直接操作关联元素的样式属性。

操作子元素
getElementsByTagName()根据标签名来获取该元素内部的子标签。
insertBefore(newNode,node)在指定子节点前插入新子节点。
appentChild(newNode)把子节点添加到元素末尾。
removeChild(node)删除指定子节点。
注意:如果子节点本来就存在,insertBefore()和appendChild()都会先把子节点从原来的位置删掉后再添加
element.parentNode访问父元素。

操作文本内容
element.innerHTML以字符串形式操作标签体内容,包括子元素和本文内容。
element.innerText(不推荐)。
element.textContent(不推荐)。
事件机制
当浏览器状态改变以及用户操作时等会触发一些事件。比如用户点击一个按钮,就触发了按钮的点击事件,按钮则成
为事件源。
当事件被触发时,浏览器会创建相应的event事件对象,该事件对象包含与此事件相关的各种信息,比如点击事件的
事件对象包含点击位置等信息。
可以给事件源注册事件处理函数,当事件触发时,浏览器就会回调先前注册的事件处理函数。

常见的事件:窗体事件、鼠标事件、键盘事件、焦点事件等。
load页面加载完成时触发,事件源是window对象。
load是事件名称,onload是元素属性,也可称为元素的事件属性,用来给元素注册事件处理函数,即把函数对象赋值
给事件属性。
鼠标事件:click单击;dbclick双击。
事件源是被点击的元素。
键盘事件:keydown按下;keyup弹起。
事件源是当前获得焦点的元素。
焦点事件:focus获得焦点;blur失去焦点。
表单事件:change表单项的值改变时;
submit表单提交时,注意:只有<form>才有submit事件

处理事件的三种方式:
1、通过事件属性注册事件处理函数
2、直接把处理代码写在HTML标签的事件属性上
3、通过addEventListener(事件名称,处理函数)方法注册事件处理函数。

事件冒泡:当若干嵌套的元素同时出发某个事件时,最内层元素的事件最先被触发,该元素的事件处理函数执行完成
后,事件再往外依次传递。
event.stopPropagation():取消该事件的冒泡。
取消事件的默认动作:event.preventDefault()或者return false。

jQuery
jQuery是一个JavaScript库,特性丰富,通过对DOM的封装,提供了一套全新的API,可以代替传统DOM的操作方式
和操作风格。
jQuery通过封装解决了不同浏览器之间的兼容性问题,使用jQuery时不用考虑兼容性问题。

$对象
jQuery的编程入口是$对象,它是jQuery的核心对象,也是一个函数对象,可以使用$()的形式调用它。
当直接把一个函数对象传入$()时,jQuery就会把该函数注册为页面加载完成事件的处理函数,并且这里的加载完成
事件在文档结构加载完成时就会触发。
当直接把DOM对象传入$()时,jQuery会把DOM对象封装进一个数组并返回,这个数组称为jQuery对象。
	* $函数可以直接把DOM对象包装成jQuery对象,或者通过选择器
	* DOM对象支持属性操作和方法操作,jQuery对象一般只进行方法操作
	* jQuery对象不能再调用DOM对象的方法,DOM对象也不能调用jQuery对象的方法

jQuery会把根据选择器选中的DOM对象封装进jQuery对象并返回。
jQuery会使用该HTML代码创建出DOM对象然后把DOM对象封装进jQuery对象并返回。
$对象不仅本身是个函数,还提供了一些函数属性。
$.each(dom,callback)
$.ajax()

jQuery选择器:id选择器、标签选择器、类选择器、属性选择器、伪类选择器、复合选择器。
jQuery对象可以认为是个数组,内部包含了所封装的DOM对象,可以通过索引操作方式取出其中的DOM对象。

jQuery对象的方法
操作元素属性:attr()
操作元素样式:css()
操作元素class属性:
addClass(name)给元素添加指定的css类。
removeClass(name)删除元素指定的css类。
toggleClass(name)切换css类,即如果原来有就删除,否则就添加

查找元素:
children()查找子元素。
parent()查找父元素。
prevall()返回包含DOM对象的前面的兄弟元素。
nextall()返回包含DOM对象的后面的兄弟元素。
siblings()返回包含DOM对象的兄弟元素。

其他方法:
val()操作value属性。
html()以文本方式操作标签体内容,等价于DOM的innerHTML 属性。
append(content)插入子节点。
before(content)插入兄弟节点。
remove()删除自己。
hide(time)在指定时间内渐渐隐藏。
show(time)在指定时间内渐渐展开。

隐式迭代
当使用jQuery对象的方法进行赋值操作时,一般会对所包含的所有DOM对象进行相应操作,这是由jQuery的隐式迭代
特性决定的

显示迭代e
ach(dom,callback)

链式编程:
jQuery对象的很多操作返回的还是该jQuery对象本身,所以jQuery支持链式编程。
有些操作会返回新的jQuery对象,这时就不能再继续链接下去了,为此jQuery对象还提供了end()方法,这个方法会
返回原来的jQuery对象,这样就可以继续链接下去。
jQuery对象提供了一系列如click()、focus()、mouseover()等方法,给所包含的DOM对象注册事件处理函数。
注意:this的用法,在事件处理函数中,this表示隐式迭代时当前遍历到的DOM对象。
jQuery提供了ready事件来代替window的load事件,ready可以在文档结构加载完成后就触发,而不必等到页面的图
片等资源也加载完成,其实$(function(){
    
    })就是$(document).ready(function(){
    
    })的简写形式。

Guess you like

Origin blog.csdn.net/Mr_TXQ/article/details/109051779