js、jq资料整理

  1. JavaScript

Javascript简称JS是JavaScript web 开发人员必须学习的 3 门语言中的一门,可以使用JS添加、删除、修改、查看网页上的所有元素及属性。 在HTML网页中动态写入文本。 响应网页中的事件,并做出相应处理。可用于较验客户端提交的数据。 检测浏览器类型及版本。(JS书写严格区分大小写)

书写方式:1.内部 2.外联 3.内联(使用较少)

    1. Js的三大核心组成部分

1.ECMAScript 
2.DOM(document object model)
3.BOM(browser object document )
 (1)ECMA是(欧洲计算机制造商协会)它规定了js的语法标准。 
(2)DOM是文档对象模型,规定了文档的显示结构,可以轻松地删除、添加和替换节点 
(3)BOM是浏览器对象模型,就是浏览器自带的一些功能样式,如搜索框,设置,等学习浏览器窗口交互的对象

1.HTML 定义了网页的内容

2.Css描述了网页的布局

3. Javascript网页的行为

    1. JS原生选择器

1. getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById()

2. getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。

3. getElementsByTagName(tagname): 返回文档中指定标签的元素

4.: getElementsByClassName():返回文档中所有指定类名的元素

5. querySelector():返回文档中匹配指定css选择器的第一个元素

6. querySelectorAll():返回文档中匹配指定css选择器的第一个元素

    1. 输出数据

window.alert() 弹出警告框。

document.write() 方法将内容写到 HTML 文档中,在文档已完成加载后执行整个 HTML 页面将被覆盖。

innerHTML 输出文本及HTML标签。

innerTEXT 以文本方式输出

console.log() 写入到浏览器的控制台。

 

    1. 变量声明的三种表达方式
  1. Var content = 123

设置的是变量,可以不赋初值。如果不赋初值的话,变量的类型为undefined;

(2)Let a=1

 是块级作用域,在函数中定于let变量,在函数外无影响

(3)Const

设置的是常量,一经设置不可改变。在设置时必须赋初值。

    1. 变量数据以及运用
      1. 基本数据
    1. number 数字 数字运算符号:+  -  /  * (整数和小数)浮点数
    2. string 字符串  代表整体
    3. 布尔值 Boolean: True假 false真
    4. undefinde 未定义
    5. unll 零值

Undefinde和unll是父子级关系

      1. 引用数据
    1. object 引用(构造函数创建一个对象包装器)
      1. 数据运算符
    2. 算数运算符

 

    1. 赋值运算符

 

      1. Math对象(仅供参考)

Math对象用于执行数字任务

1、Math对象属性

2、Math对象方法

      1. Array对象(仅供参考)

Array 对象用于在单个的变量中存储多个值

  1. Array对象属性

  1. Array对象方法

    1. 循环

while循环语句可用于未知次数的循环,使用循环之后还可以去访问循环语句中控制那个变量

for 在设置的条件下循环在得知循环次数时使用

    1. 函数

函数是被设计为执行特定任务的代码块。

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。

圆括号可包括由逗号分隔的参数:
function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}
(参数 1, 参数 2, ...)
  1. Js中同名函数的覆盖   函数是没有重载,定义相同函数名、不同参数签名的函数,后面的函数会覆盖前面的函数。调用时,只会调用后面的函数。
  2. 函数分为三种情况:1.声明函数。2.匿名函数(不命名)。3.闭包函数
      1. 关键字
1、alert("");          提示框;
2、confirm("");        确认框,点击后会响应返回true或false;              
3、prompt();           弹出一个输入框;
4、document.write("");
5、 console.log("");    在控制台打印相应的信息;
6、console.dir("");    在控制台打印出该对象的所有信息;
7、createElement  通过指定标签名称创建元素    
var  div = document. createElement(‘div’)
8、creataTextNode 用来创建一个文本节点  (问题:文本节点图片就不能输出是吧?)
Var  textNode  =  document. creataTextNode(‘一个Node’)
9、cloneNode      创建指定的节点的精确拷贝 
   Var parent = document.getElementById(‘parentElement’);
   Var parent2 = parent.cloneNode(true);
   Parent2.id = “parent2”
