6 jQuery基础

1 jQuery基础

1. jQuery的介绍
jQuery是一个免费、开源的JavaScript函数库
jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
jQuery的优点就是兼容主流浏览器，代码编写更加简单。

2 jQuery的用法

2.1 jQuery的引入
http://code.jquery.com/
jQuery 1.x	 jQuery Core 1.12.4 - minified 版本

<script
        src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
        crossorigin="anonymous">
</script>


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

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    //  原生js写法
    window.onload = function(){
        //  当前页面的标签和标签使用的资源数据都加载完成，onload事件才会触发
        var oDiv = document.getElementById("div1");
        alert(oDiv);
    };
    //  $符号就是jquery的象征
    //  $本质是就是函数，只不过这个函数名($)
    $(document).ready(function(){
        //  获取标签和css样式匹配标签的规则一样
        //  以后使用jquery，变量名都要以$符号开头
        var $div = $("#div1");
        alert($div)
    });
    //  jquery的简写方式
    $(function(){
        var $div = $("#div1");
        alert($div)
    })

    // ready 等待页面标签加载完成以后就执行ready事件， 不会等待资源数据加载完成
</script>
<div id="div01">这是一个div</div>

3 jQuery选择器

jQuery选择器的种类
	标签选择器: $('li') //选择所有的li标签
	类选择器: $('#myId') //选择id为myId的标签
	id选择器: $('.myClass') // 选择class为myClass的标签
	层级选择器: $('#ul1 li span') //选择id为ul1标签下的所有li标签下的span标签
	属性选择器: $('input[name=first]') // 选择name属性等于first的input标签

4 选择集过滤

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

<script>
    $(function(){
        //  has方法的使用
        var $div = $("div").has("#mytext");
        //  设置样式
        $div.css({"background":"red"});
    });
    
        //  eq方法的使用
        var $div = $("div").eq(1);
        //  设置样式
        $div.css({"background":"yellow"});
</script>

<div>
    这是第一个div
    <input type="text" id="mytext">
</div>

<div>
    这是第二个div
    <input type="text">
    <input type="button">
</div>

5 选择集转移

$('#box').prev(); 表示选择id是box元素的上一个的同级元素
$('#box').prevAll(); 表示选择id是box元素的上面所有的同级元素
$('#box').next(); 表示选择id是box元素的下一个的同级元素
$('#box').nextAll(); 表示选择id是box元素的下面所有的同级元素
$('#box').parent(); 表示选择id是box元素的父元素
$('#box').children(); 表示选择id是box元素的所有子元素
$('#box').siblings(); 表示选择id是box元素的其它同级元素
$('#box').find('.myClass'); 表示选择id是box元素的class等于myClass的元素

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

<!-- 选择集转移: 根据指定标签为参照物，选中其它标签，这种操作叫做选择集转移 -->
<script>
    $(function(){
        //  获取div，并把div作为参照物，获取其它标签
        var $div = $("#box1")
        //  css 参数是一个js对象，js对象和python里面字典很类似
        //  属性名和css里面的属性名保存一致
        //  选择上一个同级标签
        $div.prev().css({"color": "red", "font-size": "25px"});
        //  选择上面所有的同级标签
        $div.prevAll().css({"text-indent": "50px"});
        //  选择下一个同级标签
        $div.next().css({"color": "green"});
        //  选择下面所有的同级标签
        $div.nextAll().css({"text-indent": "50px"})
        //  选择同级的其它标签
        $div.siblings().css({"text-decoration":"underline"});
        //  选择父标签
        $div.parent().css({"background": "gray"});
        //  获取所有的子标签
        $div.children().css({"color": "red"});
        //  查找指定的子标签
        $div.find(".sp1").css({"color": "green"})

    })
</script>


小结
prev() 表示获取上一个同级元素
prevAll() 表示获取上面所有同级元素
next() 表示获取下一个同级元素
nextAll() 表示获取下面所有同级元素
parent() 表示获取父元素
children() 表示获取所有的子元素
siblings() 表示获取其它同级元素
find("选择器名称") 表示获取指定选择器的元素

6 获取和设置元素内容

