前端知识总汇

HTML

• 超文本标记语言

注释

由于 HTML 代码杂乱无章，我们习惯性的用注释来划定区域方便后续的查找

HTML 的文档结构

DOCTYPE html>
html lang="en">


head>
 
head>


body>
body>

html>

head 内常用标签

head>
    meta name="keyword" content="搜索关键字">  
    meta name="description" content="网页秒数信息">  
    
    title>title>  
    
    style>style>  
    link rel="stylesheet" href="mycss.css">  
    
    scritpt>scritpt>  
    script src="myjs.js">script>  
head>

body 内常用标签

基本标签

h1> 一级标签 h1> 
b>加粗b>
i>斜体i>
u>下划线u>
s>删除线s>
br> 
hr> 

标签的分类

• 块级标签
  • 独占一行
  • 可以修改长宽
  • 块级标签内部可以嵌套任意的块级标签和行内标签
    • 例外： p 标签只能嵌套行内标签

常见的块级标签
h1>h1>
div>div>
p>p>

• 行内标签
  • 自身文本多大就占多大
  • 只能嵌套行内标签

i>斜体i>
u>下划线u>
s>删除线s>
br> 
hr> 

特殊符号

p> p>  
p>> <p>  
p>&p>  
p>¥p>  
p>©p>  
p>®p>  

常用标签

div>  
    span>Hello Worldspan>  
div>

<!--
构造页面初期时使用，使用 div 和 span 去占位然后再调整样式
使用 div 分区域，使用 span 放文本

img图片标签

<img src="" alt="">
<!--
src	
	1.图片的路径	可以是本地的也可以是网上的

alt="这是我的前女友"
	当图片加载不出来的时候 给图片的描述性信息

title="新垣结衣"
	当鼠标悬浮到图片上之后 自动展示的提示信息

height="800px" 		
width=""
	高度和宽度当你只修改一个的时候 另外一个参数会等比例缩放
  如果你修改了两个参数 并且没有考虑比例的问题 那么图片就会失真

a链接标签

<a href="" target="">文本</a>

href
	1.放url，用户点击就会跳转到该url页面
  2.放其他标签的id值 点击即可跳转到对应的标签位置

target
	默认a标签是在当前页面完成跳转  _self
     新建页面跳转			       _blank

a href="" id="d1">a>br>
img src="111.png" alt="this is my wife" height="400px" title="YiFei Liu">br>
a href=""id="#d1">点此回到图片上a>

列表标签

无序列表

ul>
          li>第一项li>
          li>第二项li>
          li>第二项li>
          li>第二项li>
  ul>

有序列表

ol type="1" start="5">  
      li>111li>
      li>222li>
      li>333li>
  ol>

标题列表

  dl>
      dt>标题1dt>
      dd>内容1dd>
      dt>标题2dt>
      dd>内容2dd>
      dt>标题3dt>
      dd>内容3dd>
  dl>

表格

table>
    
    thead>
    
    tr>
        th>usernameth>
        加粗文本
        td>usernametd>
        正常文本
    tr>
    thead>

    
    tbody>
    tr>
        td>jasontd>
        td>123td>
        td>readtd>
    tr>
    tbody>

table>

table border="1"> 加外边宽
	td colspan="2">egontd>   水平方向占多行
    td rowspan="2">DBJtd>    垂直方向占多行

表单标签

• 能够获取前端用户的数据，基于网络发送给后端服务

form action="http://127.0.0.1:5000/index/"  
      method="post" 
      enctype="multipart/form-data">
    
    input>  
form>

input标签 就类似于前端的变形金刚  通过type属性变形
	text:普通文本
  password:密文
	date:日期	
  submit:用来触发form表单提交数据的动作
  button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
  reset:重置内容
  radio:单选
    	默认选中要加checked='checked'
      input type="radio" name="gender" checked='checked'>男
      当标签的属性名和属性值一样的时候可以简写
      input type="radio" name="gender" checked>女
	checkbox:多选
  		input type="checkbox" checked>DBJ
  
  file:获取文件  也可以一次性获取多个
    	input type="file" multiple>

