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> ...
随机推荐
- jetty 热部署
1,在pom.xml文件中配置jetty插件的参数:scanIntervalSeconds <plugin> <groupId>org.mortbay.jetty</gr ...
- R4—R版本升级及swirl新产品出炉
干货一: 经常有很多朋友会遇到这样一个问题:安装R版本使用了很久以后,在使用新packages时,提示这些包是基于更高版本的R构建的,因此,无法使用这些packages,一般的童鞋遇到这类问题可能非常 ...
- .NET 下第一次接触Redis数据库
关于Redis 1.简介 Redis是著名的NOSQL(Not Only SQL)数据库,是键值对结构.(我只用过键值对结构的) 他为存储键值对做了优化,在大型网站中应用广泛.Redis提供了数据的自 ...
- HDFS的java接口——简化HDFS文件系统操作
今天闲来无事,于是把HDFS的基本操作用java写出简化程序出来给大家一些小小帮助! package com.quanttech; import org.apache.hadoop.conf.Conf ...
- [NOIP提高&洛谷P1024]一元三次方程求解 题解（二分答案）
[NOIP提高&洛谷P1024]一元三次方程求解 Description 有形如:ax3+bx2+cx+d=0 这样的一个一元三次方程.给出该方程中各项的系数(a,b,c,d 均为实数),并约 ...
- Oracle GoldenGate常用参数
OGG(Oracle GoldenGate)参数介绍 所有的GoldenGate进程均有参数文件 Manager Extract Replicat Utilities 所有参数均有缺省配置 实际应用只 ...
- 配置ODBC DSN数据源，导出数据库数据到Excel过程记录
一.前言 工作中我们可能遇到这样的需要:查询数据库中的信息,并将结果导出到Excel文件.这本来没什么,但数据量比较大时,用PLSQL.toad导出Excel会出现内存不足等情况,使用odbc+Mic ...
- 20165227 学习基础和C语言基础调查
学习基础和C语言基础调查 技能学习经验和感悟 你有什么技能比大多人(超过90%以上)更好? 如果非要说出来一个的话,那就是篮球了.从热爱篮球,到热爱打篮球,经历挫折阻碍,不断反思学习,一步一步地向前迈 ...
- xmlHttpRequest 跨域和上传或下载进度条
跨域 XMLHttpRequest 请求 普通网页能够使用XMLHttpRequest对象发送或者接受服务器数据, 但是它们受限于同源策略. 扩展可以不受该限制. 任何扩展只要它先获取了跨域请求许可, ...
- mipi 调试经验【转】
转自:http://blog.csdn.net/g_salamander/article/details/9163455 版权声明:本文为博主原创文章,未经博主允许不得转载. 以下是最近几个月在调试 ...