前端开发框架jQuery的优势与基础知识分享

jQuery,顾名思义是JavaScript和查询(Query),jQuery是免费、开源的。它可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程且兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。

jQuery优势

  1. 体积小,使用灵巧(只需引入一个js文件)。

  2. 方便的选择页面元素(模仿CSS选择器更精确、灵活)。

  3. 动态更改页面样式/页面内容(操作DOM,动态添加、移除样式)。

  4. 控制响应事件(动态添加响应事件)。

  5. 提供基本网页特效(提供已封装的网页特效方法)。

  6. 快速实现通信(ajax)。

  7. 易扩展、插件丰富。

  8. 支持链式写法。

一、jQuery选择器

  • ID选择器:$(“#box”);

  • 类名选择器:$(“.box”);

  • 标签选择器:$(“div”);

  • 后代选择器:$(“#box p”);

  • :first:获取第一个元素。

  • :last:获取最后一个元素。

  • :even:匹配所有索引值为偶数的元素,从 0 开始计数。

  • :odd:匹配所有索引值为奇数的元素,从 0 开始计数。

  • :eq(index):匹配一个给定索引值的元素,从 0 开始计数。

  • :not(selector):去除所有与给定选择器匹配的元素。

  • :has(selector):匹配含有选择器所匹配的元素的元素。

二、jQuery属性和样式CSS

操作属性:

attr(name|properties|key,value|fn):设置或返回被选元素的属性值。

removeAttr(name):从每一个匹配的元素中删除一个属性。

prop(name|properties|key,value|fn):获取在匹配的元素集中的第一个元素的属性值。

removeProp(name):用来删除由.prop()方法设置的属性集。

区别:attr可以操作(增删改查)自定义的节点属性,而prop不可以(增删改查)。attr和prop对input的disabled属性的返回值不一致,attr返回disabled或者undefined,而prop返回布尔值

操作Class:

addClass(class|fn) :为每个匹配的元素添加指定的类名。

removeClass([class|fn]) :从所有匹配的元素中删除全部或者指定的类。

toggleClass(class|fn[,switch]):如果存在(不存在)就删除(添加)一个类。

操作内容:

html([val|fn]):取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

text([val|fn]):取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

val([val|fn|arr]):获得匹配元素的当前值。如果多选,将返回一个数组,其包含所选的值。

操作CSS:

css(name|pro|[,val|fn]):访问匹配元素的样式属性。

操作位置:

offset([coordinates]):获取匹配元素在当前文档的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。方法只对可见元素有效。

position():获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

scrollTop([val]):获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

scrollLeft([val]):获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。

操作尺寸:

height([val|fn]):取得匹配元素当前计算的高度值(px)。

width([val|fn]):取得第一个匹配元素当前计算的宽度值(px)。

innerHeight():获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。

innerWidth():获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。

outerHeight([options]):获取第一个匹配元素外部高度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。

outerWidth([options]):获取第一个匹配元素外部宽度(默认包括补白和边框)。此方法对可见和隐藏元素均有效。

注:设置options为true,计算margin在内。

三、过滤查找

过滤元素:

eq(index|-index):获取第N个元素。这个元素的位置是从0算起,如果是负数,则从集合中的最后一个元素开始倒数。

first():获取第一个元素。

last():获取最后一个元素。

hasClass(class):检查当前的元素是否含有某个特定的类,如果有,则返回true。

has(expr|ele):保留包含特定后代的元素,去掉那些不含有指定后代的元素。

not(expr|ele|fn):删除与指定表达式匹配的元素。

查找元素:

children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。只考虑子元素而不考虑所有后代元素。

find(expr|obj|ele):搜索所有与指定表达式匹配的子元素。

parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合。

offsetParent():返回第一个匹配元素用于定位的父节点。

next([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

nextAll([expr]):查找当前元素之后所有的同辈元素。

prev([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

prevAll([expr]):查找当前元素之前所有的同辈元素。

siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

串联操作:

add(expr|ele|html|obj[,con]):把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。返回的结果将始终以元素在HTML文档中出现的顺序来排序,而不再是简单的添加。

andSelf():将先前所选的加入当前元素中。

end():回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。如果之前没有破坏性操作,则返回一个空集。所谓的"破坏性"就是指任何改变所匹配的jQuery元素的操作。

四、jQuery事件

页面载入事件:

ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。

绑定事件:

on(events,[selector],[data],fn):在选择元素上绑定一个或多个事件的事件处理函数。

off(events,[selector],[fn]):在选择元素上移除一个或多个事件的事件处理函数。

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。

unbind(type,[data|fn]]):bind()的反向操作,从每一个匹配的元素中删除绑定的事件。如果没有参数,则删除所有绑定的事件。

one(type,[data],fn):为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。

hover([over,]out):当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

click([[data],fn]):触发每一个匹配元素的click事件。这个函数会调用执行绑定到click事件的所有函数。

注:其他事件方法使用方式一样。例如:mouseover、mouseout、dblclick、change、blur、focus、keydown、keyup、keypress、mousedown、mouseup、mousemove、mouseenter、mouseleave、resize、scroll、select、submit、unload等。

相关前端培训开发技术知识,关注我,有更多精彩内容与您分享!

(0)

相关推荐

  • jQuery 简明教程 快速上手

    jQuery 简明教程 快速上手

  • 不可不知的线路板基础知识分享

    分以下5个方面给大家介绍: 1.线路板简介 2.线路板材料介绍 3.线路板基本叠构 4.线路板制作流程 5.线路板案例分享 一.线路板简介 1.挠性印制电路板 挠性印制电路板(FlexPrintC ...

  • 电工基础知识分享:相线、中性线和火线、零线

    在任何一个电路中,电路不工作时,线上有电压(俗称带电)的线,叫做相线,线上无电压的线,叫做中性线. 在单相电路中,为了更形象.更好理解,为相线和中性线又分别起了两个别名,叫做火线和零线.因此,相线=火 ...

  • 股票入门基础知识分享

    弱弱地说,对初学者而言,要看懂股票说难不难,说不难也难,因为如果只是纯粹看懂股票的基本知识还是蛮简单,但是要从简单的股票知识之中升华为有效的实战技能就还是有一定难度,比如如何运用股票知识选对股票,又能 ...

  • 钢琴入门的一些基础知识分享

    学钢琴不能急于求成,钢琴不是一朝一夕就能学会的.要想学好钢琴,在开始时就要打下一个良好的基础,这是很重要的.那么钢琴如何入门呢?初学钢琴又要注意什么?央之艺课堂根据多位钢琴教师的意见,总结出以下三点初 ...

  • 华为认证PPP与PPOE基础知识分享~

    PPP协议基本概念 PPP是Point-to-Point Protocol的简称,中文翻译为点到点协议.与以太网协议一样,PPP也是一个数据链路层协议.以太网协议定义了以太帧的格式,PPP协议也定义了 ...

  • PPPoE 协议基础知识分享~

    PPPoE PPPoE 协议的基本概念 我们先来看一下家庭用户上网的一种典型组网场景,如图12-21所示.图12-21中,PC 1-1.PC 1-2.PC 1-3 以及家庭网关HG-1 (注: HG是 ...

  • 【干货】从0到1,“大型WLAN组网”基础知识分享~

    目前,大多数企业办公环境同时使用有线和无线网络来支撑业务.办公区在提供有线网口的同时,也采用全Wi-Fi覆盖,办公环境更为开放和智能.未来,企业云桌面办公.智真会议.4K视频等大带宽业务将从有线网络迁 ...

  • 电工基础知识分享(三)你真的了解电源线吗?彻底颠覆你的认知

    哈喽,大家好!我们又见面了,上几期我们了解了,电的一些基本概念和由来. 这期呢我就给大家详细介绍一下电源线也就是承载电流传输过程的一个很重要的载体.那么,我们常用的电源线又有哪几种呢?他们又都有什么样 ...

  • 电脑基础知识分享(一):装机必备!超级详细的BIOS设置图解

    哈喽,大家好!我们在学习弱电系统知识的时候会涉及到很多有关电脑方面的知识. 所以,这期我会讲解一些有关电脑方面的基础知识与大家一起分享学习. 对于很多人来说,在装系统过程中难免遇到各类问题,其中最让人 ...