select标签 默认是单选 可以加mutiple参数变多选 默认选中selected
						select name="" id="" multiple>
                option value="" selected>新垣结衣option>
                option value="" selected>斯佳丽option>
                option value="">明老师option>
            select>

textarea标签  获取大段文本
	  textarea name="" id="" cols="30" rows="10">textarea>

# 能够触发form表单提交数据的按钮有哪些(一定要记住)
		1、input type="submit" value="注册">
		2、button>点我button>
    
# 所有获取用户输入的标签 都应该有name属性
	name就类似于字典的key
  用户的数据就类似于字典的value
  p>gender:
            input type="radio" name="gender">男
            input type="radio" name="gender">女
            input type="radio" name="gender">其他
  p>

标签的两个重要属性

• id值，类似于身份证号，同一个 HTML 页面上唯一不能重复
• class值，一个标签可以继承多个 class 值
• 标签内可以有默认的属性（键值对），也可以有自自定义的属性

CSS

• 层叠样式表：给 HTML 添加样式

注释

/**/

语法结构

选择器 {
  属性1:值1;
  属性2:值2;
  属性3:值3;
  属性4:值4;
}

css 三种引入方式

1.style标签内部直接书写(为了教学演示方便我们用第一种)
  	
        h1  {
            color: burlywood;
        }
    
  2.link标签引入外部css文件(最正规的方式 解耦合)
      "stylesheet" href="mycss.css">
	3.行内式(一般不用)
  		
"color: green">老板好 要上课吗?

css 选择器

基本选择器

        /*id选择器*/
        #d1 {  /* !*找到id是d1的标签 将文本颜色变成绿黄色*! */
            color: greenyellow;
        }
        /*类选择器*/
        .c1 {  /*!*找到class值里面包含c1的标签*!*/
            color: red;
        }
        /*元素(标签)选择器*/
        span {  /*!*找到所有的span标签*!*/
            color: red;
        }
        通用选择器*/
        * {  /*!*将html页面上所有的标签全部找到*!*/
            color: green;
        }

组合选择器

			/*后代选择器*/
        div span {
            color: red;
        }

        /*儿子选择器*/
        div>span {
            color: red;
        }

        /*毗邻选择器*/
        div+span {  /*!*同级别紧挨着的下面的第一个*!*/
            color: aqua;
        }

        /*弟弟选择器*/
        div~span {  /*同级别下面所有的span*/
            color: red;
        }

属性选择器

""
1 含有某个属性
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""
属性选择器是以[]作为标志的

[username] {  /*!*将所有含有属性名是username的标签背景色改为红色*!*/
            background-color: red;
        }*/

[username='jason'] {  /*!*找到所有属性名是username并且属性值是jason的标签*!*/
            background-color: orange;
        }

input[username='jason'] {    /*!*找到所有属性名是username并且属性值是jason的input标签*!*/
        background-color: wheat;
        }

选择器优先级

• 选择器相同 书写顺序不同
  • 就近原则:谁离标签更近就听谁的
• 选择器不同 …
  • 行内 > id选择器 > 类选择器 > 标签选择器
  • 精确度越高越有效

css 属性

• 行内标签无法设置长宽，就算写了也无法生效

字体属性

font-family: "Arial Black","微软雅黑","...";  !*第一个不生效就用后面的 写多个备用*!*/

font-size: 24px;  /*字体大小*/

font-weight: inherit;  /*bolder lighter 100~900 inherit继承父元素的粗细值*/

color: red;  /*直接写颜色英文*/
color: #ee762e;  /*颜色编号*!*/
color: rgb(128,23,45); /*三基色 数字  范围0-255*!*/
color: rgba(23, 128, 91, 0.9);  /*第四个参数是颜色的透明度 范围是0-1*!*/

文字属性

text-align: center;  /*居中*/*/
text-align: right;
text-align: left;
text-align: justify;  /*两端对齐*/

text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
/*在html中 有很多标签渲染出来的样式效果是一样的*/

