jquery层级选择器(匹配父元素下的子元素实现代码)


Posted in Javascript onSeptember 05, 2016

实例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title>层级 </title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 <script type="text/javascript">
 /*
 ancetor descendant:匹配祖先元素下的后代元素
 parent>child:匹配父元素下的子元素
 prev+next:匹配前一个元素后的下一个元素,必须是挨着的
 prev~siblings:匹配前一个元素后的所有平辈元素
 */
    window.onload=function(){
      $('#btnOk').click(function(){
        //匹配父元素下的子元素
        $('#index>div').html('php');
      });
    };
 </script>
 </head>
 <body>
   <div id='index'>
      <div>div1</div>
      <form>
        <div>div2</div> <!--为index下div的孙子辈元素-->
        <div>div3</div><!--为index下div的孙子辈元素-->
      </form>
      <div>div4</div>
      <div>div5</div>
  </div>
  <div>yang</div> <!--该元素不是在id=index下的div中,不是其后代元素;是兄弟元素-->
  <hr/>
 <input type="button" id='btnOk' value='确定' />
 </body>
</html>

以上这篇jquery层级选择器(匹配父元素下的子元素实现代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
List Installed Software Features
Jun 11 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
Jan 08 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 #Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 #Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
Vue.js每天必学之数据双向绑定
Sep 05 #Javascript
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
You might like
PHP抽象类 介绍
2012/06/13 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
浅谈php的优缺点
2015/07/14 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
Javascript的表单与验证-非空验证
2016/03/18 Javascript
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
React Router v4 入坑指南(小结)
2018/04/08 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
深入理解Python 多线程
2020/06/16 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Pycharm Git 设置方法
2020/09/15 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
迪士尼法国在线商店:shopDisney FR
2020/12/03 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
学习十八大报告感言
2014/02/28 职场文书
个人工作决心书
2015/09/22 职场文书