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 Date函数整理方便使用
Oct 23 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
原生Js实现简易烟花爆炸效果的方法
Mar 20 Javascript
jQuery中事件与动画的总结分享
May 24 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
详解Vue之事件处理
Jul 10 Javascript
解决vue+webpack项目接口跨域出现的问题
Aug 10 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中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
CodeIgniter框架实现的整合Smarty引擎DEMO示例
2019/03/28 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
2017/04/12 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
PyQt5每天必学之关闭窗口
2018/04/19 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
详解Django的model查询操作与查询性能优化
2018/10/16 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
鉴定评语大全
2014/05/05 职场文书
社区维稳工作方案
2014/06/06 职场文书
会计人员岗位职责
2015/02/03 职场文书
小学语文教师研修感悟
2015/11/18 职场文书
五年级作文之劳动作文
2019/11/12 职场文书
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