1.jQuery初识

jQuery 定义
1. jQuery是对javascript的封装，是免费的，开源的javascript函数库，jQuery极大的简化了javascript编程
jQuery的作用
1. jQuery和javascript作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了javascript编程，jQuery实现交互效果更简单
jQuery的优点：
1. jQuery 兼容了现在主流的浏览器，增加了程序员的开发效率
2. jQuery 简化了javascript编程，代码编写更加简单

2.jQuery用法

jQuery引入

<script src='js/jquery-1.12.4.min.js'></script>

jQuery 入口函数：
.使用js获取标签元素，需要页面加载完成以后获取，我们通过给onload事件属性设置了一个函数来获取标签，而jQuery提供类ready函数来解决，保证获取标签元素没有问题，它的速度比原生的window.onload更快。

  <!-- https://www.jq22.com/jquery-info122 -->
    <!-- 导入jQuery对应的js文件 -->
    <!-- <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script> -->
   <script src='js/jquery-3.0.0.min.js'></script>
   <script>
        // 原生js写法
        window.onload=function(){
            // 获取页面标签
            var oDiv=document.getElementById('d');
            alert(oDiv);
        }
        // $ 符号就是jquery的象征
        // $ 本质是函数，只不过这个函数名是（$）
        // ready 等待页面标签加载完成以后就执行ready事件，不会等待资源加载完成
        $(document).ready(function(){
            // 获取标签和css样式匹配标签的规则一样
            var $div=$('d');
            alert($div);
        });
        // jQuery简写
        $(function(){
            var $div=$('d');
            alert($div)
        });
    </script>
</head>
<body>
    <!-- jQuery的使用 -->
    <div id='d'>
        hello world
    </div>

3.jQuery选择器

jQuery选择器初识
.jQuery选择器就是快速选择标签元素，获取标签的，选择规则和css一样
jQuery 选择器的种类
1. 标签选择器 $(‘li’)
2. 类选择器 $(’.class’)
3. id 选择器 $(’#id’)
4. 层级选择器 $(’#id li span’)
5. 属性选择器 $(‘input[name=first]’) 选择name=first的input

  <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 获取标签对象 标签选择器
            var $p=$('p');
            alert('这是标签'+$p.length)
            // 通过jQuery设置样式
            $p.css({'color':'blue'});
            // 类选择器
            var $div=$('.dv');
            alert('这是类'+$div.length);
            // id选择器
            var $id=$('#idd');
            alert('这是id'+$id.length);
            // 层级选择器
            var $cj=$('.d1 .d2 p');
            alert('这是层级'+$cj.length);
            // 属性选择器
            var $sx=$('input[type=text]');
            alert('这是属性'+$sx.length);
            // jQuery 选择器获取标签，和css选择器匹配标签的方式一样
        })
    </script>
</head>
<body>
    <!-- jQuery选择器 -->
    <p>人生如梦</p>
    <p>快意人生</p>
    <div class='dv'>
        人生如戏
    </div>
    <div id='idd'>来自南方的朋友</div>
    <div class="d1">
        <div class="d2">
            <p>为情所困</p>
            <p>心之所向，情不自禁</p>
        </div>
    </div>
    <input type="text">
    <input type="button" value='按钮'>

4.选择集过滤

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

选择集过滤的操作
1. has(选择器名称)方法，表示选取包含指定选择器的标签
2. eq(索引)方法，表示选取指定索引的标签

 <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 通过jQuery选择器获取html标签
            var $div=$('div');
            // 获取包含指定选择器的父标签
            $div.has('p').css({'color':'blue'});
            $div.has('input').css({'color':'red'});
            // 根据下标选择指定的标签 从0开始
            $div.eq(0).css({'background':'red'});
        })
        // 选择集过滤就是在选中的集合标签里面，根据需要过滤出想要的标签
    </script>
</head>
<body>
    <!-- 选择集过滤 -->
    <div>
        <p>你是风儿</p>
    </div>
    <div>
        <input type="button" value='按钮'>
        <p>我是沙</p>
    </div>

5.选择集转移

