标签分类
html标签,页面.<html lang="en"英语或zh-cn中文>
head标签,不可见,对body内标签的修饰,没有body就没有head
title标签,页面标题
meta标签 声明编码
body标签 能直接写内容
img标签 src='图片地址'
a标签 href="超链接地址"
ul无序列表
ol有序列表
dl自定义列表
table表格
p标签 段落,上下加空白行以区分.文本级标签,内部不能再嵌套块级
div 普通块级标签,用的最多,用head修饰
hr单笔和,分割线
Form表单 action:交互内容提交地址
input:输入 text普通文本. password密文
radio单选按钮,跟选项是分开的.通过name属性来分组.组内单选
checkbox 多选按钮
input的type,submit按钮可用来提交.放在form里的普通button按钮同效
file传文件,date日期,
input的button属性,是form里的普通按钮.
hidden隐藏reset重置
lable: for属性,点击lable的内容,for的id获取焦点
textarea:文本框
select下拉式选择框.
option每个选项 selected默认选中
选择器
#id 通过id选择
span 通过标签类型选
.自定义 通过标签的class属性选
div空格span 从div里找所有span,
div>span,从div的第一层包含内找span
div+span,div挨着的span,必须是同级,中间不能隔其他标签.
div~span,div同级的,下面的span,弟弟选择器.
div,span 所有的div和span 并集
div.span div中属性为span的,跟空格区别是,点后面是属性名.交集
伪类选择器
a:link a标签访问前
a:visited a标签访问后
a:active a标签点击时
input:focus 输入框获取焦点时
任意标签:hover 鼠标浮动时
伪元素
p:first-letter p标签的第一个字符
p:before 前缀加内容及样式 p:after后缀加内容及样式
选择器优先级
行内>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
div.a{
background-color: green !important; 提高样式的优先级到最高
}
文本
text-align 文字的水平对齐
left 左对齐
center 居中
reght 右对齐
text-decoration 文本装饰
none; 没有下划线
line-through; 中划线
overline; 上划线
underline; 下划线
text-indent 文本缩进
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
line-height 行高,设置行高=容器高度,文字自动垂直居中
line-height: 200px;
color:设置字体颜色
背景图片
background-color: red; 在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片
background-repeat: no-repeat; 设置图片不重复 repeat-x水平重复 repeat-y垂直重复
background-position: right top; 图片的位置 左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置
background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
边框的设置
width: 100px;
height: 100px;
/*border-color: tomato green gray yellow;*/
/*border-width: 1px 3px 5px 7px;*/
/*border-style: solid dotted dashed double;*/
/*一个值:上下左右
四个值:遵循顺时针上右下左
三个值:上 右左 下
两个值:遵循上下 左右
*/
/*border-top-style:solid ;*/ 单独设置顶线的样式(left,bottom,right)
/*border-left-style:solid ;*/ 单独设置左边线的样式
/*border-top-color:red;*/ 单独设置顶线颜色
border:yellow solid 10px; 统一设置边框的颜色 样式 宽度
块和行内的概念\转换
对于行内标签来说不能设置宽和高 有些时候需要行内标签也设置宽和高,需要进行行内-->块,行内->行内块 display的属性值 : block块 inline行内 inline-block行内快 none display: block; 独占一行并且可以设置宽高 display: inline-block; 既可以设置宽高又不会独占一行 行内\块转行内快 display: inline; 表示一个行内元素,不能设置宽高 display: none; 不仅不显示内容,连位置也不占了
盒模型
border : 边框的宽度
padding : 内边距的距离
content : width height
背景包含的部分:padding + conntent
计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border
外边距 margin
上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距
margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度)
分方向的设置
border-top border-right border-bottom border-left
padding-top padding-right padding-bottom padding-left
margin-top margin-right margin-bottom margin-left
给图形设置圆角
border-radius: 5px;
列表样式
在css中去掉列表的样式
ul,li{
list-style: none;
}
浮动
float:left /right
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
清除浮动 clear:both
伪元素清除法:
.clearfix:after{
content: '';
clear: both;
display: block;
}
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
主页的内容
</div>
</body>
overflow超出部分
内容多余标签的大小 visible 可见(默认) hidden 超出部分隐藏 scroll 超出显示滚动条
定位
position : relative /absolute /fixed
top:10px;
right:10px;
bottom:10px;
left:10px;
相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置
绝对定位 :绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整个页面
如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置
固定定位 :固定是相对于整个窗口的
z-index图层值
用法说明: z-index 值表示谁压着谁，数值大的压盖住数值小的， 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 从父现象：父亲怂了，儿子再牛逼也没用
opacity整个标签的透明度
opacity: 0.5;调整d4对应的整个标签的透明度是50%
.d4{
opacity: 0.5;
}
<div class="d4">
你好你好娃哈哈
<img src="timg.jpg" alt="">
</div>
内容回顾
css选择器的优先级
行内(1000) > id(100) > 类(10) > 标签(1) > 继承(0)
颜色
rgb(255,255,255) #000000-#FFFFFF 单词表示 rgba(255,255,255,0.5)
字体
font-family 设置"微软雅黑","宋体" font-size 设置字体大小 默认的字体大小16px font-weight bold粗体
文本
text-align 对齐方式 left(默认) right center text-decoration 字体的划线 none underline overline line-through line-height 设置行高 字体会自动在行高内垂直居中 text-indent 缩进em单位
背景
background-color :设置颜色
background-image :url('xxx.jpg')
background-repeat :no-repeat
background-position :水平位置 垂直位置 (left center right) (top center bottom)
background-attachment:fixed
background-size :调整背景图片的大小
background:颜色 背景图 是否重复 位置;
边框
border-style:solid; 设置边框样式 border-color:颜色1 颜色2 颜色3 颜色4; border-width:10px; 设置边框宽度 border: solid red 5px; border-top-style:dotted; border-top: solid red 5px; border-radius:边框圆角
display
不显示不占位 :none 块级元素 : block 行内元素 : inline 行内块 : inline-block
盒模型
content : width height 内容
padding : 5px 内边距
padding-top ...
border : 见上面
margin : 外边距
margin-left ...
上下的盒子会塌陷 : 取上下间距之间的最大值
不设置border的父子盒子也会塌陷
更多的描述兄弟之间的关系,如果是父子之间的关系用padding来描述
浮动
float:left right
浮动起来的盒子会脱离标准文档,且不在独占一行
父盒子不能被子盒子撑起来
清除浮动 : clear:both
伪元素清除法:
clearfix:after{
content:'';
clear:both;
display:block
}
overflow:hidden scroll auto
overflow
溢出部分如何处理? visible 默认 溢出了也会显示 hidden 溢出部分隐藏 auto scroll 溢出之后显示滚动条
定位
position : relative absolute fixed top: left: right: bottom: 相对定位 : 相对自己原来的位置定位,还占据自己原来的位置 绝对定位 : 相对于有定位的父盒子/整个html界面的位置,不占据原来的位置 固定定位 : 相对浏览器窗口的
z-index
表示的在页面上标签显示的先后顺序 1.值越大的越在前面显示 2.设置的值没有单位没有范围 3.浮动的盒子不能设置index 4.从父现象:父级的优先级不高,儿子的优先级再高也没用
透明度opacity
opacity:0.5 是整个标签的透明度
javascript
javascript包含:
ECMAscript js的一种标准化规范 标出了一些基础的js语法
DOM document object model 文本对象模型 主要操作文档中的标签
BOM browser object model 浏览器对象模型 主要用来操作浏览器
js引入和script标签
方式一:在html页写js代码
<script>
alert('hello,world')
</script>
方式二: 引入js文件
<script src="first.js"></script>
输入输出
弹出框alert
alert('hello') 弹出框中的内容是"hello"
弹出输入框
var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp
控制台输出
console.log(变量或值)
基础的数据类型
查看类型
typeof 变量; typeof(变量);
数字number
整数 var a = 1 小数 var b = 1.237 保留小数 b.toFixed(2) //1.24
string 类型的常用方法
属性 : length
方法:
trim() 去空白
a.concat('abc') a拼接'abc'串
charAt(索引) 给索引求字符
indexOf(字符) 给字符求索引
slice(start,end) 顾头不顾尾,可以用负数,取子串
.toLowerCase() 全部变小写
.toUpperCase() 全部变大写
.split(',',2) 根据(第一个参数)分隔符切割,切前多少个结果
boolean 布尔值
true : [] {}
false : undefined null NaN 0 ''
null 空和undefined未定义
null 表示空 boolean值为false undefined 没有定义 创建变量但是不赋值 boolean值为false
内置对象类型
数组 Array
创建: var arr = ['a','b','c']; var arr2 = new Array(); 索引操作: arr[0] 查看 arr2[0] = 'alex' 赋值操作
Array常用的属性和方法
属性:length
方法:
.push(ele) 尾部追加元素
.pop() 获取尾部的元素
.unshift(ele) 头部插入元素
.shift() 头部移除元素
.slice(start, end) 切片
.reverse() //在原数组上改的 反转
.join(seq) //a1.join('+')，seq是连接符 将数组元素连接成字符串
.concat(val, ...) //连个数组合并,得到一个新数组，原数组不变 连接数组
.sort() //排序
.splice() //参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素，并向数组添加新元素。
数据类型之间的转换
string --> int
parseInt('123') //123
parseInt('123abc') //123
parseInt('abc') //NaN not a number
string --> float
parseFloat('1.233')
float/int --> String
var num = 123
String(123)
var str = num.toString()
任意类型 --> Boolean
Boolean(数据)
字符串和数字相加 --> 字符串
字符串和数字相减 --> 数字
运算符
赋值运算符
= += -= *= /= %=
比较运算符
> < >= <= == != 不比较类型 === !== 比较类型和值(常用)
算数运算符
+ - * / % ** ++ -- var a = 1 undefined var b = a++ // a=2 b=1 var c = ++a // a=3 c=3
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非 true && true //true true || false //true !true //false
流程控制
if语句 if(条件){代码}else if(条件2){代码2}else{代码3}
case语句 if的变种,多选1. 遇条件开启执行状态,遇break开始执行. 遇default直接执行.
var err_type = 'info'
switch(err_type) {
case 'warining':
console.log('警告');
break;
case 'error':
console.log('错误');
break;
default:
console.log('没错')
}
循环语句
while
var i = 1; //初始化循环变量
while(i<=9){ //判断循环条件
console.log(i);
i = i+1; //更新循环条件
}
for
//方式一:
for(var i = 1;i<=10;i++){
console.log(i)
}
//方式二:
var arr = [1,2,3,4,5]
for (n in arr){
console.log(n)
}
三元运算符
var 结果 = boolean表达式 ? 为true返回的值:为false返回的值
函数
function 函数名(参数){
函数体
return 返回值
}
函数名(参数)
//注意 : 传递的参数可以和定义的个数不一样,但是不要这么写
// 返回值只能有一个
//arguments伪数组
function add(){
console.log(arguments);
}
add(1,2,3,4)
function add(a,b){
console.log(arguments);
}
add(1,2,3,4)
匿名函数
var add = function(){
console.log('hello,world');
}
//add()调用
自调用函数
(function(a,b){
console.log(a,b)
})(1,2)
基础数据类型
number
整数和小数都属于number类型 toFixed(2) 保留两位小数
string
'字符串' "字符串"
属性 :length
方法 :trim(),concat('str'),charAt(索引),indexOf(元素),slice(start,end),split(sep,返回前n个值)
toLowerCase(),toUpperCase()
json数据类型序列化
'{"key":18,"123":[1,2,3]}'
自定义对象 = JSON.parse(json字符串)
json字符串 = JSON.stingify(自定义对象)
正则的用法
创建一个正则:
var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\
var reg2 = /正则表达式/ //内部的元字符就不会转义了
reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false
在字符串中应用正则
var exp = 'alex3714'
exp.match(/\d/) //只匹配从左到右的第一个
exp.match(/\d/g) //匹配所有符合规则的 返回一个数组
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小写a
exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来
exp2.match(/a/ig) //不区分大小写并匹配所有
exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果
exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值
Date对象
创建对象:
var dt = new Date() //获取到当前时间
dt.toLocalString() //转换成'2019/8/13 10:18:12'
dt.getFullYear() //年
dt.getMonth() //月 1月是0
dt.getday() //周中天 周日是0
dt.getDate() //月中天 1号是1
dt.getHours() //时 从0开始
dt.getMinutes() //分 从0开始
dt.getSeconds() //秒 从0开始
自定义时间:
var dt2 = new Date('2018/1/1 12:12:12') 1月1日
var dt2 = new Date(2018,1,1); 2月1日
面向对象(了解)
function Student(name,age){
this.stu_name = name
this.stu_age = age
}
Student.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
var stu = Student('alex',84) // 实例化
stu.stu_name // 查看属性
stu.stu_age
stu.show() // 调用方法
object.prototype.show = function(){
console.log(this.stu_name,this.stu_age)
}
DOM
整个文档就是一棵树
整个文档是从上到下依次加载的
当加载到script标签的时候,会有一个特殊的变量提升的解析方法,导致我们后定义的函数可以提前被调用
每一个节点描述 : 父标签 子标签 兄弟节点
属性
文本
标签名
1.找到对应的标签
2.给标签绑定对应的事件,关系,内容等
3.操作对应的标签
直接查找
var a = document.getElementById('baidu') //直接返回一个元素对象
var sons = document.getElementsByClassName('son') //返回元素组成的数组
sons[0] //获取到一个标签对象
var divs = document.getElementsByTagName('div') //返回元素组成的数组
间接查找
找父亲
var a = document.getElementById('baidu')
var foodiv = a.parentNode //获取到父节点的对象
找儿子
var foo= document.getElementById('foo')
foo.children //获取所有的子节点,返回一个数组
foo.firstElementChild //获取第一个子节点
foo.lastElementChild //获取最后一个子节点
找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
son1.nextElementSibling //找下一个兄弟 返回一个对象
son1.previousElementSibling //找上一个兄弟 返回一个对象
标签的创建
var obj = document.createElement('标签名') // a div ul li span
obj就是一个新创建出来的标签对象
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后 父节点.insertBefore(要添加的节点,参考子节点) //添加在父节点的某个儿子之前
标签的删除
父节点.removeChild(要删除的子节点) 子节点1.parentNode.removeChile(子节点2)
标签的替换
父节点.replaceChild(新标签,旧儿子)
标签的复制
节点.cloneNode() //只克隆一层 节点.cloneNode(true) //克隆自己和所有的子子孙孙 注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
节点的属性操作
节点对象.getAttribute('属性名')
节点对象.setAttribute('属性名','属性值')
节点对象.removeAttribute('属性名')
节点对象.classList.add('类名')
节点对象.classList.remove('类名')
节点对象.classList.contains('类名')
节点对象.classList.toggle('类名')
节点对象.value = 值
节点对象.value查看值
节点对象.style.样式属性 = 值 设置样式 所有带中线的方法都要改变成驼峰命名
节点的文本操作
节点对象.innerText = '只能写文字' 只识别文本,所有的标签也当做文本识别 节点对象.innerHTML = '可以放标签' 可以识别标签
Math
floor ceil max min random abs round
事件
绑定方式:
<button id="btn">点击一下</button>
方式一:
var btn = document.getElementById('btn')
btn.onclick = function () {
alert('点我干嘛')
}
方式二:
btn.onclick = clik
function clik() {
alert('不要点')
}
方式三:
<button id="btn" onclick="clik()">点击一下</button>
function clik() {
alert('不要点')
}
window对象
定时器
定时器方法
var tid = setInterval("fn()",n) 每隔n毫秒就执行fn函数一次
var tid = setTimeout("fn()",n) n毫秒之后执行fn函数一次
clearInterval(tid) 清除定时器
window的子对象 window.location
属性: window.location.href 查看当前网页的url window.location.href = 'http://www.baidu.com' 修改当前网页的url,修改之后会跳转 方法: window.location.reload() 刷新页面
select的onchange事件
select对象.options.selectedindex 被选中的选项在options中的索引位置
常见事件
onclick() 单机事件 onmouseover() 鼠标悬浮 onmouseout() 鼠标离开 onscroll() 滚动轴移动 window.onscroll() onChange() 文本区域内内容变化 onfocus() 获取焦点 onblur() 失去焦点
history对象
history.back() go(-1) //回到上一页 history.go(0) //刷新 history.forward() go(1) //去下一页
jQuery
$简写
jquery对象和dom对象的关系和转换
jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index]
jquery选择器
标签选择器 *通用选择器
$('#id') id选择器
$('.box') 类选择器
$('li') $('a') 标签选择器
$('*') 通用选择器 所有的标签
$('div.box') 交集选择器
$('div,p,a')div,p并集选择器
$('div li') 后代
$('div>ul>li')子代
$('.baidu+li')毗邻
$('.baidu~li')弟弟
属性选择器
$('[属性名]') 必须是含有某属性的标签
$('a[属性名]') 含有某属性的a标签
$('选择器[属性名]') 选择器加属性名
$('选择器[属性名="aaaa"]') 属性名是后面的属性值
$('选择器[属性名$="xxx"]') 属性值以xxx结尾的
$('选择器[属性名^="xxx"]') 属性值以xxx开头的
$('选择器[属性名*="xxx"]') 属性值包含xxx
$('选择器[属性名1][属性名2="xxx]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
jquery筛选器
$('选择器:筛选器')
$('选择器:first')
作用于选择器选择出来的结果
first 找第一个
last 最后一个
eq(index) 通过索引找
even 找偶数索引
odd 找奇数索引
gt(index) 大于某索引的
lt(index) 小于某索引的
not(选择器) 不含 符合选择器 要求的
has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的
状态筛选器
enabled$(':enabled') 能用的
disabled $(':disabled') 被锁定不能用的
checked $(':checked')选中的,下拉式选框也算.
selected$(':selected') 下拉式选框
$(':checkbox:checked') 多选框能选的
$('input:checkbox:checked')
jquery的筛选器方法
:$('ul p').siblings() 找所有同级,兄弟
$('ul p').prev() 找上一个哥哥,前面选择器每有一个标签,就会找一个哥哥
$('ul p').prevAll() 找所有哥哥
$('ul p').prevUntil('选择器') 从上往下找,找到这个哥哥就停止.
next() 找一个弟弟
nextAll() 找所有弟弟
nextUntil('选择器') 找到这个弟弟就停止
parent() 找一个祖宗,选择器里如果有多个标签,每一个都会找到一个祖宗.
parents() 找所有直系祖宗
parentsUntil('选择器') 这里如果放body,就是找到body以下的大标签.
children() 找所有儿子
children().first 第一个儿子.
筛选方法
first()
last()
eq(index)
not('选择器') 去掉满足选择器条件的
filter('选择器')交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器') 后代选择器 找所有结果中符合选择器要求的后代
has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
jq对象的循环问题
// 1.不要用for(i in li_list){}的方式循环一个jq对象
for(let i=0;i<li_list.length;i++){ //let 声明的变量的作用域只在for循环中
console.log(i)
} jq对象中,除了找到的内容外,还有额外的内容. 所以直接for循环会有问题. jq提供了length方法,
等于获取找到的内容长度.
事件的绑定
<body>
<button>点击1</button>
<button>点击2</button>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
$('button').click(
function () {
alert('你点了我一下!')
}
)
</script>
标签的文本操作
text()
$('li:first').text() // 获取值
$('li:first').text('wahaha') // 设置值
$('li:last').html() // 获取值
$('li:last').html('qqxing') // 设置值
$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>') //a标签
var a = document.createElement('a')
a.innerText = '我是AD钙'
$('li:last').html(a) //a 是dom对象
var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj) //jqobj是jquery对象
标签的操作
增加
父子关系:
追加儿子 :(父).append(子) (子).appendTo(父)
头部添加 :(父).prepend(子) (子).prependTo(父)
兄弟关系:
添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点)
添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动
例子append
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append(jq[0])
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
$('ul').append('<li>鹿晗</li>')
例子appendTo
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo('ul')
var dom_ul = document.getElementsByTagName('ul')[0]
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo(dom_ul)
var li = document.createElement('li')
var jq = $(li).text('张艺兴')
jq.appendTo($('ul'))
对已经存在的内容进行添加 -- 移动
$('li:first').appendTo('ul')
$('li:last').prependTo('ul')
$('ul').prepend('<li>李东宇</li>')
$('<li>邓帅</li>').prependTo('ul')
$('#l2').before('<li>李东宇</li>')
$('<li>李东宇222</li>').insertBefore('#l2')
$('#l2').after('<li>邓帅</li>')
$('<li>邓帅222</li>').insertAfter('#l2')
删除 修改 克隆
删除 : remove detach empty
remove : 删除标签和事件,被删掉的对象做返回值
detach : 删除标签,保留事件,被删掉的对象做返回值
empty : 清空内容标签,自己被保留
修改 : replaceWith replaceAll
replaceWith : a.replaceWith(b) 用b替换a
replaceAll : a.replaceAll(b) 用a替换b
复制 : clone
var btn = $(this).clone() //克隆标签但不能克隆事件
var btn = $(this).clone(true) //克隆标签和事件
var obj = $('button').remove()
obj是button标签,但是事件已经被删除了
var a = document.createElement('a')
a.innerText = 'wahaha'
$(a).replaceAll('p')
$('p').replaceWith(a)
标签的属性操作
通用属性
attr
获取属性的值
$('a').attr('href')
设置/修改属性的值
$('a').attr('href','http://www.baidu.com')
设置多个属性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})
removeAttr
$('a').removeAttr('title') //删除title属性
如果一个标签只有true和false两种情况,适合用prop处理
$(':checkbox:checked').prop('checked') //获取值
$(':checkbox:checked').prop('checked',false) //表示取消选中
如果设置/获取的结果是true表示选中,false表示取消选中
类的操作
添加类 addClass
$('div').addClass('red') //添加一个类
$('div').addClass('red bigger') //添加多个类
删除类 removeClass
$('div').removeClass('bigger') //删除一个类
$('div').removeClass('red bigger')
转换类 toggleClass //有即删 无即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
value值的操作
$(input).val()
$(':text').val('值')
$(':password').val('值')
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 :
$(':radio').val([1])
$(':radio').val([1,2,3])
css样式
css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
$('div').css('background-color','red') //设置一个样式
$('div').css({'height':'100px','width':'100px'}) //设置多个样式
滚动条
scrollTop() scrollLeft() $(window).scrollLeft() $(window).scrollTop()
盒子模型
内容宽高 : width和height 内容+padding : innerWidth和innerHeight 内容+padding+border :outerWidth和outerHeight 内容+padding+border+margin : outerWidth(true)和outerHeight(true) 设置值:变得永远是content的值
表单操作
$(':submit').click(
function () {
return false
}
)
如果返回false不提交
如果返回true不提交
动画
show系列
show hide toggle
slide滑动系列
slideUp slideDown slideToggle(时间,回调函数)
fade淡入淡出系列
fadeOut fadeIn fadeToggle
动画的停止
stop 永远在动画开始之前,停止动画
事件
事件绑定
// bind 参数都是选传的,接收参数e.data
$('button').bind('click',{'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').bind('click',fn)
function fn(e) {
console.log('wahaha')
}
// 简写的事件名称当做方法名
$('button').click({'a':'b'},fn)
function fn(e) {
console.log(e.data)
console.log(e.data.a)
}
$('button').click(fn)
function fn(e) {
console.log('wahaha')
}
解除绑定
$('button').unbind('click')
各种事件
click(function(){...}) // 单机事件
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // input框鼠标离开时内容改变触发
keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件
mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
事件冒泡
<style>
.outer{
width: 300px;
height: 300px;
background-color: red;
}
.inner{
width: 100px;
height: 100px;
background-color: forestgreen;
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
$('.outer').click(
function () {
alert('outer')
}
)
$('.inner').click(
function (e) {
alert('inner')
// e.stopPropagation() //阻止事件冒泡方法1
return false //阻止事件冒泡方法2
}
)
</script>
事件委托
$('div').on('click','button',{'a':'b'},function (event) {
console.log(event.data)
alert('不许点')
})
相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件
页面的加载
document.onload = function(){
//js 代码
}
window.onload = function () {
$('button').click(function () {
alert('不许点')
})
}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次
//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
function () {
//文档加在完毕之后能做的事情
})
//jquery的方式(简写)*****
$(function () {
//文档加在完毕之后能做的事情
})
//示例
$(function () {
$('button').click(function () {
alert('不许点')
})
})
//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
function () {
alert('123')
})
each
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
<script>
$('li').each(
function (ind,dom) { //主动传ind是每项的索引,dom是每一项的标签对象
console.log(ind,dom)
}
)
</script>