<!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>

Dom的分类

<!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>

节点的操作

<!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>

删除节点

<!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>

attr属性

<!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>

获取同辈和父辈元素

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

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

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

  2. js 操作对象 记录

    js 对象记录一下: let obj_1 = { name : 'james', age : '22', sex: '1' } for ( i in obj_1 ) { console.log(i) ...

  3. JS 操作对象 事件 样式

    1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...

  4. js操作对象属性用点和用中括号有什么不同

    书读百遍其义自见 学习<JavaScript设计模式>一书时,学习工厂模式这一章节,发现了对象后使用中括号的情况,如下: var Factory=function(type,content ...

  5. js操作对象属性值为字符串

    今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...

  6. js 操作对象的小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...

  7. javascript、js操作json方法总结(json字符创转换json对象)

    相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资 料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...

  8. JS操作DOM对象——JS基础知识(四)

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  9. 认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

随机推荐

  1. JSESSIONID的简单说明

    原文地址:http://blog.csdn.net/chunqiuwei/article/details/23461995 1)第一次访问服务器的时候,会在响应头里面看到Set-Cookie信息(只有 ...

  2. Java链接MySQL数据库的配置文件

    文件名:db.properties(随便) driver = com.mysql.jdbc.Driver  //MySQL数据库驱动名url = jdbc:mysql://localhost:3306 ...

  3. bzoj1997 [HNOI2010]平面图判定Plana

    bzoj1997 [HNOI2010]平面图判定Planar 链接 bzoj luogu 思路 好像有很多种方法过去.我只说2-sat 环上的边,要不在里面,要不在外边. 有的边是不能同时在里面的,可 ...

  4. numpy小结

    <python数据科学>笔记  在线版地址:https://github.com/jakevdp/PythonDataScienceHandbook 1.常用np简写 import num ...

  5. 前端学习之CSS

    CSS介绍 CSS(Cascading Style Sheet, 层叠样式表)定义如何显示HTML元素, 给HTML设置样式, 让它更加美观. 当浏览器读到一个样式表, 它就会按照这个样式表来对文档进 ...

  6. vue--监听器

    vue当中的属性,侦听器watch computed可以根据数据的变化而变化,而watch也具备同样的功能 既然这么相似,那么两者的区别是什么呢 首先是执行顺序上有一些细微差别,dom加载完成后将立即 ...

  7. MySQL存储过程 CASE语句

    MySQL存储过程  CASE语句 除了IF语句,MySQL提供了一个替代的条件语句CASE. MySQL CASE语句使代码更加可读和高效. CASE语句有两种形式:简单的搜索CASE语句. 简单C ...

  8. Spring Boot 配置加载顺序详解

    使用 Spring Boot 会涉及到各种各样的配置,如开发.测试.线上就至少 3 套配置信息了.Spring Boot 可以轻松的帮助我们使用相同的代码就能使开发.测试.线上环境使用不同的配置. 在 ...

  9. rsyslog+loganalyzer配置

    1.loganalyzer服务器搭建[root@localhost ~]# getenforce #查看selinux是否关闭[root@localhost ~]# setenforce 0 #临时关 ...

  10. PHP以xml形式获取POST数据

    <?php namespace Home\Controller; use Think\Controller; class UrlController extends Controller { / ...