选择集转移就是以选择的标签为参照，然后获取转移后的标签

选择集转移的操作：
1. $(’#box’).prev() 表示选择id是box元素的上一个同级元素
2. $(’#box’).prevAll() 表示选择id是box元素的上面所有同级元素
3. .next() 表示选择id是box元素的下一个同级元素
4. .nextAll()
5. .parent() 表示选择id是box元素的父元素
6. .children() 表示选择id是box元素的所有子元素
7. .siblings() 表示选择id是box元素的其他同级元素
8. .find(’.class’) 表示选择id是box元素的类名为class的元素

    <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 获取div ,并将之作为参照物
            var $div=$('#b1');
            // css 参数是一个js对象，和python中的字典类似
            //上一个同级元素
            $div.prev().css({'color':'red','font-size':'20px'});
            // 上所有同级元素
            $div.prevAll().css({'background':'blue'});
            // 下一个同级元素
            $div.next().css({'font-size':'25px'});
            // 下所有同级元素
            $div.nextAll().css({'background':'yellow','text-indent':'15px'});//缩进
            // 同级的其他标签
            $div.siblings().css({'text-decoration':'underline'});//添加下划线
            // 父标签
            $div.parent().css({'background':'gray'});
            // 子标签
            $div.children().css({'background':'green'});
            // 查找子标签
            $div.find('.s1').css({'color':'yellow'});

        });
    </script>
</head>
<body>
    <!--选择集转移 根据指定标签为参照物，选中其他标签，这种操作叫做选择集转移  -->
    <div>
        <p>我是段落标签</p>
        <h3>我是h3标签</h3>
        <div id='b1'><span>我是</span>一个<span class='s1'>盒子</span>标签</div>
        <p>我是段落标签</p>
        <h3>我是h3标签</h3>
    </div>

6.jQuery获取和设置标签内容

获取标签的html内容 $div.html()
设置标签的html内容，之前的内容会清除 $div.html(’…’)
追加html内容 $div.append(’…’)

   <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 获取标签对象
            var $p=$('p');
            // 获取标签内容
            alert($p.html());
            // 设置标签内容
            $p.html('假如生活欺骗了你');
            // 追加
            $p.append('不要悲伤')

        });
    </script>
</head>
<body>
    <!-- jQuery获取或设置标签内容 -->
    <p>身不由己</p>

7.获取和设置元素属性

prop 方法使用
1. 用css可以给标签设置样式属性，设置标签的其他属性就可以用prop方法了。

    <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 获取标签
            var $p=$('p');
            var $text=$('input');
            // 获取样式属性
            var $px=$p.css('font-size');
            alert($px);
            // 设置样式属性
            $p.css({'font-size':'30px','background':'green'});
            // 除了样式属性的相关操作使用css方法，其他属性的操作都是prop方法
            // 获取标签属性
            var $name=$text.prop('name');
            alert($name);
            // 设置标签属性
            $text.prop({'value':'www','class':'b1'});
            // 获取value属性可以使用val
            alert($text.val());
            // 使用val方法设置属性
            $text.val('aaa');

        });
    </script>
</head>
<body>
    <!-- jQuery 获取或设置标签属性 -->
    <p>我是段落标签</p>
    <input type="text" name='username' id='txt1'>

8.jQuery 事件

常用事件
1. click() 鼠标单击
2. blur() 元素失去焦点
3. focus() 元素获得焦点
4. mouseover() 鼠标进入（j进入子元素也触发）
5. mouseout() 鼠标离开（离开子元素也触发）
6. ready() DOM加载完成

    <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        $(function(){
            // 获取所有标签
           var  $li=$('ul li');
            //  添加点击事件
            $li.click(function(){
                // 获取当前点击的标签对象
                // 原生js方法
                // this.style.color='red';
                // jQuery方法 此方法会覆盖原生的样式
                $(this).css({'color':'green'});
                // 获取标签索引
                alert($(this).index());
            });  
            // 获取button标签
            var $btn=$('#btn1');
            // 获取text标签
            var $txt=$('#txt1');
            $btn.click(function(){
                // 获取文本框的内容
                alert($txt.val());
            });
             // 给为文本框添加获取焦点事件
             $txt.focus(function(){
                //  获取焦点的文本框，设置样式属性
                 $(this).css({'background':'red'});
             });
            //  给text文本框添加失去焦点事件
            $txt.blur(function(){
                $(this).css({'background':'white'});
            });
            //获取标签div
            var $div=$('div');
            // 添加鼠标进入事件
            $div.mouseover(function(){
                // 给此标签设置样式
                $(this).css({'background':'gray'});
            });
            // 添加鼠标退出事件
            $div.mouseout(function(){
                $(this).css({'background':'white'});
            });

        });
    </script>
