全栈工程师开发手册 (作者:栾鹏)

快捷链接:

jquery系列教程1-选择器全解

jquery系列教程2-style样式操作全解

jquery系列教程3-DOM操作全解

jquery系列教程4-事件操作全解

jquery系列教程5-动画操作全解

jquery系列教程6-ajax的应用全解

jquery系列教程7-自定义jquery插件全解

jquery系列教程8-jquery插件大全

jquery中的DOM操作详解:

下图是DOM树示意图,DOM是文档对象模型,它能够将网页中的文档对象组织起来,让页面结构更清晰。



创建添加元素

$cr = $("<label></label>");                               //使用h5代码创建元素
$("#div1").append($cr);                                   //添加创建好的元素

//创建文本节点
$cr = $("<label>这里就是文本</label>");                     //在元素中加上文本就是创建文本节点,更准确的说法应该是创建元素节点和文本节点
$("#div1").append($cr);                                   //创建好的元素

//创建属性节点
$cr = $("<label title='mytitle'>这里就是文本</label>");     //创建包含title属性的label元素
$("#div1").append($cr);                                   //append表示在父元素内部结尾追加元素
$("#div1").prepend($cr);                                   //prepend表示在父元素内部首部添加元素
$cr.appendTo($("#div1"));                                  //appendTo表示子元素追加到父元素内部结尾
$cr.prependTo($("#div1"));                                 //prependTo表示子元素添加到父元素内部首部
$("#div1").after($cr);                                     //after表示在元素后面添加同胞元素
$cr.insertAfter($("#div1"));                               //insertAfter表示添加到指定元素的后面
$("#div1").before($cr);                                    //before表示在元素前面添加同胞元素
$cr.insertBefore($("#div1"));                               //insertBefore表示添加到指定元素的前面

删除元素

$(".divclass").remove("div[title='mytitle']");     //选择性删除元素
$("#div1").remove();                               //删除元素,解除绑定事件与附加数据
$("#div1").detach();                               //删除元素,不解除绑定事件与附加数据
$("#div1").empty();                                //设置innerHtml为空,删除所有子元素

复制元素

$("#div1").clone(true);                            //复制元素,true表示同时复制绑定事件

替换元素

$("#div1 label").replaceWith("<label>替换的新元素</label>"); //将label整个元素替换成新的h5代码
$("<label>替换的新元素</label>").replaceAll("#div1 label");  //新建元素替换已有元素,参数为选择器表达式

包裹元素

$("#div1 label").wrap("<div></div>");      //用多个div标签分别包裹div1下每个label元素
$("#div1 label").wrapAll("<div></div>");   //用一个div标签包裹div1下所有label元素
$("#div1 label").wrapInner("<div></div>"); //用一个div标签包裹div1下label元素的子内容

遍历元素

var $body_child = $("body").children();                //children获取一级子元素,不获取其他后代元素
$body_child=$("body").find("div");                      //find获取所有后代元素,括号内进行筛选
var $body = $body_child[0].parent();                    //parent获取直接父元素
var $div_parents = $body_child[0].parents('body');      //parents获取所有祖先元素列表,一直到html根节点,可以通过参数在父元素进一步筛选
$div_parents = $body_child[0].parentsUntil("body");     //两个元素之间的所有祖先元素
var $div1 = $body_child[0].next();                      //next后一个同辈元素,nextAll后面的所有同胞元素,nextUntil介于两个元素之间的所有同胞元素
var $div2 = $body_child[2].prev();                      //prev前一个同辈元素,prevAll之前的所有同胞元素,prevUntil()介于两个元素之间的所有同胞元素
var $alldiv = $body_child[2].siblings();                //所有兄弟元素
var $div3 = $("#div3 label").closest("div");            //查找距离目标元素最近的满足指定选择器参数的元素。由目标元素依次向父元素查询,不查询同胞元素
var $alldiv = $("div").filter(".divclass");             //filter过滤元素,满足的留下,参数为选择器
$alldiv = $("div").not(".divclass");                     //not过滤元素,不满足的留下,参数为选择器

内容显示

