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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
ajax异步刷新实现更新数据库
Dec 03 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP 冒泡排序 二分查找 顺序查找 二维数组排序算法函数的详解
2013/06/25 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
php获取远程文件大小
2015/10/20 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js动态生成指定行数的表格
2013/07/11 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
js自定义回调函数
2015/12/13 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
图文详解WinPE下安装Python
2016/05/17 Python
12步入门Python中的decorator装饰器使用方法
2016/06/20 Python
基于python select.select模块通信的实例讲解
2017/09/21 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
使用python的turtle函数绘制一个滑稽表情
2020/02/28 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
采购助理岗位职责
2014/02/16 职场文书
高三英语教学反思
2016/03/03 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
python实现剪贴板的操作
2021/07/01 Python