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>
<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()
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");
};
window.onload = function() {
console.log("window load 2");
};
$(document).ready(function() {
console.log("document load 1");
});
$(function() {
console.log("document load 3");
});
</script>
// window.onload=fn单事件绑定，页面DOM树与资源完全加载完毕
// $(document).ready(fn)多事件绑定，页面DOM树加载完毕，简写$(fn)
3、jQuery变量命名规范
- 通常以$开头
四、功能概括
1、选择器
var $ele = $('.ele');
2、文本操作
$ele.text("添加文本");
3、样式操作
$ele.css({width: '200px', heigth: '200px'});
$ele.css('background-color', 'red').css('border-radius', '50%');
4、类名操作
$ele.toggleClass('active');
5、事件操作
$ele.on('click', function() {});
6、动画操作
$ele.slideUp();
7、文档操作
$ele.append("<b>Hello</b>");
五、JQ对象与JS对象
- js对象转换为jq对象：
(ele);
- jq对象转换为js对象：ele = ele.get(0);
六、Ajax
- server.py
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
def test_action():
usr = request.args['usr']
ps = request.args['ps']
if usr != 'zero' or ps != '123456':
return 'login failed'
return 'login success'
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/testAction",
data: {
usr: "zero",
ps: "123456"
},
success: function (data) {
console.log(data);
}
});
</script>
七、轮播图
- 简易jQuery版
<style type="text/css">
.wrap {
width: 300px;
height: 200px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
ul {
width: 1200px;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
li {
width: 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的使用
上课代码：
页面加载：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>页面加载</title>
<!-- 导入jq -->
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// js页面加载完毕后,触发的事件回调方法
window.onload = function () {
console.log("window load 1");
}
window.onload = function () {
console.log("window load 2"); // 5
var div = document.querySelector('.div');
console.log(div);
}
// 只能绑定一个(逻辑下方的)回调函数
// 页面加载完毕后回调
// jq文档加载完毕
$(document).ready(function () {
console.log('document load 1'); // 2
})
$(document).ready(function () {
console.log('document load 2'); // 3
})
// 简写
$(function () {
console.log('document load 3'); // 4
})
console.log('normal load'); // 1
</script>
</head>
<body>
<div class="div"></div>
<img src="http://onehdwallpaper.com/wp-content/uploads/2015/11/Most-Beautiful-Girl-in-Flowers-Field.jpg"/>
</body>
</html>
jq功能汇总：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>jq功能汇总</title>
<style type="text/css">
.active {
border: 5px solid black;
}
p {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button class="b1">d1</button><button class="b2">d2</button>
<div id="d1" class="div1"></div>
<div id="d2" class="div2"></div>
</body>
<!-- 导入jq -->
<script src="js/jquery-3.3.1.js"></script>
<!-- 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({
width: "200px",
"border-radius": "50%"
});
// jq的方法基本都具有返回值,所以支持(建议)链式操作
/*
$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会默认添加单位
});
$div.css("background-color", "red");
*/
$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.类名操作
$('.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";
}
}
</script>
</html>
js与jq对象相互转化：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>对象转化</title>
<style type="text/css">
.div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var $div = $('div');
// jq => js
// innerText
var div = $div[0];
div.innerText = "呵呵";
// js => jq
// addClass
var $n_div = $(div);
$n_div.addClass("div");
</script>
</html>
AJAX
client_ajax.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">
// 如果登录成功,h1显示登录成功
// 如何登录失败,h1显示登录失败
$("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>
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()
