1、jQuery操作的分类

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>Dom的分类</title>
   
   
  <!--
  xml dom :针对于 xml文件的操作
  html dom :处理html页面 document.forms[0]
  css dom :操作css element.style.属性名
   
  dom core:核心！只要是支持dom编程语言都可以使用！
  javaSc对ript（jQuery）对上面的dom操作都提供了支持！
  jQueryjavaScript中的dom操作 进行了封装！
  -->
  </head>
  <body>
   
  </body>
  </html>

2、节点的操作

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>节点的操作</title>
  </head>
  <body>
   
  <ul>
  <li>大家辛苦了</li>
  <li>不交作业了</li>
  <li>就是不交</li>
  <li>气死你</li>
  <li>伤害了谁？</li>
  </ul>
   
  <button type="button" id="addLi">新增子节点</button>
  <button type="button" id="addUl">新增同辈节点</button>
  <button type="button" id="updateLi">替换下标为2节点</button>
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(function(){
  $("#addLi").click(function(){
  //创建一个节点li
  var $newLi=$("<li>新增的作业</li>");
  //把新增的节点放置到 ul的最后 $("ul").append($newLi); $newLi.appendTo($("ul"));
  //把新增的节点放置到 ul的最前面
  $("ul").prepend($newLi); //等同于 $newLi.prependTo($("ul"));
  })
   
  $("#addUl").click(function(){
  //创建一个节点ul
  var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>")
  //把新增的ul放置在我们ul之后 $("ul").after($newUl); $newUl.insertAfter($("ul"));
  //把新增的ul放置在我们ul之前 $("ul").before($newUl);
  $newUl.insertBefore($("ul"));
  })
  /**
  * 获取li下标值是2的元素 替换
  * $(节点1).replaceWith($(替换节点))
  * 等同于
  * $(替换节点).replaceAll($(节点1))
  */
   
  $("#updateLi").click(function(){
  //创建替换的节点
  var $updateLi=$("<li style='color: red'>我是替换节点</li>");
  //获取下标是2的元素$("li:eq(2)").replaceWith($updateLi);
  //替换所有元素
  $("li:eq(0)").replaceAll($("li:eq(4)"));
  })
   
  //验证 clone
  $("li:eq(2)").mouseover(function(){
  $(this).css({"background":"red"});
  })
   
  //向ul中clone 节点3
  $("li:eq(2)").clone().appendTo("ul");
  // $("li:eq(2)").clone(true).appendTo("ul"); 会绑定事件，样式
   
   
   
  })
   
   
   
  </script>
   
  </body>
  </html>

3、删除节点

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>删除节点</title>
  <!--
  empty(), remove(), detach()三者的区别
   
  empty():只能清空节点的内容和子元素！节点本身不会被删除！
  remove():
  01.删除整个节点，包含自身和子元素！
  02.删除了节点所对应的事件
  detach():
  01.删除整个节点，包含自身和子元素！
  02.不会删除节点所对应的事件
  -->
   
  </head>
  <body>
  <div id="main">
  main
  <div id="first">first
  <div>里面的子元素</div>
  </div>
  </div>
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(function(){
  var $first=$("#first");
   
  $first.click(function(){
  alert("first");
  })
  // $first.empty();
  // $first.remove();
  $first.detach();
  $first.prependTo("body");
   
  })
   
   
  </script>
  </body>
  </html>

4、attr属性

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>attr属性</title>
  <!--
  attr():
  01.如果只有一个参数 ，就是获取对应属性的值
  02.如果有两个参数 ，就是设置对应属性的值
  -->
  </head>
  <body>
  <img src="../images/cat.jpg">
   
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(function(){
  $("img").click(function(){
  //获取元素指定的属性值
  var $src= $(this).attr("src");
  alert($src);
  //增加鼠标悬停时的提示文字
  $(this).attr({"title":"这是一只可爱的小猫咪","width":"200px"});
  //清除对应的属性值
  $(this).removeAttr("src");
  })
   
  })
   
   
  </script>
  </body>
  </html>

5、获取同辈和父辈元素

