DAY61-前端入门-javascript（八）jQurey

JQ初级

一、认识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

官网下载

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

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对象

jQuery
$
jQuery.noConflict()
window.jQuery

<script type="text/javascript">
	console.log(jQuery);
	console.log($);
	console.log(window.jQuery);
	console.log(jQuery.noConflict());
</script>

注：当使用jq时,jq符号$与其他框架或插件符号发生冲突,可以通过jQuery.noConflict()修改jq符号

var __$ = jQuery.noConflict();
console.log(__$);

2、页面加载

<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
<script>
    //页面DOM树与资源完全加载完毕才执行，并且只能绑定一个(逻辑下方的)回调函数
	window.onload = function() {
		console.log("window load 1");
	};
	window.onload = function() {
		console.log("window load 2");
	};
    
    //页面DOM树加载完毕就执行，可以绑定多个
	$(document).ready(function() {
		console.log("document load 1");
	});
    //简写
    $(function() {
		console.log("document load 3");
	});
</script>

3、jQuery变量命名规范

通常以$开头

四、功能概括

1、选择器: 满足css选择器语法

var $div = $('body #d1'); | var $div = $('.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、类名操作

$div.toggleClass("active");

5、事件操作

$div.on('click', function () {
	console.log("$div 被点击了");
})

$div.click(function () {
	console.log("$div 被点击了");
})

注：$ele.on('click',fn()) 和 $ele.click()是不一样：

onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。
click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件
click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；
onclick则是给这个id注册一种行为，可以重复触发
click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件。
$ele.click()这种方法不支持给动态元素或样式绑定事件。

6、动画操作

//slide 滑动
// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
// 可选的 callback 参数是滑动完成后所执行的函数名称。

// 仅向上滑动
$div.slideUp(speed,callback);
// 仅向下滑动
$div.slideDown(speed,callback);
// slideDown() 与 slideUp() 方法之间进行切换。
$div.slideToggle(speed,callback);

7、文档操作

var $div = $('body #d1');
// 创建标签
var $p = $("<p></p>");
// 样式操作
$p.addClass("p");
// 添加到页面标签$div的内部最后
$div.append($p);

五、JQ对象与JS对象

js对象转换为jq对象：$ele = $(ele);
jq对象转换为js对象：ele = ele.get(0);

六、Ajax

server.py

#安装Flask及Fllask-Cors包
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)
    user = request.args['usr']
    pwd = request.args['ps']
    print(user,pwd)
    if user == 'xcq' and pwd == '123':
        return '登陆成功'
    else:
        return '登录失败'


if __name__ == '__main__':
    app.run()

client.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>ajax</title>
</head>
<body>
	<h1>登录</h1>
	<hr>
	<form action="">
		<label>账号:</label><input class="txt" type="text" name='usr'>
		<hr>
		<label>密码:</label><input class="ps" type="password" name="ps">
		<hr>
		<button type="submit">登录</button>
	</form>
	
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	$("form").on("submit", function () {
		console.log(123);
		var usr = $('.txt').val();
		var ps = $('.ps').val();
		console.log(usr, ps);
		// 将数据提交给后台 => ajax

		$.ajax({
			url: "http://127.0.0.1:5000/loginAction",
			data: {
				usr: usr,
				ps: ps	
			},
			success: function (data) {
				$('h1').text(data);
			}
		})

		return false;
	});

</script>
</html>

七、轮播图

简易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的使用