jQuery操作Dom

DOM(Document Object Model)

jQuery对DOM的操作主要包括:

     1、对元素属性(attr)的操作

     2、获取和设置元素

     3、对元素样式(CSS)的操作

     4、对页面元素的操作

1、对元素属性的操作

     语法:      

        ①获取元素属性:attr(name)                                             eg:$(selector).attr("title");

          ②设置元素属性:attr('name','value')                                 eg:$(selector).attr('src','../../**.jpg');

                attr({name:'value',name:'value'})            eg:$(selector).attr({src:"../**.jpg",title:"This is title"});

                attr(name,function(index))                      eg:$(selector).attr('src',function(){   //用function的返回值作为value值

                                                                                                                  return "Images/img"+Math.floor(Math.random()*2+1)+".jpg")  

                                         });

        ③删除元素属性:removeAttr(name);                                 eg:$(selector).removeAttr('src');

                                      

2、获取和设置元素

     语法:      

        ①获取元素的HTML内容(会包括HTML标签):   html()

        ②设置元素的HTML内容(会解析HTML标签):    html(val)

        ③获取元素的文本内容:  text()

        ④设置元素的文本内容:  text(val)

        ⑤获取元素的值:          val()

        ⑥设置元素的值:          val(val)

3、对元素样式的操作

     语法:        

                      ①直接设置元素样式:   css('name','value')                                     eg:$(selector).css('background-color','#eee');

                   css({'name':'value',...,'name':'value'})         eg:$(selector).css({'backroundColor':'#eee','fontStyle':'italic'});       

                                           //遇到复合属性需要按照驼峰式命名法去书写css属性

                      ②添加元素样式:       addClass('classname ... classname' )

                      ③删除元素样式:       removeClass('classname ... classname')   //不传值则删除全部样式 $(selector).removeClass();

                      ④切换元素样式:       toggleClass(class)   //当元素中含有名称为class的CSS类别时,删除该类别,否则增加一个该名称的CSS类别。    

4、对页面元素的操作

     语法:        

                       ①创建节点元素:  $('html片段')        //函数$('html片段')只完成DOM元素创建,加入到页面还需要通过元素节点的插入或追加操作;同时,在创建DOM元素                              时,要注意字符标记是否完全符合,否则达不到预期效果。

                       ②内部插入节点:  

内部插入节点的方法
语法格式 参数说明 功能描述
append(content) content表示追加到目标中的内容 向所选择的元素内部插入内容
append(function(index,html)) 通过function函数返回追加到目标中的内容 向所选择的元素内部插入function函数所返回的内容
appendTo(content) content表示追加的内容 把所选择的元素追加到另一个指定的元素集合中
prepend(content) content表示插入目标元素内部前面的内容 向每个所选择的的元素内部前置内容
prepend(function(index,html)) 通过function函数返回插入目标元素内部前面的内容 向所选择的元素内部前置function函数所返回的内容
prependTo(content) content表示用于选择元素的jQuery表达式 将所选择的元素前置到另一个指定的元素集合中

                       ③外部插入节点:

 
语法格式 参数说明 功能描述
after(content) content表示插入目标元素外部后面的内容 向所选择的元素外部后面插入内容
after(function) 通过function函数返回插入目标外部后面的内容 向所选择的的元素外部后面插入function函数所返回的内容
before(content) content表示插入目标元素外部前面的内容 向所选择的元素外部前面
before(function) 通过function函数返回插入目标外部前面的内容 向所选择的元素外部前面插入function函数所返回的内容
insertAfter(content) content表示插入目标元素外部后面的内容(被动 将所选择的元素插入另一个指定元素外部后面
insertBefore(content) content表示插入目标元素外部前面的内容(被动 将所选择的元素插入另一个指定的元素外部前面

                       ④复制元素节点:    clone()//复制匹配的DOM元素 并且选中复制成功的元素,仅复制元素本身,不复制行为,如需复制行为,则: clone(true)

                       ⑤替换元素节点:    replaceWith(content)  //用括号中的字符替换所选择的元素

                   replaceAll(selector)    //用字符串替换括号中所选择的元素,一旦完成替换,被替换元素中的全部事件都将消失

                       ⑥包裹元素节点:     

 包裹节点元素
 语法格式 参数说明  功能描述
 wrap(html) html参数为字符串代码,用于生成元素并包裹所选元素  把所有选择的元素用其他字符串代码包裹起来 
 wrap(elem) elem参数用于包装所选元素的DOM元素 把所有选择的元素用其他DOM元素包装起来 
 wrap(function())  fn 参数为包裹结构的一个函数  把所有选择的元素用function函数返回的代码包裹起来 
 unwrap() 无参数  移除所选元素的父元素或包裹标记 
 wrapAll(html) html参数为字符串代码,用于生产元素并包裹所选元素  把所有选择的元素用单个元素包裹起来
 wrapAll(elem)  elem参数用于包装所选元素的DOM元素  把所有选择的元素用单个DOM元素包裹起来 
 wrapInner(html)  html参数为字符串代码,用于生成元素并包裹所选元素  把所有选择的元素的子内容(包括文本节点)用字符串代码包裹起来 
 wrapInner(elem)  elem参数用于包装所选元素的DOM元素   把所有选择的元素的字内容(包括文本节点)用DOM元素包裹起来 
 wrapInner(fn)  fn参数为包裹结构的一个函数  把所有选择的元素的子内容(包括文本节点)用function函数返回的代码包裹起来 

                       ⑦遍历元素:           each(function(index))   //function()  回调函数 参数index是当前元素的序号

                       ⑧删除页面元素:     remove(selector)   

                                                   empty()  //清空全部的节点或节点所包括的所有后代元素,并非删除节点和元素

原文地址:https://www.cnblogs.com/wangyuanliang/p/3746121.html