前端笔记整理

目录

标签分类

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>
点赞