JQuery之选择器转移
JQuery之选择集转移方法如下图：
所谓选择集，就是通过$()方法获取到的所有标签的集合。
代码实现：
<script src="JS/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div1 = $('#div1');
$div1.prev().css({
// 获取当前元素的上一个同级别的元素
'color':'red'
});
$div1.prevAll().css({
// 获取当前元素上面的所有同级别元素
'font-size' : '20px'
});
$div1.next().css({
// 获取当前元素的下一个同级别元素
'color':'blue'
});
$div1.nextAll().css({
// 获取当前元素下面的所有同级别元素
'font-size':'20px'
});
});
$(function(){
var $div3 = $('#div3');
$div3.parent().css({
// 获取当前元素的父元素
'background':'red'
});
$div3.parent().parent().css({
// 获取当前元素的爷爷元素
'background':'blue'
});
$div3.children().css({
// 获取当前元素的所有孩子元素
'background':'yellow'
});
$div3.siblings().css({
// 获取当前元素的所有兄弟元素
'background':'pink'
});
// $div3.find('.spn1').css({
// // 在当前元素内查找class名为spn1的元素
// 'font-size':30
// });
$div3.find('#spn1').css({
// 在当前元素内查找class名为spn1的元素
'font-size':99
});
});
</script> <body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<div id="div1"></div>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6> <div>祖
<div >父
<div>子兄弟1</div> <div id="div3" style="background: brown;">子
<div>孙</div>
<div>
<div>
<span id="spn1" class="spn1">gfgjkkhdsfhgvjskadugjvkoiuvjhfdsyiufhdsjou</span>
</div>
</div> </div>
<div>子兄弟2</div>
<div>子兄弟3</div> </div>
</div>
</body>
JQuery之选择器转移的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery（选择器）
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
随机推荐
- 7.25 NOIP模拟8
这次考试前面状态还行,后两个小时真是一言难尽,打了个T3的n^2暴力就懵逼了,不知道怎么优化. T1.匹配 看了一边题发现不太懂(这不是考试的难度啊),然后水完T2后回来5分钟水过,非常愉快的一道题. ...
- 吉利WA数
- ASP.NET Core 3.0 gRPC 拦截器
目录 ASP.NET Core 3.0 使用gRPC ASP.NET Core 3.0 gRPC 双向流 ASP.NET Core 3.0 gRPC 拦截器 一. 前言 前面两篇文章给大家介绍了使用g ...
- [校内自测 NOIP模拟题] chenzeyu97要请客(单调栈)
题目描述 chenzeyu97的家可以看成是一个n*m的矩阵,每块区域都有独一无二的海拔高度h(h>0)!其最大值为n*m. 现在他要选择一个子矩阵摆放一张桌子,在他眼里,这样摆放桌子的美观度为 ...
- 安装Windows和Ubuntu双系统--Ubuntu安装过程识别不了硬盘
Linux识别不了固态硬盘 安装过程: 自己本身的是Windows 10,一块125g 固态 ,一块1T的机械硬盘. 通过rufus 制作ubuntu的启动盘 在BIOS中关闭电脑的安全启动选项,并且 ...
- git 合并代码
分支 dev 及衍生分支 dev-ctj 一.rebase 1.git checkout dev-ctj 2.git rebase -i head~num[num 是本分支的提交数,多个提交数先合并为 ...
- TensorFlow2.0（10）：加载自定义图片数据集到Dataset
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- 云服务器linux系统修改时间和时区
申请的云服务器时间不对,用同步网络时间的命令执行后依然有问题. 解决办法: # tzselect [root@ylyuat2-web02 logs]# TZ='Asia/Shanghai'[root@ ...
- .NET Core3.0 EF 连接 MySql
一:创建项目 添加 csproj (或者直接NuGet 引用) <ItemGroup> <PackageReference Include="Microsoft.Entit ...
- PHP中跳出循环break,continue,return,exit的区别
1. return 语句的作用 (1) return 从当前的方法中退出,返回到该调用的方法的语句处,继续执行. (2) return 返回一个值给调用该方法的语句,返回值的数 ...