a {
	text-decoration: none;  /*主要用于给a标签去掉自带的下划线  需要掌握*/
}

边框

        p {
            background-color: red;

            border-width: 5px;
            border-style: solid;
            border-color: green;

        }
        div {
            /*左边框的宽度 颜色 样式*/
            border-left-width: 5px;
            border-left-color: red;
            border-left-style: dotted;
            /*右边框的宽度 颜色 样式*/
            border-right-width: 10px;
            border-right-color: greenyellow;
            border-right-style: solid;
            /*上边框的宽度 颜色 样式*/
            border-top-width: 15px;
            border-top-color: deeppink;
            border-top-style: dashed;
            /*下边框的宽度 颜色 样式*/
            border-bottom-width: 10px;
            border-bottom-color: tomato;
            border-bottom-style: solid;
            /*border: 3px solid red;  !*三者位置可以随意写*!*/

        }
/*画圆*/
        #d1 {
            background-color: greenyellow;
            height: 400px;
            width: 400px;
            border-radius: 50%;  /*直接写50%即可 长宽一样就是圆 不一样就是椭圆*/
        }

display 属性

display: none;  /*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*/
display: inline;  /*将标签设置为行内标签的特点*/
display: block; /*将标签设置成块儿级标签的特点*/
display: inline-block; /*标签即可以在一行显示又可以设置长宽*!*/

溢出属性

overflow: visible;  /*默认就是可见 溢出还是展示*/
overflow: hidden;  /*溢出部分直接隐藏*/
overflow: scroll;  /*设置成上下滚动条的形式*/
overflow: auto;

盒子模型

• 标签和标签之间的距离margin外边距
• 标签的边框border
• 内容到边框的距离padding内边距
• 注意：浏览器会自带 8px 的 margin，可以去掉 body {margin: 0;}

margin: 0;  /*上下左右全是0
margin: 10px 20px;  /* 第一个上下 第二个左右*/
margin: 10px 20px 30px;  /*第一个上  第二个左右  第三个下*/
margin: 10px 20px 30px 40px;  /*上 右 下 左*/

margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;

/*水平居中*/
 margin: 0 auto;  /*只能做到标签的水平居中*/
/*padding 和 margin 语法一样*/

#d1 {
	margin-bottom: 50px;
}
 #d2 {
	margin-top: 20px;  /*不叠加 只取大的*/
 }

定位

• 静态

  所有的标签默认都是静态的static，无法改变位置

• 相对定位(了解)

  相对于标签原来的位置做移动relative

• 绝对定位(常用)

  相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)

  eg:小米网站购物车

  当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签左定位

• 固定定位(常用)

  相对于浏览器窗口固定在某个位置

  eg:右侧小广告

position: static;  /*默认是static无法修改位置*/
position: relative;
/*相对定位
标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
虽然你哪怕没有动 但是你的性质也已经改变了
*/
position: absolute;  /*绝对定位*/
position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/

文档流(原来的位置是否还保留)

• 不脱离文档流：相对定位
• 脱离文档流：浮动、绝对定位、固定定位

JavaScript

• 现在最多用的是 5.9 和 6.0 版本的 js

HTML 插入 JS

button type="button" onclick="alert('欢迎!')">点我!button>


script type="javascript">
...
script>


script type="javascript" src="myjs.js">script>

注释和变量

注释

// 单行注释

/*
多行注释
*/

注意

• js 和 python 一样，是动态类型的语言，不需要为此定义变量类型

声明变量的两种方式

var 变量名;  // 全局变量
let 变量名;  // 可以区分全局和局部变量

常量

const PI = 3.14;  // 更改会报错

数值类型number

• js 不区分数值的整数和小数，一律都是 number 类型

var a = 10;
typeof(a)  // number

类型转换

parseInt()
parseFloat()
 
