part5-1 基础DOM和CSS操作

$('#box').html();          //获取 html 内容

$('#box').text();   //获取文本内容,会自动清理 html 标签

$('#box').html('<em>www.li.cc</em>');   //设置 html 内容

$('#box').text('<em>www.li.cc</em>');   //设置文本内容,会自动转义 html 标签

注意:当我们使用 html()或 text()设置元素里的内容时,会清空原来的数据。而我们期望能够追加数据的话,需要先获取原本的数据。

$('#box').html($('#box').html() + '<em>www.li.cc</em>');

//追加数据      如果元素是表单的话,jQuery 提供了 val()方法进行获取或设置内部的文本数据。
$('input').val();

$('input').val('www.li.cc');     //获取表单内容

//设置表单内容如果想设置多个选项的选定状态,比如下拉列表、单选复选框等等,可以通过数组传递操作。


$("input").val(["check1","check2", "radio1" ]);    //value 值是这些的将被选定

$('div').attr('title');     //获取属性的属性值

$('div').attr('title', '我是域名');        //设置属性及属性值

$('div').attr('title', function () {  //通过匿名函数返回属性值
return '我是域名';
});
$('div').attr('title', function (index, value) {
return value + (index+1) + ',我是域名';
});



//可以接受两个参数
注意:attr()方法里的 function() {},可以不传参数。可以只传一个参数 index,表示当前元素的索引(从 0 开始)。也可以传递两个参数 index、value,第二个参数表示属性原本的值。

注意:jQuery 中很多方法都可以使用 function() {}来返回出字符串,比如 html()、text()、val()和上一章刚学过的 is()、filter()方法。

而如果又涉及到多个元素集合的话,还可以传递index 参数来获取索引值,并且可以使用第二个参数 value(并不是所有方法都适合,有兴趣可以自己逐个尝试)。



$('div').html(function (index) {    //通过匿名函数赋值,并传递 index
return '我是' + (index+1) + '号 div';
});

$('div').html(function (index, value) {             //还可以实现追加内容

return '我是' + (index+1) + '号 div:'+value ;
});

注意:我们也可以使用 attr()来创建 id 属性,但我们强烈不建议这么做。这样会导致整个页面结构的混乱。当然也可以创建 class 属性,但后面会有一个语义更好的方法来代替 attr()
方法,所以也不建议使用。

删除指定的属性,这个方法就不可以使用匿名函数,传递 index 和 value 均无效。
$('div').removeAttr('title');
//删除指定的属性