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 三种编解码方式
Feb 01 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
Jun 15 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 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
destoon官方标签大全
2014/06/20 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
Javascript 去除数组的重复元素
2010/05/04 Javascript
IE本地存储userdata的一个bug说明
2010/07/01 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
AngularJS教程之MVC体系结构详解
2016/08/16 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Python中的字符串替换操作示例
2016/06/27 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
浅谈python中requests模块导入的问题
2018/05/18 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Python实现基于socket的udp传输与接收功能详解
2019/11/15 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
建筑院校毕业生求职信
2014/06/13 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
logback 实现给变量指定默认值
2021/08/30 Java/Android
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python