</head>
<body>
    <!-- jQuery常用事件 -->
    <div>
        <ul>
            <li>水果</li>
            <li>蔬菜</li>
            <li>面粉</li>
        </ul>
        <input type="text" id='txt1'>
        <input type="button" id='btn1' value='提交'>
    </div>

9.事件代理

事件代理初识
1. 事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向他的父级一级一级传递)，把事件加到父级上，遇过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

<!-- 冒泡事件 就是事件会一级一级上传递 -->
    <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        // 冒泡事件
        $(function(){
             // 获取标签
             var $btn=$('#btn1');
             var $div=$('div');
             $btn.click(function(){
                 alert('这是按钮');
                //  取消事件冒泡，不让事件向父级传递 用return false
                return false;
             });
            //  $div.click(function(){
            //      alert('这是div');
            //  });
        //事件代理 
        // 通过事件代理，让父控件代理子控件的事件，然后执行子控件的相关操作
            var $ul=$('div ul');
            $ul.delegate('li','click',function(){
                $(this).css({"color":"red"});
                return false;
            });
        //代理不同子控件的事件
            // 获取标签
            var $div1=$('div div');
            // 代理不同控件的事件
            $div1.delegate('#p2,btn2','click',function(){
                alert($(this).html());
                return false;
            });

        });
    </script>
</head>
<body>
    <!-- 事件代理 -->
    <div>
        <P id='p1'>我是段落标签</P>
        <input type="button" value='按钮' id='btn1'>
        <ul>
            <li>1号</li>
            <li>2号</li>
            <li>3号</li>
        </ul>
        <div>
            <p id='p2'>这是段落</p>
            <input type="button" value='按钮' id='btn2'>
        </div>
    </div>

10.自定义的javascript对象

javascript对象初识
1. javascript 中的所有事物都是对象：字符串。数值，函数，等都可以认为是对象，此外javascript 允许自定义对象，对象可以拥有属性和方法。
javascript 创建对象操作：
1. 通过顶级Object类型来实例化一个对象
2. 通过对象字面量创建一个对象

  <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        // 自定义javascript有两种方式：
        // 1.顶级Object创建自定义对象 2.使用字面量创建自定义对象
    // 1.Object
        var oPerson=new Object();//创建对象
        oPerson.name='www';//添加属性
        oPerson.age=10;
        //添加方法
        oPerson.show=function(){
            alert('这是object创建对象的方法');
        }
        //通过对象获取属性
        alert(oPerson.name+oPerson.age);
        // 调用自定义对象的方法
        oPerson.show();
    //2.字面量创建自定义对象
        var oStu={
            name:'qqq',
            age:20,
            show:function(){
                alert('这是字面量创建对象的方法');
            }
        }
        // 通过对象获取属性和方法
        alert(oStu.name+oStu.age);
        //调用字面量创建对象的方法
        oStu.show();
    </script>

11.json

json 初识
1. json 是javascript object notation 的首字母缩写，翻译后大概就是javascript对象表示法，这里说的json就是类似于javascript对象的字符，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换了传统的xml数据格式。
json 的格式（有两种格式）：
1. 对象格式
  1. 对象格式的json数据，使用一对大括号{ }，里面是key:value 形式的键值对，多个键值对使用逗号，分割
  2. json中的属性名与字符串需要用双引号，用单引号或没有引号会导致读取数据错误
2. 数组格式
  1. 数组格式的json 数据，使用一对中括号【】，里面的数据使用逗号分割；
