首页
技术博客
PHP教程
数据库技术
前端开发
HTML5
Nginx
php论坛
新用户注册
|
会员登录
PHP教程
技术博客
编程问答
PNG素材
编程语言
前端技术
Android
PHP教程
HTML5教程
数据库
Linux技术
Nginx技术
PHP安全
WebSerer
职场攻略
JavaScript
开放平台
业界资讯
大话程序猿
登录
极速注册
取消
热门标签 | HotTags
svg
html
textview
console
base64
chart
build
icons
微信开发
scheme
webkit
firebug
react
jquery
dom
focus
javascript
v8
label
view
firefox
chrome
requirejs
listview
button
ajax
json
dialog
iframe
postman
overflow
css3
css
hover
bootstrap
checkbox
layout
hybrid
charts
yarn
jq
vue
html5
scroll
chart.js
js
node.js
vue.js
正则
上传
npm
当前位置:
开发笔记
>
前端
> 正文
jQuerySelector选择器小结
作者:手机用户2502859707 | 来源:互联网 | 2022-03-11 21:35
jQuerySelector选择器小结,需要的朋友可以参考下,都是一些常用的选择控制方式。
//jQuery 选择器 $
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素
// $("*"); // 表示页面所有元素标签
// $("th, td") // 表示所有
元素标签
// $("a") // 表示所有
元素标签
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配
// $("#rating"); // 表示id=rating的元素
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素
// $(".stuff:empty"); // 表示css选择中的空元素
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素
// $(".buttons:disabled"); // 表示css选择中的非启用元素
// $("input:checked"); // 表示css选择中的选中的元素
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素
// //alert($("#orderedlist ~ li").length);
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素
//expression 之 根据元素属性选择
// alert($("button[@class]").length); // 表示有class属性的元素
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素
// alert($('button[@class^=not').length); // 表示有class属性且值开头匹配not的元素
// alert($('button[@class$=not').length); // 表示有class属性且值结尾匹配not的元素
// alert($('button[@class*=not').length); // 表示有class属性且值中匹配not的元素
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) {
//// $(this).html( $(this).html() + " BAM! " + i );
// $(this).mouseover(function(){
// $(this).css("color","red");
// });
// $(this).mouseout(function(){
// $(this).css("color","#000");
// });
// });
//查找ol标签且属性 id=orderedlist的所有元素,这里有两种写法
//ol[@id='orderedlist'] 定位父元素 直接用each 迭代
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代
//Unit two
///$( html, [ownerDocument]) return jQuery
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的
//$('
hello
').appendTo("h2"); //生成一个标记文本 并追加到页面h2标签内
//也可以 将原本页面元素取出追加
//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制
///$(elements) return jQuery
//这个函数允许直接传入DOM
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档
//$(callback) return jQuery
//以下是selector一些说明
/*
基础:
#id:根据对象的id属性获取对象。
element:匹配某一HTML标签的所有对象
.class:根据对象的class属性获取对象
*:获取所有的对象
selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项
层级选择符:
ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。
parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。
prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。
prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。
基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
:not(selector):匹配去除了not后面选择符中内容的项
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
:eq(index):匹配某一下表的单独某元素
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
:header:匹配所有的header元素,例如 h1,h2,h3,h4,h5,h6
:animated:匹配所有有动画效果的元素
文本过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
:empty:匹配所有没有子元素的对象
:has(selector):匹配所有至少含有一个子选择符的对象
:parent:匹配所有的父对象,父对象包含那些只含有文本的对象
可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
属性过滤符:
[attribute]:匹配拥有某一属性的所有对象
[attribute=value]:匹配拥有某一属性和值的对象
[attribute!=value]:匹配拥有某一属性,且不是某一值的对象
[attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
[attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
[attribute*=value]:匹配拥有某一属性,且包含某一值的对象
[selector1] [selector2][selectorN]:匹配同时符合多个属性选择符的对象
子过滤符:
:nth- child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征
:first-child:匹配第一个子元素
:last- child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
表单过滤符
Name Type
:input Returns: Array
匹配表单内input元素
:text Returns: Array
匹配表单内 input type为text的元素
:password Returns: Array
匹配表单内input type为password的元素
:radio Returns: Array
匹配表单内input type为radio的元素
:checkbox Returns: Array
匹配表单内input type为checkbox的元素
:submit Returns: Array
匹配表单内input type为submit的元素
:image Returns: Array
匹配表单内image的元素
:reset Returns: Array
匹配表单内 input type为reset的元素
:button Returns: Array
匹配表单内input type为button的元素
:file Returns: Array
匹配表单内input type为file的元素.
:hidden Returns: Array
匹配表单内input type为hidden的元素或者hidden区域
:enabled Returns: Array
匹配所有启用元素
:disabled Returns: Array
匹配所有非启用元素
:checked Returns: Array
匹配所有选中元素
:selected Returns: Array
匹配所有下拉列表选中元素
*/
jquery
css
容器
html
写下你的评论吧 !
吐个槽吧,看都看了
会员登录
|
用户注册
推荐阅读
json
分页插件3指定到某一页
前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ...
[详细]
蜡笔小新 2024-12-27 15:19:01
firebug
深入理解CSS盒模型与box-sizing属性
本文详细介绍了W3C标准盒模型和IE传统盒模型的区别,探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析,帮助读者更好地理解和应用这一关键概念。 ...
[详细]
蜡笔小新 2024-12-27 15:01:09
html
Web前端开发中的HTML与CSS命名规范
作为一名专业的Web前端工程师,掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性,还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范,并提供实用的建议。 ...
[详细]
蜡笔小新 2024-12-25 11:06:17
build
ASP.NET Core 3.1 中的Startup类
Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ...
[详细]
蜡笔小新 2024-12-25 02:13:25
chrome
自己用过的一些比较有用的css3新属性【HTML】
web前端|html教程自己用过的一些比较用的css3新属性web前端-html教程css3刚推出不久,虽然大多数的css3属性在很多流行的浏览器中不支持,但我个人觉得还是要尽量开 ...
[详细]
蜡笔小新 2024-12-24 19:26:54
button
React 表单验证:构建无第三方库的表单处理机制
本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ...
[详细]
蜡笔小新 2024-12-24 15:48:48
dom
深入理解Cookie与Session会话管理
本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ...
[详细]
蜡笔小新 2024-12-27 18:20:43
html
Xcode 中多行代码缩进技巧
本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进,包括右缩进和左缩进的具体操作方法。 ...
[详细]
蜡笔小新 2024-12-27 17:52:34
chrome
Python爬虫实战:豆瓣电影Top250数据抓取
本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ...
[详细]
蜡笔小新 2024-12-27 16:55:07
html
Linux 自动化安装脚本详解
本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建,还处理了系统服务的配置和启动,确保在多种 Linux 发行版上都能顺利运行。 ...
[详细]
蜡笔小新 2024-12-27 16:33:32
html
在Linux系统中配置并启动ActiveMQ
本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ...
[详细]
蜡笔小新 2024-12-27 14:38:54
html
如何在WPS Office for Mac中调整Word文档的文字排列方向
本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤,用户可以轻松更改文本的水平或垂直排列方式,以满足不同的排版需求。 ...
[详细]
蜡笔小新 2024-12-27 12:34:14
html
几何画板展示电场线与等势面的交互关系
几何画板是一款功能强大的物理教学软件,具备丰富的绘图和度量工具。它不仅能够模拟物理实验过程,还能通过定量分析揭示物理现象背后的规律,尤其适用于难以在实际实验中展示的内容。本文将介绍如何使用几何画板演示电场线与等势面之间的关系。 ...
[详细]
蜡笔小新 2024-12-27 10:46:07
javascript
根据条件动态控制文件选择文本的显示
本文讨论了如何根据特定条件动态显示或隐藏文件上传控件中的默认文本(如“未选择文件”)。通过结合CSS和JavaScript,可以实现更灵活的用户界面。 ...
[详细]
蜡笔小新 2024-12-26 15:45:21
jquery
如何使用jQuery阻止事件冒泡
本文详细介绍了如何使用jQuery防止事件冒泡,确保子元素的点击事件不会触发父元素或祖先元素的相应事件。通过具体的代码示例和解释,帮助开发者更好地理解和应用这一技术。 ...
[详细]
蜡笔小新 2024-12-25 19:47:37
手机用户2502859707
这个家伙很懒,什么也没留下!
Tags | 热门标签
svg
html
textview
console
base64
chart
build
icons
微信开发
scheme
webkit
firebug
react
jquery
dom
focus
javascript
v8
label
view
firefox
chrome
requirejs
listview
button
ajax
json
dialog
iframe
postman
RankList | 热门文章
1
SCSS Issues Arise During Application Generation Process
2
Mantis Bug Tracker:高效缺陷管理与跟踪系统
3
MyBatis 中 MySQL 索引失效问题分析及优化策略,避免查询超时现象
4
Flutter 实现公告消息提示的文字上下滚动切换效果
5
JavaScript基础精讲(三):深入解析BOM与DOM核心概念与应用
6
高性能FPGA平台:HAPS的创新与应用
7
顶尖编程语言,无可匹敌的选择
8
Python 2.7 与 Python 3.7 的主要差异及兼容性分析
9
Vite 构建过程中常见错误的解决方案与调试技巧
10
创建自定义回文匹配的正则表达式:RegEx 示例与应用电路解析
11
Spring初体验:基础入门与IOC详解
12
优化后的标题:同伴协作任务:提升学习效率与团队合作能力的有效方法
13
如何使用工具高效切换npm和Node.js版本
14
Understanding the Concept and Usage of Null in Java Programming
15
AXI MCDMA 仿真技术及其工作流程的深入解析
PHP1.CN | 中国最专业的PHP中文社区 |
DevBox开发工具箱
|
json解析格式化
|
PHP资讯
|
PHP教程
|
数据库技术
|
服务器技术
|
前端开发技术
|
PHP框架
|
开发工具
|
在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved |
京公网安备 11010802041100号
|
京ICP备19059560号-4
| PHP1.CN 第一PHP社区 版权所有