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 23 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
JS网页播放声音实现代码兼容各种浏览器
Sep 22 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue vant中picker组件的使用
Nov 03 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
adodb与adodb_lite之比较
2006/12/31 PHP
php cli换行示例
2014/04/22 PHP
ThinkPHP的URL重写问题
2014/06/22 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python修改字典内key对应值的方法
2015/07/11 Python
python 将md5转为16字节的方法
2018/05/29 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
详解python statistics模块及函数用法
2019/10/27 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
用python实现名片管理系统
2020/06/18 Python
Python排序函数的使用方法详解
2020/12/11 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
python 实现网易邮箱邮件阅读和删除的辅助小脚本
2021/03/01 Python
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
团委竞选演讲稿
2014/04/24 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
小学数学国培研修日志
2015/11/13 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript