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 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
Jan 29 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
浅谈Angular文字折叠展开组件的原理分析
Nov 24 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
vue axios 简单封装以及思考
Oct 09 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
js实现九宫格抽奖
Mar 19 Javascript
Vue是怎么渲染template内的标签内容的
Jun 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
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
PHP使用CURL实现对带有验证码的网站进行模拟登录的方法
2014/07/23 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python类中super()和__init__()的区别
2016/10/18 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
python requests使用socks5的例子
2019/07/25 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
厂长助理岗位职责
2013/12/27 职场文书
电子信息科学专业自荐信
2014/01/30 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
迎新生晚会主持词
2015/06/30 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis