操作元素属性
操作元素的属性即操作元素的自定义属性和固有属性
具体操作有:
(1)获取元素的属性值
$(selector).attr(属性名)
var txt=$('#d1').attr('name')
console.log(txt)
(2)设置元素的属性值
$(selector).attr({'属性名':'属性值'})
$(selector).attr('属性名','属性值')
$(selector).attr('属性名',function()){
return '值'
})
例如:
<img />
$('img').attr({'src':'../images/8.png.jpeg'});
$('img').attr('src',function(){
return '../images/8.png.jpeg'
})
(3)删除元素属性:removeAttr
$(selector).removeAttr('属性名')
例如:
$('#d1').removeAttr('name')
操作样式
具体操作如下:
(1)获取样式属性的值
$(selector).css('样式属性名')
例如:
div{
width: 200px;
height: 200px;
background-color: red;
}
<div>样式</div>
var c=$('div').css('backgroundColor')
console.log(c)
(2)设置样式属性的值
$(selector).css({'样式属性':'值'})
$(selector).css('样式属性名','属性值')
例如:
$('div').css({
'width':'200px',
'height':'200px',
})
$('div').css('color','white')
操作样式类
具体操作如下:
(1)添加样式类
$(selector).addClass(样式类名)
(2)删除样式类
$(selector).removeClass(样式类名)
(3)判断元素是否含有给定的样式类
$(selector).hasClass(样式类名)
(4)交替添加(删除) 样式类
$(selector).toggleClass(样式类名)
练习:判断用户名是否可用
.ok{
color:green
}
.err{
color:red
}
<label>
用户名:
<input type="text" id="username">
<span id="msg"></span>
</label>
<p>西安</p>
$(function(){
$('#username').blur(function(){
var name=$('#username').val()
if(name==='abc'){
S('#span').html('用户名可用')
if($('#msg').hasClass('err')){
$('#msg').removeClass('err')
}
$('msg').addClass('ok')
}else{
S('#span').html('用户名不可用')
if($('msg').hasClass('ok')){
$('msg').removeClass('ok')
}
$('msg').addClass('err')
}
})
$('p').click(function(){
$('p').toggleClass('ok')
})
})
操作HTML代码
操作HTML代码:作用类似于innerHTML
具体操作如下:
(1)获取html代码:
$(selsetor).html()
(2)设置html代码:(设置/写入内容)
$(selector).html('html代码')
例如:
$('div').html('<h2>杭州</h2>')
其他操作
操作文本
作用类似于innerText
具体操作如下:
(1)获取标签的文本
$(selector).text()
(2)设置标签的文本:
$(selector).text('文本')
获取或设置元素的高度和宽度
(1)宽度
$(selector).width()
$(selector).width(value)
(2)高度
$(selector).height()
$(selector).height(value)
操作值
(1)获取元素的value属性
$(selector).val()
(2)设置元素的value属性
$(selector).val(值)
操作元素的固有属性
(1)获取元素的固有属性
$(selector).prop('属性名')
(2)设置元素的固有属性
$(selector).prop('属性名','属性值')
例如:
<p id="xh" abc="xhh">星河梦</p>
console.log("固有属性"+$('p').prop('id'))
console.log('prop读自定义属性'+$('p').prop('abc'))
console.log('attr读自定义属性'+$('p').attr('abc'))
console.log('attr读固有属性'+$('p').attr('id'))
注意:prop 只能读固有属性,attr可以读固有属性也可以读自定义属性
查找和筛选元素
(1)eq(index) :获取索引为index的元素
(2)filter(expr) :筛选出与指定表达式expr相同的元素
(3)not(expr) :筛选出与指定表达式expr不相同的元素
(4)find(expr) :查找与指定表达式相同的子元素
(5)next([expr]) :返回与指定表达式相同的同辈元素
(6)parent([expr]) :返回与表达式相匹配的的唯一的父元素
(7)sibings([expr]) :返回与表达式匹配的所有同辈元素
<div class="d1">西安</div>
<div class="d1">杭州</div>
<div>北京</div>
<div>上海</div>
<div class="d1">广州
<p>AAA</p>
<p>BBB</p>
</div>
var t=$('div').eq(3).html()
console.log(t)
var srr=$('div').filter('.d1')
console.log(srr)
var arr1=$('div').not('.d1')
console.log(arr1)
var arr2=$('div').find('p')
console.log(arr2)
var t=$('p').parent('.d1')
console.log(t)
var s=$('p').siblings()
console.log(s)
|