前端之JQ初级-51

最新推荐文章于 2025-09-10 10:12:04 发布

weixin_34092455

最新推荐文章于 2025-09-10 10:12:04 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript python ViewUI

原文链接：http://www.cnblogs.com/jokezl/articles/10187460.html

前端之JQ初级-51

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)

@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包

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>