jquery中的html方法可以获取和设置标签的html内容
给指定标签追加html内容使用append方法

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        //  获取标签
        var $div = $("div");
        //  jquery的方式获取标签内容
        alert($div.html());
        //  设置标签内容
        $div.html("<a href='https://www.baidu.com'>百度</a>");
        //  扩展: 追加内容
        $div.append("<a href='https://www.baidu.com'>谷歌</a>")
    });
</script>

7 获取和设置元素属性

prop方法的使用
之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

<script src="js/jquery-1.12.4.min.js"></script>
<script>
    $(function(){
        //  获取标签
        var $p = $("p");
        var $text = $("#txt1");
        //  获取样式属性，比如:获取字体大小
        var $px = $p.css("font-size");
        alert($px);
        //  设置样式属性
        $p.css({"font-size":"30px", "background":"green"});
        //  除了样式属性的相关操作使用css方法，其它属性的操作都是prop方法
        //  获取属性
        var $name = $text.prop("name");
        alert($name);
        var $type = $text.prop("type");
        alert($type);

        //  设置属性
        $text.prop({"value":"张三", "class":"tname"});
        //  获取value属性可以使用val方法
        alert($text.prop("value"));
        //  使用val方法获取value属性
        alert($text.val())
        //  使用val方法设置value属性
        $text.val("王五");
    });
</script>

8 事件代理

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

<script>
   $(function(){
       var $div1 = $('#div1');
       var $div2 = $('#div2');
       $div1.click(function(){
           alert($(this).html());
       }); 
       $div2.click(function(){
           alert($(this).html());
       }); 
   });
</script>

<div id="div1" style="width:200px; height:200px; background: red;">
    <div id="div2" style="width:100px; height:100px;background: yellow;">
        哈哈
    </div>
</div>


$(function(){
    $list = $('#list');
    // 父元素ul 来代理 子元素li的点击事件
    $list.delegate('li,p', 'click', function() {
        // $(this)表示当前点击的子元素对象
        $(this).css({background:'red'});
    });
})

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <p>5</p>
</ul>

9 javascript 对象

创建自定义javascript对象有两种方式:
	通过顶级Object类型来实例化一个对象
	通过对象字面量创建一个对象

Object类创建对象的示例代码:
<script>
    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 调用属性和方法：
    alert(person.age);
    person.sayName();
</script>


对象字面量创建对象的示例代码:
<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();
</script>

10 json

json有两种格式：
	对象格式
	数组格式
	
对象格式的json数据:
{
    "name":"tom",
    "age":18
}
数组格式的json数据:
["tom",18,"programmer"]


json数据转换成JavaScript对象
json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

var sJson = '{"name":"tom","age":18}';
var oPerson = JSON.parse(sJson);
// 操作属性
alert(oPerson.name);
alert(oPerson.age);

11 ajax

1. ajax的介绍
ajax一个前后台配合的技术,可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，
ajax 最大的优点是实现局部刷新,当前端页面想和后台服务器进行数据交互就可以使用ajax了。

2. ajax的使用
jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置
​
    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
	});

    /*
    ajax的post方法缩写版
     1. url 请求地址
     2. data 设置发送给服务器的数据, 没有参数不需要设置
     3. success 设置请求成功后的回调函数
     4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
    */ 
    $.post("test.php", {"func": "getNameAndTime"}, function(data){
        alert(data.name); 
        console.log(data.time); 
    }, "json").error(function(){
        alert("网络异常");
    }); 

	// ajax的 get方法缩写版
    $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
        console.log(dat);
        console.log(status);
        alert(dat);
    }, "json").error(function(){
        alert("网络异常");
    });

</script>

ajax方法的参数说明:
	url 请求地址
	type 请求方式，默认是'GET'，常用的还有'POST'
	dataType 设置返回的数据格式，常用的是'json'格式
	data 设置发送给服务器的数据，没有参数不需要设置
	success 设置请求成功后的回调函数
	error 设置请求失败后的回调函数
	async 设置是否异步，默认值是'true'，表示异步，一般不用写
同步和异步说明
	同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
	异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。