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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
js实现上传图片预览方法
Oct 25 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
基于zTree树形菜单的使用实例
Dec 25 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
js闭包用法实例详解
2016/12/13 Javascript
JS插件clipboard.js实现一键复制粘贴功能
2020/12/04 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[01:06:59]完美世界DOTA2联赛PWL S2 Magma vs FTD 第一场 11.29
2020/12/02 DOTA
python简单实现操作Mysql数据库
2018/01/29 Python
python的pip安装以及使用教程
2018/09/18 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python接口开发实现步骤详解
2020/04/26 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
护士岗位求职应聘自荐书范文
2014/02/12 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
学生会主席演讲稿
2014/04/25 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
计算机应用应届生求职信
2014/07/12 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
会计岗位职责
2015/02/03 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL