//参考文档 jquery API: "http://jquery.cuishifeng.cn/css.html"
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>属性操做</title> </head> <body> <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=499418075,2365134365&fm=26&gp=0.jpg" alt=""> </body> <!--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>--> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> <script> // console.log(jQuery) //和$同属于jQuery对象,里面是整个文档(模块/库) // console.log($) let new_img_src = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1101396331,1808533212&fm=26&gp=0.jpg"; $('img').click(function (event) { // console.log(event) //js操做 // console.log(this.getAttribute('src')); //获取当前对象的属性值 // this.setAttribute('src', new_img_src); //设置对象属性值,用新属性替换旧属性 //jq操做 // console.log($(this).attr('src')); //获取当期对象的属性值。this就是img标签 $(this).attr('src', new_img_src); //设置当前对象的属性值,直接用attr方法进行新旧属性的替换 console.log($(this).css('background')); //经过css样式能够获取当前对象的背景属性的值(字符串类型),其中包含了rgba(n, n, n, n)这个值,"n"是0到255的数字类型。 }) </script> </html>
1.实现链式编程的核心,是对象中的每个方法都会返回当前对象javascript
2.在方法中,js提供一个this的关键字,表示当前对象,this是实现链式编程的核心css
<script> var obj = { 属性:属性值 // name: "obj_name" 方法名:function () { // console.log(this); //打印当前自身对象 // console.log(this.name); //调用自身对象的属性 函数体; return this; //实现链式编程的原理,就是在调用方法后,返回自身对象 } } </script>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq的链式操做</title> </head> <body> <h1>jq的链式操做对象</h1> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // jq函数的执行结果若是不是明确的 内容 | 子标签 | 属性值 ...,均返回的是对象自己 // css:访问匹配元素的样式属性,好比颜色、宽高、背景... // attr:设置或返回被选元素的属性值,好比标签内部的src属性、title属性、style属性... // 回顾:标签对象的innerHTML属性能够获取到标签中的内容,且会过滤HTML语法 $('h1').css('color', 'blue').click(function () { alert('hello world') console.log(this) console.log(this.innerHTML) }).attr('title', 'hello').css({"background": "red"}) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq建立文档</title> <style> //设置盒子样式 .box { width: 200px; height: 200px; background-color: orange; float: left; } </style> </head> <body> <h1>生成一个box</h1> <!--<div class="box"></div>--> <!--<div class="box"></div>--> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> //经过let声明获得一个能够随机生成整数的函数变量 let randomNum = (min, max) => { return parseInt(Math.random() * (max - min + 1) + min) }; //再声明一个函数变量,这个变量调用时,会经过调用随机数函数来获得4个随机数,并将这4个数和rgba拼接,而后返回 let getRandomColor = () => { r = randomNum(0, 255); g = randomNum(0, 255); b = randomNum(0, 255); a = randomNum(0, 255); return 'rgba( '+ r +', '+ g +', '+ b +', '+ a +' )'; //最后绑定事件 $('h1').click(function () { // 点击一下,生成一个box // 1)建立一个标签节点 let $box = $('<div class="box"></div>'); // 2)设置标签节点(样式、内容、事件) $box.css('background', getRandomColor()).click(function () { console.log($(this).css('background-color')) }); // 3)将标签节点添加到页面指定位置 $('body').append($box); }) </script> </html>
1.$(父对象).append($(子对象):将子对象添加到父对象中最后面html
2.$(父对象).prepend($(子对象):将子对象添加到父对象中最前面java
3.$(子对象).clone().prependTo($(父对象)):复制一个子对象,将副本添加到父对象中最前面python
4.$(兄弟对象).after($(目标对象)):将目标对象放在兄弟对象后面jquery
5.$(兄弟对象).before($(目标对象)):将目标对象放在兄弟对象前面ajax
6.$(对象).empty():清空对象内部内容以及它的子标签编程
7.$(对象).remove():不保留事件等属性,而后删除自身。通常须要先将这个对象赋值给变量,而后配合append()来使用,才能看出效果。json
8.$(对象).detach():保留事件等属性,而后删除自身。和remove用法一致,通常做为对比,来分状况使用。flask
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档操做</title> </head> <body> <b class="b1">加粗</b> <p class="p1"> <span>原内容</span> </p> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // 父在最后加子 $('.p1').append($('.b1')); // 父在最前加子 // $('.p1').prepend($('.b1')); // 产生一个副本(本体就不参与操做),添加到父的最前 // $('.b1').clone().prependTo($('.p1')); // 添加后兄弟 // $('.p1').after($('.b1')); // 添加前兄弟 // $('.p1').before($('.b1')); $('.b1').click(function () { alert(1) }); // 清空内部内容与子标签 // $('.p1').empty(); // 不保留事件等的删除自身 // let $b1 = $('.b1').remove(); // 保留事件等的删除自身 let $b1 = $('.b1').detach(); $('.p1').append($b1); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jq的文档关系</title> </head> <body> <div class="wrap"> <p class="p0">0</p> <p class="p1">1</p> <p class="t"> <a href="">2</a> <a href="">2</a> </p> <p class="p3">3</p> <p class="p4">4</p> </div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> // 1)从一个含有多个js对象的jq对象中取出只装有一个js对象的jq对象 // $('p')是三个p,只想拿第2个p // console.log($('p')); // console.log($('p').eq(1)); //根据索引,获取指定对象 // console.log($('p.t')); let $p = $('p.t'); console.log($p.children()); console.log($p.parent()); console.log($p.parents()); console.log($p.next()); console.log($p.nextAll()); //先后相邻的对象 console.log($p.prev()); //前一个对象 console.log($p.prevAll()); console.log($p.siblings()); //兄弟对象 </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>布局案例</title> <link rel="stylesheet" href="css/reset.css"> <style> .scroll-view { width: 1226px; height: 460px; background-color: orange; margin: 50px auto 0; position: relative; } .scroll-menu { position: absolute; background-color: rgba(0, 0, 0, 0.5); width: 234px; padding: 20px 0; } .scroll-menu a { display: block; /*height: 42px;*/ line-height: 42px; color: white; /*padding-left: 30px;*/ text-indent: 30px; } .scroll-menu a span { /*参考的不是a,是ul*/ position: absolute; right: 20px; } .scroll-menu a:hover { background-color: red; } .scroll-menu-blank { width: calc(1226px - 234px); height: 460px; background-color: red; /*参考的是ul*/ position: absolute; top: 0; left: 234px; display: none; } .scroll-menu li:hover ~ .scroll-menu-blank { display: block; } .scroll-menu-blank:hover { display: block; } </style> <style> .scroll-view { width: 1226px; position: relative; } .scroll-scroll { width: 1226px; height: 460px; position: absolute; } .scroll-img li { position: absolute; } .scroll-img a { display: block; } .scroll-img a img { width: 100%; } </style> <style> .scroll-btn div { position: absolute; width: 40px; height: 70px; font-size: 30px; line-height: 70px; text-align: center; color: rgba(0, 0, 0, 0.1); cursor: pointer; } .scroll-btn div:hover { background-color: rgba(0, 0, 0, 0.4); color: white; } .scroll-btn-left { top: calc(50% - 35px); left: 234px; } .scroll-btn-right { top: calc(50% - 35px); right: 0; } </style> <style> .scroll-point { width: 120px; height: 40px; /*background-color: orangered;*/ position: absolute; right: 10px; bottom: 0; } .scroll-point li { float: left; width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.6); margin-right: 10px; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); } .scroll-point li:hover { background-color: white; } </style> <style> .scroll-menu, .scroll-btn div, .scroll-point { z-index: 2; } .scroll-img li { opacity: 0; /*transition: .5s;*/ } .scroll-img li.active { opacity: 1; z-index: 1; } .scroll-point li.active { background-color: white; } </style> </head> <body> <div class="scroll-view"> <!--轮播图--> <div class="scroll-scroll"> <ul class="scroll-img"> <li class="active"> <a href="https://www.baidu.com"> <img src="img/001.png" alt=""> </a> </li> <li> <a href=""> <img src="img/002.png" alt=""> </a> </li> <li> <a href=""> <img src="img/003.png" alt=""> </a> </li> <li> <a href=""> <img src="img/004.png" alt=""> </a> </li> <li> <a href=""> <img src="img/005.png" alt=""> </a> </li> </ul> <div class="scroll-btn"> <div class="scroll-btn-left"><</div> <div class="scroll-btn-right">></div> </div> <ul class="scroll-point"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <!--菜单栏--> <ul class="scroll-menu"> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <li> <a href=""> 手机电话卡 <span>></span> </a> </li> <div class="scroll-menu-blank"> </div> </ul> </div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> let currentIndex = 0; // 上一张 $('.scroll-btn-left').click(function () { console.log('上一张'); currentIndex--; if (currentIndex < 0) currentIndex = 4; $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active'); $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active'); }); // 下一张 $('.scroll-btn-right').click(function () { console.log('下一张'); currentIndex++; if (currentIndex >= 5) currentIndex = 0; $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active'); $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active'); }); // 第几张 $('.scroll-point li').click(function () { index = $(this).index(); console.log('第%d张', index); currentIndex = index; $(this).addClass('active').siblings().removeClass('active'); $('.scroll-img li').eq(index).addClass('active').siblings().removeClass('active'); }) </script> <script> // console.log(currentIndex); // 一次性定时器:setTimeout(fn, 时间) /* setTimeout(function () { currentIndex++; if (currentIndex >= 5) currentIndex = 0; $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active'); $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active'); }, 1000); */ // 持续性定时器 let timer = null; function startScroll() { timer = setInterval(function () { currentIndex++; if (currentIndex >= 5) currentIndex = 0; $('.scroll-point li').eq(currentIndex).addClass('active').siblings().removeClass('active'); $('.scroll-img li').eq(currentIndex).addClass('active').siblings().removeClass('active'); }, 3500); } startScroll(); // 清除定时器 // clearInterval(timer); // clearTimeout(timer); function stopScroll() { clearInterval(timer); } // 悬浮中止轮播 $('.scroll-view').mouseover(function () { stopScroll(); }); // 移开从新轮播 $('.scroll-view').mouseout(function () { startScroll(); }); </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/reset.css"> <style> .menu { width: 1226px; margin: 0 auto; } .menu-title { width: 100%; /*height: 40px;*/ background-color: #ccc; } .menu-title:after { content: ''; display: block; clear: both; } .menu-title .l { float: left; } .menu-title .r { float: right; } .menu-title .r li { float: left; margin-right: 20px; /*line-height: 40px;*/ cursor: pointer; padding-top: 10px; } .menu-title .r li:hover, .menu-title .r li.active { color: orangered; border-bottom: 2px solid orangered; } .menu-context { width: 100%; /*height: 220px;*/ background-color: pink; } .menu-context:after { content: ''; display: block; clear: both; } .menu-context li { width: 50%; float: left; height: 220px; border-radius: 50%; background-color: cyan; } .menu-context li a { display: block; font: bold 60px/220px '微软雅黑'; text-align: center; color: red; } </style> </head> <body> <div class="menu"> <ul class="menu-title"> <li class="l"> <h1>电子产品</h1> </li> <li class="r"> <ul> <li class="active"> <span>电视</span> </li> <li> <span>手机</span> </li> <li> <span>电脑</span> </li> </ul> </li> </ul> <ul class="menu-context"> <li> <a href="https://www.baidu.com">电视1</a> </li> <li> <a href="https://www.baidu.com">电视2</a> </li> </ul> </div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> data = [ [ { ctx: '电视1', url: 'https://www.baidu.com' }, { ctx: '电视2', url: 'https://www.baidu.com' }, ], [ { ctx: '手机1', url: 'https://www.sina.com.cn' }, { ctx: '手机2', url: 'https://www.sina.com.cn' }, ], [] ]; $('.menu-title .r li').mouseover(function () { $(this).addClass('active').siblings().removeClass('active'); let index = $(this).index(); let ul_data = data[index]; let as = $('.menu-context li a'); // console.log(ul_data); // console.log(as) // a个数与数据中字典的个数一致,依次赋值 for (let i = 0; i < ul_data.length; i++) { as.eq(i).attr('href', ul_data[i].url).text(ul_data[i].ctx); } }) </script> </html>
import socket server = socket.socket(socket.AF_INET, socket.SOCK_STREAM) server.bind(('127.0.0.1', 8801)) print('浏览器访问:http://127.0.0.1:8801') server.listen(5) conn, _ = server.accept() data = conn.recv(1024) print(data) # 响应必定要知足http协议 conn.send(b'HTTP1.1 200 OK\r\n\r\nhehe\r\n')
# pip3 install flask # pip3 install Flask-Cors from flask import Flask, request from flask_cors import CORS import json # 声明服务 server = Flask(__name__) # 解决ajax跨域没法拿到数据 CORS(server, supports_credentials=True) # 处理请求与响应的函数 @server.route('/') # "/" 根路由 def home(): return '<h1>Home Page</h1>' @server.route('/login') def login(): return '<h1>Login Page</h1>' @server.route('/data') def data(): print(request.args) print(request.args.get('username')) print(request.args.get('password')) res_data = { 'status': 0, 'msg': 'request success', 'data': { 'name': 'Owen', 'age': 18 } } return json.dumps(res_data) # 启动服务器 if __name__ == '__main__': server.run(host='localhost', port=8801)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head> <body> <h1>ajax请求</h1> <input type="text" name="username" id="username"> <input type="password" name="password" id="password"> <button type="button" class="btn">发送请求</button> </body> <script src="js/jquery-3.4.1.min.js"></script> <script> $('.btn').click(function () { username = $('#username').val(); password = $('#password').val(); // 有输入框没内容,直接结束事件,不日后台发送请求 if (!(username && password)) { return } // 代码如何日后台发送请求 $.ajax({ // 请求的路径 - 接口 url: 'http://localhost:8801/data', // 请求的方式 - get|post type: 'get', // 请求的数据 data: { username, password, }, // 请求成功的响应 success: function (response) { console.log(response, typeof response); obj = JSON.parse(response); console.log(obj, typeof obj); let name = obj.data.name; $('h1').text(name) }, // 请求失败的响应 error: function (error) { console.log(error); } }) }) </script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bs的引入</title> <link rel="stylesheet" href="bs/css/bootstrap.css"> </head> <body> <h1 class="bg-success">bs就是按照其规定的页面结构搭建标签</h1> <h2>给这些标签设置预约义好的类名,引入bs.css就能够直接得到提早写好的样式</h2> <h2>给这些标签设置预约义好的自定义属性,引入bs.js就能够直接得到提早写好的逻辑</h2> <h2>bs框架的js文件中采用的是jq语法,因此要使用bs.js要提早导入jq</h2> <h3>导入bs:本地导入 | CDN导入</h3> <div class="h1 bg-primary text-center">给.h1类名我就是h1样式</div> <div class="btn btn-primary btn-block">按钮</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bs运用</title> <link rel="stylesheet" href="bs/css/bootstrap.css"> <style> ul { list-style: none; margin: 0; padding: 0; } h1 { margin: 0; line-height: 60px; } .o-mn li { width: 25%; } .o-i { font-size: 40px; } </style> </head> <body> <h1 class="bg-primary text-center">bs运用</h1> <h2> <i class="o-i glyphicon glyphicon-heart"></i> <div class="glyphicon glyphicon-envelope"></div> </h2> <div class="box"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="https://www.baidu.com">稻草人</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Owen</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">我的中心 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">信息</a></li> <li><a href="#">修改密码</a></li> <li><a href="#">详情页面</a></li> <li role="separator" class="divider"></li> <li><a href="#">退出登陆</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" action="https://www.baidu.com/s"> <div class="form-group"> <input name="wd" type="text" class="form-control" placeholder="搜索内容"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <div class="box"> <div class="jumbotron"> <h1>Hello, world!</h1> <p>这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕</p> <p class="clearfix bg-primary"><a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn more</a></p> </div> </div> <ul class="o-mn clearfix"> <li class="pull-left"> <div class="thumbnail"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt=""> <div class="caption"> <h3>美女</h3> <p>美女海报</p> <p> <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a> <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a> </p> </div> </div> </li> <li class="pull-left"> <div class="thumbnail"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt=""> <div class="caption"> <h3>美女</h3> <p>美女海报</p> <p> <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a> <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a> </p> </div> </div> </li> <li class="pull-left"> <div class="thumbnail"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt=""> <div class="caption"> <h3>美女</h3> <p>美女海报</p> <p> <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a> <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a> </p> </div> </div> </li> <li class="pull-left"> <div class="thumbnail"> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt=""> <div class="caption"> <h3>美女</h3> <p>美女海报</p> <p> <a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a> <a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a> </p> </div> </div> </li> </ul> <!--栅格化系统: 将全部标签等分为12等分--> <style> /*.box {*/ /*width: 1000px;*/ /*}*/ .b1, .b2, .b3, .b4 { height: 100px; } .b1 { background-color: orangered; } .b2 { background-color: red; } .b3 { background-color: tomato; } .b4 { background-color: pink; } </style> <div class="box"> /* 经过类名来控制 col-md-3表示只取12等分中的3份 */ <div class="b1 col-md-3 col-sm-6"></div> <div class="b2 col-md-6 col-md-offset-3 col-sm-6"></div> <div class="b3 col-xs-1"></div> <div class="b4 col-xs-11"></div> </div> </body> <script src="js/jquery-3.4.1.min.js"></script> <script src="bs/js/bootstrap.js"></script> </html>