jQuery笔记1 — hide、show、toggle、css、选择器

1. hide()、show()、toggle()

1. hide()隐藏内容：$('.box').hide();
2. hide()添加时间：$('.box').hide(1000);含义：用1s隐藏。
3. 消失后再显示：$('.box').hide(1000).show(2000);含义：先1s消失，然后再用2s显示。
4. 展现和隐藏切换：$('.box').toggle();

2.CSS()

1. 添加一个CSS样式：$('.box').css('backgroundColor','yellow');含义：给.box 添加样式背景颜色为黄色。
2. 添加多个样式：

$('.box').css({
          'background-color':'red',
           color:'pink'
        });

设置样式，把原来的样式设置成新样式
（原来的字体尺寸，设置成20px; 只有return才能set给.box）

  $('.box').css('font-size',function(index,oldValue){
          return '20px';
        });

3.选择器

1.基本选择器4种
    $('#box').html('测试');//匹配id="box"的元素
    $('.box1').html('测试');//匹配class="box1"的元素
    $('div').html('测试'); //匹配标签是div的元素
    $('#box,p').html('测试');//匹配id="box"和标签是p的元素

2.层级选择器4种
    $('#box p').html('测试');//匹配id="box"下的所有标签是p的元素  子孙都匹配
    $('#box > p').html('测试');//匹配id="box"的儿子标签是p的元素 只匹配亲儿子
    $('#box + p').html('测试');//匹配id="box"紧挨着的兄弟标签是p的元素 只匹配一个紧挨着的兄弟

3.简单选择器8种
    $('li:first ').html('测试');//在所有li元素中，只匹配第一个li元素
    $('li:last').html('测试');//在所有li元素中，只匹配最后一个li元素
    $('li:even').html('测试');//在所有li元素中，只匹配偶数li元素，从0开始数
    $('li:odd').html('测试');//在所有li元素中，只匹配奇数li元素，从0开始数
    $('li:eq(4)').html('测试');//在所有li元素中，只匹配第四个li元素，从0开始数
    $('li:not(eq(4))').html('测试');//在所有li元素中，除了第四个li元素，其他li元素都匹配，从0开始数
    $('li:gt(4)').html('测试');//在所有li元素中，只匹配大于第四个li元素，从0开始数
    $('li:lt(4)').html('测试');//在所有li元素中，只匹配小于第四个li元素，从0开始数

4.可见性选择器2种
    $('div:hidden').show();//匹配所有隐藏的div,并显示
    $('div:visible').show();//匹配所有显示的div,并隐藏

5.表单选择器
    $(':input') 
    $(':text') //匹配type类型为text的input,<input type="text"/>
    $(':password')
    $(':radio')
    $(':checkbox')
    $(':submit')
    $(':image')
    $(':button')
    $(':file')

6.筛选选择器
    $('span').eq(4).html('测试');//匹配所有span元素中，第四个span
    $('span').first().html('测试');//匹配第一个出现的span
    $('span').parent().html('测试');//匹配span的父亲
    $('span').sibling.html('测试');//匹配span的所有兄弟
    $('div').find('p');//查找div元素中的所有p元素  

7.指定选择器

选中第一个子选择器：`$('li:first-child').css('backgroundColor','yellow');`含义：选中`li` 的第一个li；同理最后一个是`last`;
选中偶数：`$('li:nth-child(even)').css('backgroundColor','yellow');`含义：从1开始数，偶数选中；
指定选中：`$('li:nth-child(1)').css('backgroundColor','yellow');`含义：从1开始数，第一个选中；
选中偶数：`$('li:nth-child(2n)').css('backgroundColor','yellow');`含义：从1开始数，选中2的倍数；  

4.样式操作

1.样式操作
    $('div').addClass('class_name');//添加样式
    $('div').removeClass('class name');//移除样式
    $('div').toggleClass('selector');//切换样式
    $('div').hasClass('className');//判断是否有这个类

2.常用DOM操作
        $('div').text();//获取文本内容
        $('div').html();//获取html值
        $('div').attr('name');//获取name属性值
        $('div').removeAttr('name');//移除属性
        $('input').value();//获取input值

3.操作文档 内部嵌入节点
        $('div').append(node);//在div内部的后面追加元素
        node.appendTo('div');//把node追加到div内的后面
        $('div').prepend(node);//在div内部的前面追加元素
        node.prependTo('selector')//把node追加到div内的前面

4.操作文档 外部嵌入节点
        $('div').after(node);//在div元素的后面追加元素
        node.insertAfter('selector');//在div元素的后面追加元素
        $('div').before(node);//在div元素的前面追加元素
        node.insertBefore('selector');//在div元素的前面追加元素

5.删除节点
        $('div').remove();//删除选中的元素
        $(this).remove()//自杀
        $('div').empty();//div中的所有内容全部清空

5.jQuery的事件处理

$('ul').on('click','li',function(){})//给ul中的li绑定事件

解析：
想要给谁绑定事件，先找其父元素，再on(‘click’,’XX’,function(){})
‘click’是事件
‘xx’是要绑定的元素