DOm 操作之： 1.1  children(),这个函数只是查找元素的子元素，而不考虑其他后代元素

 <body>

     <p title="请选择你最喜欢的水果">你最喜欢的水果是设么</p>

     <ul>

         <li title="苹果" class="shuoguo1">苹果</li>

         <li title="梨子" class="huanying2015"> <strong>这是一个梨子</strong></li>

         <li title="香蕉" class="shuoguo3">香蕉</li>

         <p class="rice">大米</p>

         <p class="xiaomai">小麦</p>

     </ul>

     <input type="button" value="切换" class="btn">

 </body>

js 代码：

 <script>

     $(function() {

         var Oul = $("ul");

         console.log(Oul.children());

     });

 </script>

1.2  方法next()，获取元素紧挨着的下一个同辈元素

 <script>

     $(function() {

         var OLi = $("li.shuoguo1");

         console.log(OLi.next());

         OLi.next().css("background", "#ccc");

     });

 </script>

运行结果：

1.3  方法：prev() ,获取当前元素同辈节点的上一个节点

<script>

    $(function() {

        var Op = $("p.rice");

        Op.prev().css("color", "red");

    });

</script>

运行结果：

1.4.1  是siblings() ,获取匹配元素的所有同辈元素

 <script>

     $(function() {

         var Op = $("p.rice");

         Op.siblings().css("color", "red");

     });

 </script>

1.4.2 也可以加入限制条件：

 <script>

     $(function() {

         var Op = $("p.rice");

         Op.siblings('li').css("color", "red");

     });

 </script>

运行结果：

1.5 方法 closest()：查找最近的元素节点

 <style>

     .myclass {

         color: red;

     }

 </style>

 <script>

     $(function() {

         $(document).bind("click", function(e) {

             $(e.target).closest('li').toggleClass("myclass");

         });

     });

 </script>

运行结果：还不是特别理解，但是知道可以用来做事件委托，如下

1.6 方法：parent(),返回一个父节点，仅有一个节点；parents(),返回所有的父节点，全部的父节点，包括，爷爷节点，祖父节点，祖先节点等，总之是所有的父节点都包括

 <script>

     $(function() {

         var Ostr = $("strong");

         var Opat = Ostr.parent();

         var Apat = Ostr.parents();

         console.log(Opat);

         console.log(Apat);

     });

 </script>

运行结果：

1.7  方法 css();所有的样式style都可以通过css()获取和设置，一个参数时是获取，两个参数时是设置，这个方法比较常见，不再举例

1.8 关于元素定位的方法：offset(),  获取元素在当前视窗的相对偏移

var offset = $("p").offset();             //获取元素的offset()

var left = offset.left;                      // 获取元素的left

var top = offset.top;                   // 获取元素的top

1.9  position() 方法：获取元素的相对偏移，与offset()类似，但是，position()相对的是最近的元素的偏移，且最近的元素的position要有定位属性，即relative,或者absolute；

var position = $("p").position();           //获取元素的offset()

var left = position.left;                          // 获取元素的left

var top = position.top;                            // 获取元素的top

1.10 获取元素的滚动条距离顶端的距离，及获取元素距离左侧的距离

$("p").scrollTop();   // 获取p元素滚动条距离顶端的距离

$("p").scrollLeft();   // 获取p元素滚动条距离左侧的距离

jquery接触初级-----juqery DOM操作 之二的更多相关文章

  1. jquery接触初级-----juqery DOM操作 之一

    1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...

  2. jquery接触初级-----juqery DOM操作实例，动态图片显示

    1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...

  3. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  4. jquery接触初级-----juqery选择器实例

    jquery 选择器用于触发事件,可以少写很多js代码,一般来说,基本的特效功能都能够完成 这里列举一个简单的jquery写的例子: 要求:有两种情况: 1.产品最初状态显示简约形式的品牌,即显示部分 ...

  5. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  6. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  7. jQuery基础修炼圣典—DOM篇（二）jQuery遍历

    1.children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配 ...

  8. jQuery（3）——DOM操作

    ---恢复内容开始---   jQuery中的DOM操作 [DOM操作分类] DOM操作分为DOM Core(核心).HTML-DOM和CSS-DOM三个方面. DOM Core:任何一种支持DOM的 ...

  9. jQuery学习笔记（DOM操作）

    DOM操作的分类 一般来说,DOM操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM. 1. DOM Core DOM Core并不专属于JavaScript,任何一种支持DOM的 ...

随机推荐

  1. WAL基础

    WAL(Write-ahead logging,预写式日志)是数据库系统提供原子性和持久化的一系列技术. 在使用WAL的系统中,所有的修改都先被写入到日志中,然后再被应用到系统状态中.通常包含redo ...

  2. convert 批量文件的格式转换

    1.将 a.gif 转为 png 格式 convert a.gif a.png 请注意,convert 命令的基本格式为 convert 源文件 [参数] 目标文件 在上面的命令中,源文件是 a.gi ...

  3. 智行火车票免费加速到VIP最高速抢票（不用朋友积攒或者购买加速包）

    更新: 2018.11.07, 昨天我买火车票,已经不行了,这个bug已经没有了,被修复了, 望大家知悉!!! 智行火车票免费加速到VIP最高速抢票(不用朋友积攒或者购买加速包) 1)下过单后选择抢到 ...

  4. centos7+apache+svn配置 踩坑，注意权限问题。apache应用目录checkout应用 必须用这个命令：svn co file:///home/svn/test/ test ，通过svn add * &&commit 及任意修改都是不行的

    阅读帮助 命令提示符 [root@server-002 ~]# 表示当前服务root用户执行的命令 [svn@server-002 ~]$ 表示普通用户svn执行的命令 [root@localhost ...

  5. netbeans运行项目时，弹出“cannot be run from folder that contains non-ASCII characters in path”的对话框 解决方法

    netbeans运行项目时,弹出“cannot be run from folder that contains non-ASCII characters in path”的对话框,原因是项目路径中有 ...

  6. Redis 实现问题

    Redis和数据库的同步如何做? 设置redis中数据的过期时间(登录信息) 更新或修改数据库中数据的时候同时更新redis的 数据 使用MQ更新缓存数据 Redis的好处? 速度快:因为数据在内存中 ...

  7. (转)C# 控制蜂鸣器发声

    原文地址:http://blog.csdn.net/tsinfeng/article/details/6201918 在C#中可以通过以下四种方式来实现蜂鸣或者报警,播放声音之类的功能.XP下对蜂鸣有 ...

  8. Android WebView清空缓存

    Android原生和H5混合开发,要求用户退出登录后清空H5所有的缓存: 1.清空Cookie CookieSyncManager.createInstance(context.getApplicat ...

  9. day15(模块引用笔记)

    import spam文件名是spam.py,模块名则是spam# 首次导入模块发生?件事# 1. 会产生一个模块的名称空间# 2. 执行文件spam.py,将执行过程中产生的名字都放到模块的名称空间 ...

  10. Docker使用札记 - 常用命令

    1. 删除untagged的镜像(TAG列为<none>) docker images -f "dangling=true" -q|xargs docker rmi