10、appendChild    子级关系
11、insertBefore     
12、appendChild    向末尾追加节
13、insertBefore     在开始处添加节点    div.insertBefore(*,*);  *号表示变量
14、removeChild    删除某个节点       div. removeChild(* );
15、replaceChild   使用一个节点替换另一个节点
16、innerHTML    可获取或设置指定元素标签内的html内容
17、inner Text    获取或设置指定元素标签内的文本值
18、document.querySelector   返回文档中匹配指定Css选择器的一个元素
19、this   表示指向调用它的对象
20、Join:将要添加的数组中的逗号当成分隔符进行添加打印出字符串以及要添加的数组中的逗号当成分隔符进行添加打印出字符串
21、push:将数组或者元素当成整体推送至要添加的数组尾端并打印出总长度
21. prompt    var a = prompt('提示参数','表单值(可空)') 
22. confirm    var a = confirm(“按下按钮”)
23. XMLHttpRequest 是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
25. checked  复选框的值
      1. this指向
1.this是指向调用它的函数

2. 一般情况下this是指向window,

3.改变this的方法有三种,call、apply和bind
   4.call可向多个参数,apply第二个参数只能是数组,
函数.call(document,1,2,3)自动执行
函数.apply(document,[1,2,3])自动执行
let ff = fn.bind('小明',1,2,3) 需要调用
    1. Js跳出循环
1、Break
推出循环
2、Continue
跳过当前循环,继续下面的循环
3、Return

Return返回的使用方法:终止函数的执行并返回函数的值

    1. 定时器

定时器就是在规定的时间内,完成某项规定的操作,它是一个函数

清除定时器就是在用定时器的时候,定义一个变量来记录定时器的返回值

1. setTimeout(): 延时定时器,只执行一次  window. setTimeout(code,millisec)
1.1.  clear Timeout():清除定时器
2. setlntervar(): 循环定时器,可执行无数次 window. setlntervar(code,millisec)
2.1.  clear lntervar()清除定时器
code可以是用引号括起来的一段代码,也可以是一个函数名,到了指定的时间,系统便会自动调用该函数,当使用函数名作为调用句柄时,不能带有任何参数;而使用字符串时,则可以在其中写入要传递的参数。两个方法中的第二个参数是millisec, 表示延时或者重复执行的毫秒数。
构造函数
析构函数
跨域就是去别人家那东西,
    1. 冒泡排序

原理:

  1. 比较相邻的两个元素,如果前一个比后一个大,则交换位置。
  2. 第一轮比较结束时候,最后一个事最大的元素
  3. 这时候最后一个元素最大,所以最后一个就不需要参与比较大小
    1. Bom以及页面跳转

1、window. location. Href = 返回当前页面的地址

2、window. location. hostname()返回当前页面的域名

3、window. location. pathname()返回当前页面的路径和文件名

4、window. location. protoco1()返回网页使用的协议(http:还是https:)

5、window. location. port()返回当前页面的端口,如果页面使用的是默认端口(http:80, https:443) ,

则大多数浏览器会显示为0或者不显示

6、window. location. reload()刷新当前页面

7、window.location可以用户获取当前页面地址以及重定向到一个新的页面。

8、window.open(url, target, specs, replace) 打开新窗口

9、window对象有两个用来定义浏览器窗口大小的履厂两个属性均返回以px像素为单位的数值) :

10、window.innerHeight它返回浏览器窗口的高度写

11、window.innerWidth返回浏览器窗口的宽度字

(注意:浏览器窗口的视窗不包括I具栏和滚动条。也就是说,全屏状态下,不同的浏览器因为布局不-样,也会返回不同的innerHeight和innerWidth)

    1. Json语法

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

1、JSON的全称是”JavaScript Object Notation",意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式

2、Json是js的原生内容,也就意味着js可以直接取出json对象中的数据

3、Json是一种与语言无关的数据交换的格式,作用:使用ajax进行前后台数据交换!移动端与服务端的数据交换!

4、JSON 最常见的用法之一, 是从web服务器上读取JSON数据(作为文件或作为HttpRequest),将JSON数据转换为JavaScript对象,然后在网页中使用该数据

5、名称/值对包括字段名称(在双引号中),后面写一个冒号,然后是值。类似与js中id=“01”

