前端jquery部分简单整理

ngz311616 ngz311616     2022-12-22     612

关键词:

jQuery的介绍
为什么要使用jQuery
在用js写代码时,会遇到一些问题:
window.onload 事件有事件覆盖的问题,因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐,代码量多。
代码很乱,各个页面到处都是。
动画效果很难实现。
jQuery的出现,可以解决以上问题。

什么是 jQuery
jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率。
js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可。

jQuery 的两大特点
链式编程:比如.show()和.html()可以连写成.show().html()。
隐式迭代:隐式 对应的是 显式。隐式迭代的意思是:在方法的内部进行循环遍历,而不用我们自己再进行循环,简化我们的操作,方便我们调用。

使用 jQuery 的基本步骤
(1)引包
(2)入口函数
(3)功能实现代码(事件处理)

jQuery 的入口函数和 $ 符号
写法一:
//1.文档加载完毕,图片不加载的时候,就可以执行这个函数。
$(document).ready(function ()
alert(1);
)
写法二:
// 2.文档加载完毕,图片不加载的时候,就可以执行这个函数。
$(function()
alert(1);
);
写法三:
// 3.文档加载完毕,图片也加载完毕的时候,在执行这个函数。
$(window).ready(function()
alert(1);
)

jQuery入口函数与js入口函数的区别:
区别一:书写个数不同:
Js 的入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery 的入口函数,可以出现任意多次,并不存在事件覆盖问题。
区别二:执行时机不同:
Js的入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
文档加载的顺序:从上往下,边解析边执行。

jQuery的$符号
jQuery 使用 $ 符号原因:书写简洁、相对于其他字符与众不同、容易被记住。

js中的DOM对象 和 jQuery对象 比较
其本质jQuery 就是把 DOM 对象重新包装了一下,让其具有了 jQuery 方法。

二者的相互转换

jQuery的选择器
jQuery 的基本选择器

技术分享图片

 


技术分享图片

 


层级选择器

技术分享图片

 

技术分享图片

 


基本过滤选择器

技术分享图片

 

技术分享图片

 


属性选择器

技术分享图片

 


筛选选择器

技术分享图片

 




jQuery动画效果
显示动画
方式一:
$("div").show();
方式二:
$(‘div‘).show(3000);
方式三:
$("div").show("slow");
方式四:
//show(毫秒值,回调函数;
$("div").show(5000,function ()
alert("动画执行完毕!");
);

隐藏动画
$(selector).hide();
$(selector).hide(1000);
$(selector).hide("slow");
$(selector).hide(1000, function());

