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

day57的更多相关文章

  1. day57作业(包含data内容)

    day57作业 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&quo ...

  2. day57——视图、模板渲染

    day57 视图 网页:https://www.cnblogs.com/clschao/articles/10409764.html django官方文档:https://docs.djangopro ...

  3. day57:00:26:34

    今天开始用博客记录倒计时,也只是为了看看今天做了什么.这也是我第一用博客园记录考研生活了 倒计时57天,我在想每天花时间在这记录生活会不会浪费复习的时间,其实不会的了,不去看微博,少刷新闻....仔细 ...

  4. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  5. Bootstrap 框架 day57

    Bootstrap框架  Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包 ...

  6. js实现动态删除表格的行或者列-------Day57

    昨天记录了动态加入表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,而且第几列的内容都能够加入上,先来回想下它的实现的关键点: 1.var row=table.insertRow() ...

  7. 100天搞定机器学习|Day57 Adaboost知识手册(理论篇)

    Boosting算法 Boosting是一种用来提高弱分类器准确度的算法,是将"弱学习算法"提升为"强学习算法"的过程,主要思想是"三个臭皮匠顶个诸葛 ...

  8. (day57)九、多对多创建的三种方式、Forms组件

    目录 一.多对多三种创建方式 (一)全自动 (二)纯手撸(基本不用) (三)半自动(推荐使用) 二.forms组件 (一)校验数据 (1)常用内置字段及参数 (2)内置的校验器 (3)HOOK方法 ( ...

  9. day57 choise字段与ajax

    一.choice字段. 在django的orm中,创建如同性别,民.族等可选择的字段时,可以选择使用choice字段进行定义. 这样的定义可以使用简单的数字代替数据量大的字符,减少数据库的负担. ch ...

随机推荐

  1. JAVA后端笔试试题(一)

    2017年6月7日,天气晴转阴.心情还不错. 上周六参加了自己的第一场笔试,感觉很糟糕,主要是对基础知识掌握不扎实,现在把笔试中的部分问题总结归纳如下,便于以后查看. 1.GC是什么?为什么要GC? ...

  2. bower 和 npm 的区别详细介绍

    摘要: 本文讲的是bower 和 npm 的区别详细介绍, 简单的说,npm是进行后端开发中,使用的模块安装工具,而bower,是前端的模块安装工具. 比如,在安装express,socket.io时 ...

  3. SD从零开始05-06

    SD从零开始5 从库存销售 销售凭证类型Sales document type: 用来鉴别和控制不同的业务流程类型: 标准的销售凭证类型: standard order: Rush order: Ca ...

  4. MySql 正则表达式简介及使用

    MySql正则表达式简介及使用 by:授客 QQ:1033553122 简介 正则表达式描述了一组字符串,该字符放置于REGEXP工具后面.作用是将一个正则表达式与一个文本串进行比较. 最简单的正则表 ...

  5. Ubuntu 安装hive + mysql

    先安装mysql sudo apt-get update sudo apt-get install mysql-server sudo mysql_secure_installation具体详情请另查 ...

  6. iOS手机流量抓包rvictl

    移动设备抓包主要方式 一.PC上设置网络共享,生成Wi-Fi热点供移动设备使用,PC上再使用tcpdump.Wireshark等捕获分析: 二.PC上开启http代理工具服务器(如Charles.fi ...

  7. Azure 中的虚拟网络和虚拟机

    创建 Azure 虚拟机 (VM) 时,必须创建虚拟网络 (VNet) 或使用现有的 VNet. 此外,还需要确定如何在 VNet 上访问 VM. 在创建资源之前必须做好规划,确保了解网络资源的限制. ...

  8. 使用 Azure PowerShell 监视和更新 Windows 虚拟机

    Azure 监视使用代理从 Azure VM 收集启动和性能数据,将此数据存储在 Azure 存储中,并使其可供通过门户.Azure PowerShell 模块和 Azure CLI 进行访问. 使用 ...

  9. Quick and Easy Installation of Oracle Database 12c on Oracle Linux in Oracle VM VirtualBox

    发贴人 Sergio-Oracle 于2018-4-18 23:10:15在Oracle Linux Introduction How Does This Work? Requirements Bef ...

  10. fab提供远程IP和账号密码

    #!/usr/bin/python #-*- coding: UTF-8 -*- from fabric.api import * from fabric.context_managers impor ...