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代码 var ie = !-[1,] 最短的IE判定代码
May 28 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
jQuery实现移动端Tab选项卡效果
Mar 15 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
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开发中的安全防范知识详解
2013/06/06 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php中动态变量用法实例
2015/06/10 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Zend Framework入门教程之Zend_Db数据库操作详解
2016/12/08 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
微信小程序商品到详情的实现
2017/06/27 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
2020/01/16 Javascript
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python中单例模式总结
2018/02/20 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
台湾乐天市场:日本No.1的网路购物网站
2017/03/22 全球购物
医学检验专业大学生求职信
2013/11/18 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
社区庆八一活动方案
2014/02/02 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
单位工作证明
2014/10/07 职场文书
兵马俑的导游词
2015/02/02 职场文书
雷锋电影观后感
2015/06/10 职场文书
元宵节晚会主持词
2015/07/01 职场文书
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL
redis protocol通信协议及使用详解
2022/07/15 Redis
Nginx报404错误的详细解决方法
2022/07/23 Servers