jQuery的三种$()

2023-11-17

$号是jQuery“类”的一个别称,$()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数(个人观点,呵呵!)。

1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。
比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如:
$("a").click(function(){...})
就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用<a/>这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。

比如有这样一段HTML代码:
 

复制代码代码如下:


<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>



而操作这段HTML的是如下一条语句:
alert($("div>p").html());

$()中的是一个查询表达式,也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容,也就是上面HTML代码段的[two]。再如:
$("<div><p>Hello</p></div>").appendTo("body");
$()中的是一个字符串,用这样一段字串构建了jQuery对象,然后向<body/>中添加这一字串。

2、$()可以是$(element),即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码:
$(document).find("div>p").html());
$()中的document是一个DOM元素,即在全文寻找带<p>的<div>元素,并显示<p>中的内容。
3、$()可以是$(function),即一个函数,它是$(document).ready()的一个速记方式。如常见的形式是这样的:
$(document).ready(function(){
alert("Hello world!");
});
可变形作:
$(function(){
alert("Hello world!");
});

对于选择HTML文档中的elements,jQuery有两种方法:
1)如$("div>ul a"),它的意思是div标签中的ul标签中的a标签
不过,$('div>ul')和$('div ul')是有区别的,


$('div>ul')是<div>的直接后代里找<ul>;
而$('div ul')是在<div>的所有后代里找<ul>。



2)用jQuery对象的几个方法(如方法find()、each()等)
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li,而表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。

****************************************************************

