JS和Jquery

JavaScript简介

JavaScript是一种广泛用于客户端网页开发的语言,用来操作html页面元素;浏览器事件捕获和相应、表单验证、检测浏览器信息等。

六种数据类型:(字符串类型String、数字类型number、布尔类型boolean、空类型null、未定义undefined、对象object)

命名规范:

1.变量必须使用字母、下划线"_"或者美元符"$"开始。

2.JS中区分大小写,例:myString和mystring是不一样的,表示的是两个变量。

3.Js容忍重复定义变量或者无"var"声明变量

4.不能使用JavaScript保留关键字作为变量名。

javaScript保留关键字:

abstract	arguments	boolean	break	byte
case	catch	char	class*	const
continue	debugger	default	delete	do
double	else	enum*	eval	export*
extends*	false	final	finally	float
for	function	goto	if	implements
import*	in	instanceof	int	interface
let	long	native	new	null
package	private	protected	public	return
short	static	super*	switch	synchronized
this	throw	throws	transient	true
try	typeof	var	void	volatile
while	with	yield

boolean类型:该类型只有两个值,true和false。javaScript中所有类型的值都有与这两个boolean值等价的值,下边是转换规则:

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空字符串	"    "(空字符串)
Number	任何非零数字值(包括无穷大)	0和NaN
Object	任何对象	null
Undefined	n/a(不适用)	undefined

null类型只有一个值,即null。null用来表示尚未存在的对象。

对象Object

对象是包含属性和方法的特殊数据类型。

访问对象的属性。objectName.propertyName(属性名)

访问对象的方法。objectName.methodName()  (方法名)

添加对象的属性:  objectName.propertyName=value

表达式

表达式是一种JS短语,可以使JS解析器用来产生一个值。是js代码的最小单位,是js代码运行的基础铺垫。

 

                           

 运算符

一元加法: +"20";//输出20,一元加法会将字符串转为数字

一元减法: -"20";//输出-20,一元减法会将字符串转为数字,并对数字取反

前增量:var a=1;alert(a++);// 1 在变量被使用后,自增1.

后增量:var a=1;alert(++a);// 2 在变量被使用前,自增1

delete:删除对象中开发者定义的属性或方法

var a=new Object;

a.name="javaScript";

delete a.name;

运算符in

in运算符后边必须是对象

in运算符判断的是某个属性是否属于某个对象

运算符typeof

typeof:主要是用来检测并返回变量所属的基本数据类型

隐式转换

JavaScript属于弱类型语言,在计算时,不同类型之间可进行隐士转换。

计算过程中,数据类型发生了改变

 "10"*23;//230          "10"  * "23" //230              "String"-1;//NaN

true+1;//2    false+1;//1        null+1;//1         undefined+1;//NaN

 

var a={x:1};
 a*2;// NaN

                           "10"+23 //"1023"      true+"1" //"true1"      null+"1" //"null1"     

                           undefined+"1"  //    "undefined1"

只有undefined、null、NaN、0、" " 空字符串会被转换为false,其余都为true 

!10 //false     !"10" //false     !{x:1} //false      !null//true        !undefined//true        !NaN//true   !0//true

&&运算符:

0&&"1" //0      1&&"0" //" 0"      null&&true //null     NaN&&true //NaN

|| 运算符:

" " || "1" //"1"      "1 " || ""  // "1"           0|| null   //null       0|| undefined   //undefined 

比较运算符

比较符两边都是数字,直接比较大小

比较符两边都是字符串,则进行字符串的Unicode编码比较

"0 "<1 //true     " "<=0 //true     "hello"=="world" //false 

function functionName(a,b){ }	函数声明
var functionName=function(){ }	函数表达式
(function(){ })();	立即调用函数表达式

函数声明	函数表达式
var a=sum(1,2); console.log(a); function sum(a,b) { return a+b; }	var a=sum(1,2); console.log(a);//sum is not a function var sum=function (a,b) { return a+b; }

                 注意:函数声明的函数对象在JavaScript代码加载时会 被前置

局部变量:

     在函数内部使用var声明的变量、只能在函数内部访问,在函数运行完毕后便会删除。

function fun() { var a=1; var b=2; console.log(a+b); } console.log(a)//a is not defined

全局变量:

   在函数外声明的变量,在网页中的所有脚本和函数都可以访问。

注意:

                   在函数内部未使用var声明的变量会成为全局变量。

