jQuery对选中的DOM元素进行HTML操作

在一个html页面设计完成之后,页面的元素也就随着页面的加载完成而确定了。不过可以交互的动态页面,肯定需要随着用户的操作而修改页面中的元素内容,包括在元素中添加新的Html代码,修改或者获取元素的值等等

1,操作html

var a=$("table tr").html();

这里a的值为本页面所有table标签里第一个tr标签里面的值。虽然选择器返回的是多个元素集合,但是因为html()方法,仅返回集合中第一个元素的内容

$("table tr").html("<h1>hello</h1>")

但是html()方法则会作用在选择器里的所有节点。

2,操作文本

和html不同 不带参数的text()方法会返回选择器中所有匹配元素包含的文本内容组合起来的文本

$("table tr").text();

这个方法会返回table节点下 tr节点里所有的文本内容

$("table tr").text("hello");

这个方法会将table节点下 tr节点里输出hello。

需要注意:不要在text()方法里输入标签!为了表示字符串正常输出 会将标签转义

3,操作值

获取操作值:

val()方法不带参数时则返回第一个匹配元素的值。如果是可以多选的元素(比如checkbox)则返回一个数组

$("table tr").val();

这个方法会返回table节点下第一个tr的值

设置操作值:

当在val()方法中传递一个字符串或者数组作为参数时,此参数将用来设置匹配集合中每个元素的值

4,元素属性

获取属性

jQuery可以使用attr()方法来获取元素的值,

$("selector").attr('属性名')

此方法会返回选择器节点下第一个匹配元素的属性值,如果该节点没有该属性 则返回undefined

 

修改属性

根据传递的参数不同不同,attr()方法有两种方法格式修改匹配元素的每个属性值

如果单个属性

$("selector").val("class","myclass");

如果多个属性

$("selector").val({

name:"mydiyname",

class:"myclass",

........

})

删除属性

$("selector").removeAttr("属性名")

 

5,元素样式

添加样式

$("selector").addClass("main");

为匹配的元素添加class="main"属性

上面的方法attr()方法也可以修改节点元素的属性 但是区别在于attr()会替换掉之前的class属性。而addClass会在原先的class属性上追加样式

移除样式

$("selector").removeClass()// 如果不加参数则删除所有的样式 如果加参数则删除指定的样式

切换样式

$("selector").toggleClass("样式")  //如果样式存在就删除 不存在就添加。两极反转

$("selector").toggleClass("样式",boolean) //布尔值确定是true就添加 false就删除。一般用方法来确定。

6,元素css

在jQuery中 设置DOM元素的样式只需要一个css()方法。无论指定的样式属性是通过style属性还是通过css类直接添加的,都可以使用css()获取

 读取元素

$("p").css("color") //将返回p元素的字体颜色

 

设置css样式

$("div").css("color","#FFFFFF");

也可以一次设置多个样式 使用map格式的参数就可以{属性:值,属性:值。。。。。 }

元素css位置

offset()方法

用于获取匹配元素在全局的偏移量

var point=$("img:last").offset(); //获取坐标

var x=point.left; //获取left坐标值

var y=point.top; //获取top坐标值

position()方法

用于获取匹配元素相对于父元素的当前偏移量

元素css尺寸

jQuery提供了6个方法来控制元素在css样式中的尺寸。分别是获取元素高度和宽度的height()和width()方法

获取内部高度和宽度的innerHeight()和innerWidth()方法

获取外部高度和宽度的outerHeight()和outerWidth()方法

不和别人一样,不复制只真正理解
原文地址:https://www.cnblogs.com/Vinlen/p/12706744.html