取值 赋值相关的方法
- .html() 类似于 innerHTML
//取值
console.log($('ul li').html())//返回值类型是string,在一个框中去值html是只拿第一个值,特殊的
console.log($('ul').get(0).innerHTML)
//赋值
$('ul li').html('9')//赋值是全部赋值
- .text() 基于innerText
//取值:取得是文本节点
console.log($('ul li').text());
//赋值
$('ul li').text('9')
$('ul li').text(function(index,ele){
console.log(index,ele)
return paiming[index];
return `<p style="color:red">${paiming[index]}</p>`;
})
- .size() 返回查询到的个数
$('ul li').size();
$('ul li').length;
- .addClass() 给多个元素添加class值
$('.btn').click(function(){
$('.list li').addClass('strong').css('color', 'red');
});
- .removeClass() 根据传入的class值删除 不传参数,删除所有的class值
- .hasClass() 判断是否包含了某个class值,返回布尔值 只要其中一个包含了就是true
- .css():
传参:多种样式
单个样式
//赋值
$('.demo')
.css({width:'100px',height:'100px',backgroundColor:'red'})
.css({width:'200px'})
$('.demo').css('width','100px').css('height','100px').css('backgroundColor','red')
//取值
console.log($('.demo').css('backgroundColor'))
- .attr()
属性 data-* 自定义属性
基于getAttribute setAttribute
attr主要针对属性,判断状态时返回值永远是checked或者undefined
//取值
console.log($('.demo').attr('class'))
console.log($('input').attr('checked'))
//赋值
$('.demo').attr('id','test')
$('input').attr('checked','123')
$('div').attr('log','yaya')
- .prop()
prop主要针对特性,判断状态时返回值是boolean(取值操作),
如果是赋值操作,和attr跟在状态的属性上面没有任何区别
$('input[type=checkbox]').prop('checked',true)
- .val()
不传参数 ,就直接获取表单元素的值
读取或设置元素的值 在用于表单元素时,
$('.btn').click(function(){
console.log($("").val());
});
$('.btn').click(function(){
$('inp').val('ya');
console.log($('inp').val());
});