3 《锋利的jQuery》jQuery中的DOM操作
DOM操作分
(1)DOM Core(核心):document.geElementsByTagName("form");/ element.getAttribute("src");
(2)HTML-DOM:document.forms; / element.src;
(3)CSS-DOM:element.style.color="red";
查找节点:
查找$(ul li:eq(1)).text()文本值;
获取$("p").attr("title")的属性值;
创建节点:
var $li_1=$("<li></li>");
var $li_2=$("<li>香蕉</li>");
var $li_3=$("<li title='香蕉'>香蕉</li>"); //注意:title用的单引号
插入节点:
$(“p”).append(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).appendTo(“p”); //内部的后面
$(“p”).prepend(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).prependTo(“p”) //内部的前面
$(“p”).after(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).insertAfter(“p”); //外部的后面
$(“p”).before(“<b>你好</b>”); 等价于 $(“<b>你好</b>”).insertBefore(“p”); //外部的前面
一种是创建新的HTML元素,然后插入。另一只也可以获取html元素,然后插入,即理解为移动节点。
比如:$("ul").prepend($("ul li:eq(2)"));
删除节点:
(1)remove();该节点本身以及后代被删除,但该方法返回值是一个指向已被删除的节点的引用。因此还可以继续使用。
var $li=$("ul li:eq(1)").remove(); $li.appendTo("ul");
(2)empty();清空节点,只是后代节点。
复制节点:
$("ul li").click(function(){ $(this).clone().appendTo("ul");})
被复制的li不具备点击复制行为,如果需要新元素也具有复制功能则:$(this).clone(true).appendTo("body");
替换节点:
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");等价于 $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
包裹节点:
(1)wrap(); //$("strong").wrap("<b></b>"); 每一个strong标签都被b标签包裹
(2)wrapAll(); // $("strong").wrapAll("<b></b>"); 所有strong标签被一个b标签包裹。如果中间并列其他标签元素的,也都移至一并包裹起来。
(3)wrapInner(); //$("strong").wrapInner("<b></b>"); 顺序是:strong标签>b标签>原strong标签里的子元素
属性操作:
var p_txt=$("p").attr("title");
$("p").attr("title","you title");
$("p").attr({"title":"you title","name":"test"});
删除属性:
$("p").removeAttr("title");
样式操作:
var p_class=$("p").attr("class");
$("p").attr("class","high"); //是替换样式而不是追加样式。
$("strong").addClass("high"); //追加样式。
$("strong").removeClass("high");
$("strong").removeClass("high").removeClass("another"); 等价于 $("strong").removeClass("high another");
$("strong").removeClass(); //将class的值全部删掉
$("strong").toggleClass("another");//切换样式
$("strong").hasClass("another"); //返回布尔值 也可以用 $("strong").is(".another");
html();
text(); //注意:相比html,text是纯文本值
val(); //值 value
val()方法还有另一个用处,就是它能使select(下拉列表框)、checkbox(多选框)和radio(单选框)相应的选项被选中。
下拉单选:$("#single").val("选择2号"); //$("#single option:eq(1)").attr("selected",true);
下拉多选:$("#multiple").val(["选择2号","选择3号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio2"]);//$("[value=radio2]:radio").attr("checked",true);
注意使用val跟使用attr的区别:?
val方法是从最后一个选项往前读取,如果选项的value或者text中任意一项符合就会被选中。如:
<option value="选择2号">选择1号</option>
<option value="选择1号">选择2号</option>
无论是val("选择1号")还是val("选择2号");都会是后面一个option
3 《锋利的jQuery》jQuery中的DOM操作的更多相关文章
- jQuery中的DOM操作——《锋利的JQuery》
jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...
- 锋利的jQuery ——jQuery中的DOM操作(三)
一.DOM的操作分类 1>DOM Core 2>HTML-DOM 3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...
- 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】
一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...
- dom core,html dom,css dom,jquery 中的dom操作
前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...
- jQuery中的DOM操作<思维导图>
DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...
- Jquery:jquery中的DOM操作<一>
之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...
- jQuery中的DOM操作总结
jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...
- jQuery中的DOM操作《思维导图》
首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...
- 第三章(jQuery中的DOM操作)
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- JavaWeb学习笔记——jquery中的dom操作
jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...
随机推荐
- git设置远程仓库地址
方法有三种: 1.修改命令:git remote set-url origin [url] 2.先删除后添加: git remote rm origin git remote add origin [ ...
- 关于Web应用和容器的指纹收集以及自动化软件的制作
一次对Web应用的渗透,九成都是从信息收集开始,所以信息收集就显得尤为重要.关键信息的收集可以使你在后期渗透的时候更加的得心应手,把渗透比喻成走黑暗迷宫的话,那信息收集可以帮你点亮迷宫的大部分地图. ...
- (转)ubuntu/var/log/下各个日志文件
本文简单介绍ubuntu/var/log/下各个日志文件,方便出现错误的时候查询相应的log /var/log/alternatives.log-更新替代信息都记录在这个文件中 /var/log/ ...
- 【共享单车】—— React后台管理系统开发手记:Router 4.0路由实战演练
前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...
- 【重点突破】——Canvas技术绘制音乐播放器界面
一.引言 在用Canvas练习制作了验证码之后,还有一个用Canvas技术很综合的练习——制作音乐播放器.在做这个练习的过程中,还有一个重要的观察点,那就是理解Canvas的一大问题. 二.要求 点 ...
- 请求php文件的整个流程
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/ ...
- hdu 4372 第一类斯特林数
#include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...
- .net发布网站步骤
本文章分为三个部分: web网站发布.IIS6 安装方法.ASP.NET v4.0 安装方法 一.web网站发布 1.打开 Visual Studio 2013 编译环境 2.在其解决方案上右击弹出重 ...
- JSP简单练习-用Servlet获取表单数据
// javaBean代码 package servlet; import java.io.*; import javax.servlet.*; import javax.servlet.http.* ...
- slam cartographer 学习
https://github.com/slam4code 感谢大牛的分享