jQuery总结(一).jQuery基础-CSDN博客

[官方地址] https://jquery.com/

[jQuery库] https://www.bootcdn.cn/jquery/ 不同版本

[jQuery常用工具] https://www.runoob.com/jquery/jquery-tutorial.htm

[jQuery常用工具] https://www.w3school.com.cn/jquery/index.asp

4.jQuery引入

1.通过本地引入

<script type="text/javascript" src="./jquery-3.5.1/jquery-3.5.1.js"></script>

2.通过cdn网站引入

<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>

3.jQuery位置问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        因为浏览器解析html是从上到下解析
        所以在1，2位置需要使用匿名函数，
     -->
    <script>
        // 1.放在<head>中
        $(function(){

        })
    </script>
</head>
<body>
    <!-- 2.放在<body>前面 -->
        <script>
            $(function(){

            })
        </script>
    





    <!-- 3.放在<body>最后面 -->
        <script>

        </script>
</body>
</html>

5.jQuery入口函数的写法

<script>
    $(document).ready(function(){
        alert('hello')
    })
</script>

<script>
    jQuery(document).ready(function(){
        alert('hello')
    })
</script>

3.推荐常用

<script>
    $(function(){
        alert('hello')
    })
</script>

<script>
    JQuery(function(){
        alert('hello')
    })
</script>

6.jQuery函数

<script>
    //1.参数为匿名函数，当Dom加载完成后，执行此回调函数
    $(function(){
        //2.参数为选择器（字符串）:查找所有匹配的标签,并将它们封装成jQuery对象
        $('#btn').click(function(){
         //3.参数为Dom对象:jQuery函数将Dom封装成jQuery对象并返回。
            alert($(this).html())
         //4.参数为HTML文本字符串
            $('<input type="text" name="msg"></input>').appendTo('div')
        })
    })
</script>

7.jQuery对象

1.jQuery对象是jQuery函数的一个实例，该对象可以调用jQuery原型中的方法,也就是我们后面学的很多方法，比如each,map,slice,first,find, filter,not, on,off,css等方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>  
<!-- 
    1.jquery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
    2.基本行为
    *size()/length:包含的dom元素的个数
    *[index]/get(index):得到对应位置的dom元素
    *each():遍历包含的所有dom元素
    *index():得到所在元素的下标
 -->
<script type="text/javascript">
    $(function(){
        //获取所有button
        var $btns=$('button');
        // console.log($btns)
        //需求一 统计有多少个按钮
        console.log('button个数为'+$btns.size())
        console.log('button个数为'+$btns.length)
        //需求二 取出第二个button的文本
        console.log($btns[1].innerHTML);
        console.log($btns.get(1).innerHTML);
        //需求三 输出所有button标签的文本
        $btns.each(function(index,item){
            console.log(index,item.innerHTML,this);
        })
        //需求四 输出测试三按钮是所有按钮的第几个(下标)
        console.log($('#btn3').index())
        
    })
</script>
</body>
</html>

8.jQuery对象与Dom对象

jQuery对象与Dom对象是两种完全不一样的对象，jQuery对象是jQuery函数的实例，是一个类数组对象，而DOM对象是Node的实例，他们所能调用的方法完全不同。但是它们又有一定的关联性，jQuery对象的类数组的元素为DOM对象，对jQuery对象的操作实际上就是对jQuery数组中DOM对象的批量操作。 jQuery 对象和DOM对象可以相互转化。

Dom对象转化为jQuery对象

<script>
    //dom为一个DOM对象，$dom为jQuery对象
    var $dom=jQuerey(dom);
</script>

jQuery对象转化为Dom对象

<script>
    //获取所有class为one的dom元素，可能多个，$doms为jQuery对象
    var $doms=jQuery('.one');
    //获取封装在jQuery对象中的第一个dom对象，doms为dom对象 
    var dom=$doms[0];
</script>

9.jQuery选择器

9.1基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="one"></div>
    <div id="two"></div>
    <div class="one"></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

<!-- 使用jQuery之前要先引入 -->
    

    <script>
       $(function(){
           //所有选择器
           $('*').css({
               background:'red'
           })
           //标签选择器
           $('div').css({
               background:'red'
           })
           //id选择器
           $('#two').css({
               background:'red'
           })
           //类选择器
           $('.one').css({
               background:'red'
           })
           //组合选择器（取并集）
           $('div,li').css({
               background:'red'
           })
           //相交选择器（取交集）
           $('div.one').css({
               background:'red'
           })
       })
    </script>
