前端笔记整理
标签分类
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>