<!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>获取同辈和父辈元素</title>
  </head>
  <body>
  body
  <div id="main">
  main
  <div id="first1">
  first1
  <div id="second1">
  second1
  <div id="third1">
  third1
  </div>
  </div>
  </div>
  <div id="first2">
  first2
  <div id="second2">
  second2
  </div>
  </div>
  <div id="first3">
  first3
  <div id="second3">
  second3
  </div>
  </div>
  </div>
   
  <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
   
  $(function(){
  //获取main的子元素个数
  alert("main的子元素个数"+$("#main").children().length);
   
  //设置first1之后的兄弟节点的样式
  // $("#first1").next().css({"color":"red"});
  //设置first2之前的兄弟节点的样式
  //$("#first2").prev().css({"color":"red"});
  //所有同辈元素 之前和之后
  //$("#first2").siblings().css({"color":"red"});
   
  //设置first1的父级元素
  // $("#first1").parent().parent().css({"color":"red"});
  //设置third1的祖先元素
  $("#third1").parents().css({"color":"pink"});
  })
  </script>
  </body>
  </html>

JavaQuery操作对象的更多相关文章

  1. for...in也反复执行语句，但它是用来操作对象的

    for...in也反复执行语句,但它是用来操作对象的

  2. JQuery 操作对象的属性值

    通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...

  3. java设计模式--基础思想总结--父类引用操作对象

    看设计模式的相关书籍也有一段时间了,一开始其实是抱着作为java三大框架的基础知识储备来学习的,不过到后来,才发现,在设计模式的一些准则装饰下,java的面向对象威力才真正地体现出来,后面的将会陆续地 ...

  4. 有关java的引用传递，直接操作对象本身。直接删除BE的value中某值

    HashSet<String> refRegions = BE.get(regionName);    HashSet<String> values = new HashSet ...

  5. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  6. Java如何操作对象（bean）进行动态排序？

    原文出自:https://blog.csdn.net/seesun2012 简介如题:Java如何操作对象(bean)进行动态排序?Java实体类(bean)动态排序? 原理:利用反射根据指定的属性值 ...

  7. OGNL（Object-Graph Navigation Language），可以方便地操作对象属性的开源表达式语言，使页面更简洁；

    OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁: 支持运算符(如+-*/),比普通的标志具有更高的自由度和更强的功能 ...

  8. js 操作对象的引用和操作实际对象的区分

    JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...

  9. 018——VUE中v-for操作对象与数值

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. 20155315 2016-2017-2 《Java程序设计》第五周学习总结

    教材学习内容总结 第8章 异常处理 1.使用try...catch 与C语言中程序流程和错误处理混在一起不同,Java中把正常流程放try块中,错误(异常)处理放catch块中. 如果父类异常对象在子 ...

  2. url添加时间戳

    http://blog.csdn.net/qq_36769100/article/details/54564784 URL后面添加随机数通常用于防止客户端(浏览器)缓存页面. 浏览器缓存是基于url进 ...

  3. 七牛云 上传图片 https 修改Nginx 注意事项

    仅在这记录下,今天的事情. 问题出自于Nginx 设置http 强制跳转 https设置 1.上午,出于某些需求,我将服务器Nginx 设置http 强行跳转 https server { liste ...

  4. Python练习-time模块

    明天的明天的明天,雾草! # 编辑者:闫龙 #显示当前时间三天后是星期几? import time t = time.time()+((24*3600)*3) tl = time.localtime( ...

  5. 原生的js实现jsonp的跨域封装

    一.原理 jsonp是利用浏览器请求script文件时不受同源策略的限制而实现的,伪造一个script标签,将请求数据的url赋值给script的src属性,并将该标签添加到html中,浏览器会自动发 ...

  6. 连续的if语句

    use_relu=0 use_tanh=2 a = 2 if use_relu else (1 if use_tanh else 0)#如果use_relu不等于0,则a等于2:如果use_relu等 ...

  7. 戴尔游匣5577安装 ubuntu/mint

    这里以mint为例. 做好usb启动盘后, 启动到读秒的时候按上下方向键唤出如下选项: 在第二个选项里按 tab 键(上图界面有提示) 进去后有如下界面: 在后面加上参数: nouveau.modes ...

  8. sql 内联，左联，右联，全联

    联合查询效率较高,以下例子来说明联合查询(内联.左联.右联.全联)的好处: T1表结构(用户名,密码) userid (int) username varchar(20) password  varc ...

  9. git checkout 命令详解【转】

    转自:http://www.cnblogs.com/hutaoer/archive/2013/05/07/git_checkout.html 在日常的git操作中,git checkout——检出,是 ...

  10. KVM，QEMU，libvirt入门学习笔记【转】

    转自:http://blog.csdn.net/julykobe/article/details/27571387 注:本文内容均来自网络,我只是在此做了一些摘抄和整理的工作,来源均有注明. 0.虚拟 ...