jQuery-01: 基本语法操作

1.入口函数

• 官网传送门:https://jquery.com/
• jQuery文件下载:https://code.jquery.com/jquery-1.12.4.min.js
• 官方文档传送门：http://jquery.cuishifeng.cn/index.html

• Js原生入口函数:
  window.onload = function(){ }​
• Jq入口函数 ：
  简写: $(function () { })
  标准: $(document).ready(function () { })

jq入口函数与原生入口函数区别

• (1) 执行次数不同 ：
  原生 : 只能注册一个入口函数
  jq : 可以注册多个
• (2) 时机不同 ：
  原生：DOM树 + 外部资源路径 加载完毕才执行
  jq： DOM树加载完毕就执行

        // 1.Js原生入口函数: dom树+外部资源
        window.onload = function () {
            console.log('111-原生入口函数');
        }


        // 2.jq入口函数: dom树加载完毕就执行  
        //1.简写
        $(function () {
            console.log('222-JQ入口函数');
        })
        //2.标准
        $(document).ready(function () {
            console.log('333-JQ入口函数');
        })

2.DOM对象与JQ对象获取与互转

    //1.DOM对象 :使用dom原生语法获取的对象
    let box = document.querySelector('#box')
    console.log(box); //dom对象

    // DOM对象转jq对象 :  $(dom对象)
    console.log($(box)); //jQuery.fn.init(1)

    // 2.jq对象 使用jq语法获取的对象  (jq对象本质是一个伪数组)
    let $box = $('#box')
    console.log($box); //jQuery.fn.init(1)

    //jq对象转 DOM 对象 : $(jq对象)[下标]
    console.log($box[0]); //dom对象

        1. $ 是一个函数
        2. $ 与jQuery完全等价:凡是用$的地方 都可以替换成jQuery 
            $ === jQuery
        3.1 参数是选择器 功能就是获取jq对象
            $('选择器')
        3.2 参数是函数,功能就是入口函数
            $(function(){})
        3.3 参数是dom对象,功能就是dom转jq
            $(dom对象)

3-jQuery语法：查询操作

3.1.基本选择器

