欢迎来到俊杰的博客,你的关注和点赞是我前进的动力

jquery总结

                总结一些基础知识希望对前来的小伙伴有帮助 


1. jQuery的载入事件和JS有什么区别?
答:window.onload是在网页中所有的元素(包括相关联的文件)完全加载到浏览器后才触发;
$(document).ready()是在页面的DOM结构加载完毕就触发,

并不是等着网页中所有的元素(包括相关联的文件)完全加载到浏览器后才触发。
2. 绑定事件有哪些方法?解除绑定有哪些方法?
答:事件绑定有:bind方法,但同时我们也可以通过代码简化来取消输入bind方法,

同样可以达到绑定事件的需求;例如我们需要绑定一个onclick事件,
就需要使用$("#id").bind("click",function())这样书写,

但是经过简化之后就可以使用$("#id").click(function())这样简化过后的方法来数学绑定事件。
绑定事件还有:live和on,其中live的作用类似于追加,作用特征为hover事件中,hover绑定完事件后,

再次使用bind方法绑定时新绑定的元素不会拥有hover事件的特性,
但是如果使用live方法绑定,则可以使得新追加的元素拥有与hover事件共享的效果;

on可以取代live和bind方法,on是为以上两种方法的升级版本;代码结构为:$(".class").on("要绑定的事件")
解除绑定则有:unbind方法, 还有die和off,
代码如下:$("#id").unbind("输入需要去除的绑定的元素,例如 ’mouseover‘ ");
以下图中使用红色边框圈中的部分是可以进行代码简化的事件绑定的方法。
3. 常见的鼠标事件有哪些?
答:mousedown( [ [data] , fn ] ) 按下鼠标按钮时发生的事件
mousemove( [ [data] , fn ] ) 鼠标移动时发生的事件
mouseout( [ [data] , fn ] ) 鼠标移开时发生的事件
mouseover( [ [data] , fn ] ) 鼠标悬浮在元素上时发生的事件
mouseup( [ [data] , fn ] ) 鼠标点击后松开时发生的事件

4. hover事件和toggle事件分别有什么作用?
答:hover事件:hover事件是mouseover和mouseout两个函数的合体,其代码格式为:
jQuery对象.hover(function(){},function(){});其中第一个function作用与mouseover函数作用相同,

第二个function与mouseout作用相同。
toggle事件:toggle事件是一种function多次循环的事件类型,但是与循环不同的是,

在最后一次触发点击之后的第一次点击会使得整个toggle事件回到第一次点击时的样子
,也就是说toggle事件是一个环形事件,在循环走完一圈之后再次回到起点重新开始,

其代码结构如下:jQuery对象.hover(function(){},function(){});

5. 标准DOM中事件的传播机制是怎样的?
答:在回答事件传播机制之前,我们首先要了解什么是 事件流 ,DOM事件流存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段,
那么在标准的二级COM中规定了事件的处理模型:先捕获再冒泡。


一、工厂函数有什么作用?
答:为了使用$()选择器从而得到一组jQuery对象。
二、jQuery有哪些选择器?
答:(1) 层次选择器:
层次选择器是通过DOM对象之间的层次关系获取并匹配元素,例如后代元素、子元素、相邻元素等,如一下四个:
$("ancestor descendant") 匹配并获取ancestor元素里的所有后代descendant元素;

$("parent>child") 匹配并获取parent元素里的子元素;

$("prev+next") 匹配并获取紧挨着prev元素后的next元素;

$("prev~[A1] siblings") 匹配并获取prev 元素后的所有siblings元素
(2)属性选择器:
顾名思义,属性选择器是指通过元素某个属性及其值来匹配并获取相关元素的,如以下七个:
$("selector[attr]") 获取匹配selector选择器的并且拥有attr 属性的元素

$("selector[attr='val]") 获取匹配selector选择器的并且attr属性的值是val的元素

