使用jQuery操作DOM(ppt练习)
<!DOCTYPE html>
<html>
<head>
<title>test3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//插入子节点:append,appendTo,prepend,prependTo
var newNode = $("<li>千与千寻</li>");
//$("ul").append(newNode);
//newNode.appendTo($("ul"));
//$("ul").prepend(newNode);
//newNode.prependTo($("ul")); //插入同辈节点:after,insertAfter,before,insertBefore
//$("ul").after(newNode);
//$(newNode).insertAfter($("ul"));
//$("ul").before($(newNode));
//$(newNode).insertBefore($("ul")); //替换节点:replaceWith,replaceAll
//$("ul li:eq(1)").replaceWith($(newNode));
//$("ul li:eq(1)").replaceWith($(newNode));
//$("ul li").replaceWith($(newNode)); //复制节点:clone
//$("ul li:eq(1)").clone(true).appendTo("ul"); //删除节点:remove(删除的是引用),detach,empty
/* $("ul li:eq(1)").click(function(){
var $li = ("ul li:eq(1)").remove();
$li.appendTo("ul");
}); */
//$("ul li:eq(1)").detach();
//$("ul li:eq(1)").empty(); //获取与设置节点属性attr(),removeAttr()
//$("img").attr({width:"100px",heigth:"100px"});
alert($("img").removeAttr("name"));
});
</script> </head> <body>
<p>热门动画</p>
<ul>
<li>海贼王</li>
<li>死神</li>
<li>柯南</li>
</ul>
<img src="../images/6.jpg" name="this is a picture" >
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>test4.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//获得所有元素的子元素
//$("body").css({background:"red"}); //遍历所有子元素:next([expr]),prev([expr]),slibings([expr])
//下一个同辈元素
//$("#div3").next().css({background:"red"});
//前一个同辈元素
//$("#div4").prev().css({background:"red"});
//前面和后面的同辈元素
//$("#div4").slibings().css({background:"red"}); //遍历前辈元素:parent(父辈元素),parents(祖先元素)
//$("#div4").parent().css({background:"red"});
//$("#div4").parents().css({background:"red"});
});
</script>
</head> <body>
<div id="div1" style="width:550px;height:550px;border:1px solid">
<div id="div2" style="width:304px;height:304px;border:1px solid">
<div id="div3" style="width:100px;height:100px;border:1px solid"></div>
<div id="div4" style="width:100px;height:100px;border:1px solid"></div>
<div id="div5" style="width:100px;height:100px;border:1px solid"></div>
</div>
<br>
<div style="width:200px;height:200px;border:1px solid">
<div style="width:100px;height:100px;border:1px solid"></div>
</div>
</div>
</body>
</html>
使用jQuery操作DOM(ppt练习)的更多相关文章
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
- Hybrid App开发之jQuery操作DOM
前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery权威指南(第2版) 学习一 jQuery操作DOM
jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...
- *jquery操作DOM总结 (原创:最全、最系统、实例展示)
jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...
- jQuery操作dom事件
参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...
- Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
随机推荐
- delegate, event - 里面涉及的参数类型必须完全一致,子类是不行的
public void TestF() { Test += Fun; } public void Fun(Person p) { } // 如 Person变成 SubPerson,则报错..pub ...
- 入门级:GitHub和Git超超超详细使用教程!
GitHub和Git入门 考虑到大家以前可能对版本控制工具和Linux命令行工具都不了解,我写了一个简单的博客来让大家学会入门使用方法. GitHub的简单使用 第一步 创建GitHub账号 1. 打 ...
- 【Foreign】置换 [数论][置换]
置换 Time Limit: 10 Sec Memory Limit: 256 MB Description Input Output Sample Input 4 2 1 4 3 Sample O ...
- codechef T6 Pishty and tree dfs序+线段树
PSHTTR: Pishty 和城堡题目描述 Pishty 是生活在胡斯特市的一个小男孩.胡斯特是胡克兰境内的一个古城,以其中世纪风格 的古堡和非常聪明的熊闻名全国. 胡斯特的镇城之宝是就是这么一座古 ...
- celey异步任务
参考:http://yshblog.com/blog/163 """ 需安装软件: pip install celery sudo apt-get install red ...
- RabbitMQ消息队列(四): 消息路由
1. 路由: 前面的示例中,我们或得到的消息为广播消息,但是无法更精确的获取消息的子集,比如:日志消息,worker1只需要error级别的日志, 而worker2需要info,warning,err ...
- Perl语言入门--3--文件读取与写入
现有文件test.txt,内容为:"123\n456" 1,打开文本test.txt #!/usr/bin/perl open d,"test.txt"; d ...
- 3个js函数 变成数组本身的3个方法
<!DOCTYPE html> 3个js函数 变成数组本身的3个方法 /** * 稀疏数组 变成不稀疏数组 * @params array arr 稀疏数组 * @return arry ...
- Spring容器整合WebSocket
原链接:http://blog.csdn.net/canot/article/details/52575054 WebSocker是一个保持web客户端与服务器长链接的技术.这样在两者通信过程中如果服 ...
- Java常见知识点(一)
1.+不仅可作为加法运算符使用,还可作为字符串连接运算符使用. 2.a = b = c = 7;//虽然java支持这种一次为多个变量赋值的写法,但这种写法导致程序的可读性降低,因此不推荐这样写. ...