jquery层级选择器的实现(匹配后代元素div)


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(){
    //匹配后代元素div
    $('#index div').html('php');
   });
  };
 </script>
 </head>
 <body>
  <div id='index'>
   <div>div1</div>
   <form>
    <div>div2</div>
    <div>div3</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层级原则器的实现(匹配后代元素div)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
Jul 28 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
JavaScript实现图片懒加载(Lazyload)
Nov 28 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
几种tab切换详解
Feb 03 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 Javascript
Vue.js每天必学之数据双向绑定
Sep 05 #Javascript
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 #Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 #Javascript
JS查找字符串中出现次数最多的字符
Sep 05 #Javascript
node网页分段渲染详解
Sep 05 #Javascript
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
JS实现滑动门效果的方法详解
2016/12/19 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
学习python (1)
2006/10/31 Python
python实现socket客户端和服务端简单示例
2014/02/24 Python
Python创建模块及模块导入的方法
2015/05/27 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python生成随机密码的方法
2017/06/16 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
python让列表倒序输出的实例
2018/06/25 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python pandas生成时间列表
2019/06/29 Python
python字典排序的方法
2019/10/12 Python
Python容器类型公共方法总结
2020/08/19 Python
周鸿祎:教你写创业计划书
2013/12/30 职场文书
节约用水倡议书
2014/04/16 职场文书
建材投资建议书
2014/05/16 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
JS实现九宫格拼图游戏
2022/06/28 Javascript