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()
- 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的使用