jquery的操作,dom操作
来源:互联网 发布:制作html5的软件 编辑:程序博客网 时间:2024/06/05 17:29
这次分享的是jquery的操作,也就是jquery对dom的操作。在html中,html可以是dom的节点,也就是整个html中的任何内容都是dom节点,而要对html进行操作或者修改的话,只要选中dom节点就可以了。而jquery的选择器就能十分有效的对这些节点进行选择,jquery的操作部分就能很便利的对节点进行操作,而我要分享的就是jquery的操作(动作)。
一、js中的dom操作
1、dom创建
dom的节点可以对应html中的每一个部分,当你想要知道DOM节点当前部分的类型的时候你可以用
nodeType
对于创建节点而言,有
document.createElement;document.creatTextNode;
可以这么写:
var elment1 = document.createElement('div');var element2 = document.createElement('input');var node = document.createTextNode('hello world!';
2、DOM查询
ele.parentElement;//获取父元素ele.parentNode;//获取父节点ele.children;//获取子节点ele.getElementsByTagName('');//通过属性名称查询子元素ele.getElementsByClassName('');//通过类名称查询子元素ele.firstElementChild;//ele元素的第一个子元素节点ele.lastElementChild;//ele元素的最后一个子元素节点ele.nextElementSibling;//ele元素的下一个兄弟元素节点ele.previousElementSibling;//ele元素的上一个兄弟元素节点
3、DOM更改
ele.appendChild(el);//添加子元素ele.removeChild(el);//删除子元素ele.replaceChild(el1, el2);//替换子元素parentElement.insertBefore(newElement, referenceElement);//插入子元素
4、属性操作
el.getAttribute('');//获取属性el.setAttribute('');//设置属性el.hasAttribute('');//判断属性el.removeAttribute('');//移除属性
5、关于innerHTML和outerHTML.
innerHTML//内部htmlouterHTML//外部htmlinnerText//内部文本outerText//内部文本<div id='home'><p>text page</p></div>//<div></div>是outerHTML部分,<p></p>是innerHTML部分,text page这些文字部分是innerText部分,而outerText部分的改变会把标签页它哦哦嗯是改变,而innerText部分是只改变文字部分
二、jquery中的一些简单的dom操作
先给一个html的代码
<p title='车'>你最喜欢的跑车品牌</p><ul> <li title='奥迪'>奥迪</li> <li title='法拉利'>法拉利</li> <li title='劳斯莱斯'>劳斯莱斯</li></ul>//一般的网页的dom树是这样的:html下分为head子和body子;head分为meta子,title子,style子等,body包括ul子,ul子里面包括li子等等。
//查找文本和节点$('ul li:eq(1)').text()//查找ul中的第二个li元素的文本内容$('p').attr('title')//获取p元素节点的属性title
//创建元素的节点$('ul').append($('<li></li>'))//把li 元素添加到ul中//创建文本节点$('ul').append($('<li>宝马</li>'))//添加节点和文字//创建属性节点$('ul').append($('<li title=宝马>宝马</li>'))//创建属性节点并且添加//除了append之外还有appendTo(),这个语句和append语句是相反的,是$(a).append(b)是把a添加到b中;prepend(),这个语句是向每个元素内部前置内容。其他的还有prependTo(),after(),insertAfter(),before(),insertBefore().
//删除节点$('ul li:eq(1)').remove();//删除ul中第二个元素也就是 法拉利//如果想要移动一个节点怎么办?分两步:1.先删除,2.后添加$('ul li:eq(1)').detach();//也是删除节点 但是与上面不同的是 这个不会删除匹配元素,只是去掉,数据库中还存在它的影子$('ul li:eq(1)').empty();//清空节点,可以清空元素中的所有后代节点
//复制节点$('ul li').click(fucntion){ $(this).clone(true).appendTo('ul');//复制当前点击的节点并且并且将它和它的功能加入到ul元素中。如果clone中不写true的话就仅仅是追加当前点击的节点,并没有功能}
//替换节点replaceWith()//将所有匹配的元素都替换成指定的HTML或者DOM元素$('p').replaceWith("<strong>你最不喜欢的跑车是?"<strong>);//把网页中p标签里面的title属性以及p标签的内容换成了 你最不喜欢的跑车是?$("<strong>你最不喜欢的水果是?</strong>").replaceAll('p')//和上面的代码所要实现的功能一样,只是顺序翻了一下而已。
阅读全文
0 0
- jquery的操作,dom操作
- jQuery 的dom操作
- jQuery 的 DOM操作
- jQuery的DOM操作
- JQuery的Dom操作
- jQuery DOM的操作
- jQuery的DOM操作
- Jquery的DOM操作
- jQuery的Dom操作
- jquery的DOM操作
- jquery的DOM操作
- Jquery的DOM操作
- JQuery的DOM操作
- jQuery的DOM操作
- jQuery的Dom操作
- jquery的dom操作
- jQuery的DOM操作
- jQuery的DOM操作
- jquery选择器之基本选择器和层次选择器
- iOS10 优化APP首次安装网络权限提示方案
- Python爬取网站职位信息
- js dom html 写下拉菜单
- 字符串的全排列
- jquery的操作,dom操作
- 使用函数实现两个数的交换
- Nginx+Tomcat配置Tomcat集群
- 用原生js写一个弹框
- 欢迎使用CSDN-markdown编辑器
- 网页设计之响应式设计
- 8、TensorFlow 中的激活函数
- 用css和jquery写一个手风琴式的下拉菜单
- 爬虫编写之前奏