标签：总结 十一 对象 标签 元素 django 查找 js
十一周总结
JavaScript
js基础
1.注释语法
// 单行注释
/*多行注释*/
2.前端引入js的多种方式
1.head内script标签内编写
2.head内script标签src属性引入外部js资源
3.body内最底部通过script标签src属性引入2外部js资源
3.编写js的两种方式
1.pycharm创建js文件或者html文件
2.浏览器提供的编写js代码的环境
变量与常量
1.在js中声明变量需要使用关键字
var 全局变量使用
var name = 'jason';
let 局部变量使用(let是ECMA6新语法，可以在局部定义变量不影响全局)
let name = 'kevin';
2.js中声明常量也需要使用关键字
const
基本数据类型之数值类型 Nunber
'''
js动态类型
var x; // 此时x未定义，为undefind
var x = 1; // 此时x为数字
'''
在js中不分整型浮点型，所有的数字类型都为数值类型Number
var a = 11;
var b = 11.11;
除此之外还有一种NaN,它表示不是一个数字(Not A Number)
基本数据类型之字符类型 String
js中字符类型只能使用单引号或双引号
1.字符串的拼接
可以使用.concat,也可以直接使用+号(推荐使用+号)
let a = 'hello';
let b = 'world';
console.log(a+b); // helloworld
2..length 返回长度
a.length // 5
3. .trim() 移除空白
4. .trimLeft() 移除左边空白
5. .trimRight() 移除右边空白
6. .charAt(n) 返回第n个字符
a.charAt(4) // l
7. .indexOf() 根据填入的字符串获取其位置
a.indexOf('lo') // 5
8. .substring() 根据根据索引位置获取对应的子序列字符串
9. .slice() 切片
a.slice(2,4) // 'he'
10. .toLowerCase() 小写
11. .toUpperCase() 大写
12. .split() 分割
a.split('e') // ['h','llo']
a.split('e',1) //['h']
基本数据类型之布尔值 Boolean
和python不同的是true和false都是小写
空字符串、0、null、undefind、NaN都是false
/*
null表示值为空，变量名有赋值，只是值为null
undefind表示声明了一个标量，但是未初始化，没有赋值，该变量的默认值是undefind，另外函数无明确返回值时，返回的也是undefind
*/
数组
类似于python中的列表
1. .length 数组大小
2. .push() 尾部追加元素
3. .pop() 获取尾部元素
4. .unshift() 头部插入元素
5. .shift() 头部移除元素
6. slice() 切片
7. reverse() 反转
8. .join() 将数组元素连接成字符串
9. .concat() 连接数组
10. .sort() 排序
11. .splice() 删除元素并向数组添加新元素
对象
1. js中所有的事物都是对象
2. js中允许自定义对象，自定义的对象类似于python中的字典
let d1 = new Object();
d1.name = 'jason';
d1.age = 18; // {'name':'jason','age':18}
运算符
1. 算数运算符
+ - * / % ++(自增) --(自减)
// ++和--若变量在前则先赋值再运算，若变量在后则先运算再赋值
2.比较运算符
> >= < <= !=(弱) ==(弱等于) ===(强等于) !==(强)
比较运算符分强弱是因为js是一门弱类型语言，它会自动转换数据类型
eg:
1 == '1'; // true
1 === '1'; // false
// 用两个等号进行比较时，JS内部会自动先将数值类型的1转换成字符串类型的1再进行比较,三个等号就是直接比较
3. 逻辑运算符
&&(与) ||(或) !(非)
4. 赋值运算符
= += -= *= /=
流程控制
1. 单if分支
if (条件) {
条件成立执行的子代码
}
2. if...else分支
if (条件){
条件成立执行的代码
}else{
条件不成立执行的代码
}
3. if...else if...else分支
if (条件1) {
条件1成立执行的子代码
}else if (条件2) {
条件1不成立条件2成立执行的子代码
}else{
上面的条件都不成立执行的子代码
}
4.switch 适用于条件过多时
switch(条件){
case 条件1:
条件1成立执行的代码;
break; //如果没有break会基于某个case一直执行下去
case 条件2:
条件2成立执行的代码;
break;
case 条件3:
条件3成立执行的代码;
break;
case 条件4:
条件4成立执行的代码;
break;
default:
条件都不满足执行的代码
}
5.for 循环
for(起始条件;循环条件;条件处理){
循环体代码
}
6. while 循环
while(循环条件) {
循环体代码
}
7.三元运算
条件?值1:值2 // 条件成立取值1，否则取值2
python中则是 值1 if 条件 else 值2
函数
定义函数
function 函数名(形参){
//函数注释
函数体代码
return 返回值
}
匿名函数
var s1 = function(a,b){
return a + b;
}
箭头函数
var f = v => v;
等价于
var f = function(v){
return v;
}
补充
1.js中函数的形参与实参个数可以不对应
实参传少了报undefind,传多了没反应
2.函数体代码中有一个关键字arguements用于接收所有的实参
3.函数的返回值如果有多个，默认只返回最后一个，所有都要的话需要我们自己将其处理成一个整体
JSON对象
let a = {name: 'jason', age: 18}
b = JSON.stringify(a) // 序列化
JSON.parse(b) // 反序列化
RegExp对象
该对象用于正则表达式
js中定义正则的两种方式
1. var reg1 = new RegExp("正则表达式")
2. var reg2 = /正则表达式/;
注意事项
1.正则表达式中不能有空格
2.全局匹配时应该有一个lastIndex属性
3.test匹配数据时，不传数据默认传的undefind
Data对象
var d = new Date();
//getDate() 获取日
//getDay () 获取星期
//getMonth () 获取月（0-11）
//getFullYear () 获取完整年份
//getYear () 获取年
//getHours () 获取小时
//getMinutes () 获取分钟
//getSeconds () 获取秒
//getMilliseconds () 获取毫秒
//getTime () 返回累计毫秒数(从1970/1/1午夜)
BOM操作
BOM是指浏览器对象模型，它使js能够与浏览器交互
window.open('网址','','打开的窗口尺寸') 打开新窗口
window.close() 关闭当前窗口
navigator对象
navigator.userAgent 用来向浏览器表明身份的，通常用在爬虫领域
history对象
history.forward() 前进一页
history.back() 后退一页
window.location.href 获取当前页面所在网址，也可以再加赋值符号和网址跳转
window.location.reload 刷新当前页面
alert() 警告框
confirm() 确认框
prompt() 提示框
计时相关操作
setTimeout(函数名，时长，参数) 设置一个定时任务(时长用的毫秒)
clearTimeout() 取消任务(需要用一个变量接受上面的，然后将变量作为参数传进来)
setInterval(函数名，时长) 每隔多长时间执行一次(循环定时任务)
clearInterval() 取消(需要用一个变量接受上面的，然后将变量作为参数传进来)
DOM操作
1.直接查找标签
1.id查找
document.getElementById('id值') # 结果是标签本身
2.通过类名查找
document.getElementsByClassName('类名') # 结果是数组，里面含有标签本身
3.通过标签名查找
document.getElementsByTagName('标签名') # 结果是数组，里面含有多个标签
2.间接查找标签
间接查找标签需要有一个父标签参照物，基于该参照物可以直接用点的方式操作下面的方法
parentElement 父节点标签元素
children 所有子标签
firstElementChild 第一个子标签元素
lastElementChild 最后一个子标签元素
nextElementSibling 下一个兄弟标签元素
previousElementSibling 上一个兄弟标签元素
3.节点操作
1.js代码创建标签
let aEle = document.createElement('a')
2.js代码操作标签属性
aEle.href = 'https://www.jpmn5.cc/' // 只能添加默认的属性
setAttribute() //兼容默认属性和自定义属性
getAtt9ribute() // 获取属性
removeAttribute() // 删除属性
3.js代码操作标签文本
aEle.innerText = '许木学长' // 设置\替换标签内部的文本，不识别标签语法
aEle.innerText // 获取标签内部所有的文本内容
aEle.innerHEML // 获取标签内部所有的标签包括文本
aEle.innerHTML = '文本' // 替换\设置标签内的文本，识别标签语法
4.获取值的操作
1.针对用户输入和用户选择的标签
标签对象.value
2.针对用户上传的文件数据
标签对象.files // fileList [文件对象、文件对象]
标签对象.files[0] // 文件对象
5.class与css操作
1. js操作标签css样式
标签对象.style.属性名
2. js操作标签class属性
标签对象.classList.add() // 添加类
标签对象.classList.contains() // 类存在返回true,否则返回false
标签对象.classList.remove() // 删除类
标签对象.classList.toggle() // 类存在则删除否则添加
6.事件
我们可以简单地将事件理解为通过js代码给html标签绑定一些自定义的功能
常见事件
onclick 当用户点击某个对象时调用的事件句柄
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
绑定事件的方式一
<button onclick="showMsg()">方式一</button>
<script>
function showMsg() {
let msg = prompt('这是方式一?');
console.log(msg)
}
</script>
绑定事件的方式二
<input type="button" value="方式二" id="d1">
<script>
let inputEle = document.getElementById('d1');
inputEle,onclick = function () {
alert('这是方式二')
}
jQuery
1.如何加载jQuery
1.下载jQuery核心文件到本地引入
2.CDN网络资源加载(依赖网络)
网络资源 https://www.bootcdn.cn/
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
2.jQuery的使用
jQuery导入之后需要使用关键字才能使用
默认的关键字就是jQuery，简化的关键字是 $
jQuery对象与对象标签
两者间的互相转换
标签对象转jQuery对象
$(标签对象)
jQuery对象转标签对象
jQuery对象[0]
查找标签
1.基本选择器
$('#d1') id选择器
$('.c1') class选择器
$('div') 标签选择器
2.组合选择器
$('div#d1') 查找id是d1的div标签
$('span.c1') 查找含有c1样式类的span标签
3.层级选择器
$('div p') 查找div里面所有的为后代标签的p标签
$('div>p') 查找div里面的所有为儿子标签的p标签
$('div+p') 查找div同级别下面的紧挨着的p标签
$('div~p') 查找div同级别下面所有的p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('[username="jason"]') 查找含有username属性名并且属性值为jason的标签
5.基本筛选器
:first 第一个
:last 最后一个
:eq(index) 索引等于index的那个元素
:even 匹配所有索引值为偶数的元素，从0开始计数
:odd 匹配所有索引值为奇数的元素，从0开始计数
:gt(index) 匹配所有大于给定索引值index的元素
:lt(index) 匹配所有小于给定索引值index的元素
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或多个标签在内的标签(从其后代元素中筛选)
6.表单筛选器
$(':表单标签属性')
注意 使用表单筛选器查找checked时，checked与selected都会找到
7.筛选器方法
$("#id").next() 查找当前元素的下一个元素
$("id").prev() 查找当前元素的上一个元素
$("#id").parent() 查找当前元素的父亲元素
$("#id").parents() 查找当前元素的所有父辈元素
$("#id").parentsUntil("#d1") 查找当前元素的所有父辈元素，直到遇到id为d1的元素为止
$("#id").children() 查找当前元素的所有儿子元素
$("#id").siblings() 查找当前元素的所有兄弟元素
操作标签
1.class操作
addClass() ==> ClassList.add() 添加类的操作
removeClass() ==> ClassList.remove() 删除类
hasClass() ==> ClassList.contains() 查询类
toggleClass() ==> ClassList.toggle() 类存在则删除否则添加
2.位置操作
$(window).scrollTop() 获取匹配元素相对滚动条顶部的偏移(滚动条位置)
3.文本操作
html() 取得第一个匹配元素的html内容 ==> innerHTML
html(val) 设置所有匹配元素的html内容 ==》innerText
text() 取得所有匹配元素的内容
text(val) 设置所有匹配元素的内容
val() 取得第一个匹配元素的当前值 ==> value
val(val) 设置所有匹配元素的值
4.创建标签
$('<a>') ==> document.createElement('a')
5.属性操作
attr()/removeAttr() 获取/移除属性
prop()/removeProp() 获取/移除属性
# attr针对动态变化的属性会失真，因此建议以后尽量都使用prop
6.文档处理
$(A).append(B) 把B追加到A
$(A).appendTo(B) 把A追加到B
$(A).prepend(B) 把B前置到A
$(A).prependTo(B) 把A前置到B
$(A).after(B) 把B放到A的后面
$(A).insertAfter(B) 把A放到B的后面
$(A).before(B) 把B放到A的前面
$(A).insertBefore(B) 把A放到B的前面
remove() 从DOM中删除所有匹配的元素
empty() 删除匹配的元素集合中所有的子节点
事件
JS绑定事件
标签对象.on事件名 = function(){}
jQuery事件绑定
方式一
jQuery对象.事件名(function(){})
方式二
jQuery对象.on('事件名称',function(){})
# 正常情况下我们用的是方式一，方式二只是备胎
clone属性
clone() 克隆，默认只克隆内容，不克隆事件(括号内加一个true就可以)
# 补充
1.取消后续事件
事件函数的最后return false即可
2.阻止事件冒泡
事件函数的最后return false即可
事件冒泡：
事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件
# 也就是说事件函数的最后return false有两重功能
3.等待页面加载完毕再执行代码
$(document).ready(function(){}) 完整写法
$(function(){}) 缩略写法
4.事件委托
针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
Bootstrap框架
1.简介
别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能
版本有很多 使用V3即可
文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
CDN
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
2.核心部分讲解
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
3.重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
4.组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
django框架
jinja2模块
可以在html页面上通过类似于后端的操作方式来操作数据
pip3 install jinja2
from jinja2 import Template
def get_dict_func(request):
user_dict = {'name': 'jason', 'age': 18, 'person_list': ['阿珍', '阿强', '阿香', '阿红']}
with open(r'templates/get_dict_page.html', 'r', encoding='utf8') as f:
data = f.read()
temp_obj = Template(data) # 将页面数据交给模板处理
res = temp_obj.render({'d1': user_dict}) # 给页面传了一个 变量名是d1值是字典数据的数据
return res
<p>{{ d1 }}</p>
<p>{{ d1.name }}</p>
<p>{{ d1['age'] }}</p>
<p>{{ d1.get('person_list') }}</p>
python主流web框架
1.django
自身携带的功能组件非常多
2.flask
自身携带的功能组件很少，但是它可以使用第三方模块
3.tornado
异步非阻塞，速度极快效率极高
基本使用
1.下载
cmd下载
pip38 install django 下载源 默认下载最新版
pip38 install django==2.2.22 下载源 指定下载版本
pycharm中下载
File==>Settings==>Project: ==>Python Interpreter 双击右边空白处搜索框中直接搜索即可，在这里可看见版本号
2.验证
django-admin 有反应说明下载成功，或者去pycharm中查看
3.创建django项目
django-admin startproject 项目名
4.启动django项目
cd 项目名 # 进入项目目录
python38 manage.py runserver 127.0.0.1:8080
注意：
这里启动django是可能会报错:[WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试。
这是由于端口冲突导致的，换一个端口号就好了
5.pycharm创建django项目时会自动创建templates文件夹，但是配置文件中需要修改文件路径
cmd创建的django项目没有templates文件夹，需要自己手动创建，而且吧配置文件需要自己配置一个路径
app的概念
app即application,django是一个大的整体，app则是下面的具体的功能模块
app创建
命令行创建
python38 manage.py startapp 应用名
pycharm创建
新建django项目时可以默认创建一个，且自动注册，自己手动创建则是在Terminal中编写cmd命令创建
无论是cmd命令行创建的还是pycharm中命令创建的都需要去settings.py中注册
INSTALLED_APPS = [
'app01.apps.App01Config', # 完整写法
'app02' # 简写
]
主要目录结构
django项目目录名
manage.py 入口文件
templates目录 模板层(存储html文件)
db.sqlite3文件 django自带的小型数据库(项目启动之后才会出现)
django项目同名目录
settings.py 配置文件
urls.py 路由层(存储网址后缀与函数名对应关系)
wsgi.py wsgiref网关文件
应用目录
migrations 存储数据库相关记录
admin.py django内置的admin后台管理功能
apps.py 注册app相关
models.py 模型层(与数据库打交道的)
tests.py 测试文件
views.py 视图层(存储功能函数)
'''
网址后缀 ==> 路由
函数 ==> 视图函数
类 ==> 视图类
'''
小白三板斧
from django.shortcuts import render,HttpResponse,redirect
HttpResponse 可以返回字符串类型得数据
render 返回html页面并且支持传值
redirect 重定向
静态文件
1.静态文件
不经常修改的文件，主要是针对html文件所使用到的各种资源
css文件 js文件 img文件 第三方框架文件
django针对静态文件资源一般需要单独开一个目录存放
static目录
该目录下如果各类型的文件都多，那么我们还可以继续创建目录，就以文件类型作为目录名称
2.资源访问
我们在地址栏中之所以可以输入路由获取对应的资源是因为我们程序员提前开设了资源接口
3.静态资源访问
默认情况下无法访问，因为我们没有提前开设静态文件资源的访问接口
静态文件相关配置
在配置文件中加上这个
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
]
1.接口前缀
STATIC_URL = '/static/' # 访问静态文件资源的接口前缀
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static')
# 存储静态文件资源的目录名称，如果有多个静态文件资源目录直接在下面添加就行了
]
# 访问静态文件资源会先验证接口前缀，接口前缀正确后，会拿着后面的路径依次去列表中自上而下查找
2.接口前缀动态匹配
{% load static %} # django提供的语法
<link rel="stylesheet" href="{% static 'bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap-3.4.1-dist/js/bootstrap.min.js' %}"></script>
# 这样写完以后无论用户请求什么样的路由，它都可以动态的转为我们配置文件中填写的接口前缀
1.action # 控制数据提交的地址
1.action="" # 数据默认提交给当前页面所在的地址
2.action="https://www.baidu.com/" # 填写完整地址指定提交
3.action="/index/" # 向当前服务端的index地址提交
2.method # 控制数据提交的方法
默认是get # 向服务器要数据，也可以携带一些额外的要求
额外携带数据的方式: URL?aaa=bbb&ccc=ddd
问号后面携带的数据有大小限制(2KB),而且不能携带敏感数据
可以改为post # 向服务提交数据
携带额外数据的方式:请求体
请求体携带数据安全性较高而且没有大小限制
目前我们发送post请求需要注释掉配置文件中的某一行
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
request对象
1.获取请求方式
request.method # 获取请求方式，结果是纯大写的的字符串数据
GET/POST
2.获取请求方式中携带的数据
request.POST # 获取post请求的请求体中携带的数据，值为一个列表
request.POST.get() # 获取值列表中最后一个数据
request.POST.getlist() # 获取整个值列表数据
request.GET # 获取网址问号后面携带的数据，值也是一个列表
request.GET.get() # 获取值列表中最后一个数据
request.GET.getlist() # 获取整个值列表数据
'''
在视图函数中针对不同的请求的代码编写套路
if request.method == 'POST':
return HttpResponse()
return HttpResponse()
'''
django连接数据库
django会自带一个小型数据库sqlite3，它的功能较少，主要用于本地测试，实际项目中都会替换掉它
sqlite3默认配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
1.修改配置文件
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'day51',
'HOST': '127.0.0.1',
'PORT': 3306,
'USER': 'root',
'PASSWORD': '123',
'CHARSET': 'utf8'
}
}
2.需要指定模块
django1.X版本需要在项目目录下或者app目录下的__init__.py中编写代码
import pymysql
pumysql.install_as_MYSQLdb()
django2.X版本及以上都可以直接通过下载mysqlclient模块解决
ORM
1.简介
ORM:对象关系映射
能够让不会SQL语句的python程序员使用python面向对象的语法来操作数据库
映射关系
类 ==> 表
对象 ==> 一条条的数据
对象点名字 ==> 获取字段对应的值
# ORM由于高度封装了SQL，所以有时候效率较低，我们需要自己写SQL
2.基本操作
1.在models.py中编写模型类
class GirlsInfo(models.Model):
id = models.AutoField(primary_key=True) # id int primary key auto_increment
name = models.CharField(max_length=32) # name varchar(32)
age = models.IntegerField() # age int
2.执行数据库迁移相关命令
python38 manage.py makemigrations # 讲操作记录到小本本上(migrations目录下的一个文件)
python38 manage.py migrate # 讲操作同步到数据库上
# 每次在models.py中修改了与数据库相关的代码，都需要再次执行上述命令
3.基本语句
from app01 import models
models.类名.objects.create() # 创建数据
models.类名.objects.filter()
# 查询数据，结果为一个列表，里面是一个数据对象，需要通过点的方式获取数据
models.类名.objects.update() # 修改数据，可以和filter搭配使用，单独使用表示修改该字段的全部
models.类名.objects.delete() # 删除数据，需要和filter搭配使用，无法单独使用
标签：总结,
十一,
对象,
标签,
元素,
django,
查找,
js
From： https://www.cnblogs.com/zyg111/p/16974096.html