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. Linux学习2-fork

    复制进程映像 fork() 要想让进程同时执行多个函数,我们可以使用线程或从源程序中创建一个完全分离的进程,后者就像init的做法一样,而不像exec调用那样用新程序替换当前指向的线程. 我们可以通过 ...

  2. java 去除末尾的零 如果小数点可以去除同时去除小数点

    String s; if(s.indexOf(".") > 0){ //正则表达 s = s.replaceAll("0+?$", "" ...

  3. 【译】第六篇 Replication：合并复制-发布

    本篇文章是SQL Server Replication系列的第六篇,详细内容请参考原文. 合并复制,类似于事务复制,包括一个发布服务器,一个分发服务器和一个或多个订阅服务器.每一个发布服务器上可以定义 ...

  4. 【译】第四篇 Replication：事务复制-订阅服务器

    本篇文章是SQL Server Replication系列的第四篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...

  5. Python Dict用法

    Operation Result len(a) the number of items in a 得到字典中元素的个数 a[k] the item of a with key k 取得键K所对应的值 ...

  6. Django 使用mysql 所遇到问题一：Error loading MySQLdb module

    在配置完mysql 的配置信息后执行 python manage.py runserver 时出现如下错误.(py3的环境) 解决 在 python2 中,使用 pip install mysql-p ...

  7. mysql基准测试工具tpcc-mysql安装、使用、结果解读

    TPCC是专门针对联机交易处理系统(OLTP系统)的规范,一般情况下我们也把这类系统称为业务处理系统,tpcc-mysql是percona基于TPC-C(下面简写成TPCC)衍生出来的产品,专用于My ...

  8. python 元组分组并排序

    # -*- coding: utf-8 -*- # @Time : 2018/8/31 14:32 # @Author : cxa # @File : glomtest.py # @Software: ...

  9. 转 Java的 BigDecimal类型比较大小

    这个类是java里精确计算的类 1.比较对象是否相等,一般的对象用equals,但是BigDecimal比较特殊,举个例子 BigDecimal a = new BigDecimal.valueOf( ...

  10. jmter提交图片

    jmter提交图片 https://www.cnblogs.com/linglingyuese/p/4514808.html