二、获取内容、修改内容、添加新内容

1、获取内容

.html()

var something=$('ul').html();
$('ul').append(something);```
![效果.png](http://upload-images.jianshu.io/upload_images/6705565-3ef6217f82f979d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

var something=$('li').html();
$('li').append(''+something+'');


只返回第一个< li >元素中的内容;

$('li').each(function(){
var something=$(this).html();
$(this).append(something);
})```
返回每一个< li >元素中的内容


二、获取内容、修改内容、添加新内容_第1张图片
效果2.png

.text()
同上,不过返回值是< ul >或者< li >元素中的文本内容。

2、修改内容

$(function(){
   $('li:contains("sss")').text('almonds');
   $('li.red').html(function(){
       return''+$(this).text()+'';
})
   $('#id1').remove();
});```

![效果3.png](http://upload-images.jianshu.io/upload_images/6705565-61f562ba802f0842.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3、添加新内容
---------------------------------------------

$(function(){
$('ul').before('

举个栗子

');
$('li.red').prepend('+ ');
var b=$('
  • re7rtkep
  • ');
    $('li:last').after(b);
    });```

    二、获取内容、修改内容、添加新内容_第2张图片
    效果4.png

    获取和设置css属性

    .css()方法
    .css('background-color');
    .css('background-color','#565656')
    .css({
    'background-color':'#167253',
    'color':'#267536',
    'font-size':'15px'
    })

    $(function(){ 
      var backgroundColor=$('li').css('background-color');
      $('ul').append('

    Color was: '+backgroundColor+'

    '); $('li').css({ 'background-color': '#c5a996', 'border':'1px solid #fff', 'color':'#000', 'font-family':'Georgia', 'padding-left':'+=75' }) ; });

    修改多个css属性及属性值时,用逗号“,”隔开,'属性1':'属性值1','属性2':'属性值2';当修改单个属性和属性值时---'属性','属性值'

    标签内容的backgroundColor对应css属性background-color的值会以RGB的形式返回。

    ps:最好是修改class属性的值来触发css规则,而好过直接修改css属性

    你可能感兴趣的:(二、获取内容、修改内容、添加新内容)