jQuery Basic Knowledge
一、认识jQuery
1、什么是jQuery
jQuery是对原生JavaScript二次封装的工具函数集合
jQuery是一个简洁高效的且功能丰富的JavaScript工具库
2、jQuery的优势
完全开源的源代码
强大简洁的选择器
事件、样式、动画的良好支持
链式表达式
简化的Ajax操作
跨浏览器兼容
丰富的插件及对外的扩展接口
3、JavaScript和jquery的区别
Javascript是一门编程语言，我们用它来编写客户端浏览器脚本
jQuery是javascript的一个库，包含多个可重用的函数，用来辅助我们简化
javascript开发jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到
注意：一般情况下，是库的文件，该库中都会抛出来构造函数或者对象，如果是构造函数，那么使用new关键字创建对象，如果是对象直接调用属性和方法
二、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框架设置的所有功能的调用者，就是该框架产生的唯一对象
$是什么？ 就是jQuery对象，jQuery对象为window的全局属性，所以可以直接使用
jQuery.noConflict() ：自定义jQuery对象，如用JQ替换jQuery | $
var JQ = jQuery.noConflict();
JQ(‘.box‘).html("<b>嘿嘿</b>");
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树与资源完全加载完毕// jq的延迟加载: 文档树加载完毕, 即回调// $(document).ready(fn)多数据绑定，页面DOM树加载完毕，简写$(fn)// 1. 早于window.onload// 2. 可以多次绑定事件// 3. 可以简写为$(function() {})3、jQuery变量命名规范
通常以$开头
四、功能概括
1、选择器
var $ele = $(‘.ele‘);// $(css选择器语法)// eg: $(‘.box‘) 得到的是一个存放原生js对象的数组, 就是jq对象, 页面中有多少个.box, 该jq对象就承载者多少个对象,. 可以作为一个整体来使用
2、文本操作
$ele.text("添加文本");// 获取原有文本$box.text() | $box.html()// 设置新文本$box.text(‘newData‘) | $box.html(‘<b>newData</b>‘)3、样式操作
$ele.css({width: ‘200px‘, heigth: ‘200px‘});$ele.css(‘background-color‘, ‘red‘).css(‘border-radius‘, ‘50%‘);$box.css(‘background-color‘) ?// 获取背景颜色$box.css(‘background-color‘, ‘red‘) ?// 设置背景颜色$box.css(‘background-color‘, function() {return ‘yellow‘}) ?// 通过函数返回值设置背景颜色4、类名操作
$ele.toggleClass(‘active‘);$box.addClass("newClass") // 添加一个新类名$box.removeClass("oldClass") // 删除一个已有的类名// 多类名时,jq操作类名将每个类名最为单一考虑对象,不会影响其他类名5、事件操作
$ele.on(‘click‘, function() {});// $box为jq对象$box.click(function(ev) { ???})// 注: jq对象如果包含多个页面元素对象, 可以一次性对所有对象绑定该事件// ev事件为jq事件, 兼容js事件// this为js对象, $(this)就转换为jq对象// 内部可以通过$(this).index()获取自身在当前结构下的索引(从0开始)6、动画操作
$ele.slideUp();
7、文档操作与文档结构关系
$ele.append("<b>Hello</b>");// 父$sup.parent()// 父,父的父...$sup.parents()// 子们$sup.children() *****// 上兄弟$sup.prev() ?***// 上兄弟们$sup.prevAll()// 下兄弟$sup.next() ?***// 下兄弟们$sup.nextAll()// 同级别的兄弟们$sup.siblings() ?***// 在sup下查找类名为inner的子级$sup.children(‘.inner‘)// 获得的结果都是jq对象, 还可以接着使用jq方法五、JQ对象与JS对象
// js对象: box ?jq对象: $box// 将js对象转换为jq对象: $(box)// 将jq对象转换为js对象: $box[index]//第一种方式：$(‘box‘)[0]//第二种方式：$(‘box‘).get(0)
六、Ajax
server.py
from flask import Flask, requestfrom flask_cors import CORSapp = 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及Flask-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的使用
// 轮播图框架
未完待续
jQuery相关知识
原文地址：https://www.cnblogs.com/wanlei/p/10181914.html