开关式显示隐藏动画
$(‘#box‘).toggle(3000,function());
显示和隐藏的来回切换采用的是toggle()方法:就是先执行show(),再执行hide()。

滑入和滑出
1、滑入动画效果:(类似于生活中的卷帘门)
$(selector).slideDown(speed, 回调函数);
2、滑出动画效果:
$(selector).slideUp(speed, 回调函数);
3、滑入滑出切换动画效果:
$(selector).slideToggle(speed, 回调函数);

淡入淡出动画
1、淡入动画效果:
$(selector).fadeIn(speed, callback);
2、淡出动画效果:
$(selector).fadeOut(1000);
3、淡入淡出切换动画效果:
$(selector).fadeToggle(‘fast‘, callback);

自定义动画
$(selector).animate(params, speed, callback);
作用:执行一组CSS属性的自定义动画。
第一个参数表示:要执行动画的CSS属性(必选)
第二个参数表示:执行动画时长(可选)
第三个参数表示:动画执行完后,立即执行的回调函数(可选)

停止动画
$(selector).stop(true, false);
第一个参数:
true:后续动画不执行。
false:后续动画会执行。
第二个参数:
true:立即执行完成当前动画。
false:立即停止当前动画。
PS:参数如果都不写,默认两个都是false。实际工作中,直接写stop()用的多。


jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

设置属性值或者 返回被选元素的属性值
attr()

移除属性
removeAttr()
prop()


关于attr()和prop()的区别

什么时候使用attr(),什么时候使用prop()?
1.是有true,false两个属性使用prop();
2.其他则使用attr();

addClass(添加多个类名)
removeClass从所有匹配的元素中删除全部或者指定的类。(可以通过添加删除类名,来实现元素的显示隐藏)

toggleClass如果存在(不存在)就删除(添加)一个类。//toggleClass(‘box‘)

html
html() 是获取选中标签元素中所有的内容

text
text() 获取匹配元素包含的文本内容

val
val()用于表单控件中获取值,比如input textarea select等等


使用jQuery操作input的value值


jQuery的文档操作
插入操作
父元素.append(子元素)
解释:追加某元素,在父元素中添加新的子元素。子元素可以为:stirng | element(js对象) | jquery元素

子元素.appendTo(父元素)
解释:追加到某元素 子元素添加到父元素

父元素.prepend(子元素);
解释:前置添加, 添加到父元素的第一个位置

父元素.prependTo(子元素);
解释:后置添加, 添加到父元素的最后一个位置

父元素.after(子元素);
子元素.inserAfter(父元素);
解释:在匹配的元素之后插入内容

父元素.before(子元素);
子元素.inserBefore(父元素);
解释:在匹配的元素之后插入内容

克隆操作
$(选择器).clone();
解释:克隆匹配的DOM元素

修改操作
$(selector).replaceWith(content);
将所有匹配的元素替换成指定的string、js对象、jquery对象。

$(‘<p>哈哈哈</p>‘)replaceAll(‘h2‘);
解释:替换所有。将所有的h2标签替换成p标签。

删除操作
$(selector).remove();
解释:删除节点后,事件也会删除(简言之,删除了整个标签)

$(selector).detach();
解释:删除节点后,事件会保留

$(selector).empty();
解释:清空选中元素中的所有后代节点



jQuery的位置信息
宽度和高度
获取宽度 .width()
设置宽度 .width( value )

高度
获取高度 .height()
设置高度 .height( value )


innerHeight()和innerWidth()
获取内部宽 .innerWidth()
设置内部宽 .innerWidth(value);

获取内部高 .innerHeight()
设置内部宽 .innerHeight(value);


outWidth和outHeight()
获取外部宽 .outerWidth( [includeMargin ] )
设置外部宽 .outerWidth( value )

获取外部高 .outerHeight( [includeMargin ] )
设置外部高 .outerHeight( value )

偏移
获取 .offset()
设置 .offset( coordinates )

元素坐标 .position()
滚动距离
获取:
水平方向 .scrollLeft()
描述:获取匹配的元素集合中第一个元素的当前水平滚动条的位置(页面卷走的宽度)

设置:
.scrollLeft( value )
描述:设置每个匹配元素的水平方向滚动条位置。

垂直方向
获取:
.scrollTop()
描述:获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置(页面卷走的高度)
设置:
.scrollLeft( value )
描述:设置每个匹配元素的垂直方向滚动条位置。



JS的事件流的概念
什么是事件流
事件流描述的是从页面中接收事件的顺序
1、DOM事件流
“DOM2级事件”规定的事件流包括三个阶段:
① 事件捕获阶段;
② 处于目标阶段;
③ 事件冒泡阶段

document、documentElement和document.body三者之间的关系:
document代表的是整个html页面;
document.documentElement代表的是<html>标签;
document.body代表的是<body>标签;

三阶段示意图:

技术分享图片

 


jquery的常用事件

技术分享图片

 



事件对象
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件流的由来
微软和网景乱搞

关于event对象

技术分享图片

 

技术分享图片

 



jQuery的事件绑定和解绑
绑定事件
语法
bind(type,data,fn)
描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。

参数解释:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数


解绑事件
语法
unbind(type,fn);
描述:
bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
如果没有参数,则删除所有绑定的事件。
如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

参数解释:
type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

把所有段落的所有事件取消绑定
$("p").unbind()

自定义事件
语法
trigger(type,data);
描述:在每一个匹配的元素上触发某类事件,它触发的是由bind()注册的自定义事件。

参数解释:
type (String) : 要触发的事件类型
data (Array) : (可选)传递给事件处理函数的附加参数

一次性事件
语法
one(type,data,fn)
描述:
为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同

参数解释:
type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数



事件委托(事件代理)
什么是事件委托
通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。

原理:
  利用冒泡的原理,把事件加到父级上,触发执行效果。
作用:
1.性能要好
2.针对新创建的元素,直接可以拥有事件

事件源:
  跟this作用一样(他不用看指向问题,谁操作的就是谁), event对象下的
使用情景:
  为DOM中的很多元素绑定相同事件;
  为DOM中尚不存在的元素绑定事件;

语法:
on(type,selector,data,fn);
描述:在选定的元素上绑定一个或多个事件处理函数

参数解释
events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时,要传递给事件处理函数的event.data。
fn:回调函数


轮播图实现 网上到处都有,改改就行了


jQuery的ajax
什么是ajax
AJAX = 异步的javascript和XML(Asynchronous Javascript and XML)
简言之,在不重载整个网页的情况下,AJAX通过后台加载数据,并在网页上进行显示。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

jQuery的load()方法
load()方法从服务器加载数据,并把返回的数据放入被选元素中。
语法
$("selector").load(url,data,callback);

jquery的getJSON方法
jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据,并对数据进行解析,显示到页面中
语法:
$.getJSON(url,[data],[callback])

参数解释:
url参数:为请求加载json格式文件的服务器地址
可选项data参数:为请求时发送的数据
callback参数:为数据请求成功后执行的函数

jquery的$.get()方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法:
$.get(URL,callback);

url参数:规定你请求的路径,是必需参数
callback参数:为数据请求成功后执行的函数

jquery的post()方法
post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面
语法:
$.post(URL,data,callback);

url参数:规定你请求的路径,是必需参数,可选的data参数是连同请求发送的数据
可选的callback参数:为数据请求成功后执行的函数

基本格式
//get()方式
$.ajax(
url:‘./data/index.txt‘,
type:‘get‘,
dataType:‘text‘,
success:function(data)
$(‘p‘).html(data);

,
error:function(error)
console.log(error)


//post()方式
$.ajax(
url:‘/index‘,
type:‘post‘,
data:name:‘张三‘,age:12,
success:function(data)
$(‘p‘).html(data);
,
error:function(error)
console.log(error)



XMLHttpRequest自己学去吧

jquery还包含:
jquery 插件 https://www.oschina.net/project/tag/273/jquery
jqueryUI https://jqueryui.com/ http://www.jqueryui.org.cn/














































































































































































































































































































































































































































































kendoui使用基础介绍与问题整理——简单说明

  由于项目需要,指定我们使用kendoUI作为前端框架,然后开始入了kendo的“坑”。  前期是学习阶段,对各个插件的用法进行了基本的了解,开始并未觉得有什么严重问题,确实kendo的前端的大部分插件都是有的,... 查看详情

百度前端技术学院2015javascript基础部分实现自己的小型jquery

//实现一个简单的Queryfunction$(selector){varfirstChar=selector.charAt(0);if(firstChar=="#"){varlen=selector.split("");if(len.length==1){returndocument.getElementById(selector.slice(1,selector.length));}else{ 查看详情

http请求整理

终于又回来了,先来简单整理一波http请求的信息。对于前端来说,不管是在面试还是在实际项目中,都有必要去了解一些关于http的信息。http请求包含三部分:请求行requestline、请求头requesthead、请求体requestbody。对应的http响应... 查看详情

[笔记]这阶段的有道云笔记前端部分整理

js现在可以运行在1.浏览器端2.计算机操作系统上通过大名鼎鼎的node,node是由c/cpp编写的js运行环境,大概是js通过编译变成c变成汇编变成机器语言。。。大概#mermaidChart0.node>rect{}#mermaidChart0.nodetext{font-weight:300;font-family:"HelveticaNe... 查看详情

前端源码-部分资源

然后下面链接分享一下,是目前阅读研究源码的一部分资源:jQuerysourceviewerjquery源码查询这些年、我收集的JQuery代码jquery1.6中的.prop()和.attr()异同第三章《遍历DOM元素》jquery选择器javascript笔记:临摹jQuery(一)jQuery的原型关系图... 查看详情

前端整理之html

   先写部分input系列:  1.inputtype="text"           -name属性,value="周栩强"(一个用来输入的文本框)  2.inputtype="password"      查看详情

一些前端用的js插件

整理一些常用的JS库,其中大多数是jQuery相关插件,也有Bootstrap辅助插件及非jQuery插件。其功能涉及:页面布局、图片幻灯片播放、图片像册展示、功能辅助等内容。本篇只是简单介绍插件功能,以后使用到相关插件时再补充介... 查看详情

前端知识点整理03

75.说说你对前端架构师的理解负责前端团队的管理及与其他团队的协调工作,提升团队成员能力和整体效率;带领团队完成研发工具及平台前端部分的设计、研发和维护;带领团队进行前端领域前沿技术研究及新技术调研,保证... 查看详情

无法将部分视图显示为 JQuery Mobile 对话框

】无法将部分视图显示为JQueryMobile对话框【英文标题】:UnabletodisplayPartialViewasJQueryMobiledialog【发布时间】:2012-08-0403:47:09【问题描述】:我整理了一个简单的例子:我有一个缩略图列表,我想在选择列表中的图像时显示更大的... 查看详情

web前端主要包含了哪些技术?

  Web前端是为了协调前端设计与后端开发之间工作的岗位,是最接近产品和设计的工程师,起到衔接产品和技术的作用,前端为用户可以看到的部分负责,所以也是最接近用户的工程师。  Web前端开发基础技能:HTML、CSS、Ja... 查看详情

前端学习资料网址收集整理

前端学习资料整理:百度cdn,jquery插件网站收集,html5资料整理等。方便查阅。  A:基础知识,行业动态    http://www.51cto.com51cto    http://www.html5cn.org/html5中国    http://www.chinaz.com/站长之家    B:论坛,博客  ... 查看详情

前端资源大整理

资源不断更新中。。。动画库1.Animate.css说明:一个简单易用的跨浏览器CSS动画库。GitHub主页:https://github.com/daneden/animate.css2.CSShake说明:用CSS实现各种颠颤动画效果DOM!GitHub主页:https://github.com/elrumordelaluz/csshake3.Hover.css说明:... 查看详情

用于 jQuery 站点的简单 Azure 表服务前端

】用于jQuery站点的简单Azure表服务前端【英文标题】:SimpleAzureTableServicefront-endforjQuerysite【发布时间】:2017-12-0419:48:57【问题描述】:我正在开发一个jQuery网站,它将显示我的Azure表存储(ATS)帐户中的一条记录。我不想使用jQuery直... 查看详情

jquery实现简单前端搜索功能

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>工程轻量化与可靠性技术实验室</title></head><body><divclass="content-right"><inputtype="text"&g 查看详情

前端重要基础知识整理

HTML:1.什么是语义化的HTML?有何意义?为什么要做到语义化?2.行内元素和块元素分别有哪些?3.Doctype是什么?有啥作用?4.iframe的优缺点CSS:1.CSS盒子模型2.CSS优先级3.不使用js,元素垂直居中  1).简单版  2).高级版//未完  查看详情

前端整理——vue部分(代码片段)

(1)Vue的生命周期1)创建vue实例,初始化生命周期钩子函数2)数据检测及方法和计算属性代理。在数据检测和初始化数据之前调用beforeCreated(),这时还获取不到props或者data中的数据;数据、属性、方法初始化之后,调用created()... 查看详情

超简单实用的前端分页---jquery插件

首先,谈谈分页,目前我所了解的分页有两种,前端分页跟后台分页.  简单说说前端分页.是通过前端技术拿到所有的数据,在前端分页处理;  而后台分页是通过前端操作,给后台返回不同的值,再由后台返回所对应的数据.最近,下... 查看详情

前端片段整理(代码片段)

更好阅读移步这里1.ES61.1.箭头函数:函数内的this对象,是定义时所在的对象,不是使用时所在的对象不可当构造函数用rest代替argumentthis指向一般可变,但在箭头函数中固定简单,单行,不会复用的函数建议使箭头函数复杂,行... 查看详情