// 将字符串型转换为 number
parseInt('12312312')   // 12312312
// 将字符串型转换为 number, 并保留小数
parseFloat('11.11')  // 11.11
// 将字符串型转换为 number, 不保留小数
parseInt('11.11')  // 11
// 对于有其他字符的，只保留前面的一部分
parseInt('123sdasdajs2312dasd')  // 123
// 当前面不是字符串时，会返回 NaN
parseInt('asdasdad123sdasdajs2312dasd')  // NaN
// NaN 是 number 类型
typeof NaN  // number

字符串类型string

var name = 'codeFun'  // 单引号声明
var name = "codeFun"  // 双引号声明
// 不支持三引号声明

模板字符串

name = 'codeFun';
age = 18;
str = `
	my name is ${name}, age is ${age}
`  // 'ntmy name is codeFun, age is 18n'

常用的字符串方法

//返回长度
.length

// 去除空白
.trim()	  // 移除空白
.trimLeft() 	// 移除左边的空白
.trimRight()	// 移除右边的空白

// 字符切片
.charAt(n)	// 返回第n个字符
.indexOf(substring, start)	// 子序列位置
.substring(from, to)	// 根据索引获取子序列
.slice(start, end)	// 切片
.split(delimiter, limit)  // 分割

// 转换大小写
.toLowerCase()	// 小写
.toUpperCase()	 // 大写

布尔值Boolean

true
false  // 空字符串、0、null、undefined、NaN

null 和 undefined

• null 是将赋值完的变量名给空值，undefined 是未赋值

数组

// 类似于 python 中的列表
var l = [11,22,33,44,55]

常用方法

.length   // 获取长度

.push(element)  // 向最后追加增加元素

.pop()  // 弹出最后一个元素并返回

.unshift(element)  // 在 0 索引添加元素
.shift()  // 弹出 0 号索引的元素并返回

.reverse()  // 反转

.join(连接符)   // 使用连接符将列表连接起来并返回

.concat(list_name)  // 连接两个数组返回新的数组

.sort()  // 进行排序

.splice(index,delete_num)  // 从 index 的位置，删除 delete_num 个元素
// 从 index 的位置，删除 delete_num 个元素,添加指定元素 element
.splice(index,delete_num,element)

遍历数组

l.forEach(function(value){console.log(value)}, l)  // 遍历打印元素

// 遍历打印元素 和 索引
l.forEach(function(value, index){console.log(value,index)}, l)  

// 遍历打印元素 索引 元素的数据来源
l.forEach(function(value,index,arr){console.log(value,index,arr)}, l)

// map 和 foreach 的用法差不多
var ll = [11,22,33,44,55,66]
ll.map(function (value) {
    return value * 2
},ll)
//  [22, 44, 66, 88, 110, 132]

运算符

// 算术运算符
// 加号在前先加后赋值 加号在后先赋值后加
var x = 10;
var res1 = x++;  // res1 10
var res2 = ++x;  // res2 12

// 比较运算符
1 == '1'  # 弱等于  内部自动转换成相同的数据类型比较了
true  

1 === '1'  # 强等于  内部不做类型转换
false

流程控制

if 判断

if(条件){
    代码块;
}else if(条件){
    代码块;
}else{
    代码块;
}

Switch 判断

var num = 2;
switch (num){
    case 0:
        代码块;
        break;
    case 2:
        代码块;
        break;
   	...
    default:
    	代码块
}

for 循环

for(起始位;条件;循环一次后对于起始位的操作){
    代码块;
}
// 打印0~9
for(var i = 0;i  10;i ++){
    console.log(i)
}

while 循环

while(条件){
    代码块;
}

函数

函数的定义和调用

// 定义
function function_name([params]){
    代码块;
    [return return_value]
}
// 调用
// 调用函数时，传入参数的多或少都不会报错！
// 函数的返回值只能是一个，多个可以使用数组包括！
[return_vaule =] function_name([params])

限制调用函数的参数

function func2(a,b){
  if(arguments.length2){
    console.log('传少了')
  }else if (arguments.length>2){
    console.log('传多了')
  }else{
    console.log('正常执行')
  }
}

匿名函数

function([params]){
    代码块;
}

箭头函数

var function_name = params => params;
// 上面和下面的等价
var function_name = function(params){
    return params
}

