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()
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
from flask import Flask, request
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route('/testAction', method=['GET', 'POST'])
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包
<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>
七、輪播圖
<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>