fun() function fun() { a=1; var b=2; console.log(a+b);//3 } console.log(a)//1

语句

bolck语句

用于组合多个语句,一对花括号定义。

{ var a=1; var b=4; alert(a+b); }	if(true){ var a=1; var b=4; alert(a+b); }
注意:JavaScript没有块级作用域
if(true){ var a=1; var b=4; alert(a+b); } alert(a)	function test() { var c=1; } test() alert(c)//Uncaught ReferenceError: c is not defined

For   in语句(遍历对象属性)

注意:无法保证顺序遍历

var a={x:1,y:2}; for (var i in a){ alert(i)//i是对象的属性 alert(a[i])//获取对象的属性值 }

浏览器对象window的方法

window对象表示浏览器中打开的窗口。

所有javaScript 全局对象、函数以及变量均自动成为window对象的成员

方法	描述	使用示例
alert()	显示带有一段消息和一个确认按钮的警告框	alert("hello word")
close()	关闭浏览器窗户	window.close()
confirm()	显示带有一段消息以及确认按钮(true)和取消按钮(false)的对话框	var a=confirm("Press a button");
open()	打开一个新的浏览器窗口	window.open("http://www.baidu.com")
prompt()	显示可提示用户输入的对话框	var name=prompt("Please enter your name")

浏览器对象window的属性

属性	描述
document	Html文档对象
history	窗口访问历史信息对象
innerheight	窗口的文档显示区的高度
innerwidth	窗口的文档显示区的宽度
location	用于窗口或框架的访问地址
parent	访问父窗口对象
top	返回最顶层的先辈窗口对象

设置和获取元素属性  getAttribute()

jQuery是一个JavaScript函数库

jQuery使用户可以更加方便地处理HTML节点元素、事件、实现动画效果,而且方便地为网站提供AJAX交互。

$(selector)

用来选择html文档中的DOM元素

selector是选择器,类似JavaScript中的getElementByID

$(html)

创建DOM元素,并设置元素的属性

html参数是待创建的DOM元素的html标签字符串

$(function()  {} )

在DOM结构绘制完毕后就执行.

是$(document).ready(function () {}) 的简写

元素选择器

$("标签名称")     $("*")选取全部元素     $("parent>child") 子选择器      $("parent child")后代选择器

$("prev+next") 相邻兄弟元素选则器 获取prev选择器获取的元素后第一次满足next选择器筛选元素 

相邻兄弟选择器所选择到的元素,必须在同一个父元素下

筛选选择器

选择器	以class属性为例	描述
$("selector[attr='value']")	$("div[class='p1']")	匹配class属性值为p1的所有div元素
$("selector[attr|='value']")	$("div[class|='p1']")	匹配class属性值以'p1‘字符串开头的所有div元素
$("selector[attr*='value']")	$("div[class*='p1']")	匹配class属性值包含'p'字符串的所有div元素
$("selector[attr~='value']")	$("div[class~='p1']")	匹配class属性的多个值中包含p1属性的div元素
$("selector[attr!='value']")	$("div[class!='p1']")	匹配class属性不包含或者不等于p1的所有div元素
$("selector[attr^='value']")	$("div[class^='p1']")	匹配class属性值以p1开头的所有div元素
$("selector[attr$='value']")	$("div[class$='p1']")	匹配class属性值以p1结尾的所有div元素

元素属性操作

attr():获取和设置元素属性                   removeAttr():移除元素的某属性

表达式	描述
attr("id")	获取某属性的值
attr("class","domain")	设置某属性的值
removeAll(属性名)	移除指定的元素属性

$("selector").text() 设置或返回所选元素的文本内容

$("selector").html() 设置或返回所选元素的内容(包括HTML标记)

$("selector").val() 设置或返回表单字段的值

<div id="p1" class="cc aa" ></div>
$("selector").addClass("aa")	添加"aa"样式
$("selector").removeClass("aa")	移除"aa"样式
$("selector").toggleClass("aa")	切换"aa"样式类, 在存在"aa"样式时去除,不存在时添加

样式操作css()

<div id="p1" style="height: 100px;width: 100px;border: 1px solid #000000"></div>
$("selector").css("height")	获得div的高度
$("selector").css("height","200px")	设置div的高度

jQuery操作DOM对象

插入DOM节点对象

var div=$("<div id='p1' class='cc'>hello world</div>")

将创建DOM对象插入到指定元素内部

$("selector").prepend(div)                         $("selector").append(div)

插入到指定元素内部的开头                                            插入到指定元素内部的结尾处

将创建的DOM对象插入到指定元素前后

$("selector").before(div)                                                       $("selector").after(div)

插入到指定元素前                                                               插入到指定元素后

删除DOM节点对象

$("selector").remove()                                                                 $("selector").empty()

删除选择器选中的元素,包括其所有子元素和文本                       清空选择器选中元素的内部所有元                                                                                                      素,包括文本,不包括元素自身。

隐藏和显示DOM节点对象

$("selector").hide();                                                                             $("selector").show();

隐藏选择器选中元素即所有的子元素                                                  在选择器选中元素为隐藏状态态                                                                                                        时,显示该元素

向上遍历DOM树

$("selector").parent()

获取直接父元素

 $("selector").parents()                                         $("selector").parentsUntil(selector01)   

获取所有父元素                                                   获取两选择器选择元素之间的所有元素

向下遍历DOM树

$("selector").children                                                    $("selector").find("selector01")

获取选中元素的所有直接子元素                                   在selector选中的元素的所有子元素中查找                                                                                          与selector01匹配的元素

水平遍历DOM树

$("selector").siblings();                                                                 $("selector").next();

获取元素的所有同胞元素,不包括自身                                          获取元素的下一同胞元素

$("selector").nextAll();                                                           $("selector").nextUtil("selector01");

获取元素之后的所有同胞元素                                                 返回两个选择器对于元素之间的所有                                                                                                  同胞元素

鼠标点击事件

$("selector").click()

触发或者设置选中元素的点击事件

 鼠标悬浮事件

$("selector").hover()

鼠标经过元素上方时触发

表单事件

$("selector").focus()                                                               $("selector").blur()

元素获得焦点时触发                                                              元素失去焦点时

Ajax

其核心有JavaScript、XMLHTTPRequest,通过XMLHTTPRequest对象来向服务器发出异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

$.ajax({    })；

type:请求类型,get或post,默认为post

url:请求的地址

async:设置一个boolean值,默认为true,值为true时,请求为异步,false时则为同步。

data:设置一个对象,连同请求一起发送到服务器

dataType:预期服务器返回的数据类型,一般采用json格式,也可以不设置。

success:设置一个函数,在请求成功之后的回调函数,函数的出入参数为后台返回的数据

error:设置一个函数,在请求失败时调用。