jQuery学习笔记_02day

1.text()获取和设置文本

a.获取文本text()方法不给参数

b.会获取到这个标签中所有的文本，包括后代元素的文本

c.包含了多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到

d.设置标签文本会覆盖它原来的内容，如果设置的文本中包含标签,是不会把这个标签给解析出来的

e.包含了多个dom元素的jQuery对象，通过text()方法设置文本，会把所有的dom元素都设置上

2.css()设置和获取样式

css()方法设置参数为要获取值的样式名

$('#div1').css('width');
$('#div1').css('height');
$('#div1').css('background-color');
$('#div1').css('backgroundColor');
$('#div1').css('border');
$('#div1').css('border-top-width');
           

获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式

注意：获取样式操作只会返回第一个元素对应的样式值

设置样式:css(样式名：样式值)

//设置单样式
$('#div1').css('width','300px');
$('#div1').css('height',300);
$('#div1').css('backgroundColor','red');
$('#div1').css('border','10px solid green');
           

//设置多样式
$('#div1').css({
width:300,      //可以不加引号，像素不加引号不能带px
'height':'300px',
'background-color':'green',
'border-top-width':'10px'
 });
           

//给标签为div的元素们设置样式
$('div').css({
width:300,
'height':'300px',
'background-color':'green',
'border':'10px solid red',
marginTop:10
});
           

基本选择器 和css里面的选择器是一样的

id选择器 $(’#id’);

类选择器 $(’.类名’);

标签选择器 $(‘标签名’);

并集选择器 $(’.box,.box2’);

交集选择器 $(‘li.current’);

层级选择器 和css里面的选择器是一样的

子代选择器 $(‘ul>li’)

获取儿子层级的元素，并不会获取孙子层级的元素

获取不同的儿子层级元素

$(’#father>div , #father>p’)

后代选择器 $(‘ul li’)

获取ul下的所有li元素包括孙子

过滤选择器

:eq(index)

// $(‘li:eq(2)’).css(‘color’,‘red’) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始

:odd

//$(‘li:odd’).css(‘color’,‘red’) 获取li元素中，选择索引号为奇数的元素

:even

//$(‘li:even’).css(‘color’,‘red’) 获取li元素中，选择索引号为偶数的元素

<script>
        $(function(){
            //设置奇数行li标签颜色为天蓝色
            $('li:odd').css('backgroundColor','skyblue');
            //设置偶数行li标签背景色为粉色
            $('li:even').css('backgroundColor','pink');
            //首尾两行li显示红色
            $('li:eq(0)').css('backgroundColor','red');
            $('li:eq(9)').css('backgroundColor','red');
        })
</script>
           

筛选选择器

prevAll() 之前所有兄弟

nextAll() 之后所有兄弟

第二课…