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> ...
随机推荐
- App劫持病毒剖析：你的应用是如何被替换的(病毒防范方法)
App劫持病毒剖析:你的应用是如何被替换的(病毒防范方法) 一.App劫持病毒介绍 App劫持是指执行流程被重定向,又可分为Activity劫持.安装劫持.流量劫持.函数执行劫持等.本文将对近期利用A ...
- os._exit()， sys.exit()， exit()
1. sys.exit(n) 退出程序引发SystemExit异常, 可以捕获异常执行些清理工作. n默认值为0, 表示正常退出. 其他都是非正常退出. 还可以sys.exit("sorry ...
- 【驱动】USB驱动·入门【转】
转自:http://www.cnblogs.com/lcw/p/3159371.html Preface USB是目前最流行的系统总线之一.随着计算机周围硬件的不断扩展,各种设备使用不同的总线接口,导 ...
- mac 升级10.12 php debug 环境 跑不起的解决 解决方案
1: mac 升级后发现 php从原来的5.5 升级为 5.6 了... 所以以前 php.ini 里面的配置全部都没有了. mac 给我们做了备份2: 没办法只能升级php对应的插件到5. ...
- go语言版本变化
The Go Project Go is an open source project developed by a team at Google and many contributors ...
- 29 A Quick Guide to Go's Assembler 快速指南汇编程序：使用go语言的汇编器简介
A Quick Guide to Go's Assembler 快速指南汇编程序:使用go语言的汇编器简介 A Quick Guide to Go's Assembler Constants Symb ...
- Flask：abort()函数
Windows 10家庭中文版,Python 3.6.4,Flask 1.0.2 abort()函数用于提前退出(Google翻译abort)一个请求,并用指定的错误码返回. 函数原型如下: flas ...
- matlab随笔(二）
circshift 两种形式 :第一种Y = circshift(A,K)就不用说了,将A中的元素向右移动K个位置. 需要注意的是第二种形式:Y = circshift(A,K,dim),这种形式不好 ...
- C/C++之static
C++的static有两种用法:面向过程程序设计中的static和面向对象程序设计中的static.前者应用于普通变量和函数,不涉及类:后者主要说明static在类中的作用. 1.面向过程设计中的st ...
- SQlserver创建函数实现只取某个字段的数字部分
create FUNCTION [dbo].[GET_NUMBER](@S VARCHAR(100)) RETURNS VARCHAR(100) AS BEGIN WHILE PATINDEX('%[ ...