12.12jquery选择器、增加删除class

属性选择器

引号的问题

链式调用

获取值之后不能再有链式调用

    
bbbbb

增加删除class

• addClass() 增加
  removeClass() 删除
  toggleClass() 交替删除增加

show() hide()

    var onOff=true;
        $('button').click(function(){
            if(onOff){
                $('div').hide();//在内部改变display
            }else{
                $('div').show();
            }
            onOff=!onOff;
        })

兄弟元素的选择

next();下一个兄弟元素；可以有多个参照，选择多个兄弟元素；
prev();上一个兄弟元素；可以有多个参照，选择多个兄弟元素；
nextAll() 当前元素下面所有的兄弟元素；可以有多个参照，选择多个兄弟元素；
prevAll() 当前元素上面所有的兄弟元素；可以有多个参照，选择多个兄弟元素；
siblings(); 当前元素所有的兄弟元素；可以有多个参照，选择多个兄弟元素；

参数的筛选功能

$('.item').siblings('.test').css('background','blue');//传入参数，筛选同时满足条件的对象
下标选择：.eq();
slice选择
$('li').slice(1,3).css('background', 'red');//截取中间下标1~下标2
children

    
01
    
02
    
03
    
04
    
05

find()
$('.box').find('.inner').html('bbbbb');//查找子元素
parent
$('a').parent().css('background', 'red');//查找父元素
closest
closest必须有参数；从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素。

    
cccc
        
bbbb
            
aaaa
 
        
    
   

抽奖练习

    
    
    
    


    

        
一等奖
        
二等奖
        
三等奖
        
四等奖
        
五等奖
        
六等奖
        
七等奖
        
八等奖
        
九等奖
    
    开始抽奖
       

创建节点

//原生的方式
var oDiv = document.createElement('div');

//jq的方式
var $div = $('
hai
') //可以直接添加内容

append()方法 添加子元素//插入到子元素最后面
prepend()方法 添加子元素//插入到子元素最前面
before() after() 插入到当前元素前/后；

append方法，添加子元素//插入到子元素最后

• 参数：1. jq对象
  2. 标签字符串
  3. 原生的dom对象

删除节点

.remove();删除操作会将元素上的事件也删除

    
5
    
4
    
3
    
2
    
1

index();

选项卡的代码

    
    
    
    
111
    
222
    
333
  

jq中的循环 each();

函数中：
i 第一个参数代表下标
elem 第二个参数代表每个原生dom对象
this指向：this==elem

    
1
    
2
    
3
    
4
    
5

退出循环

在for循环中我们是用break来退出整个循环

在.each() 中 return false来退出整个循环//return 退出本次循环

jq与js的转换

get() 获取原生都dom对象
$('div').get(0).innerHTML = 'sdfsdf';
与eq的区别
get方法得到的是原生dom对象， eq得到的是jquery对象

$('div').get(0).innerHTML = 'sdfsdf';
$('div').eq(0).html('sdfsdf');