获取子元素

1、纯css  获取子元素

#test1>div {background-color:red;}
#test1 div {font-size:14px;}
#test1>div:first-child {color:#ccc;}


<div id="test1">
<div>性别</div><div>男</div>
</div>

因1示例中为#test1下的子元素 #test1>div 余#test1 div 并没有区别。做如下示例:

h1> strong {color:red;}

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1> 

h1  strong {color:red;}

2、JQuery css 获取子元素

$(function(){

     $("#button1").click(function(){
         $("#test1>Div").html("姓名");
         $("#test1>Div").next().html("张三");  //若注释这步,两个div都为“姓名”。
         $("#test1 div").css("color","green")
         $("#test1>div:first").css("font-size","24px");
  });
});
<input type="button" id="button1" value="验证" />

3 、JQuery 获取子元素 find() 与children()

$(function(){
     $('ul.level-1').children().css('border', '1px solid green');
     $('ul.level-2').find('li').css('border', '1px solid red');
     $("#p1").html("children li长度:"+$("ul.level-1").children("li").length); 
     $("#p2").html("find li长度:"+$("ul.level-1").find("li").length);

 });

<div>
<ul class="level-1"><li>list1
        <ul  class="level-2">
           <li>list1-1
              <ul class="level-3">
                     <li>list1-1-1</li>
                     <li>list1-1-2</li>
               </ul> </li>
           <li>list1-2</li>
        </ul>
     </li>
     <li>list2
         <ul class="level-2">
            <li>list2-1</li>
            <li>list2-2</li>
        </ul>
     </li>
     <li>list3
         <ul class="level-2">
            <li>list3-1</li>
            <li>list3-2</li>
         </ul>
     </li>
</ul>
</div>
<p id="p1"></p><p id="p2"></p>
<p>children和find的区别:children只会查找直接子集,而find会跨越层级查找,一直找到没有为止。</p>

 

转载于:https://www.cnblogs.com/LoveSuk/p/5283421.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/458179.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JPG PNG GIF BMP图片格式的区别

类型优点缺点应用场景相同图片大小比较BMP无损压缩&#xff0c;图质最好文件太大&#xff0c;不利于网络传输 152KGIF动画存储格式最多256色&#xff0c;画质差 53KPNG可保存透明背景的图片画质中等 202KJPG文件小&#xff0c;利于网络传输画质损失车牌识别84K BMP BMP&…

EasyUI左右布居

<!DOCTYPE html><html xmlns"http://www.w3.org/1999/xhtml"><head runat"server"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>首页</title> <li…

44.Android之Shape设置虚线、圆角和渐变学习

Shape在Android中设定各种形状&#xff0c;今天记录下&#xff0c;由于比较简单直接贴代码。 Shape子属性简单说明一下:   gradient -- 对应颜色渐变。 startcolor、endcolor就不多说了。 android:angle是指从哪个角度开始变.solid -- 填充。stroke -- 描边。corners -- 圆角…

几种边缘检测算子的比较Roberts,Sobel,Prewitt,LOG,Canny

from&#xff1a;https://blog.csdn.net/gdut2015go/article/details/46779251 边缘检测是图像处理和计算机视觉中的基本问题&#xff0c;边缘检测的目的是标识数字图像中亮度变化明显的点。图像属性中的显著变化通常反映了属性的重要事件和变化。这些包括&#xff1a;深度上的…

django 初试

