前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

一、认识jQuery

1、什么是jQuery

• jQuery是对原生JavaScript二次封装的工具函数集合
• jQuery是一个简洁高效的且功能丰富的JavaScript工具库

2、jQuery的优势

• 完全开源的源代码
• 强大简洁的选择器
• 事件、样式、动画的良好支持
• 链式表达式
• 简化的Ajax操作
• 跨浏览器兼容
• 丰富的插件及对外的扩展接口

二、jQuery的安装

1、版本

• 开发(development)版本：jQuery-x.x.x.js
• 生产(production)版本：jQuery-x.x.x.min.js

2、安装jQuery-3.3.1

官网下载(将jQuery下载到本地，使用时将其连接进即可)

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
	// user code
</script>

CDN(一旦CDN的地址改变，就要及时更新地址，因此不推荐)

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	// user code
</script>

三、jQuery基本使用

1、JQuery对象

包含jq所有功能和悟性的对象，可以自定义对象名字

• jQuery
• $
• jQuery.noConflict()

2、页面加载

<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
<script>
	window.onload = function() {
		console.log("window load 1");
	};
    // 页面DOM数及文本标签资源完全加载完毕才能回调
	window.onload = function() {
		console.log("window load 2");
	};
    
    // DOM数加载完毕就回调
	$(document).ready(function() {
		console.log("document load 1");
	});
    // $(function(){}) 是 $(document).ready(function() {} 的简写
    $(function() {
		console.log("document load 3");
	});
</script>

总结：
1. window.onload=fn只能绑定一个事件，页面DOM树与资源完全加载完毕
2. $(document).ready(fn)可以绑定多个事件，页面DOM树加载完毕，简写$(fn)

3、jQuery变量命名规范

• 通常以$开头

四、功能概括

1、选择器

// 满足CSS语法：  . | # | *
var $ele = $('.ele');

2、文本操作

$ele.text("添加文本");
$ele.html('文本内容')

3、样式操作

$ele.css({ '200px', heigth: '200px'});
// background-color 不加引号，会报非法字符，因此用 - 连接的属性要用引号包起来
$ele.css('background-color', 'red').css('border-radius', '50%');

// 高是宽的两倍
$div = $div.css("height", function () {
	console.log("js>>>", this);  // js的this本身
	console.log("jq>>>", $(this));  // jq的this本身
	console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
	return $(this).width() * 2;  // jq会默认添加单位
}).css("background-color", "red");

4、类名操作

$ele.toggleClass('active');   // 实现切换，有就改为无，无就改为有

5、事件操作

$ele.on('click', function() {});

6、动画操作

$ele.slideUp();

7、文档操作（DOM）

$ele.append("<b>Hello</b>");

8、JS与JQ功能对比

<script type="text/javascript">
	// 变量的命名规范:
	// jq变量一般由$开头

	// 1.jq的选择器: 满足css选择器语法
	// var $div = $('.div1');
	var $div = $('body #d1');
	console.log($div);

	// 2.文本操作
	$div.text("d1 d1 d1");
	$div.html("<b>d1 d1 d1</b>");

	// 3.样式操作
	$div.css({
		 "200px",
		"border-radius": "50%"
	});

	// jq的方法基本都具有返回值,所以支持(建议)链式操作
	$div.css("height", function () {
		console.log("js>>>", this);  // js的this本身
		console.log("jq>>>", $(this));  // jq的this本身
		console.log(">>>", $(this).width());  // jq对象指向的盒子宽度
		return $(this).width() * 2;  // jq会默认添加单位
	}).css("background-color", "red");

	// 4.类名操作，toggleClass，有改类名则删除，没有则添加类名
	$('.b1').click(function () {
		$div.toggleClass("active");
	})

	// 5.事件操作
	$div.on('click', function () {
		console.log("$div 被点击了");
	})

	// 6.动画操作
	$('.b1').on('click', function () {
		$div.slideToggle();
	})

	// 7.文档操作
	// 创建标签
	var $p = $("<p></p>");
	// 样式操作
	$p.addClass("p");
	// 添加到页面
	$div.append($p);

</script>

<!-- js -->
<script type="text/javascript">
	// 1.选择器
	var div = document.querySelector('.div2');
	console.log(div);
    
	// 2.文本操作
	div.innerText = "d2 d2 d2";
	div.innerHTML = "<b>d2 d2 d2</b>";
    
	// 3.样式操作
	div.style.width = "200px";
	div.style.height = "200px";
	div.style.background = "orange";
	div.style.borderRadius = "50%";

	// 4.类名操作
	var b2 = document.querySelector('.b2');
	b2.onclick = function () {
		var c_name = div.className;
		if (c_name.match("active")) {
			div.className = c_name.replace(" active", "")
		} else {
			div.className += " active";
		}
	}
    
    // 5.事件操作
    // 绑定事件的两种方法：div.onclick = function(){}  |  div.addEventListener('click',function(){})
    
    // 6.动画
    // 实现动画两种方式：更改样式实现动画；更改类名来实现动画
</script>

五、JQ对象与JS对象

• js对象====>转换为jq对象：$ele = $(ele);
• jq对象====>转换为js对象：ele = $ele.get(0) | ele = $ele[0]

六、Ajax

• server.py

from flask import Flask, request
from flask_cors import CORS
# 获取服务器对象
app = Flask(__name__)

# 解决跨域
CORS(app, supports_credentials=True)

# 定义接口事件
@app.route('/loginAction', methods=["GET", "POST"])
def login_action():
    print(request.args)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr == "abc" and ps == "123":
        return "登录成功"
    return "登录失败"

if __name__ == '__main__':
    app.run()
    
// 安装Flask及Fllask-Cors包

• client.html

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
	$.ajax({
		url: "http://127.0.0.1:5000/loginAction",
		data: {
			usr: "zero",
			ps: "123456"
		},
		success: function (data) {
			console.log(data);
		}
	});
</script>

七、轮播图

• 简易jQuery版

<style type="text/css">
    .wrap {
         300px;
        height: 200px;
        border: 1px solid black;
        overflow: hidden;
        position: relative;
    }
    	
    ul {
         1200px;
        height: 200px;
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
        left: 0;
    }
        
    li {
         300px;
        height: 200px;
        float: left;
        font: bold 100px/200px arial;
        text-align: center;
        color: white;
    }
</style>

<div class="wrap">
    <ul>
        <li style="background:red;">1</li>
        <li style="background:orange;">2</li>
        <li style="background:pink;">3</li>
        <li style="background:cyan;">4</li>
    </ul>
</div>
<div>
    <input type="button" value="图1" />
    <input type="button" value="图2" />
    <input type="button" value="图3" />
    <input type="button" value="图4" />
</div>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $('input').click(function() {
        $('ul').animate({
            'left': -$(this).index() * $('li').width()
        }, 500);
    })
</script>

• swiper的使用