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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
详解js中构造流程图的核心技术JsPlumb
Dec 08 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
Vue.js实现模拟微信朋友圈开发demo
Apr 20 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
详解webpack打包第三方类库的正确姿势
Oct 20 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 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初学者头痛的十四个问题
2006/07/12 PHP
数据库的日期格式转换
2006/10/09 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
使用php检测用户当前使用的浏览器是否为IE浏览器
2013/12/03 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
JavaScript实用技巧(一)
2010/08/16 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
javascript history对象详解
2017/02/09 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
python使用range函数计算一组数和的方法
2015/05/07 Python
Python批量查询域名是否被注册过
2017/06/21 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python os.access()用法实例
2019/02/18 Python
Python序列类型的打包和解包实例
2019/12/21 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
简述数组与指针的区别
2014/01/02 面试题
高级方案规划工程师岗位职责
2013/11/29 职场文书
2014大学生全国两会学习心得体会
2014/03/13 职场文书
三八妇女节致辞
2015/07/31 职场文书
教师个人教学反思
2016/02/23 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
创业计划书之废品回收
2019/09/26 职场文书