text()、html()是相对粗犷的方法,直接读取或设置元素的内容;
成都创新互联主营泗水网站建设的网络公司,主营网站建设方案,成都APP应用开发,泗水h5小程序制作搭建,泗水网站营销推广欢迎泗水等地区企业咨询
另外一些较为细致的操作是对某一个jQuery对象的增加、删除。
后面讲到的替换节点、包裹节点用到的比较少。
1、text(), html()
(1)使用html()方法读取或者设置元素的innerHTML
(2)使用text()方法读取或设置元素的innerText
2、动态创建和添加、删除DOM节点
2.1、创建DOM节点
使用$(html字符串)来创建DOM节点,并且返回一个jQuery对象,然后调用append等方法将新创建的节点添加到DOM中。$()创建的就是一个jQuery对象,可以完全进行操作
创建radio,使用$('');,而不要在创建好后通过attr('name','gender')//通过attr()设置name,在IE6下面有问题
2.2、添加和删除DOM节点
append方法用来在元素的末尾追加元素(最后一个子节点)
prepend,在元素的开始添加元素(第一个子节点)
after在元素之后添加元素
before在元素之前添加元素
其他追加方法(将自己追加到某元素)
子元素.appendTo(父元素);
主动追加到最后一个
子元素.prependTo(父元素)
主动追加到第一个
A.insertBefore(B)
将A加到B前面,等同于B.before(A)
X.insertAfter(Y)
将X追加到Y的后面,等同于Y.after(X)
删除节点
empty() 清空某元素下的所有子节点
内部实现:while(ele.firstChild){ele.removeChild(ele.firstChild);}
remove(selector) 删除当前元素,返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下。
2.3、案例
示例:创建一个层
jQuery测试
效果图
示例:从json中取数据,动态创建表格
jQuery测试
效果图
示例:无刷新评论
jQuery测试
小明 | 你好啊 |
效果图
示例:删除元素
jQuery测试
效果图
示例:权限选择案例:一个下拉框中的选项放置另一个下拉列表框选项中
jQuery测试 " id="toRight"/> >" id="toAllRight"/>
效果图
3、替换节点和包裹节点
3.1、替换节点
$("br").replaceWith("
用
$('
').replaceAll('hr');
用
元素替换所有的hr
调用者也得是选择器选择到的元素
3.2、包裹节点
wrap()方法用来将所有元素逐个用指定标签包裹
wrapAll()
wrapInner()//在内部围绕