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常考语句107条收集
Mar 09 Javascript
JQueryEasyUI Layout布局框架的使用
Apr 08 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
jquery实现全选、反选、获得所有选中的checkbox
Sep 13 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
vue项目中引入noVNC远程桌面的方法
Mar 05 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 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
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
Zend引擎的发展 [15]
2006/10/09 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
详解php协程知识点
2018/09/21 PHP
php实现映射操作实例详解
2019/10/02 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
一波JavaScript日期判断脚本分享
2016/03/06 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
Vue如何实现验证码输入交互
2020/12/07 Vue.js
python Django模板的使用方法(图文)
2013/11/04 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
关于Pytorch的MNIST数据集的预处理详解
2020/01/10 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
后勤采购员岗位职责
2013/12/19 职场文书
餐饮加盟计划书
2014/01/10 职场文书
学校食品安全实施方案
2014/06/14 职场文书
2015年圣诞节活动总结
2015/03/24 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技