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操作的更多相关文章

  1. jQuery中的DOM操作——《锋利的JQuery》

    jQuery封装了大量DOM操作的API,极大提高了操作DOM节点的效率. 1.查找节点 通过我们上一节介绍了JQuery选择器,可以非常轻松地查找节点元素.不过,这时得到的是jQuery对象,只能使 ...

  2. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  3. 【Java EE 学习 32 下】【JQuery】【JQuey中的DOM操作】

    一.JQuery中的DOM操作. 什么是DOM:DOM是一中和浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准组件.DOM简称文档对象模型,是Document Oject Mode ...

  4. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

  5. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  6. Jquery:jquery中的DOM操作<一>

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

  7. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  8. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  9. 第三章(jQuery中的DOM操作)

    3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...

  10. JavaWeb学习笔记——jquery中的dom操作

     jquery中的dom操作 废话不说:直接上例子: 1.添加节点-html页面 Append:向每个匹配的元素内部追加内容. <body> <ul id="city& ...

随机推荐

  1. http各类攻击及tcpcopy工具

    1.专业的还得ixia.Spirent TestCenter等软硬件一体的 2.一般的使用软件的,安装在linux上使用 参考: 1.http://blog.csdn.net/wuzhimang/ar ...

  2. 解决Linux下AES解密失败

    前段时间,用了个AES加密解密的方法,详见上篇博客AES加密解密. 加解密方法在window上測试的时候没有出现不论什么问题.将加密过程放在安卓上.解密公布到Linuxserver的时候,安卓将加密的 ...

  3. Cocos2d-x学习笔记(四) 布景层的加入移除

    布景层类也就是CCLayer类,每一个游戏场景中都能够有非常多层,每一层负责各自的任务.显示地图.显示人物等.同一时候层还是一个容器,能够放入文本.图片和菜单.构成游戏中一个个UI.这次将学习在场景中 ...

  4. linux 系统时间硬件时间同步

    1.设置系统时间:date-s 21/05/2016 date -s 08:21:21 2.系统时间同步到硬件时间: clock --systohc

  5. Win 8.1 安装后要做的优化

    ①无光驱恢复电脑或重置系统(无需插入介质,本来老提示插入介质) 1.准备工作:win8iso,解压到任意非系统盘,解压后的路径假如是:H:\OS\win8   2.接着以管理员身份启动命令提示符,输入 ...

  6. java中各种时间格式的转化

    http://www.chinaitpower.com/A/2005-01-14/104881.html 使用java.util.Calendar返回间隔天数         static int g ...

  7. Javascript模式(二) 发布者/订阅者模式

    var publisher = { // 订阅者数组 subscribers : { "any" : [] }, // 增加订阅者 on : function(type, fn, ...

  8. DML过程中记录错误日志

    当你插入几百万数据时,由于有几条脏数据而导致插入失败,是不是很恼火.10g R2之后有个新功能.将插入过程中失败的记录插入到还有一张表中. SQL> drop table test purge; ...

  9. 【Android】getActionBar()为null的解决方法总结

    前言 在使用 ActionBar的时候,有时候会爆出空指针异常,这是由于应用没有获取到 ActionBar 导致的,而导致应用没有获取到 ActionBar 的原因比較多.所以我们以下就来总结一下 A ...

  10. DisplayPort的时钟隐藏和时钟恢复

    转:DisplayPort的时钟隐藏和时钟恢复 无时钟线的视频数据传输是DP协议的一大特点,将时钟信号隐藏在数据中是传输协议的设计趋势.时钟恢复技术也是DP芯片设计的关键技术.在这说一下在发送端时钟是 ...