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. Scrapy学习篇（六）之Selector选择器

    当我们取得了网页的response之后,最关键的就是如何从繁杂的网页中把我们需要的数据提取出来,python从网页中提取数据的包很多,常用的有下面的几个: BeautifulSoup它基于HTML代码 ...

  2. volley 之GsonRequest

    这是之前写的http://www.cnblogs.com/freexiaoyu/p/3955137.html 关于GsonReques的用户,这个在POST请求传参数的时候GsonRequest构造第 ...

  3. [UE4]认识CanvasPanelSlot，Construct Object From Class动态创建UI控件

    Canvas Panel Slot是UserWidget的Canvas Panel组件容器内的组件特有的属性. 只有放置在Canvas Panel容器内才会有Canvas Panel Slot属性 可 ...

  4. xinetd网络(2) 协议头解析

    1:在/etc/xinetd.d下添加配置文件xhttpd service xhttpd { socket_type = stream //每行“=”前后各最多只能有一个空格 protocol= tc ...

  5. concurrent.futures进线程池和协程

    concurrent.futures 异步执行进程线程池的模块,一个抽象类,定义submit,map,shutdown方法 from concurrent.futures import Process ...

  6. 安装部署elasticsearch

    ELK下载:https://www.elastic.co/downloads/ Beats:负责收集系统数据,可以直接发送到es中,也可以通过logstash中转 logstash:收集日志,为bea ...

  7. 05-spark streaming & kafka

    1.如何消费已经被消费过的数据? 答:采用不同的group 2.如何自定义去消费已经消费过的数据? Conosumer.properties配置文件中有两个重要参数 auto.commit.enabl ...

  8. windows 下安装 docker

    1. 使用阿里云的镜像进行安装: http://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 2. 安装完成后点击图标 “Dock ...

  9. day24类的继承

    类的继承1 什么是继承    继承一种新建类的方式,新建的类称之为子类/派生类,被继承的类称之为父类\基类\超类    python中继承的特点:        1. 子类可以遗传/重用父类的属性   ...

  10. QT编写TCP入门+简单的实际项目（附源程序）

    我个人感觉学习QT不需要那么深入的了解,因为我就是编写一下界面来实现理想的功能而已,我不是靠这个吃饭,当然以后要是从事这个方向那就好好深入底层好好学了. 学习QT的TCP:第一步:去百度看看TCP的介 ...