JQuery中DOM对象
JQuery中的DOM对象操作
1.查找节点
var li = (“ul li:eq(1)”); //查找元素
$li.attr(“title”); //查找元素的属性值
2,创建和插入节点:
var ul = ("#ulMain");
var li_1 = ("< li id=‘liApple’>苹果< /li>"); //创建一个li元素。
ul.append(li_1); //在ulMain内部末尾插入元素
li_1.appendTo(ul); //将li追加到ul内部的末尾。
ul.prepend(li_1); //在ul内部将li插入到最前面。
li_1.prependTo(ul); //将li插入到ul内部的最前面。
$ ul.after(“hello,span”); // 在ul后面插入一个span元素
(“重点”).insertAfter(ul); //将b插入到ul后面
$ul.before(“重点”); //在ul前面插入b
(“重点”).insertBefore(ul);
3,删除节点:
var li = (“ul li”).remove(“li[title=hello]”); //移除ul内title值为hello的li并返回。
var li = (“ul li”).detach(“li[title=hello]”); //和remove相同,不同之处:所有绑定的事件,附加的数据都会保留下来,将来可以再使用这些元素。
$li.empty(); //清空元素里的所有内容。
4,复制元素:
$(“ul li”).click(function(){
$(this).clone(true).appendTo("ul"); //点击li时将li复制后追加到ul中,同时复制li所绑定的事件。
});
5,替换元素
替换后元素绑定的事件会消失,需要重新绑定。
$(“p”).replaceWith("< strong> 你最不喜欢的水果是?< /strong>"); //用strong替换p
$("< strong>你最不喜欢的水果是?< /strong>").replaceAll(“p”); // 用strong替换掉p
6,包裹节点:
$("< strong>").wrap("< b>< /b>"); //用b标签把strong元素包裹起来。
$("< strong>").wrapAll("< b>< /b>"); //用b标签把所有匹配的strong元素包裹起来。
$("< strong>").wrapInner("< b>< /b>"); // 将每一个匹配的strong内的子内容用< b>包裹起来。
7,属性操作:
$ul.attr({“title”:“yourTitle”, “name”:“theName”}); //同时为两个属性赋值。
$ul.removeAttr(“title”); //删除title属性。
8,样式操作:
$ul.addClass(“className”); //添加class
$ul.removeClass(“className className2”); //同时移除两个class。
$ul.removeClass(); //移除所有class
$ul.toogleClass(“another”); //在ul上切换another这个class,ul原有的class不受影响。
$ul.hasClass(“another”); // ul是否包含another这个class
9,设置和获取html,文本和值:
$(“div”).html("< b>hello< /b>"); //设置div的html代码,html()不能作用于xml文档。
$(“div”).text(“the plain text”); //设置div的文本内容,同时支持xml文档。
$(“select01”).val([“text1”, “text2”]); //使下拉框的第二项,第三项被选中。
10,遍历节点:
$ul.children(); //获取ul的子元素,而非后代元素。
$ul.next(); //获取紧邻ul后的一个同辈元素。
$ul.prev();
$ul.siblings(); // 获取ul的所有同辈元素。
$ul.parent();//返回父级元素,返回一个节点。
$ul.parents(); //返回所有祖先元素
$ul.closest(); //如果本身匹配就返回本身,否则返回最先匹配的祖先元素。
其它方法:find(), filter(), nextAll(), prevAll()。
11,CSS-DOM操作:
ul.css({fontSize:“30px”, backgroundColor:"#aaafff"}); 或
$ul.height(“10em”); //设置ul的高度为10em
$ul.height(); //获取ul的高度,是元素在页面中的实际高度,与样式的设置无关,且不带单位。
$ul.css(“height”); //获取ul的高度,与样式的设置值有关,可能得到"auto" ,“10px” 之类的字符串。
$ul.width(“10px”);
var offsetObj= $ul.offset(); var vLeft= offsetObj.left; var vTop = offsetObj.top; //获取元素在当前视窗的相对偏移,返回的对象包含两个属性:top, left.
var posObj = $ul.position(); var vLeft = posObj.left; var vTop = posObj.top; //获取元素相对于最近一个position样式设置为relative或absolute的祖先节点的相对偏移。
$ul.scrollTop(300); //ul的滚动条滚动到距顶端300的位置。
$ul.scrollLeft(300); //ul的滚动条滚动到距左侧300的位置。
- 使用 Asp.net Future May 2007 开发Silverlight应用
- Rafy 领域实体框架设计 - 重构 ORM 中的 Sql 生成
- RePractise前端篇: 前端演进史
- 性能优化总结(三):聚合SQL在GIX4中的应用
- ASP.NET AJAX 控件开发基础
- 听我说说我的博客: 月访问量过万的个人IT博客的技术史
- TransactionScope和Enterprise Libray 3.0 Data Access Application Block
- 《Python Web开发 - 测试驱动方法》阅后感
- 微信小程序分享——会话服务器和业务服务器合并
- 微信官方开源UI库-WeUI
- ViewFlipper实现多页面切换
- Ubuntu & Fedora Mono 2.8 安装脚本
- android下拉加载更多
- 在 Windows 上安装Rabbit MQ 指南
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 分布式系统的一致性协议之 2PC 和 3PC
- Docker快速搭建WordPress博客网站
- Elasticsearch入门,这一篇就够了
- 玩转 lua in Redis
- 用docker快速搭建wordpress博客
- 生产环境优雅的重启基于Nginx、Tornado的Web服务进程
- nginx记录post body/payload数据 日志用打印出结果
- nginx的location、rewrite玩法详解
- Redis Lua脚本调试
- 安装elasticsearch 5.x, 6.x 常见问题(坑)的解决
- 轻松搞懂elasticsearch概念
- 深入Golang调度器之GMP模型
- 深入Golang之sync.Pool详解
- 一次对电视盒子的漏洞分析
- MQ选型之RabbitMQ