对象

自定义对象

"""第一种创建自定义对象的方式"""
var d = {'name':'jason','age':18}
typeof d  // "object"

取值
d['name']  // "jason"
d.name  // "jason"

"""第二种创建自定义对象的方式  需要使用关键字 new"""
var d2 = new Object()  # {}

d2.name = 'jason'  // {name: "jason"}

d2['age'] = 18  // {name: "jason", age: 18}

Date 日期对象

let date = new Date()  // Thu Apr 20 2023 11:29:07 GMT+0800 (中国标准时间)

d3.toLocaleString()  // '2023/4/20 11:29:07'

// 也支持自己手动输入时间
let d4 = new Date('2200/11/11 11:11:11')
d4.toLocaleString()

let d5 = new Date(1111,11,11,11,11,11)
d5.toLocaleString()  # 月份从0开始0-11月
"1111/12/11 上午11:11:11"

# 时间对象具体方法
let d6 = new Date();
d6.getDate()  获取日
d6.getDay()		获取星期
d6.getMonth()		获取月份(0-11)
d6.getFullYear()		获取完整的年份
d6.getHours()			获取小时
d6.getMinutes()		获取分钟
d6.getSeconds()		获取秒
d6.getMilliseconds()  获取毫秒
d6.getTime()					时间戳

JSON 对象

JSON.stringify()  // 序列化 类似于 python 中的 dumps
JSON.parse()  // 反序列化 类似于 python 中的 loads
// 实例：
var dict = {'name': 'codeFun', age: 18};
dict_json = JSON.stringify(dict)  // '{"name":"codeFun","age":18}'
JSON.parse(dict_json)  // {name: 'codeFun', age: 18}

RegExp 对象

// 创建对象
var reg_obj01 = new RegExp('^[a-zA-Z]{1,5}$');  // 匹配 1-5 个由大小写字母组成的字串
var reg_obj02 = /^[a-zA-Z]{1,5}$/;  // 匹配 1-5 个由大小写字母组成的字串

// 匹配内容
reg_obj01.test();  // 什么不写，匹配 undefined
reg_objo1.test('codeFun');  // 返回 false

// 字符串匹配
var str01 = 'hello world';
var result_list = str01.match(/o/);
console.log(result_list)  // ['o', index: 4, input: 'hello world', groups: undefined] 只能找到一个
var result = str01.match(/o/g)  // 全局查找，能够找到两个
"""
全局匹配有一个 lastIndex 属性，匹配一次后指针就到最后了，下一次再匹配就是 false
"""

BOM 和 DOM

• BOM（Browser Object Model）浏览器操作对象
  • 使用 js 代码操作浏览器
• DOM（Document Object Model）文档对象模型
  • 使用 js 代码操作标签

BOM 操作

window 对象

• window 对象指代的就是浏览器窗口

window.innerHeight  // 浏览器窗口的高度 910
window.innerWidth  // 浏览器窗口的宽度 1589

// 新建窗口打开页面，第二个参数空着，第三个参数是新建窗口的大小和位置
window.open('https://www.baidu.com/','','height=500px,width=500px,top=400px,left=400px');

window.close()  // 关闭当前页面

window 子对象 navigator

// 判断当前是否是浏览器  -- 爬虫和反爬能够用的上
window.navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36 Edg/112.0.1722.48'

// 获取操作系统
window.navigator.platform  // 'Win32'

window 子对象 history

window.history.back()   // 回退到上一页
window.history.forward()  // 前进到下一页

window 子对象 location

window.location.href  // 获取当前页面的 url
window.location.href = url  // 跳转到指定页面
widow.location.reload()  // 刷新当前页

各种框

// 警告框
alert('hello world')  //  没有返回值，有确认按钮
 
// 确认框
confirm('你确定吗？')  // 当点“确认”时，返回 true；反之点取消返回 false

// 提示框
prompt('提示标题','提示内容')  // 当点击确认时，返回“提示内容”，点取消返回 null

计时器

一次性计时器