/*************************************************************************************** django 初试* 说明&#xff1a;* 昨天打搭了dgango的服务器&#xff0c;今天学一下怎么来输出一个hello world出来。* * …

浅析“高斯白噪声”,“泊松噪声”,“椒盐噪声”的区别

from&#xff1a;https://www.jianshu.com/p/67f909f3d0ce 在图像处理的过程中&#xff0c;一般情况下都进行图像增强&#xff0c;图像增强主要包括“空域增强”和“频域增强”&#xff0c; 空域增强包括平滑滤波和锐化滤波。 平滑滤波&#xff0c;就是将图像模糊处理&#x…

HttpClient通过Post上传文件(转)

在之前一段的项目中&#xff0c;使用Java模仿Http Post方式发送参数以及文件&#xff0c;单纯的传递参数或者文件可以使用URLConnection进行相应的处理。 但是项目中涉及到既要传递普通参数&#xff0c;也要传递多个文件&#xff08;不是单纯的传递XML文件&#xff09;。在网上…

数字图像处理:各种变换滤波和噪声的类型和用途总结

摘自http://imgtec.eetrend.com/blog/4564 一、基本的灰度变换函数 1.1图像反转 适用场景&#xff1a;增强嵌入在一幅图像的暗区域中的白色或灰色细节&#xff0c;特别是当黑色的面积在尺寸上占主导地位的时候。 1.2对数变换&#xff08;反对数变换与其相反&#xff09; …

Java 开发环境部署

1.下载Java开发环境工具包JDK&#xff0c;下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载后&#xff0c;双击jdk应用程序&#xff0c;根据提示完成安装&#xff0c;安装过程中可以自定义安装目录等信息&#xff0c;这里我选择…

枚举enum、NS_ENUM 、NS_OPTIONS

2019独角兽企业重金招聘Python工程师标准>>> enum 了解位移枚举之前&#xff0c;我们先回顾一下C语言位运算符。 1 << : 左移,比如1<<n,表示1往左移n位&#xff0c;即数值大小2的n次方; 例如 : 0b0001 << 1 变为了 0b0010 2 >> : 右…

mysql 关键词相关度排序方法详细示例分析

http://www.jb51.net/article/40480.htm转载于:https://www.cnblogs.com/lixiuran/p/5299305.html

数字图像处理-频率域滤波原理

from&#xff1a;https://blog.csdn.net/forrest02/article/details/55510711?locationNum15&fps1 写在前面的话 作者是一名在读的硕士研究僧&#xff0c;方向是图像处理。由于图像处理是一门相对复杂的学科&#xff0c;作者在课堂上学到的东西只是非常浅显的内容&#…

tomcat优化-有改protocol 和 缓存 集群方案

tomcat优化 在线上环境中我们是采用了tomcat作为Web服务器&#xff0c;它的处理性能直接关系到用户体验&#xff0c;在平时的工作和学习中&#xff0c;归纳出以下七种调优经验。 1. 服务器资源 服务器所能提供CPU、内存、硬盘的性能对处理能力有决定性影响。 (1) 对于高并发…

深入浅出的讲解傅里叶变换(真正的通俗易懂)

原文出处&#xff1a; 韩昊 1 2 3 4 5 6 7 8 9 10 作 者&#xff1a;韩 昊 知 乎&#xff1a;Heinrich 微 博&#xff1a;花生油工人 知乎专栏&#xff1a;与时间无关的故事 谨以此文献给大连海事大学的吴楠老师&#xff0c;柳晓鸣老师&#xff0c;王新年老师以及张晶泊老…

分布式锁 基于Redis

分布式锁的实现(基于Redis)参考:http://www.jb51.net/article/75439.htm http://www.linuxidc.com/Linux/2015-01/111827.htm http://www.tuicool.com/articles/6juqmm7 方式一: 基于第三方类库 redssion 1.安装redis安装redssion的锁服务队redis的版本有要求&#xff0c;要求必…

学好Linux决心书

我叫李杨&#xff0c;经过在老男孩教育linux运维班5个月学习后&#xff0c;我一定要达到的的薪水目标是7k,为了达到此目标我将采取如下5大行动或方案&#xff1a;1.每天坚持学习7个小时2.坚持每天跑步1小时3.调整思路 严于利己4.让自己生活更加充实&#xff0c;不在浑浑噩噩5.为…

如何通俗易懂地解释欧拉公式(e^πi+1=0)?

from&#xff1a;https://www.zhihu.com/question/41134540 http://www.matongxue.com/madocs/8.html

IIS(1)

转载&#xff1a;http://blog.csdn.net/ce123 IIS音频总线学习&#xff08;一&#xff09;数字音频技术 一、声音的基本概念 声音是通过一定介质传播的连续的波。 图1 声波重要指标&#xff1a; 振幅&#xff1a;音量的大小周期&#xff1a;重复出现的时间间隔频率&#xff1a;…

手机屏幕适配原理及实现

为什么80%的码农都做不了架构师&#xff1f;>>> 手机屏幕是用户与 App 最直接的交互点 不同的分辨率下用户对我们的 App 具有明显的感观差异&#xff0c;主流分辨率的更新迭代却又完全独立于 App 进行。这让我们想要使 App 在绝大多数主流手机上都保持感观、体验的…

【数字图像处理】傅里叶变换在图像处理中的应用

from&#xff1a;https://www.cnblogs.com/tenderwx/p/5245859.html 1.理解二维傅里叶变换的定义 1.1二维傅里叶变换 二维Fourier变换: 逆变换&#xff1a; 1.2二维离散傅里叶变换 一个图像尺寸为MN的 函数的离散傅里叶变换由以下等式给出&#xff1a; 其中 和。其中变量u和…