JavaQuery操作对象
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操作对象的更多相关文章
- for...in也反复执行语句，但它是用来操作对象的
for...in也反复执行语句,但它是用来操作对象的
- JQuery 操作对象的属性值
通过JQuery去操作前台对象(div,span...)的属性是很常见的事情,本文就简单的介绍几种操作情形. 1):通过属性值去获取对象 2):用JQuery去修改对象的属性值 3):获取并修改对象的 ...
- java设计模式--基础思想总结--父类引用操作对象
看设计模式的相关书籍也有一段时间了,一开始其实是抱着作为java三大框架的基础知识储备来学习的,不过到后来,才发现,在设计模式的一些准则装饰下,java的面向对象威力才真正地体现出来,后面的将会陆续地 ...
- 有关java的引用传递，直接操作对象本身。直接删除BE的value中某值
HashSet<String> refRegions = BE.get(regionName); HashSet<String> values = new HashSet ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- Java如何操作对象（bean）进行动态排序？
原文出自:https://blog.csdn.net/seesun2012 简介如题:Java如何操作对象(bean)进行动态排序?Java实体类(bean)动态排序? 原理:利用反射根据指定的属性值 ...
- OGNL（Object-Graph Navigation Language），可以方便地操作对象属性的开源表达式语言，使页面更简洁；
OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁: 支持运算符(如+-*/),比普通的标志具有更高的自由度和更强的功能 ...
- js 操作对象的引用和操作实际对象的区分
JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...
- 018——VUE中v-for操作对象与数值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- JS设计模式——8.桥接模式
桥接模式的用途 在实现API的时候,桥接模式非常有用. 在设计一个JavaScript API的时候,可以用这个模式来弱化它与使用它的类和对象之间的耦合. 示例:事件监听器 桥接模式最常见和实际的应用 ...
- weblogica 启动managed server 不用每次输入密码
[weblogic@node2 AdminServer]$ pwd /home/weblogic/Oracle/Middleware/Oracle_Home/user_projects/domains ...
- MySQL 执行SQL脚本 报ERROR 1231 (42000)的解决办法【转】
今天在source mysqldump 备份文件时,发现导入的过程中报如下的错误: ERROR 1231 (42000): Variable 'time_zone' can't be set to t ...
- C 语言问题
1. 如何生成 "半全局变量", 就是那种只能被部分源文件中的部分函数访问变量? 答: 这在C语言中办不到. 如果不能或不方便在一个源文件中放下所有的函数, 那么有三种的解决方案 ...
- 使用UDP和TCP协议的各种应用和应用层协议
IGMP和ICMP是传输层协议
- redhat6.5文件共享
以下操作均需要root用户 a端: 固定nfs端口 #vi /etc/sysconfig/nfs 将里面的RQUOTAD_PORT.LOCKD_TCPPORT.LOCKD_UDPPORT.MOUNTD ...
- 洛谷P1455搭配购买
传送门啦 这是强连通分量与背包的例题 需要注意的就是价值和价格两个数组不要打反了.. 另外 这是双向图!!! #include <iostream> #include <cstdio ...
- group by 和 distinct 去重比较
distinct方式就是两两对比,需要遍历整个表.group by分组类似先建立索引再查索引,所以两者对比,小表destinct快,不用建索引.大表group by快.一般来说小表就算建索引,也不会慢 ...
- [android] The_connection_to_adb_is_down__and_a_severe_error_has_occured解决方案
初学安卓,这是我碰到的第一个问题,从网上找了些解决方法,同时也把问题解决了. 方案一 1.先把eclipse关闭. 2.在管理器转到你的android SDK 的platform-tools下, 如图 ...
- Java @SuppressWarnings
@SuppressWarnings() 注解以@开头可以接受参数 @SuppressWarnings("unchecked") 不受检查的警告信息应该被抑制 //: holding ...