let t = setTimeout(function_name,3000)  // 3 秒之后自动执行 function_name 函数
clearTimeout(t)  // 取消定时任务

循环计时器

t = setInterval(function_name,3000)  // 每隔 3 秒执行一次
clearInterval(t)  // 清除定时器

DOM 操作

• DOM 树
  • 所有标签都可以称为节点
• JavaScript 可以通过 DOM 创建动态的 HTML：
  • 能够改变页面中所有的 HTML 元素和属性
  • 能够改变页面中所有的 css 样式
  • 能够对页面中所有事件做出反应

查找标签

// 直接查找
document.getElementById("d1")  // 根据 id 查找标签，返回标签

document.getElementsByClassName('c1')  // 根据类名查找标签，返回列表

document.getElementsByTagName('div')  // 根据标签名查找标签，返回列表

节点操作

/*
在页面指定位置添加图片
*/
// 创建标签
let imgEle = document.createElement('img')
// 给标签添加默认属性
imgEle.src = '111.png'
// 给标签添加自定义属性
imgEle.setAttribute('username','codeFun')
// 获取父标签元素
let divEle = document.getElementById('d2')
// 在父标签内添加 imgEle
divEle.appendChild(imgEle)

// 给 a 标签设置文本
aEle.innerText = 'hello world'
divEle.innerHTML = 'hello world'  // 可以识别 html 语言

// 额外补充
.appendChild()
.removeChild()
.replaceChild()

.setAttribute()  设置属性
.getAttribute()  获取属性
.removeAttribute()  移除属性

获取值操作

// 获取用户数据标签内部的数据
let inputEle = document.getElementById('d1')
inputEle.value
  
// 获取用户上传的文件数据
fileEle.files  // 获取一个有关文件的列表
fileEle.files[0]  // 获取文件数据

class css 操作

let divEle = document.getElementById('d1')
divEle.classList  // 获取标签所有的类属性
divEle.classList.remove('bg_red')  // 移除某个类属性
divEle.classList.add('bg_red')  // 添加类属性
divEle.classList.contains('c1')  // 验证是否包含某个类属性 true
divEle.classList.toggle('bg_red')  // 有则删除无则添加

// DOM操作操作标签样式 统一先用style起手
let pEle = document.getElementsByTagName('p')[0]
pEle.style.color = 'red'
pEle.style.fontSize = '28px'
pEle.style.backgroundColor = 'yellow'
pEle.style.border = '3px solid red'

事件

• 达到某个事先设定的条件，自动触发的动作

绑定事件的两种方式

button onclick="func1()">点我button>
button id="d1">点我button>
  
script>
  // 第一种绑定事件的方式
  function func1() {
      alert(111)
  }
  // 第二种
  let btnEle = document.getElementById('d1');
  btnEle.onclick = function () {
      alert(222)
  }
script>

实时展示当前时间

body>
div>
    input type="text" id="d1" style="display: block;height: 50px;width: 200px">
    button id="d2">开始button>
    button id="d3">结束button>
div>
script>
    let t = null
    let inputEle = document.getElementById('d1')
    let startBtnEle = document.getElementById('d2')
    let endBtnEle = document.getElementById('d3')

    function getTime(){
        let currentTime = new  Date()
        inputEle.value = currentTime.toLocaleTimeString()
    }

    startBtnEle.onclick = function (){
        if (!t){
           t = setInterval(getTime,1000)
        }
        
    }
    endBtnEle.onclick = function (){
        clearInterval(t)
        t = null
    }
script>
body>

jQuery

• JQuery 内部封装了原生的 js 代码，还额外添加了很多功能
• 能够让我们通过书写更少的代码完成 js 操作
• JQuery 兼容多种浏览器，不需要考虑浏览器兼容问题（IE除外）
• 我们现在使用的是 3.x 版本，不兼容 IE

HTML 导入 jQuery

 将 jQuery 文件直接导入即可
script src="jQuery-3.4.1.js">script>
也可以使用 cdn 服务
script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">script>

jQuery 的基本语法