$cr.text();                        //DOM操作中参数为空时表示读取
$cr.text("设置的值");               //参数有值时表示设置
$cr.text(function(i,origText){     //参数为函数时表示根据该元素在列表中的下标和原有值设置新的值
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
$cr.html();                        //读取元素节点内部的h5代码字符串,等价于cr.innerHtml();
$cr.text();                        //读取元素文本内容
$cr.attr("title");                 //设置元素属性

属性操作

var title = $cr.attr("title");                     //读取属性
$cr.attr("title","mytitle");                       //设置属性
$cr.attr({"title":"mytitle","name":"myname"});     //同时设置多个属性
$cr.removeAttr("title");                           //删除属性

select操作

$("#selectId").append("<option value='"+value+"'>"+text+"</option>");//添加option
$("#select_id").prepend("<option value='0'>请选择</option>");         //为select插入一个option(第一个位置)
$("#select_id option[index='0']").remove();                          //删除select中索引值为0的option(第一个)
$("#select_id option[text='4']").remove();                           //删除select中Text='4'的option
$("#select_id option[value='3']").remove();                          //删除select中Value='3'的option
$("#selectedId option").remove();                                    //删除所有option
var checkText=$("#select_id").find("option:selected").text();        //获取select选择的text
var checkValue=$("#select_id").val();                                //获取select选择的value
var checkIndex=$("#select_id ").get(0).selectedIndex;                //获取select选择的索引值
var maxIndex=$("#select_id option:last").attr("index");              //获取select最大的索引值
$(".selector").val("pxx");                                           //设置value为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);     //设置text为pxx的项选中
$("#select_id ").get(0).selectedIndex=1;                             //设置select索引值为1的项选中

文本和值

var label_html = $("label").html();              //获取元素内的html代码,相当于innerhtml
$("label").html("<strong>代码添加的文字</strong>"); //设置元素内的html代码
var label_text = $("label").text();              //获取元素内的文本内容,相当于innertext
$("label").text("代码添加的文字");                  //设置元素内的文本内容
var input_val = $("input").val();                //获取元素内的value属性,相当于value属性
$("input").val("代码添加的文字");                   //设置元素内的value属性
$("#single").val("选择2号");                      //通过设置val值选中单选下拉框的选项,没有value也可以设置text内容
$("#multilpe").val(['选择2号','选择3号']);         //通过数组设置val值选中多选下拉框的选项,没有value也可以设置text内容
$(":checkbox").val(['myvalue1','myvalue2']);     //通过数组设置val值选中多选框的选项
$(":radio").val(['myvalue1']);                   //通过数组设置val值选中单选框的选项,对于单值也可以通过数组的形式传递
$("#single option:eq(1)").attr("selected",true); //通过选择器获取元素,再设置对象属性也可以选中
$("[value=myvalue]:radio").attr("checked",true); //通过选择器获取元素,再设置对象属性也可以选中

jquery系列教程3-DOM操作全解的更多相关文章

  1. jquery系列教程4-事件操作全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  2. jquery系列教程2-style样式操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  3. jquery系列教程6-ajax的应用全解

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  4. jquery系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件 ...

  5. js系列教程1-数组操作全解

    全栈工程师开发手册 (作者:栾鹏) 快捷链接: js系列教程1-数组操作全解 js系列教程2-对象和属性全解 js系列教程3-字符串和正则全解 js系列教程4-函数与参数全解 js系列教程5-容器和算 ...

  6. css系列教程1-选择器全解

    全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css系列教程1-选择器全解 css系列教程2-样式操作全解 css选择器全解: css选择器包括:基本选择器.属性选择器.伪类选择器.伪元 ...

  7. jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  8. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

  9. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

随机推荐

  1. 深入理解计算机系统(2.3)------布尔代数以及C语言运算符

    本篇博客我们主要讲解计算机中的布尔代数以及C语言的几个运算符. 1.布尔代数 我们知道二进制值是计算机编码.存储和操作信息的核心,随着计算机的发展,围绕数值0和1的研究已经演化出了丰富的数学知识体系. ...

  2. CSS基础知识摘要

    元素分类 块级元素 什么是块级元素?在html中<div>. <p>.<h1>.<form>.<table>.<ul> 和 &l ...

  3. 201521123012 《Java程序设计》第三周学习总结

    一.本章学习总结 1.面对对象:(1)类 <1>属性 [1]外部类 [2]内部类 <2>方法 [1]j静态 [2]非静态 (2)对象 <1>创建对象 <2&g ...

  4. 201521123003《Java程序设计》第13周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  5. 12.Linux之输入子系统分析(详解)

    版权声明:本文为博主原创文章,转载请标注出处:   在此节之前,我们学的都是简单的字符驱动,涉及的内容有字符驱动的框架.自动创建设备节点.linux中断.poll机制.异步通知.同步互斥/非阻塞.定时 ...

  6. cityEngine入门(实现数据的预处理以及cityEngine的3维显示)

    一.  实验要求 1.     提供数据: 中田村两个图幅影像数据 DEM提供包含高程数值的文本和矢量数数据 完成内容: 实现中田村两个图幅的拼接,生成一个影像数据(Image.tif) 将DEM数据 ...

  7. Java NIO vs IO

    NIO :http://tutorials.jenkov.com/java-nio/index.html IO:http://tutorials.jenkov.com/java-io/index.ht ...

  8. mariadb自带命令行客户端指令笔记

    mysql -H 主机IP -u 用户名 -p -p表示要输密码,不要直接输了,要回车后在程序里输入 显示数据库列表: show databases; 选择XX数据库: use XX; 显示数据库里的 ...

  9. 用vue开发一个app(1,基础环境配置)

    在今天之前,我没有很系统的看过,学习过vue.也是第一次尝试用vue写个小应用 现在开始研究配环境 这边参考的是https://cn.vuejs.org/v2/guide/installation.h ...

  10. 使用jquery的方法和技巧

    1.下载一个jquery.js的文件 2.引入jquery.js文件 <script type="text/javascript" src="__PUBLIC__/ ...