在一个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()方法