jQuery学习笔记之jQuery的DOM操作


Posted in Javascript onDecember 22, 2010

一.节点的操作

1.查找节点:

var $var_1=$("htmltype");   //这句话就是获取所有htmltype节点

如:var $ul_1=$("ul");

 

2.创建并追加节点:

var $var_1=$("<htmltype>");//这句话是创建一个节点

$("htmltype2").append($var_1) ; //这句话是把节点插入所有htmltype2节点中

例子:var $li_1=$("<li  title="title1">香蕉</li>");

         $("ul").append($li_1);

 

其中插入方法有以下几种:

  • append() 把B追加到A内部(所有的A元素,以下类似)
  • appendTo() 把A追加到B内部
  • prepend() 把B追加到A内部的内容前
  • prependTo() 把A追加到B的内容前
  • after() 在A后追加B
  • insertAfter() 在A前追加B
  • before() 在A前追加B
  • insertBefore()在A后追加B

例子:$("ul").append("<li>你好</li>");//在ul内部追加li

         $("<li>你好</li>").appendTo("ul");//在ul内部追加li

 

3.删除节点

  • remove() 删除该元素
  • empty() 清空节点,包括后代节点

例子:$("ul  li:eq[1]").remove(); //获取ul中的第二个li并删除

        $("ul  li").remove(“li[title="菠萝"]”);//删除ul中li元素属性title="菠萝"的元素

 

4.复制节点

  • clone();//复制本节点

例子:$("ul  li:eq[1]").clone().appenTo("ul");//复制并追加到ul中,只复制是不会显示出来的

 

5.替换节点

  • replaceWith();//将B替换所有A
  • replaceAll();//将A替换所有B

6.包裹节点

  • warpAll();//用B包裹A
  • warpInner();//用B包裹A的内容

 

二.属性操作

1.获取和设置属性

var $var_1=$("p");//这句话是获取节点P

 var $p_1=$var_1.attr("title");//获取节点P的title属性

var $p_2=$var_1.attr("title","你好");//设置节点P的title属性为"你好"

  

2.删除属性

$("p").removeAttr("title");//删除节点P的Title属性

 

三.样式操作

1.获取和设置样式

var $var_class=$("p").attr("class");//获取节点P的class属性

$("p").attr("class","class1");设置节点P的class属性为样式表类class1

 

2.追加样式

  • addClass() 添加样式到A

例子:$("p").addClass("another");添加样式表类another类到P

 

3.移除样式

  • removeClass() 移除类

4.切换样式

  • toggleClass() 切换clss属性类为新的类

5.判断某个样式是否存在

  • hasClass()

四.内容的操作

  • html() 该方法获取html元素的内容,如:var var1=$("p").html();//获取P元素内的内容
  • text() 获取或设置某个html元素的内容
  • val() 获取元素的Value值
  • children() 获取html元素的所有子节点
  • next()  获取html元素后紧邻的同辈节点
  • prev() 获取html元素前紧邻的同辈节点
  • siblings() 获取html元素前后紧邻的同辈节点 

五.CSS-DOM技术

  • css("属性","值") 设置元素css某个属性的值,如:$("p").css("color","red");//设置P的css属性{color:red;}
Javascript 相关文章推荐
JQuery通过Ajax提交表单并返回结果
Jul 31 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
js事件绑定快捷键以ctrl+k为例
Sep 30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
Vue DevTools调试工具的使用
Dec 05 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
Feb 20 jQuery
layui的select联动实现代码
Sep 28 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 #Javascript
You might like
简单的页面缓冲技术
2006/10/09 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
js中判断控件是否存在
2010/08/25 Javascript
javascript管中窥豹 形参与实参浅析
2011/12/17 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
2013/07/22 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
Vue axios设置访问基础路径方法
2018/09/19 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[38:39]KG vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python实现门限回归方式
2020/02/29 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
django 模型字段设置默认值代码
2020/07/15 Python
html5 拖拽及用 js 实现拖拽功能的示例代码
2020/10/23 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
纽约通行卡:The New York Pass(免费游览纽约90多个景点)
2017/07/29 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
药物学专业学生的自我评价
2013/10/27 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
2013年最新自荐信范文
2014/06/23 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
先进工作者事迹材料
2014/12/23 职场文书
辩论赛主持人开场白
2015/05/29 职场文书