1、标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单,不多说。不过有一点——$('div>ul')和$('div ul')是有区别的,
$('div>ul')是<div>的直接后代里找<ul>;而$('div ul')是在<div>的所有后代里找<ul>。
所以,$('#sId>li')所选择的是id为"sId"的所有<li>孩子节点,即使这个<li>的后代还有<li>也不是它所找的范围(所找到的DOM对象,只是它本级的DOM对象。)。而$('#sId li:not(.horizontal)'),就是指类名"sId"里面的所有li的子孙中没有horizontal类的所有元素。——这里的not()是一个negation pseudo class.
这里返回的是一个jQurey对象,一个数组对象,这个jQuery对象的长度可用.length()得到。
2、XPath选择器
如:选择所有带有title 属性的链接,我们会这样写:$('a[@title]')
[]里带@,说明[]里的是元素的属性;是个属性选择器
[]里没@,说明[]里的是元素的子孙。
$('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组,但两者的含义正好相反。前者是要找<ul>下所有<li>子孙,而后者却是在找所有子孙为<li>的<ul>数组。
在XPath中,要找一个“以...开头”的属性,用^=,如找一个name属性是以mail开头的input元素,就用
$('input[@name^="mail"]')
要找一个“以...结尾”的属性,要用$=
要找一个“不头不尾”的属性,用*=

3、不属于上述的CSS和XPath的选择器,就是自定义的选择器了,用“:”表示,这里要用的就是:first,:last,:parent ,:hidden,:visible,:odd,:even,:not('xxx'), ":eq(0)"(始于0),:nth(n),:gt(0),:lt(0),:contains("xxx")
如:$('tr:not([th]):even')意为<tr>元素的子孙中不含<th>的所有子孙的偶数项

4、还有几个,简单不解释了
$('th').parent()——
$('td:contains("Henry")').prev()——内容包含有"Henry"的<td>的上一个节点
$('td:contains("Henry")').next()——内容包含有"Henry"的<td>的下一个节点
$('td:contains("Henry")').siblings()——内容包含有"Henry"的<td>的所有兄弟节点
还有一个,就是end(),这个方法肯定是用在某个DOM节点执行了某一动作之后,还想在与其相关的节点上执行类似动作,这里就要用到end()。用过end()方法之后,所返回的是执行动作的那个节点的父节点上。举个例子
$(...).parent().find(...).addClass().end()
这里执行动作的节点是find(...),是一个数组对象,它所做的动作是“addClass()”,之后,用了个end(),这时所返回的东东就是指向了parent()所指向的节点,也就是执行“addClass()”动作的那个数组对象的父节点。

5、要直接访问DOM元素,可用get(0)的方法,如
$('#myelement').get(0),也可缩写成$('#myelement')[0]

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery的三种$() 的相关文章

随机推荐

  • 基于Flink+Hudi构建企业万亿级云上实时数据湖教程

    在工作中 我们发现AutoOptimize的优化 在一些场景中可以带来巨大的提升 其中的一些优化可以满足数仓的高性能查询需求 某些时候工程师需要对收集的数据 根据下游的不同场景处理需求 再次进行ETL处理 使得下游使用数据的时候 优化数据的
  • MRI-CEST原理与MRI几种序列

    目录 一 引言 二 核 磁 共振 三 CEST成像 四 弛豫模型 五 几种序列 一 引言 MRI核磁共振的基本原理为核 磁 共振 接下来会具体展开各个词的含义 而CEST成像则是基于Bloch McConnell方程 模拟化学交换的工具 因
  • 曲速未来 发布:区块链技术带来金融服务的信任变革

    区块链安全咨询公司 曲速未来 表示 近年来伴随着新技术的出现 创新资源流动加速 对全球的金融体系也带来了巨大的冲击 作为科技领域极具挑战性的创新之一 区块链 凭借其开放性 自治性 匿名性 不可篡改性等特点 带来了金融的信任变革 重构了传统金
  • conda更新软件包conda upgrade语句

    在虚拟环境中使用upgrade更新语句 例如更新tensorflow conda update tensorflow 要注意几个点 1 可能会更改相关的包的版本 它会检查该虚拟环境下conda环境中的包列表 并尝试更新其他的包来适应版本匹配
  • el-input系列(el-input、el-select等)palceholder 的样式设置

    el input系列所有带有palceholder的 修改palceholder的样式 为了避免样式污染 对placeholder先包一个父类 谷歌浏览器 父类 deep input webkit input placeholder col
  • 高等数学——驻点,拐点,极值点

    一 定义不同 1 极值点 若f a 是函数f x 的极大值或极小值 则a为函数f x 的极值点 极大值点与极小值点统称为极值点 极值点是函数图像的某段子区间内上极大值或者极小值点的横坐标 极值点出现在函数的驻点 导数为0的点 或不可导点处
  • 活体检测的几种手段分析

    人脸识别是判断你是否是你 而活体检测则为了确定人脸识别的你是不是活得你 基于这样的特性 活体检测可以有效的避免视频 图片的技术BUG 活体检测的手段比较多 目前比较通用的是人脸活体检测 但是实际应用中的还有指纹识别 虹膜识别 静脉识别 通过
  • 生成一个6位数的随机密码,且需要包括字符、数字、特殊符号

    实现思路 第一步 6位数的密码 且需要包括字符 数字 特殊符号这三个元素 将三个元素组成6位时每个元素的排列组合列举出来 第二步 从第一步的排列组合中随机抽取一个排列组合类型 i j k 第三步 从所有的字符 数字 特殊符号中随机抽取i个字
  • Zookeeper到底是干嘛的

    在Zookeeper的官网上有这么一句话 ZooKeeper is a centralized service for maintaining configuration information naming providing distr
  • 数据集笔记:杭州 & 上海 地铁客流数据

    数据集地址 PVCGN data at master liuwj2000 PVCGN github com 1 数据集介绍 从5 15到23 30的地铁乘客流量预测 使用前四个时间间隔 15分钟 x 4 60分钟 的地铁乘客流量 进 出流量
  • Python(1)--Python安装目录介绍

    DLLs Python 自己使用的动态库 Doc 自带的 Python 使用说明文档 include 包含共享目录都是 h的文件 Lib 库文件 放自定义模块和包 pip 安装下载的包会放这Lib site packages 这个路径可以修
  • 云原生微服务应用的平台工程实践

    作者 纳海 01 微服务应用云原生化 微服务是一个广泛使用的应用架构 而如何使得微服务应用云原生化却是近些年一直在演进的课题 国内外云厂商对云原生概念的诠释大同小异 基本都会遵循 CNCF 基金会的定义 云原生技术有利于各组织在公有云 私有
  • 形态学的图像处理

    数字形态学是图像处理与分析领域的重要工具之一 数学形态学可以用来解决抑制噪声 特征提取 边缘检测 图像分割 形状识别 纹理分析 图像恢复与重建 图像压缩等图像处理问题 本文将会对形态学的图像处理进行一些通俗的原理解释和Matlab代码验证
  • 初始C语言——数组的行和列互换

    define CRT SECURE NO WARNINGS 1 防止visual studio2013以上版本scanf报错 vc6 0环境可忽略 include
  • 小案例:页面滚动事件以及导航栏点击

    HTML html实现方法一 导航栏a标签href 要与下列div中id属性对应 点击a标签即可滑动到对应id的div div class navbar 导航栏 ul class rightheader li a class page sc
  • 5G承载网络技术发展趋势

    导读 随着5G建设的日渐加快 5G与云网融合共生互促 推动承载网络技术不断发展演进 云网融合必将成为行业高质量发展的必然趋势 当前云网融合面临着新需求与新挑战 5G承载网络技术在确定性保障 定制化服务和智能管控运维等技术方面也面临着新的发展
  • 5个最流行的可用于移动开发的嵌入式数据库简介

    嵌入式数据库是轻量级的 独立的库 没有服务器组件 无需管理 一个小的代码尺寸 以及有限的资源需求 目前有几种嵌入式数据库 你可以在移动应用程序中使用 让我们来看看这些最流行的数据库 数据库 数据类型存储 License 支持平台 Berke
  • 【2019.11.12】C语言中求最大值和最小值的两种方法

    C语言中求最大值和最小值的两种方法 编写完整的程序 输入三个数 输出其中的最大数 最小数 输入说明 两个整数N1 N2 N3 输出说明 最大数 最小数 输入样例 5 4 9 输出样例 9 4 方法一 include
  • C++学习教程大纲

    以下是C 学习教程的大纲 第一部分 基础知识 C 简介 什么是C C 的历史 C 的特点和优势 开发环境的搭建 安装C 编译器 配置开发环境 第一个C 程序 Hello World程序 程序的结构 编译和运行程序 数据类型和变量 基本数据类
  • jQuery的三种$()

    号是jQuery 类 的一个别称 构造了一个jQuery对象 所以 可以叫做jQuery的构造函数 个人观点 呵呵 1 可以是 expresion 即css选择器 Xpath或html元素 也就是通过上述表达式来匹配目标元素 比如 a 构造