名称	用法	描述
ID选择器	$(’#id’);	获取指定ID的元素
类选择器	$(’.class’);	获取同一类class的元素
标签选择器	$(‘div’);	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(‘div.redClass’);	获取class为redClass的div元素

• 总结：跟css的选择器用法一模一样。

3.1-层次选择器

名称	用法	描述
子代选择器	$(‘ul > li’);	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(‘ul li’);	使用空格，代表后代选择器，获取ul下的所

3.3-过滤选择器

• 这类选择器都带冒号:

名称	用法	描述
: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元素中，选择索引号为偶数的元素

3.4-css属性操作

jq的css样式操作
获取： $().css(‘样式名’)
设置： $().css(‘样式名’,样式值)

<script src="jquery-1.12.4.js"></script>
    <script>
        $(function(){
            /* 
            1.复习原生DOM操作css样式属性  -> 本质 对象赋值语法
                查询操作：  元素对象.style.属性名
                设置操作：  元素对象.style.属性名 = 值

            1.1 原生点语法注意点
                a. 只能获取行内，无法获取行外
                b. 获取的是字符串类型，带单位
                c. 可以获取，也可以设置

            2.jq语法操作css样式   -> 调用方法
                查询css样式 ： $().css('属性名')
                设置css样式 :  $().css('属性名',属性值)

                * 无论是行内还是行外，都可以操作(取值+赋值)  -> 底层使用getComputedStyle()

            3.总结
                (1)方法统一 ： 获取和设置方法名一样，参数不同，作用也不同
                (2)隐式迭代 ： 偷偷的遍历
                    * a.获取类只会默认获取第一个
                    * b.设置类才会隐式迭代
            */


            /*jq注册事件 
            (1)原生DOM注册事件本质 ： 对象属性赋值语法   DOM事件源.onclick = function(){}
            (2)jq注册事件本质 ： 调用函数     $().click(事件处理函数);
            */

            //1.查询css样式
            $('#btn1').click(function(){
                //1.1 只有一个元素
                console.log($('#box').css('width'));
                //1.2 有多个元素,默认获取第一个
                console.log($('.one').css('width'));
                
            });

            //2.获取css样式
            $('#btn2').click(function(){
                //2.1 只有一个元素
                $('#box').css('width','300px');

                //2.2 多个元素 ：隐式迭代 ： 偷偷的遍历
                $('.one').css('width','500px');
            });
        });
    </script>

3.5-html属性操作

    	jquery中的元素属性操作
        a.文本内容
            $().text()
            $().html()
        b.标准属性+自定义属性
            获取/设置 ： $().attr()
            移除：   $().removeAttr()

<script>
    /*本小节知识点：html属性操作
        1.复习webapi操作元素属性
            a.文本内容
                innerText:获取文本（包含子元素文本）
                innerHTML:获取内容（文本和标签）
            b.html标准属性
                href : a标签名链接
                src： img标签链接
            c.html自定义属性
                元素.getAttribute('属性名')
                元素.setAttribute('属性名',属性值)
                元素.removeAttribute('属性名')
        
        2.jquery中的元素属性操作
            a.文本内容
                $().text()
                $().html()
            b.标准属性+自定义属性
                获取/设置 ： $().attr()
                移除：   $().removeAttr()
    */

    //1.文本内容

    //1.1 获取
    //text():获取元素的文本（包含子元素）
    console.log($('#box').text());
    //html():获取元素的内容（文本和标签）
    console.log($('#box').html());

    //1.2 设置
    //text() : 无法解析标签
    $('#box').text('<a href="#">我是班长的粉丝</a>');
    //html():  可以解析标签
    $('#box').html('<a href="#">我是班长的粉丝</a>');

    //2.html属性

    //2.1 获取
    console.log($('#box').attr('aaa'));
    console.log($('a').attr('href'));
    console.log($('img').attr('src'));

    //2.2 设置
    $('#box').attr('aaa','我爱班长');//行内自定义属性 存在就是修改
    $('#box').attr('bbb','我爱坤哥');//行内自定义属性 不存在就是动态添加

    $('a').attr('href','http://www.itheima.com');
    $('img').attr('src','./images/0002.jpg');

    //2.3 移除
    $('a').removeAttr('href');
    $('#box').removeAttr('aaa');

</script>

3.6-表单元素属性操作

jquery语法:
获取:
$(选择器).val( )
布尔类型属性： $().prop(‘disabled’)
设置:
$(选择器).val(‘文本’)
布尔类型属性： $().prop(‘disabled’,true)

<script>
        $(function(){
            /* 
            1.复习原生dom操作表单元素属性
                a.获取文本：  value属性
                b.布尔类型属性： disabled checked selected

            2.jquery语法
                a.获取文本： $().val()
                b.布尔类型属性： $().prop()
            */

            //1.表单文本操作
            //1.1 获取
            console.log($('input:eq(0)').val());
            //1.2 设置
            $('input:eq(0)').val('黑马程序员');

            //2.布尔类型属性操作

            //2.1 获取
            console.log($('input:eq(0)').prop('disabled'));
            //2.2 设置            console.log($('input:eq(0)').prop('disabled',true));
           
         
    });
</script>

4.案例:开关灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <button id="btn">关灯</button>

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

    <script>
        /* 思路：
        点击按钮： 
            如果文字是关灯，(1)设置body颜色黑色 (2)设置自己文字：开灯
            否则 是开灯： (1)设置body颜色默认色 (2)设置自己文字：关灯     
        */

        $('#btn').on( 'click' , function(){
            /*  this和$(this) 
            this : dom对象,只能用dom语法
            $(this) : jq对象，只能用jq语法
            */
            console.log( this )
            console.log( $(this) )
            if( $(this).text() == '关灯' ){
                $('body').css('backgroundColor','#000')
                $(this).text('开灯')
            }else{
                $('body').css('backgroundColor','')
                $(this).text('关灯')
            }  
        } )
    </script>    
</body>
</html>

5.案例:隔行变色

   <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*需求 
            1. 单数行显示黄色，双数行显示绿色
            2. 鼠标移入每一个li元素：颜色变红
            3. 鼠标移出每一个li元素，颜色恢复原先的颜色
             */

            //1.单数行显示黄色（下标为偶数），双数行显示绿色 （下标为奇数）
            $('#ul1>li:even').css('backgroundColor', 'yellow');
            $('#ul1>li:odd').css('backgroundColor', 'green');

            //2.鼠标移入每一个li元素：颜色变红
            $('#ul1>li').mouseover(function () {
                //this:这是DOM对象。 当前点击的a标签，不支持jquery的语法
                //$(this) : 这是jquery对象。当前单击的a标签，支持jquery的语法

                //(1).先使用行内自定义属性存储当前颜色
                $(this).attr('bgc', $(this).css('backgroundColor'));
                //(2).修改颜色为红色
                $(this).css('backgroundColor', 'red');
            });

            //3.鼠标移出每一个li元素，颜色恢复原先的颜色
            $('#ul1>li').mouseout(function () {
                //颜色恢复原先的颜色
                $(this).css('backgroundColor', $(this).attr('bgc'));
            });

        });
    </script>