</body>
</html>

9.2层次选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>AAAA</li>
        <li class="box">BBBB</li>
        <li title="hello"><span>CCCC</span></li>
        <li title="hello"><span>DDDD</span></li>
        <span>EEEE</span>
    </ul>
    <script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //选中ul下所有的span selector1 selector2后代选择器
            // $('ul span').css({
            //  background:'yellow'
            // })
            //选中ul下所有的子元素span selector1>selector2 子代选择器
            // $('ul>span').css({
            //  background:'red'
            // })
            //选中class为box的下一个li prev+next 下一个兄弟选择器
            // $('.box+li').css({
            //  background:'blue'
            // })
            //选中ul下的class为box的元素 后面的所有兄弟元素   之后所有的兄弟选择器
            $('ul .box~*').css({
                background:'yellow'
            })
        })
    </script>
</body>
</html>

9.3过滤选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <ul>
        <li>AAAA</li>
        <li title="hello">BBBB</li>
        <li class="box">CCCC</li>
        <li title="hello">DDD</li>
        <li title="two">EEEE</li>
        <li style="display:none;">我本来是隐藏的</li>
    </ul>
    <-- 
基本过滤器
语法：  selector:过滤器
selector:first      获取所有已选择到的元素中的第一个元素
selector:last       获取所有已选择到的元素中的最后一个元素
selector:even   获取所有已选择到的元素中的索引为偶数元素
selector:odd        获取所有已选择到的元素中的索引为奇数元素
selector:eq(index)  获取所有已选择到的元素中的索引为index的元素
selector:lt(num)    获取所有已选择到的元素中索引值小于num的元素
selector:gt(num)    获取所有已选择到的元素中索引值大于num的元素
selector1:not(selector2)获取所有已选择到的元素中除了selector2的元素
selector:header  获取标题h1~h6获取所有已选择到的元素中的标题元素  
内容过滤器
语法：  selector:过滤器           
selector:contains(text)     获取所有已选择到的元素中文本包含text的元素
selector:empty      获取所有已选择到的元素中空元素（没有子节点）
selector:parent     获取所有已选择到的元素中非空元素（有子节点）
                    如$("div:parent")
selector:has(selector2) 获取所有已选择到的元素中包含selector2的元素
                    如$("div:has('span')")      

可见性过滤器
语法：  selector:过滤器
隐藏类型分2种：
    1. 不占据屏幕空间
        display:none
        //input type="hidden"
    2. 占据屏幕空间
        visibility:hidden  
        透明度为0
    使用： 
        :visible    选择所有占据屏幕空间的元素
        :hidden 选择所有不占据屏幕空间的元素        
        
        
属性过滤器
语法：  selector[属性过滤器]
1. selector[attrKey]        
    获取所有已选择到的元素中具有属性attrKey的元素
2. selector[attrKey=attrVal]    
    获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
3. selector[attrKey^=attrVal]   
    获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
4. selector[attrKey$=attrVal]   
    获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
5. selector[attrKey*=attrVal]   
    获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
6. selector[attrKey!=attrVal]   
    获取所有已选择到的元素中具有属性attrKey，并且属性值不为attrVal的元素或者 没有属性attrKey的元素
        
-->

    <script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        //选择第一个div  获取所有已选择到的元素中的第一个元素
        // $('div:first').css({
        //  background:'red'
        // })
        //选择最后一个class为box的元素  获取所有已选择到的元素中的最后一个元素
        // $('.box:last').css({
        //  background:'red'
        // })

        //选择所有class属性不为box的div 
        // $('div:not(.box)').css({
        //  background:'red'
        // })
        //选择第二个和第三个li元素
        //多个选择器不是同时执行的，是依次执行的
        // $('li:gt(0):lt(2)').css({
        //  background:'red'
        // })
        //获取内容为BBBB的li  
        // $('li:contains("BBBB")').css({
        //  background:'red'
        // })
        //选择隐藏的li :hidden 
        // console.log($('li:hidden').length,$('li:hidden')[0]);
        //选择有title属性的li元素
        // $('li[title]').css({
        //  background:'red'
        // })
        //选择所有属性title为hello得li元素
        $('li[title=hello]').css({
            background:'red'
        })
    })

    </script>
