Jquery核心----选择器
一:在jQuery中最核心的要属于选择器:而jQuery的选择分为很多种,但是重要的有以下几种:
1:基本选择器:
A:id选择器:在id选择器中,是根据元素的id来获得元素的相关属性的:$(“#id名称”):注意的是如果一个页面如果存在多个同名的id,根据id选择器,只能找到第一个该id的内容:
B:class选择器:class选择器是根据元素中的属性class来获得的,返回的是一个集合:注意的是在jQuer中,并不是非要在样式里声明该样式,重要的是元素中class属性有值:元素中的class的名称可以相同,所以返回的是一个数组!
C:element:元素选择器:根据制定的元素来匹配所有的元素
D:* 匹配所有元素 ---多用于结合上下文来搜索。
E:符合选择器,制定多个选择器,将所有的匹配的元素合并在一个集合中返回来!
2:层次选择器分为四种
A: ancestor ancestor:
ancestor (Selector) : 任何有效选择器或者元素
descendant (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的后代元素
这种选择器是返回匹配的所有后代元素:
例如:$(“div span”)是匹配所有div 后代元素中的所有span元素
B:parent > child
parent (Selector) : 任何有效选择器
child (Selector) : 用以匹配元素的选择器,并且它是第一个选择器的子元素
这种选择器是返回parent元素的子元素中的child元素
比如$(“div > span”)是匹配所有div子元素中的所有span元素
C: prev + next
prev (Selector) : 任何有效选择器
next (Selector) :一个有效选择器并且紧接着第一个选择器
这种选择器是匹配同级目录下的下一个元素,相当于next().同辈下个节点-------------------prev()。同辈上一个节点
例如:$(“div+sapn”);匹配所有div的span元素,返回的是一个集合,注意的是,是紧接着div后面的span元素。
D: prev ~ siblings
prev (Selector) : 任何有效选择器
+siblings (Selector) : 一个选择器,并且它作为第一个选择器的同辈
这种选择器是匹配prev后面的所有siblings元素---可以用nextAll来代替该功能!
例如:$(“div~ span”):匹配所有div后面的span元素:注意的是span和div是同一层次的元素:相当于$(“div”).nextAll(“span”);
3:简单选择器:
Fast选取器获得匹配的第一个元素:last选择器获得匹配的最后一个选择器:
Not选择器是获得去除所有与给定选择器匹配的元素!even选择器是获得匹配所有索引值为偶数的元素,从 0 开始计数!---odd选择器是获得匹配所有索引值为奇数的元素,从 0 开始计数!-------eq选择器是获得匹配一个给定索引值的元素!!!---gt选择器是获得匹配所有大于给定索引值的元素!----lt选择器是获得匹配所有小于给定索引值的元素!--------header选择器是获得h1——————h6之类的选择器
4:内容选择器
A:contains(text);返回所有含有text文本的元素
B:empty:匹配所有不包含子元素或者文本的空元素
C:has(selector): 匹配含有选择器所匹配的元素的元素
D:parent: 匹配含有子元素或者文本的元素
5:可见性选择器:
A:hidden选择器是:匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到
B:visible: 匹配所有的可见元素
6:属性选择器
:[attribute]:选取拥有此属性的元素
:[attribute=value]:选取属性的值为value的元素
:[attribute!=value]:选择属性值不等于value的元素
:[attribute^=value]:选择属性值以value开始的元素
:[attribute$=value]选择属性的值以value结束的元素
:[attribute*=value]:选择属性的值含有value的元素
:[selector1][selector2][selectorn]用属性选择器合成一个复合属性选择器,满足多个条件。每选择一次,缩小一次范围!
7:子元素选择器
:nth-child(index/even/odd/equation)选取每个父元素的第一子元素或者奇偶元素
:first-child:选取每个父元素的第一个元素
:last-child:选择每个父元素的最后一个子元素、
:only-child:如果每个元素的它父元素中唯一的子元素,
8:表单属性选择器
:enabled:选取所有可用元素
:disabled:选取所有不可用元素
:checked:选取所有被选中的元素(单选框,复选框)
:选择所有被选中的选择元素(下拉选框)
。。。。。。。
9:表单选择器:----一切表单元素
分享到:
相关推荐
首先,jQuery UI的核心在于它提供了大量预定义的UI组件,如日期选择器、对话框、滑块、排序列表等。这些组件能够帮助开发者快速构建出具有专业外观和行为的网页元素,无需从零开始编写复杂的JavaScript代码。"jquery...
1.8.2是这个版本的发布编号,表示它是在2010年左右发布的,当时jQuery UI已经包含了大量的组件,如对话框(Dialog)、拖放(Draggable)、可排序(Sortable)、日期选择器(Datepicker)等。 接下来,`jquery-ui-...
这个文件包含了各种UI组件的实现,如对话框(Dialog)、滑块(Slider)、日期选择器(Datepicker)、拖放功能(Draggable)、可排序元素(Sortable)以及许多其他交互元素。 `jquery-ui-1.8.16.custom.css` 文件则...
jQuery UI 是一个基于 jQuery 库的用户界面库,它提供了丰富的交互效果、可定制的主题以及各种UI组件,如日期选择器、对话框、滑块等。在本篇文章中,我们将深入探讨其自定义版本 `jquery-ui-1.8.18.custom.min.js` ...
首先,jQuery的核心功能之一是选择器。它借鉴了CSS的选择器语法,使得通过JavaScript选取DOM元素变得极其简单。例如,"$('div')”会选择所有的div元素,而"$('#myID')”将选取ID为"myID"的元素。此外,还可以使用类...
jQuery UI是基于JavaScript库jQuery的一个扩展,它提供了一系列丰富的用户界面组件,包括但不限于对话框(Dialogs)、日期选择器(Datepickers)、拖放功能(Drag and Drop)、排序功能(Sortable)以及各种可自定义...
2. **Widgets**:包括如对话框(Dialog)、滑块(Slider)、日期选择器(Datepicker)、进度条(Progressbar)、拖放(Draggable)、可排序(Sortable)和可堆叠(Resizable)等。这些组件极大地简化了常见的用户...
在实际使用中,我们可以通过以下方式初始化一个基本的日期选择器: ```javascript $( ".selector" ).datepicker(); ``` 这里的`.selector`是你希望添加日期选择功能的元素,可以是`<input>`标签或者其他HTML元素。...
"custom" 表示这个版本是根据特定需求定制的,可能只包含了滑块(Sliders)、日期选择器(Datepickers)、对话框(Dialogs)、拖放(Draggable)、可排序(Sortable)等组件中的一部分或全部。这使得开发者可以更有效地控制...
- jQuery 的核心概念包括选择器(用于选取 HTML 元素)、DOM 操作(如添加、删除和修改元素)和事件处理(绑定和触发事件)。 2. **菜单结构**: - jQuery X-Menu 常见的结构包括主菜单项和下拉子菜单。主菜单...
虽然`jQuery.holdReady()`和`jQuery.isArray()`被移除,但jQuery 3.2.1仍然提供了丰富的API,包括选择器、DOM操作、事件处理、动画、Ajax等。例如: - **选择器**:使用CSS选择器,如`$("#id")`,`.class`,`...
2. **日历(Datepicker)**:Datepicker 是一个易于使用的日期选择器,可以方便地添加到输入框中,提供多种日期格式和本地化设置,适用于需要用户输入日期的场景。 3. **拖放(Draggable)**:通过 Draggable API,...
综上所述,jQuery 3.4.1是一个强大的JavaScript库,它的主要特点包括高效的选择器引擎、简洁的API、丰富的插件生态系统和跨浏览器兼容性。通过引入"jquery-3.4.1.js",开发者可以轻松地实现各种前端功能,如动态修改...
4. **小部件(Widgets)**: 包括日历(Datepicker)、对话框(Dialog)、进度条(Progressbar)、滑块(Slider)、下拉选择器(Selectmenu)、可折叠面板(Accordion)、标签页(Tabs)等,这些都是常见的网页元素和...
- **选择器**:jQuery提供了丰富的选择器,如ID选择器(`#id`)、类选择器(`.class`)、属性选择器(`[attribute]`)等,使得选取DOM元素变得简单。 - **DOM操作**:jQuery封装了DOM操作,如`$(selector).html()`, `$...
1. **DOM操作**:jQuery 提供了一套丰富的选择器,可以方便地选取DOM元素,如$("#id")用于选取ID为id的元素,$(".class")用于选取所有class为class的元素。此外,它还提供了链式操作,如$("#element").addClass(...
jQuery的核心特性包括选择器、DOM操作、事件处理、动画效果和Ajax交互。选择器是jQuery的精髓,它极大地简化了CSS选择器的使用,如`$("#id")`用于选取ID为`id`的元素,`$(".class")`用于选取所有class为`class`的...
在选择器方面,1.4.x版本支持了更多的CSS3选择器,增强了对复杂DOM查询的支持。 然而,随着技术的发展,jQuery不断更新迭代,目前最新的版本已经远超1.4.x。尽管如此,理解这些早期版本对于了解jQuery的历史发展和...
jQuery的核心特性包括选择器(用于快速定位DOM元素)、链式调用(方法可以连续执行)和高效的操作DOM。在jQuery-File-Upload中,jQuery被用来处理DOM操作和事件绑定,使文件上传变得更加简单。 ### 2. 多文件上传 ...
jQuery UI 是一个基于 jQuery JavaScript 库的交互式用户界面组件集合,它提供了一系列精心设计、功能丰富的UI元素,如对话框、日期选择器、拖放功能、进度条等,大大简化了网页应用的开发工作。在本文中,我们将...