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 相关文章推荐
js的正则test,match,exec详细解析
Jan 29 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
要会喝咖啡也要会知道咖啡豆
2021/03/03 咖啡文化
十天学会php之第一天
2006/10/09 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
php数据库配置文件一般做法分享
2012/07/07 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
vue input输入框模糊查询的示例代码
2018/05/22 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
JS实现Cookie读、写、删除操作工具类示例
2018/08/28 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
基于Python实现的微信好友数据分析
2018/02/26 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
解决Keras 自定义层时遇到版本的问题
2020/06/16 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
linux面试题参考答案(5)
2014/09/01 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
聘用意向书
2014/07/29 职场文书
教师工作态度自我评价
2015/03/05 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
行政主管岗位职责范本
2015/04/09 职场文书
2015年调度员工作总结
2015/04/30 职场文书
童年读书笔记
2015/06/26 职场文书
Python中22个万用公式的小结
2021/07/21 Python
js判断两个数组相等的5种方法
2022/05/06 Javascript
mysqldump进行数据备份详解
2022/07/15 MySQL