编程 Javascript

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层级选择器(匹配父元素下的子元素实现代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

- Author -

jingxian

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Firefox 无法获取cssRules 的解决办法

Oct 11 Javascript

extjs form textfield的隐藏方法

Dec 29 Javascript

javascript getElementsByName()的用法说明

Jul 31 Javascript

网页禁用右键实现代码（JavaScript代码）

Oct 29 Javascript

jquery toolbar与网页浮动工具条具体实现代码

Jan 12 Javascript

设置jQueryUI DatePicker默认语言为中文

Jun 04 Javascript

微信小程序五星评分(包括半颗星评分)实例代码

Dec 14 Javascript

Bootstrap进度条与AJAX后端数据传递结合使用实例详解

Apr 23 Javascript

node使用UEditor富文本编辑器的方法实例

Jul 11 Javascript

原生js实现简单的模态框示例

Sep 08 Javascript

JS中的多态实例详解

Oct 15 Javascript

js console.log打印对象时属性缺失的解决方法

May 23 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