json 数据转换为javascript对象
1. json本质上是字符串，若在js中操作jsjon数据，可以将json字符串转换为javascript对象
2. JSON.parse()

<!-- json 是类似于javascript对象的字符串，本质上是一个字符串，同时还是一种数据格式 经常在web开发使用 -->
    <!-- 引入jQuery -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <script>
        //服务器把json数据给浏览器，当js解析json数据的时候为了方便，把json数据解析成一个javascript对象
        // 浏览器给python服务器的json数据，服务器会把数据解析成字典或数组
    // 对象格式的json数据
        var sJson='{"name":"www","age":10}';
        // 将json数据转换为javascript对象
        var oPer=JSON.parse(sJson);
        console.log(oPer);
        //获取属性数据
        alert(oPer.name+oPer.age);
    //数组格式的json数据
        var sJson1='[{"name":"qqq","age":12},{"name":"rrr","age":34}]';
        // 将json数据转换为javascript对象
        var aArray=JSON.parse(sJson1);
        console.log(aArray);
        // 获取下标指定的js对象，然后通过js对象获取属性
        console.log(aArray[1].name)
        alert(aArray[1].name);
    </script>

12.ajax

ajax初识
ajax 是一个前后台配合的技术，它可以让javascript发送异步的http请求，与后台通信进行数据的获取，ajax最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据(实现局部控件的绑定)实现局部刷新，在这里。当前端页面想和后台服务器进行数据交互就可以使用ajax了。
在html页面使用ajax需要在web服务器环境下运行，一般向自己的web服务器发送ajax请求
部署web服务器程序时需要包含python文件，图片资源，html资源(ajax),css,js
ajax的使用
1. jQuery 将它封装成一个方法$.ajax(),我们可以直接用这个方法执行ajax请求。
2. 参数说明：
  1. url 请求地址
  2. tyoe 请求方式，默认是’GET’,常用的还有’POST’
  3. dataType 设置返回值的数据格式，常用的是‘json’格式
  4. data 设置发送给服务器的数据，没有参数不需要设置
  5. success 设置请求成功后的回调函数
  6. error 设置请求失败后的回调函数
  7. async 设置是否异步，默认值是’true’,表示异步，一般不用写
  8. 同步与异步说明：
    1. 同步是一个ajax请求完成另一个才可以请求，需要等待上一个ajax请求完成，好比线程同步
    2. 异步是多个ajax同时请求，不需要等待其他ajax请求完成，好比线程异步
ajax的简写方式：
1. $.ajax按照请求方式可以简写成 $.get 或 $.post方式
  1. post方式请求结合服务端使用

   <!-- 引入ajax -->
    <script src='js/jquery-3.0.0.min.js'></script>
    <!-- 访问本地 当前文件地址 cmd-python -m http.server -->
    <script>
        //向web服务器发送ajax请求，本质上是一个http协议的请求
        // $.ajax({
        //     // 请求的资源地址，不指定ip地址和端口号表示请求的是自己的服务器资源数据
        //     url:"data.json",
        //     // 请求方式：GET,POST
        //     type:'GET',
        //     // 指定对服务器数据的解析格式
        //     dataType:'JSON',
        //     // data:表示发送给服务器的参数 一般不用写
        //     // success:请求成功执行的函数
        //     success:function(data){
        //         console.log(data.name+data.age);
        //         // 数据请求到后可以绑定给html中的某个标签控件，实现局部刷新
        //     },
        //     // 请求失败执行的函数
        //     error:function(data){
        //         alert('网络异常');
        //     },
        //     // 是否使用异步，默认不指定表示异步
        //     async:true
        // });
        // 发送get方式的ajax请求的简写方式
        //1.请求地址
        //2.请求传给wb服务器的参数
        //3.请求成功的回调函数
        //4.返回数据的解析方式
        $.get("data.json",{"name":"ddd"},function(data){
            // 如果按照json格式解析数据，js能得到一个javascript
            alert(data.name+data.age);
        },"JSON").error(function(){
            alert('网络异常');
        });
    </script>