JQuery('选择器').操作()
JQuery 还可以简写为 $
即 JQuery('选择器').操作() === $('选择器').操作()

// 例如将 div 标签中的颜色变红
$('div').css('color','red')

jQuery对象转换成标签对象

// jQuery对象如何变成标签对象
$('#d1')[0]

// 标签对象如何转jQuery对象
document.getElementById('d1')
$(document.getElementById('d1'))

选择器和筛选器

基本选择器

// id选择器
$('#d1')

// class选择器
$('.c1')

// 标签选择器
$('span')

组合选择器

$('div.c1')   // 查找 div 中 class = c1 的
$('div#d1')  // 查找 div 中 id = d1 的
$('*')  // 查找全部

分组与嵌套

$('#d1,.c1,p')  # 并列+混用
              
$('div span')  // 后代

$('div>span')  // 儿子

$('div+span')  // 毗邻

$('div~span')  // 弟弟

基本筛选器

$('ul li')
$('ul li:first')  // 大儿子 

$('ul li:last')  // 小儿子
               
$('ul li:eq(2)')		// 放索引
               
$('ul li:even')  // 偶数索引 0包含在内

$('ul li:odd')  // 奇数索引
            
$('ul li:gt(2)')  // 大于索引
            
$('ul li:lt(2)')  // 小于索引
          
$('ul li:not("#d1")')  // 移除满足条件的标签

$('div')
$('div:has("p")')  // 选取出包含一个或多个标签在内的标签

属性选择器

$('[username]')  // 选择有 username 的标签
$('[username="jason"]')  //  选择有 username = jason 的标签
$('p[username="egon"]')   //  选择有 username 的 p 标签

表单筛选器

$('input[type="text"]')
$('input[type="password"]')
// 将上面的进行简写
$(':text')  // 等价于上面第一个
$(':password')  // 等价于上面第二个

// 下面的都可以简写：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected

// 特例
$(':checked')  // 它会将checked和selected都拿到
$(':selected')  // 它不会 只拿selected
$('input:checked')  // 添加一个限制条件

筛选器方法

$('#d1').next()  // 同级别下一个
$('#d1').nextAll()  // 同级别下面的所有
$('#d1').nextUntil('.c1')  // 直到 class = c1 为止，不包括 c1
              
              
$('.c1').prev()  // 同级别上一个
$('.c1').prevAll()
$('.c1').prevUntil('#d2')

$('#d2').siblings()  // 同级别上下所有
              
$('#d3').parent()   // 第一级父标签
$('#d3').parent().parent()  // 父亲的父亲
$('#d3').parents()   // 找到祖宗 HTML
$('#d3').parentsUntil('body')    
              
$('#d2').children()  // 儿子
                    
$('div p')
// 上面等价于下面           
$('div').find('p')  // find从某个区域内筛选出想要的标签 
              
              
// 下面的两两等价
$('div span:first')
$('div span').first()
                                                                                
$('div span:last')
$('div span').last()
                                                                                   
$('div span:not("#d3")')
$('div span').not('#d3')

操作标签

操作类

/*
js版本				 jQuery版本
classList.add()		    addClass()
classList.remove()		removeClass()
classList.contains()	hasClass()
classList.toggle()	    toggleClass()
*/

css 操作

// 将第一个 p 标签的颜色变成红色，将它的下一个变成绿色
$('p').first().css('color','red').next().css('color','green')
// jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
// jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法

位置操作

.offset()  // 相对于浏览器窗口
.position()  // 相对于父标签 
.scrollTop()  
  	$(window).scrollTop()  // //  目前浏览的长度
    $(window).scrollTop(0)  # 加了参数就是设置

尺寸

$('p').height()  // 文本的高度
$('p').width()  // 文本的宽度

$('p').innerHeight()  // 文本+padding
$('p').innerWidth()

$('p').outerHeight()  // 文本+padding+border
$('p').outerWidth()

文本操作

/*
操作标签内部文本
  js											jQuery
  innerText								text()  括号内不加参数就是获取加了就是设置
  innerHTML								html()
 */
$('div').text()
$('div').html()

