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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
js获取php变量的实现代码
Aug 10 Javascript
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
jquery操作select方法汇总
Feb 05 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
Aug 21 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
原生JS实现图片左右轮播
Dec 30 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
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
PHP 时间转换Unix时间戳代码
2010/01/22 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
php使用GD实现颜色渐变实例
2015/06/02 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
创业计划书——互联网商机
2014/01/12 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
工资收入证明
2014/10/07 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
农村老人去世追悼词
2015/06/23 职场文书
Python中requests做接口测试的方法
2021/05/30 Python
国产动画《万圣街》日语配音版制作决定!
2022/03/20 国漫