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> ...
随机推荐
- 20145202马超 2016-2017-2 《Java程序设计》第5周学习总结
20145202马超 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 异常:程序在运行的时候出现不正正常的情况 由来:问题也是可以通过java对不正常情况进行 ...
- 【leetcode 简单】 第八十四题 两个数组的交集
给定两个数组,编写一个函数来计算它们的交集. 示例 1: 输入: nums1 = [1,2,2,1], nums2 = [2,2] 输出: [2] 示例 2: 输入: nums1 = [4,9,5], ...
- 【leetcode 简单】 第七十一题 二叉树的所有路径
给定一个二叉树,返回所有从根节点到叶子节点的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 输入: 1 / \ 2 3 \ 5 输出: ["1->2->5", ...
- 如何在python的字符串中输入纯粹的{}
python的format函数通过{}来格式化字符串 >>> a='{0}'.format(123) >>> a ' 如果需要在文本中包含{}字符,这样使用就会报错 ...
- 关于UDP数据报引发“异步错误”的疑问
在UNP卷一第三版的第8章8.9小节中说到:如果udp服务器没有启动,udp客户端在使用sendto发送一行文本后,将会等待一个永远也不会出现的应答从而阻塞在recvfrom调用上. 由于服务器段不存 ...
- linux shell语言编程规范安全篇之通用原则【转】
shell语言编程规范安全篇是针对bash语言编程中的数据校验.加密与解密.脚本执行.目录&文件操作等方面,描述可能导致安全漏洞或风险的常见编码错误.该规范基于业界最佳实践,并总结了公司内部的 ...
- leetcode刷刷刷
1.链表节点的插入排序(写了个插入排序,但是报段错误,自己编译器里能运行) #include <iostream> #include <stdlib.h> #include & ...
- 2->集群架构主机优化流程
集群架构优化流程: 有道笔记分享链接
- Android基于XMPP Smack Openfire下学习开发IM(一)实现用户注册、登录、修改密码和注销等
http://blog.csdn.net/h7870181/article/details/8653865 以前学习过用Scoket 建立聊天,简单的建立聊天是没问题的,但如果要实现多人复杂的聊天,后 ...
- MongoDB安全：创建角色（User-Defined Roles）
MongoDB已经定义了一些内建角色,同时还提供了用户自定义角色的功能,以满足用户千差万别的需求. 官文User-Defined Roles中对其有简略介绍,但要熟悉怎么创建角色,还需要了解下面的这些 ...