烟台哪儿有可以做淘宝网站的,wordpress失败,微信网站模版,网页游戏大全排行榜jQuery的DOM操作之笔记总结 首先我们来介绍一下什么是DOM
简述#xff1a;
1.DOM全称Document Object Model#xff08;文档对象模型#xff09;。
2.每个文档都是一棵DOM结构的树#xff0c;文档里的很多元素#xff0c;就像树上的很多节点#xff0c;或是分叉的树枝… jQuery的DOM操作之笔记总结 首先我们来介绍一下什么是DOM
简述
1.DOM全称Document Object Model文档对象模型。
2.每个文档都是一棵DOM结构的树文档里的很多元素就像树上的很多节点或是分叉的树枝我们可以通过jQuery对任意的节点进行操作并且可以控制它的样式和属性。 内容结构
1. 节点操作 2. CSS样式操作 3. 属性操作 4.内容和值操作5. Dom遍历
1. 节点操 查找、创建、插入、删除、复制、替换、包裹、属性、清空节点 查找元素节点: p title选择你最喜欢的运动你最喜欢的运动是/p ul li title游泳游泳/li li title足球足球/li li title跑步跑步/li /ul var $li$(ul li:eq(1)); var li_text$li.text(); alert(li_text); 查找属性节点:
attr() 方法也用于获取/设置/改变属性值。 var $pra$(p); var p_text$pra.attr(“title”); //获取属性 alert(p_text); $(button).click(function(){ $(“#w3s”).attr(“href”,“http://www.w3school.com.cn/jquery”); //设置单个属性 }); $(button).click(function(){ $(#w3s).attr({ //设置多个属性 href : http://www.w3school.com.cn/jquery, title : W3School jQuery Tutorial }); }); 1、append( )方法
方法 作用向匹配的元素内部的末尾追加内容。追加的内容如果包含HTML标签则会创建该元素。 例如 原HTML代码 ul li第一条内容/li ul 然后执行jQuery代码 $(ul).append(li新的一条内容/li); //这里选择器选择的是ul元素 最后结果 ul li第一条内容/li li新的一条内容/li ul 2、prepend( )方法
作用向匹配的元素内部的开头插入内容。
注意这里是在开头前置内容而append()是在末尾追加内容。 例如 原HTML代码 ul li第一条内容/li ul 然后执行jQuery代码 $(ul).prepend(li新的一条内容/li); //这里选择器选择的是ul元素 最后结果 ul li新的一条内容/li li第一条内容/li ul 3、after( )方法
作用在匹配的元素的后面插入内容而不是像append()和prepend()是在元素的内部插入。 例如 原HTML代码 ul li第一条内容/li ul 然后执行jQuery代码 $(li).after(li又是一条新的内容/li); //这里选择器选择的是li元素 最后结果 ul li第一条内容/li li又是一条新的内容/li ul 4、before( )方法
作用在匹配的元素的前面插入内容。after()是在后面插入before()是在前面插入。 例如 原HTML代码 ul li第一条内容/li ul 然后执行jQuery代码 $(li).before(li又是一条新的内容/li); //这里选择器选择的是li元素 最后结果 ul li又是一条新的内容/li li第一条内容/li ul 5、insertBefore( )方法 作用insertBefore() 方法在一个指定的子节点之前插入一个节点。insertAfter()是在后面插入 例如 原HTML代码 ul li这是第一条 内容/li li这是第二条 内容/li li这是第三条 内容/li ul 然后执行jQuery代码 $new$(li这是新插入的节点/li); $li$(ul li:eq(1)); //$li代表第二个 $new.insertBefore($li)最后结果 ul li这是第一条 内容/li li这是新插入的节点 /li li这是第二条 内容/li li这是第三条 内容/li ul 6、remove( )方法
作用删除所有匹配的元素以及它所包含的所有子节点然后返回一个指向已被删除的节点的引用因此可以以后再使用这些元素。 例如 原HTML代码 ul li第一条内容/li ul 先执行jQuery代码 var drops $(ul).remove(); //先删除返回一个引用 第一个结果为空 然后添加一行jQuery代码 $(body).append(drops); //再将该引用添加到页面中 第二个结果 ul li第一条内容/li ul 7、empty( )方法
作用清空匹配元素的所有子节点的内容但不是删除节点。 例如 原HTML代码 ul li第一条内容/li ul 然后执行jQuery代码 $(li).empty(); 结果 显示只有li标签默认的符号一个点“.”但是没有文字内容 8. Clone([true])
作用clone() 方法生成被选元素的副本包含子节点、文本和属性。 $(function(){ $(ul li).click(function() { $(this).clone([true]).appendTo(ul); }) }); 备注 true克隆出来的副本还可以继续克隆flase只能克隆一次,不写默认为false 9. replaceWith(): 替换节点 $(p).replaceWith(strong你最不喜欢的水果是?/strong) 10、包裹节点 wrap wrapAll wrapInner $(p).wrap(div/div) $(p).wrapAll(div/div) $(p).wrapInner(b/b) 2.css样式操作
1、css( )方法
作用获取或者设置元素的单个或多个样式属性。 说明无论是通过HTML元素的style属性设置的内联样式还是外部CSS文件导入的样式 都可以通过css()方法获取到它们的样式属性。 (1). 获取元素的某个样式属性css(样式名) 例如$(a).css(color); 获取a元素的样式颜色 (2). 设置元素的单个样式属性css(样式名, 样式属性) 例如$(a).css(color, blue); 设置a元素的颜色为蓝色 (3). 同时设置元素的多个样式属性css({“样式名1”:”样式属性1”, “样式名2”:”样式属性2”, …}) 说明样式名/属性组要包含在大括号中 例如$(a).css({color:blue, font-size:14px}); 将a元素设为蓝色并且字体大小改为14px 2、width( )方法
作用设置元素的宽度。如果不带参数则为获取元素的宽度。 例如 $(#box).width(); //获取idbox的元素的宽度 $(#box).width(100px); //设置idbox的元素的宽度为100px 3、height( )方法
作用设置元素的高度。如果不带参数则为获取元素的高度。 例如 $(#box).height(); //获取idbox的元素的高度 $(#box).height(200px); //设置idbox的元素的高度为200px 4、addClass( )方法
作用向匹配的元素追加指定的一个或多个类。
(1). 向元素添加一个类addClass(类名) 例如 HTML代码p classredThis is title/p jQuery代码$(p).addClass(big); 结果p classred bigThis is title/p (2). 向元素添加多个类addClass(类名1 类名2 ...) 说明多个类名之间用空格分隔 例如 HTML代码p classredThis is title/p jQuery代码$(p).addClass(big bold); 结果p classred big boldThis is title/p 5、removeClass( )方法
作用从匹配的元素中删除指定的一个或多个类。
(1). 删除元素的一个类removeClass(类名) 例如HTML代码p classred big boldThis is title/p jQuery代码$(p).removeClass(red); 结果p classbig boldThis is title/p (2). 删除元素的多个类removeClass(类名1 类名2 ...) 多个类名之间用空格分隔 例如HTML代码p classred big boldThis is title/p jQuery代码$(p).removeClass(big bold); 结果p classredThis is title/p (3). 删除元素所有的类removeClass( ) 不带参数 例如HTML代码p classred big boldThis is title/p jQuery代码$(p).removeClass(); 结果p This is title/p 6 toggleClass( )方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类如果已设置则删除之。这就是所谓的切换效果。 $(button).click(function(){ $(p).toggleClass(“none); }); 7、offset( )方法
作用获取/设置元素在当前视窗的偏移值,即top与left 。 $(selector).offset({top:100,left:0}) var offset$(div).offset(); var left offset.left; var top offset.top; var num0; $(“:button:contains()).click(function(){ num10; $(div).offset({left:num}); }) $(“:button:contains(-)).click(function(){ num-10; $(div).offset({left:num}); }) 8、position( )方法
作用获取元素相对于最近一个position样式为absolute或relative的父节点的相对偏移 $(button:contains()).click(function(){ var add $(div).position().left10; $(div).css(left,addpx) }) $(button:contains(-)).click(function(){ var sub $(div).position().left-10; $(div).css(left,subpx) }) 9、scrollTop( )、scrollLeft()方法
作用获取元素的滚动条距顶端及距左端的距离 $(function(){ $(button).click(function(){ $(html,body).scrollTop(200) }) }) 3.属性操作 查找属性节点: attr() 方法也用于获取/设置/改变属性值。 var $pra$(p); var p_text$pra.attr(“title”); //获取属性 alert(p_text); $(button).click(function(){ $(“#w3s”).attr(“href”,“http://www.w3school.com.cn/jquery”); //设置单个属性 }); $(button).click(function(){ $(#w3s).attr({ //设置多个属性 href : http://www.w3school.com.cn/jquery, title : W3School jQuery Tutorial }); }); CSS样式操作获取或修改颜色、字体、高度、宽度等样式属性
4.内容和值操作 内容和值操作获取或设置元素内的HTML代码、文本和值
1、html( )方法
作用获取或者设置某个元素中的HTML内容。类似于javascript中的innerHTML属性。 不带参数时为获取元素的HTML内容。 例如 HTML代码p内容/p jQuery代码$(p).html(span新的内容/span); 运行结果新的内容 2、text( )方法
作用获取或者设置某个元素中的文本内容。类似于javascript中的innerText属性。 不带参数时为获取元素的文本内容。
注意这里如果有HTML标签会被当成纯文本而不会被解析。 例如 HTML代码p内容/p jQuery代码$(p).text(span新的内容/span); 运行结果span新的内容/span 3、val( )方法
作用获取或者设置某个表单元素的值如文本框(多行)、单选框、下拉列表等。类似于javascript 中的value属性。不带参数时为获取元素的value属性。 例如 HTML代码input typetext value请输入您的名称 / 运行jQuery代码$(input).val(请再次输入您的名称); //修改元素的value属性 运行结果请再次输入您的名称 4、 defaultValue方法[勿用此属性js]
作用属性可设置或返回文本框或密码域的默认值。 script typetext/javascript function alertValue() { alert(document.getElementById(password1).defaultValue ) } /script form input typepassword idpassword1 valuethgrt456 / input typebutton idbutton1 οnclickalertValue()“ valueShow default value / /form jQuery文档操作