Json通常用于服务器交换数据,在接收服务器数据时一般是字符串,我们可以使用Json.parse()方法将数据转换为JavaScript对象

  Var str = {“name” : “高子浩” ,“age“ : “23”}

  JSON.parse(str)

  结果:Object {“name” : “高子浩” ,“age“ : “23”}

  注意:单引号必须写在{ }外,每个属性名都必须用双引号,否则会出现异常。

 Json通常用于服务器交换数据,在接收服务器数据时一般是字符串,我们可以使用JSON.stringify( )方法将JavaScript对象转换为字符串

Var a = {a : 1 , b : 2 }

JSON.stringify( a ) ;

结果:“{“a”:1, “b”:2 }“

 

Json数据类型

 (1、数字型(Number)   JavaScript中的双精度浮点数型格式

     整形()    数字1-9,0和正负数

     分数()    分数,比如.3,.9

     指数()    指数,比如e,e+,e-,E,E+,E-

     不能使用八进制和十六进制格式      var obj = {marks:97 }

     在数字中不能使用NaN和infinity

(2、 字符串型(string)  双引号包裹的Unicode字符和反斜杠转义字符

(3、布尔型(Boolean)   true或false

       Var obj = {name:‘ Amit’,marks:97,distinction:true}

(4、数组(Array)       有序的值序列

(5、值(Value)         可以是字符串,数字,true或false,null等等

数字 (整数或浮点数)

字符串(在双引号中)

逻辑值(true或false)

数组(在中括号)

对象(在大括号)

Unll

(1).数组索引可以以0或1开始

(2). JSON数组在中括号中书写

(3). JSON中数组值必须是合法的JSON数据类型(字符串, 数字,对象,数组,布尔值或null)

(4).删除json对象的属性delete

Myobj = {

    “name”:“baidu”,

    “alexa”:1000,

    “sites”:{

        “sites1”:“www. baidu. com”

}

}

第一种:Delete  myobj. Sites. Sites1;

第二种:Delete  myobj. Sites. [“Sites1”];

 

(6、对象(Object)      无序的键:值对集合

(7、空格(Whitespace)  可用于任意符号对之间

(8、Unll                 空

 

6、Xml和Json的相同之处

 (1、json是纯文本

(2、json具有“自我描述性”(人类可读)

 (3、json具有层级结构(值中存在值)

 (4、json可通过javascript进行解析

 (5、json数据可使用ajax进行传输

7、xml和json的不同

 (1、没有结束标签

 (2、更短

 (3、读写的速度更快

 (4、能够使用内建的javascript  eval()方法进行解析

 (5、使用数据

 (6、不使用保留字

因为XML虽然可以作为跨平台的数据交换格式,但是在JS(JavaScript的简写)中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据

    1. Js事件概念

HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件、页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的,就需要了解一下“事件流”的概念。

    1. 事件流

DOM事件流,

  "DOM2事件流"规定的事件流包括三个阶段:

1,事件捕获阶段。 事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。

    2,处于目标阶段。

    3,事件冒泡阶段。  事件的传播是从最特定事件目标到最不特定的事件目标。即从DOM树的叶子到根。

      1. addEventListener

  addEventListener是DOM2级事件新增的指定事件处理程序的操作,这个方法接收3个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值,最后这个布尔值如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序

      1. document,documentElement和document.body三者之间的关系:

1.document代表的是整个html页面,

2.document.documentElement代表是的<html>标签。

3.document.body代表的是<body>标签。

    1. cookie

HTTP协议本身是无状态的。什么是无状态呢,即服务器无法判断用户身份。Cookie实际上是--小段的文本信息(key-value格式) 。客户端向服务器发起请求,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发--个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie- -同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。

持久cookie设定了它的生命周期expires,此时,cookie像商品一样,有个保质期,关闭浏览器之后,它不会销毁,直到设定的过期时间。对于持久cookie,可以在同一个浏览器中传递数据,比如,你在打开一个淘宝页面登陆后,你在点开一个商品页面,依然是登录状态,即便你关闭了浏览器,再次开启浏览器,依然会是登录状态。这就是因为cookie自动将数据传送到服务器端, 在反馈回来的结果。持久cookie就像是我们办理了一张积分卡,即便离开,信息一直保留,直到时间到期,信息销毁。

会话cookie

会话cookie是指在不设定它的生命周期expires时的状态,前面说了,浏览器的开启到关闭就是一-次会话,当关闭浏览器时,会话cookie就会跟随浏览器而销毁。当关闭一个页面时,不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时, 单一的买卖过程,离开之后,信息则销毁。

Cookie就是我们所理解的缓存:

但是它有缺点,它除了能放视频它还能放电影、音乐、文章甚至我们的密码也能放,用户名信息也能放,所以放一-些用户信息就比较危险了,比方说我第一次访问网站,我登录了,我的名字叫张三,密码abc,服务端将我的信息放到Cookie里面再发送给客户端,那我以后确实不需要登录了,我就可以直接在本地读取账号密码登录,这样就不安全了

Cookie能提高访问服务端的效率,但是安全性较差!

      1. 本地储存

通过本地存储(LocalStorage),web应用程序能够在用户浏览器中对数据进行本地的存储。

在HTML5之前,应用程序数据只能存储在cookie中,包括每个服务器请求。本地存储则更安全,并且可在不影响网站性能的前提下将大量数据存储于本地。

与cookie不同,存储限制要大得多(至少5MB),并且信息不会被传输到服务器

Sessionstorage  临时存储,为每一个数据源维持一个存储区域在浏览器打开期间存在,包括页面重新加载

Localstorage  长久存储,但是浏览器关闭后,数据依然会一直存在

Sessionstorage.clear(); 将本地存储的所有数据全部删除,仅在当前会话下有效,关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信

Localstorage .clear 删除本地储存的所有数据

    1. 事件句柄(关键字)
  1. click                   点击事件  
  2. load                   加载
  3. mouseover             鼠标
  1. onchange
  1.  

HTML 元素已被改变

  1. onclick
  1.  

用户点击了 HTML 元素

  1. onmouseover
  1.  

用户把鼠标移动到 HTML 元素上

  1. onmouseout
  1.  

用户把鼠标移开 HTML 元素

  1. onkeydown
  1.  

用户按下键盘按键

  1. onload
  1.  

浏览器已经完成页面加载

 

  1. onabort

图像的加载被中断。

 

 

  1. onblur

元素失去焦点。

 

 

  1. onchange

域的内容被改变。

 

 

  1. onclick

当用户点击某个对象时调用的事件句柄。

 

 

  1. ondblclick

当用户双击某个对象时调用的事件句柄。

 

 

  1. onerror

在加载文档或图像时发生错误。

 

 

  1. onfocus

元素获得焦点。

 

 

  1. onkeydown

某个键盘按键被按下。

 

 

  1. onkeypress

某个键盘按键被按下并松开。

 

 

  1. onkeyup

某个键盘按键被松开。

 

 

  1. onload

 

      1. 鼠标事件

一张页面或一幅图像完成加载。

 

 

  1. onmousedown

鼠标按钮被按下。

 

 

  1. onmousemove

鼠标被移动。

 

 

  1. onmouseout

鼠标从某元素移开。

 

 

  1. onmouseover

鼠标移到某元素之上。

 

 

  1. onmouseup

鼠标按键被松开。

 

 

  1. onreset

重置按钮被点击。

 

 

  1. onresize

窗口或框架被重新调整大小。

 

 

  1. onselect

文本被选中。

 

 

  1. onsubmit

确认按钮被点击。

 

 

  1. onunload

用户退出页面。

 

     
        1. 鼠标键盘
  1. altKey

返回当事件被触发时,"ALT" 是否被按下。

  1. button

返回当事件被触发时,哪个鼠标按钮被点击

  1. clientX

返回当事件被触发时,鼠标指针的水平坐标。

  1. clientY

返回当事件被触发时,鼠标指针的垂直坐标。

  1. ctrlKey

返回当事件被触发时,"CTRL" 键是否被按下。

  1. metaKey

返回当事件被触发时,"meta" 键是否被按下。

  1. relatedTarget

返回与事件的目标节点相关的节点。

  1. screenX

返回当某个事件被触发时,鼠标指针的水平坐标。

  1. screenY

返回当某个事件被触发时,鼠标指针的垂直坐标。

  1. shiftKey

返回当事件被触发时,"SHIFT" 键是否被按下。

    1. jQuery

什么是jQuery

  1. 一个快速的、简洁的JavaScript框架
  2. jQuery可以兼容各种浏览器
  3. jQuery是使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单
      1. JS和jQuery的区别
  1. javascript的入口函数(window. onload)要等到页面中的所有资源(包括图片、文件)加载完成才开始执行
  2. jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载
  3. 原生js如果编写多个入口函数,后面编写的会覆盖前面编写的‘
  4. jQuery中编写多个函数,后面的不会覆盖前面的

 

JavaScript

jQuery

入口函数

只能有一个,如果有多个,后面的会覆盖前面

可以有多个,并且不会发生覆盖情况

代码容错性

代码容错性差,代码出现错误,会影响到后面代码的运行。

代码容错性好,屏蔽错误,并且不会影响后面代码的运行。

浏览器兼容性

兼容性差,比如火狐不支持innerText

对浏览器兼容性做了封装,因此不存在兼容性问题

操作复杂性

DOM操作复杂,对于一些简单的动画效果,实现起来比较麻烦

DOM操作简单,支持隐式迭代,实现动画非常简单。

    1. 入口函数

1、$(document).ready(function() { });

2、$(function() { });

      1. $符号

$是一个函数:$( );参数不一样,功能不一样

$ === jQuery,也就是说能用$的地方,完全可以用jQuery,$仅仅是简写形式。

      1. jQuery对象与DOM对象之间的转换
    1. jquery对象转DOM对象

var $li = $(“li”)

1、$li[0]  2、$li.get(0)

    1. DOM对象转jquery对象

var $obj = $(domObj)

$(document).ready(function( ){ })(典型

    1. jQuery选择器
      1. 基本选择器

名称

用法

描述

ID选择器

$(“#id”);

获取指定ID的元素

类选择器

$(“.class”);

获取同一类class的元素

标签选择器

$(“div”);

获取同一类标签的所有元素

并集选择器

$(“div,p,li”);

使用逗号分隔,只要符合条件之一就可。获取所有的div、p、li元素

交集选择器(标签指定式选择器)

$(“div.redClass”);

注意选择器1和选择器2之间没有空格,class为redClass的div元素,注意区分后代选择器。

      1. 层级选择器

名称

用法

描述

子代选择器

$(“ul>li”);

使用>号,获取儿子层级的元素,注意,并不会获取孙子层级的元素

后代选择器

$(“ul li”);

使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

      1. 过渡选择器

 

用法

描述

:eq(index)

$(“li:eq(2)”).css(“color”, ”red”);

$(“li”).eq(2).css(“color”, ”red”);

获取到的li元素中,选择索引号为2的元素,索引号index从0开始。

:odd

$(“li:odd”).css(“color”, ”red”);

获取到的li元素中,选择索引号为奇数的元素

:even

$(“li:even”).css(“color”, ”red”);

获取到的li元素中,选择索引号为偶数的元素

      1. 筛选选择器(方法)

 

用法

说明

children(selector)

$(“ul”).children(“li”)

相当于$(“ul>li”),子类选择器

find(selector)

$(“ul”).find(“li”);

相当于$(“ul li”),后代选择器

siblings(selector)

 

$(“#first”).siblings(“li”);

查找兄弟节点,不包括自己本身。

parent()

$(“#first”).parent();

查找父亲

eq(index)

$(“li”).eq(2);

相当于$(“li:eq(2)”),index从0开始

next()

$(“li”).next()

找下一个兄弟

prev()

$(“li”).prev()

找上一次兄弟

使用的功能有

  1. 下拉菜单 :this+children+mouseenter+mouseleave
  2. 突出展示 :siblings+find
  3. 手风琴: next+parent
  4. 淘宝精品 : index+eq
    1. jQuery操作样式
      1. css

css(name, value):

$("#one").css("background","gray")调整背景颜色;

css(obj):

$("#one").css({

"background":"gray",

"width":"400px",

"height":"200px”

})对象形式设置样式

      1. class

addClass(name):

$(“div”).addClass(“one”)所有div添加对象形式one的样式

removeClass(“name”):

$(“div”).removeClass(“one”)移除div中对象形式one的样式

hasClass(name):

$(“div”).hasClass(“one”)判断第一个div是否有one的样式

toggleClass(name):

$(“div”).toggleClass(“one”) 切换的样式类名,如果有,移除该样式,如果没有,添加该样式

    1. jQuery的特殊操作
      1. val

val用于设置和获取表单元素的值,例如input、textarea的值

$("#name").val(“张三”) 设置

$("#name").val() 获取

多用于搜索

      1. HTML与TEXT

html方法相当于innerHTML text方法相当于innerText

//设置内容

$(“div”).html(“<span>这是一段内容</span>”);

//获取内容

$(“div”).html()



//设置内容

$(“div”).text(“<span>这是一段内容</span>”);

//获取内容

$(“div”).text( )

区别:HTML方法会识别HTML标签,TEXT方法会那内容直接当成    字符串,并不会识别TEXT标签

      1. Width与height

设置或者获取高度

//带参数表示设置高度

$(“img”).height(200);

//不带参数获取高度

$(“img”).height();

获取网页的可视区宽高

//获取可视区宽度

$(window).width();

//获取可视区高度

$(window).height();
      1. scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度

$(window).scrollTop();

//获取页面被卷曲的宽度

$(window).scrollLeft();
      1. offset与position

offset方法获取元素距离document的位置,position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象:{left:100, top:100}

$(selector).offset();

//获取相对于其最近的有定位的父元素的位置。

$(selector).position();
    1. jQuery事件
      1. 常用事件
click(handler)          单击事件

mouseenter(handler)     鼠标进入事件

mouseleave(handler)     鼠标离开事件

bind方式注册事件

//第一个参数:事件类型

//第二个参数:事件处理程序

$("p").bind("click mouseenter", function(){

    //事件响应方法

}); 不支持动态

delegate注册委托事件

// 第一个参数:selector,要绑定事件的元素

// 第二个参数:事件类型

// 第三个参数:事件处理函数

$(".parentBox").delegate("p", "click", function(){

    //为 .parentBox下面的所有的p标签绑定事件

});
      1. On注册事件

on注册简单事件

// 表示给$(selector)绑定事件,并且由自己触发,不支持动态绑定。

$(selector).on( "click", function( ) { });

on注册委托事件

// 表示给$(selector)绑定代理事件,当必须是它的内部元素span才能触发这个事件,支持动态绑定
$(selector).on( "click",“span”, function() {});

on注册事件的语法:

// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)

// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。

// 第三个参数:data,传递给处理函数的数据,事件触发的时候通过event.data来使用(不常使用)

// 第四个参数:handler,事件处理函数

$(selector).on(events[,selector][,data],handler);

​
      1. 事件解绑

unbind方式

$(selector).unbind(); //解绑所有的事件
$(selector).unbind("click"); //解绑指定的事件

undelegate方式

$( selector ).undelegate(); //解绑所有的delegate事件

$( selector).undelegate( “click” ); //解绑所有的click事件

off方式(推荐)

// 解绑匹配元素的所有事件

$(selector).off();

// 解绑匹配元素的所有click事件

$(selector).off("click");
      1. 触发事件
$(selector).click(); //触发 click事件

$(selector).trigger("click");
      1. jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装,处理了兼容性。

//screenX和screenY   对应屏幕最左上角的值

//clientX和clientY   距离页面左上角的位置(忽视滚动条)

//pageX和pageY   距离页面最顶部的左上角的位置(会计算滚动条的距离)

​

//event.keyCode 按下的键盘代码

//event.data    存储绑定事件时传递的附加数据

​

//event.stopPropagation()   阻止事件冒泡行为

//event.preventDefault()    阻止浏览器默认行为

//return false:既能阻止事件冒泡,又能阻止浏览器默认行为。
      1. 补充

通常情况下,只有设置操作才能把链式编程延续下去。因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象,想要回复到上一次的状态,并且返回匹配元素之前的状态。
      1. Each

jQuery的隐式迭代会对所有的DOM对象设置相同的值,但是如果我们需要给每一个对象设置不同的值的时候,就需要自己进行迭代了。

作用:遍历jQuery对象集合,为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素(DOM对象)

$(selector).each(function(index,element){});
      1. 共存

jQuery使用$作为标示符,但是如果与其他框架中的$冲突时,jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

 

    1. AJAX

什么是AJAX

AJAX = 异步 JavaScript 和 XML。

AJAX不是一种编程语言,它只是一种创建更好的、更具交互性的web应用程序的技术。

 函数:loadXMLDoc( )

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值