jquery中的节点的操作
节点的操作
Dom 文档对象 模型 解决
一.插入节点
Append() 在每个匹配的元素中追加内容
Var $li_1= “<li></li>”;
Var $li_2 =”<li></li>”
$(“ul”).append($li_1).append($li_2); //添加到ul中rep
appendTo() 将所有匹配元素追加到指定元素中
$(“<b>asd</b>”).appendTo(p); p 指<p></p>you
Prepend() 向每个匹配元素的内部前置内容
PrepenTo()将所有的匹配的元素前置到指定元素中
After() 在每个匹配元素后面插入内容
insertAfter ()将匹配的元素插到指定元素的后面
before() 在每个匹配元素前面插入元素
insertBefore()将匹配的元素插到指定元素的前面
二.DOM元素的插入与移动
InsertBefore()
insertAfter()
三.删除节点
Remove()
empty() 用于清除节点的文本 $("#p").empty()
四.复制节点
Clone() 复制节点 有一个参数 或无参数
五.替换节点ReportedWith()与ReplaceAll()的作用一样,替换的事件一样会消失
ReplaceWith(“<string>被替换新的文本</strign>”)
(“<string>被替换新的文本</strign>”).replaceAll();
六.包裹节点 将某一节点用其他的标签包裹起来 用wrap();方法实现的
Wrap() WrapAlll() wrapInner() 能够包裹节点;
$(“p”).wrap(“<b></b>”)用<b>标签把<p>元素包裹起来
Wrap(); 用于在文档插入而外的结构化标签 ,不会破坏其语义 例:
$(“p”).wrap(“<b></b>”) //用b标签将p包裹起来 ,效果将p的文本的字体加粗
Wrapall(); 将所有匹配的元素用一个元素包裹起来,不同于
Wrapinner(); 是将每一个匹配的子元素的子内容{包括文本节点},用其他结构化的标签包裹起来
属性的操作
attr()属性的操作或设置
根据属性名称获取属性的值,如:(“元素名”).attr(“title”);//获取属性的title的值
设置属性的值 (“属性名”).attr(“属性名”:”属性值”);///设置属性的值,如果有多个用逗号隔开
removeAttr()删除属性//有参数,是指定的属性名删除,没参数删除所有的属性
追加样式
addClass()的方法追加样式
addClass() 追加样式 在调用一次addclass()
而Attr();会把前面的样式替换掉
removeClass()删除样式 带参数指定样式删除 删除多个用空格隔开 如果没有删除全部
切换样式
Toggle()交替一组动作
StoggleBtn.toggle( function()
{ //显示元素的代码
},function(){
//隐藏的代码
})
/// jquery 提供一个toggleClass(); 方法控制样式的重复切换 一个参数 : class的名称
ToggleClass() 进行显示/隐藏的切换
Toggle() ///无参数是默认是样式的切换
HasClass()可以用来判断元素是否含有摸个class,如果有返回true,如歌没有 false
Html()//以html文本解析后输出;
Text() //以普通的文本输出
Next();//用于获取同辈的下一个元素
Height(0 wicdth() vla() css()……的用法差不多
Chiildren()获取所有匹配元素的子元素集合
Prev() 用于获取同辈紧邻的上一个元素
Siblings() 匹配同辈的所有的元素,不包括自己
Closest() 匹配 最近的元素,如果自己不匹配,往上“父元素”匹配,一级一级的匹配,如果匹配
scrollTop() scrollleft() 滚动条的操作
jquery中的节点的操作的更多相关文章
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- js进阶 11-1 jquery中的页面内容操作的三个方法
jquery中的页面内容操作的三个方法 一.总结 一句话总结:记三个方法即可.text,html,val.因为这里是方法,所以设置值的是后面方法的参数. 1.jquery中的页面内容操作的三个方法? ...
- JavaScript&&jQuery创建新节点和操作属性对比
JavaScript创建新节点和操作属性 通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的. <!DOCTYPE html> <html lang="e ...
- jQuery中 对标签元素操作(2)
一.属性操作 1.获取属性和设置属性 例如下jQuery代码: var $para=$("p"); //获取<p>节点 var p_txt=$par ...
- jquery中对 iframe的操作
我们先看一下 JQUERY中的对像 contents() 的帮助文件 contents() 概述 查找匹配元素内部所有的子节点(包括文本节点).如果元素是一个iframe,则查找文档内容 示例 描述: ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jquery 中json数组的操作(转)
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
随机推荐
- zookeeper分布式环境的搭建
官网配置地址:http://zookeeper.apache.org/doc/trunk/zookeeperStarted.html 安装jdk 关闭防火墙 下载zookeeper-3.3.6并解压 ...
- javaScript常用工具库
对应于百度前端技术学院2015年春季的课程2相关内容 https://github.com/baidu-ife/ife/tree/master/2015_spring/task/task0002 ht ...
- css3实现动画效果
一.动画效果的常用属性 实现动画效果需要借助css3的下列属性:transform,transion,animation(具体可以参见教材) 二.动画效果实例 1)文字闪烁的动画效果 /*文字的闪烁效 ...
- [转]qt中文乱码问题
http://blog.csdn.net/brave_heart_lxl/article/details/7186631#
- iOS 自定义UIButton(图片和文字混合)
// UIApplicationDelegate .h文件 #import <UIKit/UIKit.h> @interface AppDelegate : UIResponder &l ...
- Oracle 11g RAC INS-06006 Passwordless SSH connectivity not set up between the following node(s)
安装11g RAC的grid时,在Test互信的时候报错INS-06006 Passwordless SSH connectivity not set up between the following ...
- 在Ubuntu 64位OS上运行hadoop2.2.0[重新编译hadoop]
最近在学习搭建Hadoop, 我们从Apache官方网站直接下载最新版本Hadoop2.2.官方目前是提供了linux32位系统可执行文件,结果运行时发现提示 “libhadoop.so.1.0.0 ...
- JQuery 回到顶部效果
图片,CSS/HTML/JS代码都在,可以直接用了. CSS代码 <style type="text/css"> #gs_feedback_gotop { _displ ...
- 不等高cell的tableView界面搭建
一.搭建界面 1.界面分析 分析界面的层次结构,分析界面应该用什么控件来搭建 2.界面层次结构 分析之后,我们可以把这个界面分为四个模块(topView middleView commentView ...
- java collections读书笔记(9)collection框架总览(2)
框架算法: 1)collection接口 add() Adds an element to the collection.addAll() Adds a collection of element ...