6.案例:页面换肤

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .small {
            width: 180px;
        }

        li {
            float: left;
            list-style: none;
            margin-right: 20px;
        }

        ul {
            width: 1000px;
            margin: 0 auto;

            height: 160px;

        }

        .father {
            width: 1000px;
            margin: 0 auto;
        }

        .father #bigPic {
            width: 1000px;
        }

        p {
            text-align: center;
        }
    </style>
</head>

<body>
    <ul id="ul1">
        <li><a href="https://picsum.photos/1000/622?random=1" title="美女A"><img
                    src="https://picsum.photos/180/112?random=1" alt="" class="small" /></a></li>
        <li><a href="https://picsum.photos/1000/622?random=2" title="美女B"><img
                    src="https://picsum.photos/180/112?random=2" alt="" class="small" /></a></li>
        <li><a href="https://picsum.photos/1000/622?random=3" title="美女C"><img
                    src="https://picsum.photos/180/112?random=3" alt="" class="small" /></a></li>
        <li><a href="https://picsum.photos/1000/622?random=4" title="美女D"><img
                    src="https://picsum.photos/180/112?random=4" alt="" class="small" /></a></li>
        <li><a href="https://picsum.photos/1000/622?random=5" title="美女E"><img
                    src="https://picsum.photos/180/112?random=5" alt="" class="small" /></a></li>
    </ul>
    <p>美女A</p>
    <div class="father">
        <img src="https://picsum.photos/1000/622?random=1" alt="" id="bigPic" />
    </div>

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

    <script>
        // 点击a标签 阻止a标签的默认跳转
        // 1.取出点击a标签的href属性 赋值给 bigPic标签的src



        // 2.取出点击a标签的title属性文本 赋值给p标签的文本
        $('a').on('click', function (e) {
            e.preventDefault()

            $('#bigPic').attr('src', $(this).attr('href'))

            $('p').text($(this).attr('title'))


        })


    </script>


</body>

</html>

7.案例:全选框按钮

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }

        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <th>
                <input type="checkbox" name="" id="checkAll" />全选/全不选
            </th>
            <th>菜名</th>
            <th>商家</th>
            <th>价格</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>红烧肉</td>
            <td>隆江猪脚饭</td>
            <td>￥200</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>香酥排骨</td>
            <td>隆江猪脚饭</td>
            <td>￥998</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" class="check" />
            </td>
            <td>北京烤鸭</td>
            <td>隆江猪脚饭</td>
            <td>￥88</td>
        </tr>
    </table>

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

    <script>
        /* 
            表单布尔属性:  true/false
            $('选择器').prop('属性名',属性值)
            $('选择器').prop('disabled')
            $('选择器').prop('checked')
            $('选择器').prop('selected')
        */

        //点击全选
        $('#checkAll').on('click', function () {
            // $('.check').prop('checked', $('#checkAll').prop('checked'))
            // 1.获取全选框表单布尔属性
            console.log($('#checkAll').prop('checked'));//true/false
            // 2.将全选框布尔属性作为属性值 传递给单选框
            $('.check').prop('checked', $('#checkAll').prop('checked'))
        })

        // 点击下面单选框
        $('.check').on('click', function () {
            /*       
                    //(1)使用过滤选择器 获取所有选中元素 的 数量
                      let selNum = $('.check:checked').length
                      console.log(selNum);
                      //(2)得到全部勾选框的数量 
                      let allNum = $('.check').length
                      //(3)判断勾选的元素 是否等于勾选框的数量
                      if (selNum == allNum) {
                          $('#checkAll').prop('checked', true)
                      } else {
                          $('#checkAll').prop('checked', false)
                      }
           */
            $('#checkAll').prop('checked', $('.check:checked').length == $('.check').length)

        })

    </script>

</body>

</html>

8.扩展: 构造函数如何不用new也可以调用

 /* 原理: 判断用户有没有使用new,如果没有,使用new递归调用一次*/
        function Zxk(name, age) {
            // 有new:直接赋值
            if (this instanceof Zxk) {
                this.name = name
                this.age = age
            } else {
                //没有new: 使用new递归调用自己一次
                return new Zxk(name, age)
            }
        }
        let p1 = new Zxk('ikun', 30)
        let p2 = Zxk('jx', 20)
        console.log(p1, p2);