$("selector[attr !='val ']”) 获取匹配selector选择器的并且attr属性的值不是val的元素

$("selectorlattr ^=' val ']") 获取匹配selector选择器的并且attr属性的值是以val开始的元素

$("selector[attr $=' val']") 获取匹配selector选择器的并且attr属性的值是以val结尾的元素

$("selector[attr *=' val']")获取匹配 selector选择器的并且attr属性的值包含val 的元素

$("selector[][][...") 属性选择器组合

(3)表单选择器
表单在Whb前端开发中使用非常频繁,jQuery专门计入了表单选择器,这给开发人员操纵表单带来了极大的便利:
:input 匹配并获得表单中所有input,textarea,select和button元素
:text 匹配并获得所有的文本框
:password 匹配并获得所有密码框
:radio 匹配并获得所有单选按钮
:checkbox 匹配并获得所有复选框
:submit 匹配并获得所有提交按钮
:image 匹配并获得所有图片
:reset 匹配并获得所有重置按钮
:button 匹配并获得所有按钮
:file 匹配并获得所有文件域
:hidden 匹配并获得所有隐藏域
(4)表单属性选择器
表单属性选择器试试表单选择器的有力补充:
:enabled 匹配并获得所有正常使用的元素
:disabled 匹配并获得所有禁用的元素
:checked 匹配并获取所有被选中的复选框
:selected 匹配并获得下拉列表框的选中项
(5)内容选择器
内容选择器主要使用通过元素所包涵的文本或子元素进行匹配或获取,如下所示
:contains(txt) 匹配并获得包含有txt文本的元素
:empty 匹配并获得没有子元素或者文本的元素
:has(selector)匹配并获得包含有selector选择器的元素
(6)过滤选择器
过滤选择器是在获取到元素后通过索引进一步进行过滤或筛选(筛选后得到的仍然是jQuery对象而非dom对象)如下所示:
:first 获取匹配到的第一个元素
:last 获取匹配到的最后一个元素
:not(selector)获取除了匹配的元素之外的元素
:even 匹配所有索引值为偶数的元素,从0开始计数
:odd 匹配所有索引值为奇数的元素,从0开始计数
:eq(index)匹配一个给定索引值的元素,从0开始计数
:gt(index) 匹配所有大于给定索引值的元素,从0开始计数
:it(index) 匹配所有小于给定索引值的元素,从0开始计数
(7)可见性选择器
可见性选择器比较简单,主要是通过显示/隐藏状态来获取和匹配元素的,如下表所示:
:hidden 匹配所有的隐藏元素
:visible 匹配所有的可见元素
三丶jQuery中如何实现字符的转义操作?
答:在jQuery中,特殊字符是无法通过选择器直接选择的,所以需要在$(“#t// #”) 特殊字符前添加 // 两个左斜杆来实现特殊字符的转义
四丶jQuery中常见的操作DOM节点的方法有哪些?
答:查找节点、创建节点、插入节点、删除节点、复制节点、替换节点、包裹节点、属性操作、样式操作、设置和获取HTML,文本以及值、遍历节点、CSS-DOM操作。
function
节点操作中的append和appendTo的用法:
append()方法可以将制定的内容插入到制定的元素的末尾,其代码结构为:$.("xxx").append("需要加入的内容");
要注意的是,在$之后的()中,选取指定的元素时,“.”代表选择的是class元素,而“#”代表的是选择id元素。

$(document).ready(function(){
--这一段代码是为了防止文档没有加载完成时就加载jQuery--
--建议每次书写都加上这一段代码之后再进行--
})


1. jquery中常见的动画函数有哪些?
1. 无参数:没有动画特效
2. slow:慢速(在600ms内)
3 . normal:正常速度(在400毫秒内)
4 . fast:快速(在200毫秒内)
5自定义数字:开发人员可以自己设置一个数字表 示速度 ,单位是毫秒。
** show([speed,[easing] , [fn] ] ):
动画函数的速度特征: easing:
1 . linear:表示值为线性变化(可能比较匀速)
2 . swing:表示值为振荡变化(可能先慢后快)
一:show() 显示动画特效
二 :hide() 隐藏动画特效
2.如何通过jquery实现广告的轮播特效?

答:获取鼠标的移动 然后显示不同的幻灯片 接着调用滑入停止动画,划出执行动画;运用hover和计时器。

1. 通过调用滑动动画的函数向上( slideDown() [高度增加]),或者向下( sildeUp() [高度减少]),以及向上下滑动切换特效( sildeToggle() );
总结:
一:自定义函数动画
animate( params,[speed],[easing],[fn] )
1 . 参数params:此动画要变更到的CSS属性目标值。(从当前 值开始向目标值"迈进")

2 .参数 speed:速度

3 .参数 easing:值得变化方式,有两个取值" linear( 线性变化)" 和" swing( 振动变化)",一般忽略此值。

4. 参数 fn : 回调函数
二:停止函数动画
stop( [clearQueue],[jumpToEnd])
1. clearQueue : 如果设置为true,则清空对列。可以立刻结束动画 。
2. gotoEnd:让当前正在执行的动画立刻完成,并且重设show和hide的原始样式,调用回调函数等。


1. 什 么 是 AJAX ?
答:ajax=Asynchronous JavaScript and XML( 异步的javaScript和XML)。是一种使用现有的标准的新方法。
ajax能实现在不重新加载整个页面的情况下,实现与服务器交换数据并更新部分网页,从而得到更好的交互效果。
2.Ajax的核心对象是什么?如何创建它 ?
答: XMLHttpRequest
var test= new XMLHttpRequest();
考虑到兼容性创建完整语法如下:

var xmlhttp;
if (window. XMLHttpRequest ){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp = new Activeobject( "microsoft.xmlHTTP " )
}
3. Ajax异步请求的步骤是什么?
答:
1. 创建XMLHttpRequest
2.链接服务器、
get和post的区别:
(1)那个get请求时,参数在url中显示,而使用post方式,则不会显示出来。
(2)使用get请求发送数据量小,post请求发送数据量大
(3)get请求需注意缓存问题,post请求不需要担心这个问题。
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
1.无法使用缓存文件(更新服务器上的文件或数据库)
2.向服务器发送大量数据(POST 没有数据量限制)
3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
3.向服务器发送请求
实例: xmlHttp.send();
open(method,url,async)
规定请求的类型,URl以及是否异步处理请求。
method:请求的类型。GET或POST
url:文件在服务器上的位置
anync:ture(异步)或false(同步)
4. 接受服务器的返回值
XMLHttpRequest取得相应
- responseText:获得字符串形式的响应数据
- responseXML:获得xml形式的响应数据
- status和statusText:以数字和文本形势返回http转态码
- getAllResponseHeader():获得所有的相应
- getResponseHeader():查询相应中的某个字段的值
- readState属性
readystate的五种返回值所代表的意义:
- 0(未初始化) 还没调用open()方法
- 1(载入)已经调用send方法(),正在发送请求
- 2(载入完成)send()方法已经完成,已收到相应
- 3(解析)正在解析响应内容
- 4(完成)相应内容解析完成,可在客户端调用。
ajax中status几种常态说明:
- 100——客户必须继续发出请求
- 101——客户要求服务器根据请求转换HTTP协议版本
- 200——成功
- 201——提示知道新文件的URL
- 300——请求的资源可在多处得到
- 301——删除请求数据
- 404——没有发现文件、查询或URl
- 500——服务器产生内部错
4. jquery提供了那些函数来实现Ajax?
ajax方法:通过$打点调用,它把 请求 和 响应 的步骤都封装在一起,在内部完成了回调。
load方法:load是加载的意思,通过打点来调用load,方便我们从服务器端获取数据加载到此对象中。
get方法:通过$打点调用,以get的方式,来获取服务端返回的数据,并可以自己指定返回数据要自动转换成的格式。
getJson方法:通过$打点调用,以get的方式,来获取服务端返回的数据,并自动将返回的数据转换成json格式。
post方法:通过$打点调用,以post的方式,来获取服务端返回的数据,并可以自己指定返回数据要自动转换成的格式。
一:实例:
请求 描述
$( selector).load( url, data, callback) 把远程数据加载
到被选的元素中

$.ajax(options) 把远程数据
加载到XMLHttpRequest对象中
$.get( url,data,callback,type) 使用http get来加载远程数据

$.post(url,data,callback,type) 使用
http post来加载远程数据

$.getJson(url,data,callback,type) 使用http
get来加载远程Json数据

$.getscript(url,callback) 加载
并执行远程的javas文件

(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项

总结:
1. js中xmlhttpRequerst用于在后台与服务器交换数据

2. HTTP请求一般由四个部分组成:
A 请求方式:例get post
B 请求url
C 请求头:包含客户端的信息和身份验证信息等
D 请求体:也就是请求正文,包含表单信息等
3. HTTP响应一般由三个部分组成:
A 状态码:有数字和文字组成
B 响应头:包含服务器信息,如服务器时间等
C 响应体:及响应正文;
4.HTTP状态码由三位数字构成,首位数字静定梁状态码的类型:
A 1xx:信息类,表示收到的浏览器请求
B 2xx:成功 表示用户请求被正确接收
C 3xx:重定性,表示请求没有成功,用户需要采取进 一步动作
D 4xx:客户端错误,表示用户提交的请求有错误,如404
E 5xx:服务器错误。表示服务器不能完成对请求的处理;
5. jquery中可以使用load,get,post,getjson,ajax,来简化ajax请求。
6.在ajax请求数据是,服务器经常返回单个对象、数组、字典、xml等格式的数据。要学会处理使用


1. 实现layer中的控件需要引用那些js文件?
答:需要引入layer.js就行了
2 . 关于layer课程中提供了5中弹性类型,分别是什么?
答: 1.laert弹出框:layer.alert('你好',{icon:6})
2.msg消息框 : layer.msg('hello') //time :设置消息框的提示时间
btn:设置按钮 yes:确定按钮回掉方法(yes对
应第一个按钮)
3. confirm 对话框 :layer.confirm('你怎样')btn:['好',‘不’]
4 . layer.open弹出面板 可设置页面{
type:2 (1)//1值时可以在弹出层中,显示指定的html内容或页面中隐藏的部分:为2时在弹出层内置一个iframe来显示一个其他的网页。
title:可看页面的最大化
shadeclose:true 是否点击遮罩关闭
end:functions(){
//弹框销毁时执行
}}
5 .layer.open({
type:1
content:"任意传入的文本或html content是一个普通的String对象"
})
3. layui中常用的控件有哪些?
1 分页条
2 富文本编辑器3
3 导航
4 日期时间

总结:
1:layer弹出层有alert、confirm、msg、tips、load、open、photos、tab等多种方法,可以显示不同的形式和效果
layer的open方法的type值决定了其显示的形式和效果:信息框type=0(默认)、页面层type=1、iframe层type=2、加载层type=3、tips层type=4。
当点击弹出层右上角的X按钮时,会触发cancel事件,我们可以指定cancel的处理函数;当弹出层关闭销毁时,会执行end事件,我们可以定义end的处理函数。
layui中的控件非常多,使用这些控件可以大大地提高我们的开发效率,给大家介绍了几个常用的控件:分页条、富文本编辑器、导航。
日期的选择比较常见,我们给大家提供了日期选择的小组件【type=data】
建议使用较多浏览器支持的要引入一个文件 WebCalendat.js文件

posted @ 2019-09-20 13:08  -嗯哼-  阅读(350)  评论(0编辑  收藏  举报