</body>
</html>

9.4后代过滤器

/*
后代过滤器
选择器一定要先选择到后代元素，是对选择到的后代元素的过滤,【注意】空格与>（即子代）的区别。

1. selector :nth-child(index)   
    获取每个selector元素中索引为index的子元素【注意】index从1开始
2. selector :first-child    
    获取每个selector元素中第一个子元素（每个父元素的第一个子元素）
    注意与selector :first的区别，获取所有selector元素的子元素中的第一个（只有一   个）
3. selector :last-child     
    获取每个selector元素中最后一个子元素（每个父元素的最后一个子元素）
4. selector :only-child     
    获取每个selector元素中独生子子元素（每个父元素如果只有一个孩子元素，获 取该元素）
5. selector :first-of-type  
    获取每个selector元素中每种类型子元素中的第一个
6. Selector :last-of-type   
    获取每个selector元素中每种类型子元素中的最后一个        
*/




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            float: left;
            border: 1px solid red;
            width: 100px;
            height: 30px;
        }
        .inner{
            float: left;
            border: 1px solid blue;
            width: 10px;
            height: 10px;
            margin: 2px;
        }
    </style>
</head>
<body> 
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
        <div class="inner"></div>
    </div>
    <script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script>
        $(function(){
        //     //选中每一个outer中的第一个inner
        //     var $result=$('.outer .inner:first-child')
        //     $result.css('background','red')
            //选中每一个outer中的最后一个inner
            // var $result=$('.outer .inner:last-child')
            // $result.css('background','red')
             // :first 只有一个元素，第一个
            // var $result = $('.outer .inner:first')
            // $result.css('background', 'red')

             // :last 同理
            // var $result = $('.outer .inner:last')
             // $result.css('background', 'red')

             // 作为别人的第偶数/奇数个孩子
             var $result = $('.outer .inner:nth-child(odd)')
             $result.css('background', 'red')
        })   
    </script>
</body>
</html>

9.5表单过滤器

/*
表单过滤器：主要是对选择的表单元素进行过滤
:enabled    
    选取所有可用元素该选择器仅可用于选择支持disabled属性（attribute）的HTML  元素(<button>, <input>,<optgroup>,<option>, <select>,和 <textarea>)
:disabled   
    选取所有不可用的元素该选择器也是仅可用于支持disabled属性的HTML元素
:checked    
    选取所有被选中的元素，用于复选框和单选框，下拉框
:selected   
    选取所有被选中的选项元素，该选择器只适用于<option> 
:focus  
    选择当前获取焦点的元素
:input  
    选取所有的<input><textarea><select><button>元素。注意：$(“:input”)是选择可 以让用户输入的标签元素；而$(“input”)是选择名字为input的标签元素
:text   
    选取所有的单行文本框（<input type="text">）
:password   
    选取所有的密码框    
表单过滤器：主要是对选择的表单元素进行过滤
:radio  选取所有的单选框
:checkbox   选取所有的多选框        
:submit 选取所有的提交按钮           
:image  选取所有input类型为image的表单元素
:reset  选取所有input类型为reset的表单元素          
:button 选取所有input类型为button的表单元素 
:file       选取所有input类型为file的表单元素

*/
        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        爱好：
        <input type="checkbox" name="" id="">篮球
        <input type="checkbox" name="" id="">足球
        <input type="checkbox" name="" id="" checked>羽毛球<br>
        性别：
        <input type="radio" name="sex" id="" value="male">男
        <input type="radio" name="sex" id="" value="female" checked>女<br>
        邮箱：
        <input type="text" name="email" id="" disabled="disabled"><br>
        所在地：
        <select name="" id="">
        <option value="上海">上海</option>
        <option value="苏州">苏州</option>
        <option value="杭州" selected>杭州</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
    <script  src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>

    <script>
        $(function(){
            //选择不可用的文本输入框
            $(':text:disabled').css({
                background:'red'
            })

            //显示选择爱好的个数
            console.log($(':checkbox:checked').length)

            //显示选择的性别
            console.log($(':radio:checked').val())
            
            //显示选择的城市名称
            $(':submit').click(function(){
                var city=$('select>option:selected').html()
                alert(city)
            })
        })


    </script>
</body>
</html>