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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
Vue filter 过滤器、以及在table中的使用介绍
Sep 07 Javascript
浅谈JS的二进制家族
May 09 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 301转向实现代码
2008/09/18 PHP
在php和MySql中计算时间差的方法
2011/04/22 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
PHP进程通信基础之信号
2017/02/19 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
微信小程序之前台循环数据绑定
2017/08/18 Javascript
vue2.x+webpack快速搭建前端项目框架详解
2017/11/30 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
[08:44]和酒神一起战斗 DOTA2教你做大人
2014/03/27 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python底层封装实现方法详解
2020/01/22 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
python软件测试Jmeter性能测试JDBC Request(结合数据库)的使用详解
2021/01/26 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
什么是SCM(软件配置管理)
2014/08/16 面试题
js实现弹框效果
2021/03/24 Javascript
离婚协议书怎么写的
2014/12/14 职场文书
革命电影观后感
2015/06/18 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers
mysql 获取相邻数据项
2022/05/11 MySQL
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android