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. Eclipse使用Maven创建Web时错误：Could not resolve archetype org.apache.maven.archetypes:maven-archetype-webap

    网上也有好多方法我没有试成功,不过我将maven的conf setting.xml里的 阿里镜像给注释就可以了,你们也可以试试

  2. [UE4]圆形小地图

    一.创建一个名为M_RoundRetainer的材质 二.创建一个名为RoundMiniMap的UserWidget 三.TestMiniMap中将添加进来 四.运行游戏

  3. MAC 无脑编译OpenCV

    1:准备好OpenCV 源码包 下载地址:https://opencv.org/releases.html 编译教程:https://blog.csdn.net/computerme/article/ ...

  4. 深入理解Apache Flink

    Apache Flink(下简称Flink)项目是大数据处理领域最近冉冉升起的一颗新星,其不同于其他大数据项目的诸多特性吸引了越来越多人的关注.本文将深入分析Flink的一些关键技术与特性,希望能够帮 ...

  5. sersync+rsync实现服务器文件实时同步

    sersync+rsync实现服务器文件实时同步 一.为什么要用rsync+sersync架构? 1.sersync是基于inotify开发的,类似于inotify-tools的工具 2.sersyn ...

  6. windows模拟linux部分功能

    --------------------------------------------分割线----------------------------------------------- 系统 wi ...

  7. C# JToken类的使用，实现解析动态json数据、遍历、查找

    在原来解析json数据是,一般都是用反序列化来实现json数据的解读,这需要首先知道json数据的结构并且建立相应的类才能反序列化,一旦遇到动态的json数据,这种方法就不使用. 为了解决动态解析js ...

  8. puppeteer 的PDD反爬经历

    使用puppeteer 爬取PDD数据时出现要求登录,以前是没有这问题的. 尝试多种方式如果: 变更UA 变更代理IP 变更Chromium版本(当然最终就是该问题的原因,但是因为版本跨度太大没有测试 ...

  9. 【Selenium-WebDriver问题点】chromeDriver和chrome浏览器版本之间的兼容性问题

    今天早晨因为测试需求,将chrome浏览器更新到最新的65版本,结果之前用的chromeDriver测试计划,都跑不通过了, 所以就在网上找了下,mark下. 最新的chromedriver与chro ...

  10. IDEA下载Git中项目

     一.             打开idea,点击File>Settings,搜索git(安装系统默认设置即可) 二.        选择git 三.        Git中项目的路径粘贴到ID ...