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. solusvm安装过程

    openvz solusvm ** Testing connectivity PING solusvm.com (69.168.233.94) 56(84) bytes of data. 64 byt ...

  2. NFS应用场景及环境搭建

    两台虚拟机,一台做服务端(server)用来存储,一台做客户端(client)用来访问. 注意,两台虚拟机都已经挂载完光盘,并配置好yum源.客户端client已经安装好lamp环境,服务端不做任何处 ...

  3. Jmeter（二十九）Jmeter-Question之“Ant集成报告模板优化”

    也是在和朋友探讨的时候,发现一个问题,Jmeter在与Ant集成的时候,通常选用的模板是jmeter自带的两个样式表 该自带的样式,节省了大家搭建框架的时间,不需要自己重新写样式,当然也相对简洁: 做 ...

  4. PHP升级7.2之后需要注意的事情

    最近升级了PHP版本,从7.1升级到7.2,升级前版本: PHP 7.1.14 (cli) (built: Feb 2 2018 08:42:59) ( NTS ) Copyright (c) 199 ...

  5. 基于tcp的下载文件，以及struct模块的应用。

    一 基于TCP的下载 客户端: from socket import * import os def main(): tcp_socket = socket(AF_INET, SOCK_STREAM) ...

  6. vue从入门到女装？？：从零开始搭建后台管理系统（二）用vue-docute生成线上文档

    教程 vue从入门到女装??:从零开始搭建后台管理系统(一)安装框架 一个系统开发完成了总要有操作说明手册,接口文档之类的东西吧?这种要全部纯手写就很麻烦了,可以借助一些插件,比如: vue-docu ...

  7. Python-1 试玩OpenCV

    昨天同事说微信更新有跳一跳小游戏,便更新了玩一玩.至于抄袭不抄袭我不讨论,看玩法和色彩都很简洁.想用Python试试摄像头捕捉图像,然后分析距离每次都能跳到中心,有生物机械手指之类的再弄到树莓派上岂不 ...

  8. python tkinter chk

    视频过程中的练习, 可以在python2.7下运行. 001: hello,world: 1 2 3 4 5 6 from Tkinter import Label, Tk root = Tk() t ...

  9. 使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type=" ...

  10. python中 将你的名字转化成为二进制并输出

    1 name = "吴彦祖" 2 for i in name: 3 i_by = bytes(i, encoding = "utf-8") 4 for i_bi ...