了解了这些才能开始发挥jQuery的威力

前端技术 2023/09/03 JavaScript

由于当前jQuery如此的如雷贯耳，相信不用介绍什么是jQuery了，公司代码中广泛应用了jQuery，但我在看一些小朋友的代码时发现一个问题，小朋友们使用的仅仅是jQuery的皮毛，只是使用id选择器与attr方法，还有几个动画，如果只是如此，相比于其带来的开销，其实还不如不使用，下面介绍几个jQuery常用的方法，来让jQuery的威力发挥出来，否则只用有限的几个方法，相对于运行速度问题，真不如不用jQuery。

jQuery如此之好用，和其在获取对象时使用与CSS选择器兼容的语法有很大关系，毕竟CSS选择器大家都很熟悉（关于CSS选择器可以看看十分钟搞定CSS选择器），但其强大在兼容了CSS3的选择器，甚至多出了很多。

选择器

有了CSS选择器基础后，看jQuery的选择器就很简单了，不再详细一一说明

基本选择器  
$(‘*\') 匹配页面所有元素
$(‘#id\') id选择器
$(‘.class\') 类选择器
$(‘element\') 标签选择器
   
组合/层次选择器  
$(‘E,F\') 多元素选择器，用”,分隔，同时匹配元素E或元素F
$(‘E F\') 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F
$(E>F) 子元素选择器，用”>”分隔，匹配E元素的所有直接子元素
$(‘E+F\') 直接相邻选择器，匹配E元素之后的相邻的同级元素F
$(‘E~F\') 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否）
$(‘.class1.class2\') 匹配类名中既包含class1又包含class2的元素
基本过滤选择器  
$(\"E:first\") 所有E中的第一个
$(\"E:last\") 所有E中的最后一个
$(\"E:not(selector)\") 按照selector过滤E
$(\"E:even\")             所有E中index是偶数
$(\"E:odd\")              所有E中index是奇数
$(\"E:eq(n)\")           所有E中index为n的元素
$(\"E:gt(n)\")           所有E中index大于n的元素
$(\"E:ll(n)\")            所有E中index小于n的元素
$(\":header\") 选择h1~h7 元素
$(\"div:animated\") 选择正在执行动画效果的元素
内容过滤器  
$(‘E:contains(value)\') 内容中包含value值的元素
$(‘E:empty\') 内容为空的元素
$(‘E:has(F)\') 子元素中有F的元素，$(‘div:has(a)\'):包含a标签的div
$(‘E: parent\') 父元素是E的元素，$(‘td: parent\'):父元素是td的元素
可视化选择器  
$(‘E:hidden\') 所有被隐藏的E
$(‘E:visible\') 所有可见的E
属性过滤选择器  
$(‘E[attr]\') 含有属性attr的E
$(‘E[attr=value]\') 属性attr=value的E
$(‘E[attr !=value]\') 属性attr！=value的E
$(‘E[attr ^=value]\') 属性attr以value开头的E
$(‘E[attr $=value]\') 属性attr以value结尾的E
$(‘E[attr *=value]\') 属性attr包含value的E
$(‘E[attr][attr *=value]\') 可以连用
子元素过滤器  
$(‘E:nth-child(n)\') E的第n个子节点
$(‘E:nth-child(3n+1)\') E的index符合3n+1表达式的子节点
$(‘E:nth-child(even)\') E的index为偶数的子节点
$(‘E:nth-child(odd)\') E的index为奇数的子节点
$(‘E:first-clild\') 所有E的第一个子节点
$(‘E:last-clild\') 所有E的最后一个子节点
$(‘E:only-clild\') 只有唯一子节点的E的子节点
表单元素选择器  
$(‘E:type\') 特定类型的input
$(‘:checked\') 被选中的checkbox或radio
$(‘option: selected\') 被选中的option

筛选方法

.find(selector) 查找集合每个元素的子节点

Get the descendants(子节点) of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

jQuery三种事件绑定方式.bind(),.live(),.delegate()

.trigger( eventType [, extraParameters ] ) JavaScript出发元素绑定事件

Execute all handlers and behaviors attached to the matched elements for the given event type.

animation ajax ，或者 jQuery的动画处理总结，ASP.NET 使用Ajax动画

queue/dequeue/clearQueue

delay/stop

fadeIn/fadeOut/fadeTo/fadeToggle

slideUp/slideDown/slideToggle

show/hide

Ajax

$.ajax

$.load

$.get

最后

了解了上面这些内容，使用jQuery进行web开发的时候就可以体验到jQuery的威力了。本文不是jQuery学习指南，仅仅是个常用方法介绍，如果大家想学习jQuery，最好的教材还是jQuery API，本文中示例与英文解释全部来源于jQuery API。 另外文中介绍内容远远不是jQuery全部，但是首先掌握了这些可以对jQuery有一个比较全面的认识，然后再学习其他内容的时候就可以游刃有余了。

本文地址：https://www.stayed.cn/item/7153

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案