jQuery实例方法 — DOM操作（一）

2024-02-29 15:48:52

取赋值相关方法

// 以下方法相对这个结构使用
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<div class="demo test"></div>
<div class="demo date = '0'"></div>
<div class="demo"></div>
<input type="checkbox" checked = ''>

html()

// 取值操作
var flag = $('ul').html();
var flag1 = $('ul li').html();
console.log(flag);    
 //结果  <li>1</li>
 //      <li>2</li>
 //      <li>3</li>
 //      <li>4</li>
 //      <li>5</li>
 console.log(flag1);   // 比较特殊只取一个值 1
 
// 赋值操作
// 如果往html()里面写入值，它会把原来的东西都覆盖掉
$('ul').html('<span style = "color:red">123</span>'); // 这样ul里面就不会有哪些li标签了
$('ul li').html('杨梦莹');   // 5个li里面的值都会变成杨梦莹
// 延申写法，更为灵活
var arrList = ['杨梦莹一号', '杨梦莹二号', '杨梦莹三号', '杨梦莹四号', '杨梦莹五号'];
$('ul li').html(function(index, elem){
    return '<span style = "color:red">' + arrList[index] +'</span>';
});

text()

// 取值操作
var flag = $('ul').text();
var flag1 = $('ul li').text();
console.log(flag);    
 //结果  1
 //      2
 //      3
 //      4
 //      5
 console.log(flag1);   // 12345
 
// 赋值操作
$('ul li').text('杨梦莹');   // 5个li里面的值都会变成杨梦莹
// 延申写法，更为灵活
var arrList = ['杨梦莹一号', '杨梦莹二号', '杨梦莹三号', '杨梦莹四号', '杨梦莹五号'];
$('ul li').text(function(index, elem){
    return arrList[index];   // 里面就不能些标签了，写了也只是文本形式
});

size()

与.length作用一样

console.log($('ul li').size());  // 5

addClass()

添加类名

// 方法一
$('.demo').eq(0).addClass('active ee');  // 添加两个类名
// 方法二
$('.demo').addClass(function (index, elem) {
	if(index % 2 == 0){
		return 'test';
	}else{
		return 'active';
	}	
});

removeClass()

删除类名

$('.demo').removeClass();   // 什么都不添会删除所有
$('.demo').removeClass('test demo');   // 删除所有这包含这两个的相关类名
$('.demo').removeClass(function(index, elem) {
    if(index %2 == 0){
        return 'demo';
    }
});

hasClass()

判断是否由此类名，返回true和false

css()

添加css样式

// 赋值
$('div')
    .css({width:"100px", height:'100px', margin:'10px', backgroundColor:'red'})
    .css({width:"+=100px"});   // 可以直接在这里加等于
// 取值
var oWidth = $('div').css('width');  // 获取的都是绝对值，比如颜色是rgb形式，em会转为px，相当于原生js的getComputedStyle

attr()

基于 getAttritube 与 setAttribute

// 取值 getAttribute
console.log($(div).eq(1).attr('date'));   // 0
// 赋值 setAttribute
$(div).eq(2).attr('date', '0');
// checked是否被选中用这个是无法获取真实状态
console.log($('div').eq(2).prop('checked'));  // checked，不挂填什么都是这个值

prop()

prop只能获取到有映射的值

// 取值
console.log($('div').eq(1).prop('date'));     // undefined 与attr的区别，获取不到没有映射的属性
console.log($('div').eq(2).prop('class'));    // demo
console.log($('div').eq(2).prop('checked'));  // true，在页面中把勾取消再执行会显示false
// 赋值 setAttribute
$(div).eq(2).prop('id', 'unique');

arrt和prop的区别

arrt基于 setAttribute 和 getAttribute
jQuery认为attribute的checked selecked disabled 就是表示该属性初始状态的值，property的checked、selecked、disabled表示该属性实时状态的值（true或false）

val()

获取表单相关元素的value值

<form action="./" method="GET">
    <h3>选择你喜欢的明星</h3>
    <select name="star" id="">
        <option value="s" selected = 'selected'>库里</option>
        <option value="a">汤普森</option>
        <option value="b">詹姆斯</option>
    </select>
    <h3>一句话简单介绍你喜欢的明星</h3>
    <input type="text" name="easy" value="cst">
    <h3></h3>
    三分准：<input type="checkbox" name="special" value="three">
    组织好：<input type="checkbox" name="special" value="org">
    突破强：<input type="checkbox" name="special" value="strong">
    <h3></h3>
    <textarea name="des" id="" cols="30" rows="10"></textarea>
    <input type="subit" value="login">
</form>

// 取值
console.log($('input[type = "checkbox"]').eq(0).val());  // three
console.log($('input[type = "checkbox"]').eq(0).val());  // three，与html相似，只取一个值
// 赋值
$('input[type = "checkbox"]').val(function (index, oldValue) {
    return oldValue + index;
});

码农公寓