乐趣区

关于前端:前端开发框架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 等。

退出移动版