jQuery

jquery初识

jquery对象  DOM对象

    $('div')得到的是jquery对象--（加索引）--》dom对象
    dom对象--$(dom对象)-->jquery对象
    
    
    
    
    $('div');//得到的是jquery对象
    jQuery.fn.init(3) [div.c1, div.c2, div.c3, prevObject: jQuery.fn.init(1)]0: div.c11: div.c22: div.c3length: 3prevObject: jQuery.fn.init [document]__proto__: Object(0)
    
    $('div')[0];//jquery+索引得到dom对象
    <div class=​"c1">​div1​</div>​
    
    $($('div')[0]);//$(dom对象)--》jquery对象
    jQuery.fn.init [div.c1]
    0: div.c1
    length: 1
    __proto__: Object(0)

选择器（查找标签）    
    基本选择器（同css）
    层级选择器
    基本筛选器（选择之后进行过滤）
    属性选择器
    表单筛选器（多用于form表单的input标签）
    筛选器方法
    
操作标签
    样式操作（添加或删除class类的值来实现）
    位置操作
    尺寸操作
    文本操作

选择器

选择器（查找标签）    
    基本选择器（同css）
        id选择器
        $('#d1');
        标签选择器
        $('div');
        class选择器
        $('.c1');
        配合使用
        $('div.c1')//找到类名为c1的div标签
        
    层级选择器
        $('div p');//找到div标签下面的所有子标签p
        $('div>p');//找到div的所有儿子p标签
        $('div+p');//毗邻选择器
        $('div~p');//兄弟选择器
        
    基本筛选器（选择之后进行过滤）
        ：first//找到该标签中的第一个元素
        ：last//最后一个
        ：eq(index)//取相对应索引
        ：even//偶数，从0开始
        ：odd//奇数，从0开始
        ：not（元素选择器）//移除所有满足not条件的标签，找到的是子标签
        div：has（元素选择器）//所有满足has条件的标签，找的是满足条件的div标签
        
    //注意：
        $("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来
        $("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签
        $("li:not(.c1)")// 找到所有不包含c1样式类的li标签
        $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
        
    属性选择器：（//多用于input标签）
        [属性]
        [属性=值]//找属性等于值的标签
        [属性！=值]//找属性等于值的标签
    
        
      表单筛选器（多用于form表单的input标签）
      //重点，循环的取多选的value值在对应内容
      for (var i in $(':checked')){
        console.log($('input:checked').eq(i).val());
        }
        
        
      表单对象帅选器
        :enabled
        :disabled
        :checked//有坑，会把option标签，所以一般要+input：checked
            $(':checked');
            jQuery.fn.init(3) [input, input, option, prevObject: jQuery.fn.init(1)]
        :selected
      
      
    筛选器方法
        下一个元素
        $("#id").next()
        $("#id").nextAll()
        $("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含#i2
    
        上一个元素
        $("#id").prev()
        $("#id").prevAll()//注意顺序
        $("#id").prevUntil("#i2")
    
        父亲元素
        $("#id").parent()
        $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
        $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
        
        
        儿子和兄弟元素
        $("#id").children();// 儿子们
        $("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
        
        
        find和filter
        $('div').find('input');//div下找input标签，找到是子子孙孙
        
        $('div').filter('.c1');//就是找div标签 class为c1的div

标签操作

操作标签
    样式操作（添加或删除class类的值来实现）
        添加类 对象.addCladd('c1');
        删除类 对象.removeClass('c1');
        判断是否存在： 对象.hasClass();
        切换类有就移除，没有就添加  对象.toggleClass();////注意不要重名操作
        
    css操作
        //$('.c1').css('background-color','green');
        jQuery.fn.init [div.c1, prevObject: jQuery.fn.init(1)]
        
        //$('.c1').css({20});
    
    位置操作
        $('.c1').offset();
        {top: 119, left: 8}
        
        $('.c1').position();
        {top: 119, left: 8}
        
        
        .offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
　　　　和 .position()的差别在于： .position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，
        如果找不到这样的元素，则返回相对于浏览器的距离。
        
        
        
        //鼠标操作
        $(window).scrollTop()  //滚轮向下移动的距离
        $(window).scrollLeft() //滚轮向左移动的距离
    尺寸操作
        height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
        width()
        innerHeight() //内容content高度 + 两个padding的高度
        innerWidth()
        outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
        outerWidth()
        
        
    文本操作
        1.html代码：
        html()// 取得第一个匹配元素的html内容，包含标签内容
        html(val)// 插入内容，能识别标签
    
        $('.c1').html();
        "
            xxx
            <input type="reset">
            <input type="reset">
            mmm
        "
        2.text代码:
        text()// 取得所有匹配元素的内容，所有文本内容
        text(val)// 插入内容，标签作为文本插入进去
        $('.c1').text();
        "
            xxx
            
            
            mmm
        "
        
        3.val（一般用于有value属性的标签）
        val()// 取得第一个匹配元素的当前值
        val(val)// 设置所有匹配元素的值
        val([val1, val2])// 设置多选的checkbox、多选select的值
        //重点，循环的取多选的value值在对应内容
          for (var i in $(':checked')){
            console.log($('input:checked').eq(i).val());
            }

val总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值操作</title>
    <style>
        #d1,#d2{
            height: 100px;
             100px;
        }
        #d1{
            background-color: red;
        }
        #d2{
            background-color: green;
        }
    </style>
</head>
<body>
<div>
<input type="radio" name="n1" value="1">男
<input type="radio" name="n1" value="2">女

<input type="checkbox" value="1" >抽烟
<input type="checkbox" value="2" >喝酒
<input type="checkbox" value="3" >汤头

<select name="" id="ss1">
    <option value="1">上海</option>
    <option value="2">北京</option>
    <option value="3">深圳</option>
</select>

<select multiple name="" id="ss2">
    <option value="1">朝阳</option>
    <option value="2">沙河</option>
    <option value="3">昌平</option>

</select>
</div>



<script src="jquery.js"></script>

</body>
</html>