jquery 进行dom操作

1.使用jqury进行dom操作

(1).新建节点 使用$()包住即可返回值是jquery对象

var $liNode=$("<li></li>")

(2).把节点插入到文档中的8个方法

1.append,appendTo    这两个方法是插入到文档的末尾,注意append的左边是要被插入的对象,其他的同理可知

2.pretend,pretendTo  插入到文档的头

3.insertAfter,after   插入到文档的后面

4.insertBefore,before  插入到文档的前面

(3).删除节点

a.remove();a被清除

(4)清空节点

a.empty();a被清空

(5)克隆节点

//在红警的下面game中克隆北京
$(‘#game li:first‘).after($(‘#a1‘).clone(true).attr("id","a2"));

(6)替换节点

//创建一个字节点替换游戏中的红警节点
$("<li>景德镇</li>").replaceAll($(‘#game li:first‘));
$(‘#a1‘).replaceWith($("<li>景德镇</li>"))

注意:由于replaceAll和replaceWith的返回值不同建议优先使用replaceWith()方法

var $bj= $(‘#a1‘).clone();
//红警被北京替换掉
var $h=$(‘#h‘).replaceWith($bj);
//背静替换红警;

$(‘#a1‘).replaceWith($h);

(7).val() html().text(),attr(),width(),height()都具有读写的方法;

时间: 2024-08-28 12:04:03

jquery 进行dom操作的相关文章

js,jQuery和DOM操作的总结(二)

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

第3章 jQuery的DOM操作

一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获取属性:elem.getAtrribute('title') 2.html-DOM document.div elem.src 3.CSS-DOM elem.style.color='red' 二. jQuery的DOM操作 1.查找节点 (1)元素节点 1 2 alert($('ul li:eq(

jQuery进行DOM操作记录

1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuery 为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下: $("#1").append("input type='button' value='确定'/>")   在1的内部元素的后面添加一个按钮 $("#1")

jQuery常用dom操作

操作属性节点(type属性不支持修改和删除) attr('name')——取值(如果jq对象是多个,则只取得第一个值,例如:$('.class').attr('name')——只获得第一个class的name属性值) attr('name','value')——赋值 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:'username',value:'tom'}; $('#username').attr(kv); 还可以通过函数的返回值来修改属性值,例如:$

Jquery的dom操作与原生dom的转换

本片文章包含了 jquery常见dom操作. q与原生dom对象的区别与转换 伪数组对象的知识 如有错误,烦请指正. 增 以下方法共性:可以一次添加多个内容,内容可以是DOM对象.HTML string. jQuery对象 创建元素 var obj = $('<div class="test"><p><span>Done</span></p></div>'); 两种方法可以创建元素 直接写入html 传入一个原生d

Jquery所有Dom操作汇总

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.1.11.1.min.js"></script> </head>

JQuery的Dom操作

大家好 又见面了 这次继续还是由我为大家带来JQuery的基础操作,这次的重点是在JQuery里使用DOM 示例如下: Prepend():在内容的前面插入新的标签,如下: 效果: prependTo():和上面的功能一模一样,也就是顺序上的区别 效果: After():标签后面添加新的元素 Before():在匹配元素的前面插入新的标签 删除节点 在JQuery里面,删除节点的方法大致3种:remove(),detach(),empty() Remove():从DOM里面删除所有匹配的元素 效

Jquery 事件 DOM操作

常规事件: 把JS的事件  on去掉即可 例如:js    document.getElementById("id").onclinck=function(){} Jquery  $("#id").click(function(){  事件发生的事}); 复合事件 hover(function(){}   ,   function(){})     移入移出事件 toggle(function(){} , function(){}  ....)可以有无数个funct

jquery的 dom操作

DOM(文档对象模型),DOM操作分3类: DOM-core(核心)  HTML—DOM    CSS—DOM DOM—core ,js中的 : document.getElementById()         document.getElementsByTagName()        document.getElementsByName();  getAttribute()    setAttribute(); HTML—core: CSS—core :获取和设置style对象的各种属性