获取值操作

/* 
js								jQuery
  .valu								.val()
*/
$('#d1').val()
$('#d1').val('520快乐')  # 括号内不加参数就是获取加了就是设置

// 获取文件
$('#d2')[0].files[0]  //记两个对象之间的转换

属性操作

/*
js中							jQuery
  setAttribute()			  attr(name,value)
  getAttribute()			  attr(name)
  removeAttribute()   	       removeAttr(name)
  
  在用变量存储对象的时候 js中推荐使用	
  	XXXEle			标签对象
  jQuery中推荐使用
  	$XXXEle			jQuery对象
*/
let $pEle = $('p')
$pEle.attr('id')
$pEle.attr('class','c1')
$pEle.removeAttr('password')     
      
           
/*
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
*/
                   
$('#d2').prop('checked')
$('#d3').prop('checked',true)

两个方法

each

// 打印出所有的索引
$('div').each(function(index){console.log(index)})
// 打印所有的索引和对象
$('div').each(function(index,obj){console.log(index,obj)})

// 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})

data

• 能够让标签帮我们存储数据 并且用户肉眼看不见

// 添加 info = hello world 的键值对
$('div').data('info','hello world')
               
// 根据键获取信息
$('div').data('info')  

// 根据键删除信息
$('div').removeData('info')

小案例

按钮克隆

/*
	js 函数内的 this 指代函数本身。
*/
button id="d1">点击，复制我/button>
script>
    $('#d1').on('click',function () {
        $(this).clone().insertAfter($('body'))
    })
/script>

自定义登录校验

body>
p>
    username：input type="text" id="username">
    span style="color: red">span>
p>
p>
    password：input type="text" id="password">
    span style="color: red">span>
p>
button id="d1">提交button>
script>
    let $username = $('#username')
    let $password = $('#password')
    // 点击提交时会判断输入框内是否为空，如果为空则提示用户不能为空
    $('#d1').on('click',function (){
        let userName = $username.val()
        let passWord = $password.val()
        if (!userName){
            $username.next().text('用户名不能为空')
        }
        if (!passWord){
            $password.next().text('密码不能为空')
        }
    })
    // 聚焦事件，将鼠标放到收入框内触发
    $('input').focus(function () {
        // 将红色提示字清空
        $(this).next().text('')
    })
script>
body>

input 框实时监控

body>
input type="text">
script>
    $('input').on('input',function () {
        console.log($(this).val())
    })
script>
body>

hover 事件

script>
    // $("#d1").hover(function () {  // 鼠标悬浮 + 鼠标移开
    //     alert(123)
    // })

    $('#d1').hover(
        function () {
              alert('我来了')  // 悬浮
      },
          function () {
              alert('我溜了')  // 移开
          }
      )
  script>

阻止后续事件

• 点击它有默认事件：提交用户输入的内容和清空用户输入的内容
• 通过return false可以阻止默认事件的发生
• return false还可以阻止事件冒泡
  • 事件冒泡：就是在父亲和儿子都有点击事件时，点击儿子也会触发父辈的点击事件

body>
form>
	span id="d1">span>
	input type="submit" id="d2">
form>
script>
    $('#d2').on('click',function () {
        $('#d1').text('hello world')
        return false
    })
script>
body>

事件委托

body>
button>弹窗显示button>
script>
    // $('button').click(function () {
    //     alert(123)
    // })
    // 上面的点击事件在动态的新建按钮时触发
    
    // 在指定范围内 将事件委托给某个标签 无论标签是事先写好的还是后面动态创建的
    $('body').on('click','button',function () {
        alert('hello world')
    })
script>
body>

BootStrap

form 表单常用模版

table class="table table-hover table-striped">
thead>
    tr>
        th>IDth>
    tr>
thead>
tbody>
    {% for book_obj in book_queryset %}
    tr>
        td>{{ book_obj.pk }}td>
        
        td>
            a href="" class="btn-xs btn btn-primary">编辑a>
        td>
    tr>
    {% endfor %}
tbody>
table>

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net