目录
html标签
- h1~h6标题
<h1>标题文本111</h1>- p段落
<p>段落文本</p>- i斜体
<i>斜体文字</i>- em斜体(强调)
强调指能被检索
- b
<b>加粗文字</b>- strong加粗(强调)
- div(盒子)
本质都是div
<div>基本盒子标签</div>
<header>头部盒子</header>
<nav>导航盒子</nav>
<aside>侧边栏</aside>
<article>内容</article>
<footer>底部</footer>
<section>大量组合内容</section>- img(图片)
<img src="路径/01.jpg" alt="加载失败显示文字" title="移入显示文字">- a(链接)
href表示路径,'#'跳转到顶部,'#id'跳转到锚点;
target表示打开方式,'_blank'从空白页打开,'_self'从当前页打开.
<a href="https://www.npmjs.com/" target="_blank">npm包下载网址222</a>- ul(无序列表)
type(style里为list-style)表示开头图标,默认disc实心圆,circle空心圆,square实心正方形,none无图案.
<ul type="值">
<li>列表内容1</li>
<li>列表内容2</li>
</ul>- ol(有序列表)
<ol type="值">
<li>列表内容</li>
</ol>- dl(自定义列表)
<dl>
<dt>标题，图片</dt>
<dd>描述文本，解释内容</dd>
</dl>- table(表格)
cellspacing单元格外边距;
cellpadding单元格内填充.
<table>
<thead><!-- 头部 -->
<tr><!-- 行 -->
<td>列内容1</td>
<td>列内容2</td>
</tr>
</thead>
<tbody><!-- 内容 -->
<tr>
<td></td>
</tr>
</tbody>
<tfoot><!-- 底部 -->
<tr>
<td></td>
</tr>
</tfoot>
</table>- form(表单)
action 属性取值是: 将表单信息提交给哪个文件处理;
required必填项;
disabled禁用，无法操作;
checked默认选择(radio/checkbox);
readonly 只读;
hidden隐藏输入框;
type指输入框性质:
text(文本输入框)
password（密码输入框，隐藏输入内容）：maxlength(最大输入字符数）、minlength（最小）
radio（多项单选）：单选按钮同一个name实现互斥,要添加value 后台才能拿到值
checkbox（多选按钮）：复选按钮同一个name，要添加value
file（文本域）
img（图片提交）
submit（提交按钮）
reset（清空按钮）
button（普通按钮）
<form action="getIfo.php">
用户名:<input type="text" name="userName" maxlength="10" minlength="5"><br>
密码: <input type="password" disabled><br>
性别:<input type="radio" name="sex" value="nan" checked>男
<input type="radio" name="sex" value="nv">女<br>
爱好:<input type="checkbox" name="aihao" value="game" checked>打游戏
<input type="checkbox" name="aihao" value="coding">敲代码
<input type="checkbox" name="aihao" value="movie">看电影<br>
头像:<input type="file" name="avatar"><br>
<input type="image" src="路径"><br>
<input type="submit" value="提交">
<input type="reset" value="清空">
<input type="button" value="按钮">
</form>- select(下拉菜单)
<select name="">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
</select>- label(获取焦点)
<label for="#in">点击</label>
<input type="text" id='in'>
<label >输入: <input/></label>css常见属性
选择器
| 选择器 | 分类 | 格式 | 举例 |
| 基础选择器 | 通配符选择器 | *{} | |
| 标签选择器 | 标签名 | p{} | |
| 类选择器 | .类名 | .con{} | |
| id选择器 | #id值 | .abc{} | |
| 复杂选择器 | 并集选择器 | 选择器1,选择器2 | .a,p{} |
| 交集选择器 | 选择器1.选择器2 | div.con{} | |
| 子选择器 | 父代选择器>子代选择器 | div>.con{} | |
| 后代选择器 | 祖代选择器 后代选择器 | div .con{} | |
| a伪类选择器 | 未访问 | a:link{} | a:link{background-color:red;} |
| 鼠标悬停 | a:hover{} | a:hover{background-color:blue;} | |
| 访问后 | a:visited{} | a:visited{background-color:pink;} | |
| 点击未释放 | a:active{} | a:active{background-color:yellow;} | |
| 属性选择器 | 选择器[属性]: | ||
| 选择器[属性=""]: | |||
| 选择器[属性^=""]: | |||
| 选择器[属性$=""]: | |||
| 选择器[属性*=""]: | |||
| 结构伪类选择器 | 选择器:first-child{} | div::first-child{} | |
| 选择器:last-child{} | .con>li:last-child{} | ||
| 选择器:nth-child(n){} | .con li:nth-child(2n+1) | ||
| 选择器:nth-of-type(n){} | |||
| 伪元素选择器 | ::before | ||
| ::after | |||
| ::placeholder |
字体样式
| 字体样式 | 颜色 | color：值（单词/#16进制/rgb颜色） | color: orange; |
| 大小 | font-size: 值(数字+单位px) | font-size: 36px; | |
| 加粗 | font-weight: 值（bold加粗/normal不加粗） | font-weight: bold; | |
| 斜体 | font-style：值（italic斜体/normal不斜体） | font-style: italic; | |
| 字体 | font-family: 值（字体库） | font-family: "宋体"; | |
| 不透明度 | opacity：值（0~1） | opacity：0.6（或60%） |
可合并写：font: italic bold 36px "宋体";
文本样式
| 文本样式 | 对齐方式 | text-align：left/center/right（居左/中/右）； | text-align: right; |
| 缩进 | text-indent：值（常取2em即2倍字体像素）； | text-indent: 32px; | |
| 行高 | line-height：值（常取1.5em即1.5倍）； | line-height:1.5px; | |
| 线体 | text-decoration:值； | text-decoration:none; |
| 文本溢出 | overflow:scroll; | 显示滚动条 |
| overflow:auto; | 自动设置滚动条,当内容能排列时不显示滚动条 | |
| overflow: hidden; | 隐藏溢出部分 | |
| white-space: nowrap; | 不换行显示内容 | |
| text-overflow: ellipsis; | 显示省略号 |
鼠标指针样式
| 鼠标形状 | cursor: 值； | cursor：text； | default/默认值/箭头 |
| pointer/指针:指示器/手指头 | |||
| wait/等待/圆环(加载中) | |||
| help/帮助/箭头+问号 | |||
| text/文本/工形状 | |||
| crosshair/十字准线/十字形 |
背景
| 背景 | 背景色 | banckground-color:颜色值 |
| 背景图 | background-image: url(图片路径); | |
| 位置 | background-position: 值;（top/right/bottom/left/center） | |
| background-position-x: 值;（横向偏移） | ||
| background-position-y: 值;（纵向偏移） | ||
| 平铺 | background-repeat: repeat(平铺)/no-repeat(不平铺) /repeat-x(横向平铺)/repeat-y(纵向平铺)/r-x-y（=r） |
列表
| 列表 | 无序列表抬头 | type="值";(inline style) list-style-type: 值;(style) 【style中可省-type】 | "disc"(默认实心圆） |
| "sircle"(空心圆) | |||
| "square"(实心正方形) | |||
| "none"(无图案) |
表格
| 表格 | 表格格式 | <table><tr><td>单元格内容</td></tr></table> | |
| 内外填充 | <table cellspacing="0" cellpadding="0"></table> | 设置的是单元格（td）之间的内外填充 | |
| border-spacing: 数值; | 单元格之间间距 | ||
| vertical-align:值;/border-collapse:collapse; | 单元格垂直对齐方式top上/middle中/bottom下 | ||
| 边框 | border-top/right/bottom/left不写则表示四方向 solid（实线）/dashed（虚线）（边框属性通用） | ||
| 合并行 | <td colspan="n">内容</td> | 向右合并2单元格 | |
| 合并列 | <td rowspan="n">内容</td> | 向下合并3单元格 | |
| <caption> | 整个表格的标题 | ||
| <thead> | 表头 | ||
| <th> | 列表标题,自带加粗和水平居中的样式 | ||
| <tfoot> | 表格的页脚 |
表单
| 表单 | 表单格式 | <from acrion="目标">(表单)</from> | 点击提交后，将表单内容提交到"getInfo.php" |
| 文本输入框 | <input type="text" name=""> | 文本输入框，min<=输入字符<=max | |
| 密码输入框 | <input type="password"> | 密码输入框，隐藏输入文本内容 | |
| 单选按钮 | <input type="radio" name="名" value="值1"> <input type="radio" name="名" value="值2"> | 单选，name值相同，value不同 | |
| 复选按钮 | <input type="checkbox" name="名" value="值1"> <input type="checkbox" name="名" value="值2"> <input type="checkbox" name="名" value="值3"> | 复选，name值相同，value不同 | |
| 下拉菜单 | <select name="名"> <option value="值1">Volvo</option> <option value="值2">Saab</option> </select> | ||
| outline:none | 全部轮廓(全部清除) |
其他属性:
| type="email":邮箱地址 | type="hidden":隐藏表单元素,脱离标准文档流,在文档结构中显示 |
| type="range":进度条 | placeholder="值":显示输入框内的提示文字,当人为输入内容时会消失, 若需要控制字体属性则使用::placeholder伪元素进行设置 |
| type="search":搜索 | autocomplete="值":该属性控制历史输入信息的弹出提示, 当值为off时则关闭当值为on时则开启 |
| type="tel":联系方式 | autofocus="autofocus":让某个输入框在页面加载后自动获取焦点 |
| type="number":数字, max:最大,min:最小 | required="required":设置表单元素为必填项,当点击提交按钮时开始验证 |
| type="datetime-local": 年月日 时分 | multiple="multiple":与文件输入框(<input type="file">)一起使用, 允许选择多个文件进行上传 |
| type="date" :年月日 | list="值":与datalist标签进行关联,提示热门搜索内容列表, list的值与datalist的id属性的值必须是相同的才有 |
| type="time":时间 | |
| type="month":某年某月 | |
| type="week":某年某周 | |
| type="color":颜色取值 | |
| type="url":网址 |
数值通用
| 数值 | border/padding/margin:(数值); | 1个数:四值相等 |
| 2个数:上下+左右 | ||
| 3个数: | ||
| 4个数:上右下左 | ||
| border-radius:(数值); | 1个数:四值相等 | |
| 2个数:【上左/下右】+【上右/下左】 | ||
| 3个数: | ||
| 4个数:上左+上右+下右+下左 |
| 外边距 | margin: 像素值; |
| 内填充 | padding: 像素值; |
| 圆角 | border-radius:值; |
| 边框 | border;值; |
标签转换
| 元素转换 | display:值; | block | 将行内转为块级元素,拥有块级标签的特性 |
| inline | 将块级标签转为行内标签,拥有行内标签的特性 | ||
| inline-block | 设置行内块元素.元素拥有行内特性且可以设置宽高 | ||
| none | 内容隐藏,并且脱离标准文档流 |
浮动
| 浮动 | 浮动 | float:值; | 向top上/right右/bottom下/left左浮动 |
| 浮动位置 | top/rght/bottom/left:值; | 向指定方向移动若干数值浮动，可负数 | |
| 清除浮动塌陷 | clear: both; | 设置父级元素高度/添加子级空元素并赋值， 以避免内容/边框塌陷 |
定位
| 定位 | 静态定位 | position:static; | 元素在标准文档流中的位置 |
| 相对定位 | position：relative; | 1.只设置元素相对定位的情况下，元素不会发生位移。需要使用位移属性。 2.设置相对定位的元素不会脱离标准文档流 3.参照原来标准文档流中的位置发生位移 4.设置相对定位的元素不会改变元素的特性 5.设置相对定位的元素的层级会高于未设置定位的元素的层级（相对定位存在层级提升） | |
| 绝对定位 | position:absolute; | 1.脱离标准文档流 2.层级提升 3.只设置绝对定位后元素不会发生位移,需要使用位移属性 4.如果祖先级容器有定位属性的设置则绝对定位的元素相对于祖先容器发生位移(找最近的祖先元素),若祖先级容器均未设置定位则相对于浏览器发生位移(子绝父相) 5.如果都设置了定位则子盖着父 | |
| 固定定位 | position:fixed; | 1.脱离标准文档流 2.层级提升 3.相对于浏览器发生位移(不会受祖先元素定位的影响) 4.元素不会根据滚动条的滚动而滚动 5.ie浏览器不支持固定定位 | |
| 定位位置 | top/rght/bottom/left:值; | ||
| 层级设置 | z-index:数字; | 数字无单位，越大层级越高，但父级不会覆盖子级 |
2d/3d
| 位移 | transform:值; | 2D中xy合并translate(100px,100px)； 或transform:translateX(100px) translate(100px)； 3D中xyz合并translate3d(100px,200px,300px)； | 值可用百分数， 表示元素本身大小百分比 |
| 旋转 | transition:rotate(数deg); | 旋转度数，单位:度deg（°） | |
| transform-origin:值; | 旋转中心，xy坐标， 也可以百分数，也可以方位单词 | ||
| 3d旋转 | 分别用 rotateX rotateY rotateZ 表示沿轴旋转 | 3d中1表示开,0表示关,分别xyz 且≠transform:rotateX(45deg) rotateY(45deg) rotate(0); | |
| 缩放 | transform:值; | 数字即为原元素的倍数 | |
| 透视 | perspective:像素值; | 给需要开启透视效果元素的祖先元素 | 初始平面(屏幕)到视觉平面的距离 |
| 开启 3d效果 | 给父元素，默认值"flat"(不开启) "preserve-3d"开启3d效果 |
transform同名属性可合并写
包括位移，2d/3d旋转，缩放
如：
transform:translate(100px,10px) rotate(45deg) scale(1.5);
动画
| @keyframes 名{0%{}100%{}} | 百分数相对于动画总时间(css内容) | |
| animation-name:名; | animation-name:cat; | 与上面的名要对应好， 与类名id名取名规则一致(必填） |
| animation-duration:时间; | animation-duration:1s; | 动画持续时间，值单位s/ms(必填) |
| animation-timing-function:值; | ease; | 慢(开始)→加快→缓慢结束 (默认) |
| linear; | 匀速 | |
| ease-in; | 慢速开始 | |
| ease-out; | 慢速结束 | |
| ease-in-out; | 开始和结束较慢 | |
| animation-delay:时间; | animation-delay:1s; | 等待执行的时间 |
| animation-iteration-count:值; | animation-iteration-count:infinite; | 播放次数，默认1，infinite循环 |
| animation-direction:值; | animation-direction:normol; | 下周期是否逆向播放， 默认nomol不逆向/altemate逆向 |
| animation-fill-mode:值: | animation-fill-mode:forwards; | 结束状态，forwards保持结束状态 backwards回到原点 |
| animation-play-state:值; | animarion-play-state:running; | 执行状态，running执行(默认)/paused停止 |
| 同属性名合并，顺序为 animation: name duration timing-functionfunction delay iteration-count direction fill-mode; | ||
flex弹性布局
| 子元素排序 | display:flex;flex-direction:值; | flex-direction: row; | 左→右（默认） |
| flex-direction: row-reverse; | 右→左 | ||
| flex-direction: column; | 上→下 | ||
| flex-direction: column-reverse; | 下→上 | ||
| (主轴)水平分布 | display:flex;justify-content:值; | justify-content:flex-start; | 左对齐（默认） |
| justify-content:center; | 水平居中 | ||
| justify-content:flex-end; | 右对齐 | ||
| justify-content:space-between; | 两端对齐 | ||
| justify-content:space-around; | 手拉手分布 | ||
| (辅轴)垂直分布 整体位置 | display:flex;align-items:值; | align-items:flex-start | 顶点对齐（默认） |
| align-items:flex-end; | 底部对齐 | ||
| align-items:center; | 垂直居中 | ||
| 换行 | display:flex;flex-wrap:值; | flex-wrap:wrap; | 溢出时换行， 第一行在上/换列，在左 |
| flex-wrap:nowrap; | 不换行（默认） | ||
| flex-wrap:wrap-reverse; | 溢出时换行， 第一行在下/换列，在右 | ||
| 换行时垂直分布 (辅轴) | display:flex;align-content:值; | align-content:flex-start; | 顶部对齐，无行间距 |
| align-content:flex-end; | 底部对齐，无行间距 | ||
| align-content:center; | 垂直居中，无行间距 | ||
| align-content:space-between; | 两端对齐 | ||
| align-content:space-around; | 手拉手分布 | ||
| align-content:stretch; | 顶部对齐，均匀分布（默认） | ||
| 辅轴对齐方式 | align-self:值; | 辅轴对齐方式，默认auto，center居中 | |
| 子元素排序 | order:数字; | 给子元素，值越小排序越靠前，默认0 | |
| 空白分配 | flex-grow:数字; | （多余空间*系数） 子元素系数和 默认0 | |
| 缺少空间分配 | flex-shrink:数字; | 缩小 以分担父容器缺少的容量 默认0 |
媒体查询
@media 设备 运算符（条件）{代码块}
| 媒体查询 | @media screen and (max-width:767px) {body{background-color: yellow;}} | all:所有设备/print:打印设备/screen:web网页(重点) |
| and（与）/or（或）/only（特指） | ||
| max-width/min-width |
JavaScript常见语法
| var let const | var 变量名（=值） | |
| 基本数据类型 | undefined | 未赋值 |
| null | 空值 | |
| number | 数值 | |
| string | 字符串 | |
| boolean | 布尔（true/false） | |
| 复杂数据类型 | Object | 对象 |
| Function | 函数 | |
| typeof | 检测数据类型 | |
| 注释符号 | // | 单行注释 |
| /**/ | 多行注释 | |
| 算数运算符 | +、-、*、/、%、++、--、+=、-= | |
| 逻辑运算符 | &&、||、！ | |
| 比较运算符 | >、>=、<、<=、!=、!==、==、=== | |
| 赋值运算符 | = | |
| if分支 | if（表达式）{代码块}else{代码块} | |
| switch分支 | switch（变量）{ case 常量1：代码块； break； … default：代码块； break（最后可略）；} | |
| while循环 | 开始条件； while（结束条件）{ 代码块； 趋近循环结束条件；} | |
| do-while循环 | 开始条件； do{ 代码块； 趋近结束条件； }while（结束条件） | |
| for循环 | for（1开始；2结束；4趋近结束；）{3代码；} | |
| continue； | 跳过本次循环 | |
| break； | 结束分支 | |
| 函数 | function 名 （形参1…）{代码块} | |
| 调用函数 | 名（实参1…) | |
| return 值（变量/定值）； | 停止函数并返回值 | |
| 转string | String（变量） | |
| 变量.toString | 只有Boolean（true/false）能直接用， 其他要先赋值 | |
| （变量+""） | ||
| 转number | Number（变量） | 纯数字→数 含字符串→NaN null→0 false→0/true→1 |
| submit | Boolean（变量） | 字符串→有则true/无则false 数字→0为false/其他true null→false |
| 取整数 | parseInt（值） | |
| 取小数 | parseFloat（值） | |
| 判断非数字 | isNaN（值） | |
| eval（js代码） | 执行一段以字符串形式表示的js代码 | |
| 事件 | document.getElementById（"id名"） | 通过id获取操作对象 |
| onclick/单击 ondblclick/双击 | ||
| onmousemove/鼠标移动 | ||
| onmouseover/鼠标移入 onmouseout/鼠标移出 | ||
| onmousedown/左键按下未释放 onmouseup/左键按下后释放 | ||
| 表单事件 | onfocus/获取焦点事件 | |
| onblur/失去焦点事件 | ||
| onchange/值改变事件 | ||
| oninput/输入框内容长度变化触发 | ||
| onreset/单击重置按钮触发事件 | ||
| onsubmit/单击提交按钮触发事件 | ||
| 键盘事件 | event.key event.keyCode event.keydown enent.keyup | |
| UI事件 | onload/页面加载完成事件 | |
| onresize/页面大小改变事件 | ||
| onscroll/滚动条滚动事件 | ||
| 非表单元素 赋值/取值 | document.getElementById("").innerText=""; | 取值时，变量=element.innertext; |
| document.getElementById("").innerHTML=""; | ||
| 获取表单元素 | element.value="值"; | 取值时，变量=element.value; |
| 事件绑定 | <标签 on事件="函数名（）"></标签> | 行内 |
| var element=document.getElementById(""); element.on事件=function(){代码块} | js | |
| var element=document.getElementById(""); element.addEventListener("事件",fn(),T/F) | 事件监听 | |
| 浏览器对象模型 browser object model | window(顶级对象) | |
| document(文档对象) | ||
| history(历史对象)(forward前进/back后退) | ||
| prompt(输入框) | ||
| alert(提示框) | ||
| confirm(确认框) | ||
| window.setTimeout("代码块",时间数); | 1s=1000ms 默认单位ms | |
| window.setInterval("代码块",时间数); window.clearInterval(set方法返回值); | ||
| 历史对象 | location(地址栏对象) href地址跳转 reload()刷新 | |
| 文档对象模型 document object model | document.getElementById("id值"); | 单个 |
| document.querySelector("选择器"); | 单个 重复则第一个 | |
| document.querySelectorAll("选择器"); | 数组 | |
| document.getElementsByClassName("class值"); | ||
| document.getElementsByTagName("标签名称"); | ||
| document.getElementsByName("name属性值"); | ||
| 对象.style.css属性="样式值"; | ||
| 对象.className; | 获取对象的class值 | |
| var clastr=对象.className; | 获取对象的class名 | |
| classList | classList | 只读 |
| obj.classList.contains("需要判断的类名"); | 判断类名:false/true | |
| cobj.classList.item(下标); | 获取类名 | |
| obj.classList.remove("类名1","类名2"); | 移除 | |
| obj.classList.add("类名1","类名2"); | 添加 | |
| obj.classList.toggle("类名"); | 有则删,无则添 | |
| 时间对象 | var date=new Date(); | |
| date.getFullYear(); | 获取年份 | |
| date.getMonth(); | 获取月份(0-11) | |
| date.getDate(); | 获取日期 | |
| date.getDay(); | 获取星期数(0-6) | |
| date.getHours(); | 获取小时数(0-23) | |
| date.getMinutes(); | 获取分钟数 | |
| date.getSecond(); | 获取秒数 | |
| date.getMilliseconds(); | 获取毫秒数(0-999) | |
| date.getTime(); | 1970/1/1至今毫秒值 | |
| 数学对象 | Math.abs(x); | 绝对值 |
| Math.max(x1,x2...); | 取最大值 | |
| Math.min(x1,x2…); | 最小值 | |
| Math.random(); | [0,1)随机数 | |
| Math.rount(x); | 四舍五入取整 | |
| Math.sin(x); | sinx | |
| Math.cos(x); | cosx | |
| Math.tan(x); | tanx | |
| Math.exp(x); | e^x | |
| Math.sqrt(x); | √x(x>=0) | |
| Math.pow(x,y); | x^y | |
| Math.ceil(x); | 向上取整 | |
| Math.floor(x); | 向下取整 | |
| 数组对象 | var arr=new Array(); | 一数为length,多元素","隔开 |
| 数组1.concat(数组2); | 拼接 | |
| 数组.shift(); | 删除并返回第一个元素 | |
| 数组.pop(); | 删除并返回最后一个元素 | |
| 数组.push(元素); | 尾部添加元素并返回长度 | |
| 数组.unshift(元素); | 头部添加元素并返回长度 | |
| 数组.reverse(); | 颠倒顺序并返回数组 | |
| 数组.join("字符"); | 字符分隔元素,返回字符串 | |
| 数组.slice(start,end); | [m,n)下标范围返回数组 若负数则从后算 | |
| 数组.splice(index,howmany,item1...); | index增删位置,负数从后算 howmany删除的数量 item添加的元素 | |
| 字符串对象 | var str=new String(); | |
| str.charAt(int index); | 返回对应字符(不存在则空字符"") | |
| substring(start,end); | [s,e)范围返回字符 | |
| indexOf(""); | 返回字符对应下标,不存在则-1 | |
| toUpperCase(); | →大写 | |
| toLowerCase(); | →小写 | |
| split(separator,howmany); | 分割为数组 separator分隔字符 howmany最大长度(选填) | |
| 构造对象 | function 取名(形参表){ this.属性=形参; this.方法名=function(){代码块}} | 命名首字母大写(构造器) |
| var 对象名=new 名(实参); | obj.属性名/obj["属性名"]/obj["行为"] (构造器和new创建对象) | |
| var 对象名={属性:属性值,属性行为:fn(){}…} | (直接创建对象) | |
| var 变量名=new Object(); | 对象名.属性名/对象名["属性名"]/对象名.行为() (使用Object创建对象) | |
| 节点 | obj.childNodes; | 标准方式获取子节点 |
| obj.children; | 返回子元素数组(无txt | |
| firstElementChild | 第一个子节点 | |
| lastElementChild | 最后一个子节点 | |
| obj.childElementCount | 子元素节点数 | |
| document.createElement("标签名"); | 创建节点 | |
| obj.setAttribute("属性名","属性值"); | 添加属性及其值 | |
| obj.cloneNode(); | 克隆节点,()内加true为深度克隆,默认false | |
| obj.appendChild(内容); | 子节点末尾添加节点 | |
| previousElementSibling | 兄节点 | |
| nextElementSibling | 弟节点 | |
| obj.replaceChild(obj1,obj2); | 将obj子节点的obj2替换为obj1 | |
| event | event | 默认事件 |
| clientX | 鼠标在x轴的距离 鼠标目前距离浏览器左侧边框的距离 | |
| clientY | 鼠标在y轴上的距离 鼠标目前距离浏览器上边框的距离 | |
| dom.offsetTop | 当前元素距离父容器上边框的距离 | |
| dom.offsetLeft | 当前元素距离父容器左边框的距离 | |
| event.preventDefault():(event.returnValue=false); | 取消默认事件的兼容式写法 |
jQuery常见方法属性
| jQuery | jq插件官网 |
| 内容过滤 | :contains(内容) 包含某个指定的内容 |
| :empty 空元素 | |
| :has(标签) 包含某个标签 | |
| :parent 非空元素 | |
| 属性过滤器 | [属性] :包含某个属性 |
| [属性=内容] :包含某个属性且属性的值为内容的元素 | |
| [属性^=内容] :包含某个属性且属性的值以内容开头元素 | |
| [属性$=内容] :包含某个属性且属性的值以内容结束元素 | |
| [属性*=内容] :包含某个属性且属性的值包含内容结束元素 | |
| 可见性选择器 | :hidden 选择到隐藏的元素 |
| :visible 选择到显示的元素 | |
| 索引过滤器 | first :第一个元素 |
| last :最后一个元素 | |
| even :索引为偶数个数的元素 | |
| odd: 索引为奇数个数的元素 | |
| not :不包含某个 | |
| gt(index) : 选择到索引值大于index的元素 | |
| lt(index) : 选择到索引值小于index的元素 | |
| eq(index) :选择到指定索引为index的元素 | |
| 表单元素选择器 | :input 选择所有input表单元素 :input[type=radio] |
| :text 文本输入框 | |
| :checkbox:复选框 | |
| :radio :选择到所有的单选按钮 | |
| :checked :(掌握)选择到所有被选中的单选框或复选框 | |
| :selected :用于选择到下拉框的选中项 | |
| 语法: | $(":input") |
| query中的方法 | html()方法对应js中innerHTML属性的功能 |
| text()方法对应js中innerText属性的功能 | |
| val()方法对应js中value属性的功能 | |
| jquery中提供的循环遍历 | jquery对象.each(function(index,item){ //index:索引 //item:当前所遍历的对 }) |
| hide() | 将显示内容隐藏 |
| show(t,fn) | 将隐藏内容显示 |
| toggle() | 显示隐藏切换 |
| animate(styles,speed,easing,callback) | css属性,时间[默认nomol, 数字(ms)/单词, 过渡规律(单词), 回调函数(结束时触发) |
| val() | 表单元素value的取值赋值 |
| html() | 包括html结构的内容取值赋值 |
| next() | 弟节点 |
| prev("选择器") | 兄节点中的"选择器",无参数则上一个兄节点 |
| text() | 纯文本内容取值赋值 |
| jqobj.bind("事件名",fn) | 添加事件(无on):fn |
| slideUp() | 上拉至隐藏 |
| slideDown() | 隐藏下拉 |
| slideToggle() | 上拉隐藏/下拉显示 切换(参数时间,单位ms,带过渡) 不写则默认带个时间 |
| attr() | 设置属性及属性值 |
| append() | 尾部插入节点 |
| prepend() | 头部插入节点 |
| befor() | 节点前插入节点 |
| after() | 节点后插入节点 |
| jqobj1.replaceWith(jqobj2) | 节点1替换为节点2 |
| jqobj.clon() | 克隆节点 |
| jqobj.parent() | 父节点 |
| jqobj.parents("选择器") | 祖节点中的"选择器",若空则全部祖节点 |
| jqobj.siblings("选择器") | 包含"选择器"的弟节点 |
| jqobj.remove() | 删除节点 |
| parseFloat() | 字符串转为浮点数 |
| substr(i) | 从下标i起获取字符串 |
| addClass() | 添加类名 |
| removeClass("类名") | 删除类名 |
| jqobj.hover(f1(),f2()) | 移入执行f1,移出执行f2 |
| jqobj.fadeIn(t,"速度",fn) | 淡入 |
| jqobj.fadeOut() | 淡出 |
| jqobj.fadeToggle() | 淡入/淡出切换 |
| jqobj.fateTo(t,透明度) | 时间t(ms)过渡到指定透明度 |
| jqobj.has("选择器") | 符合条件时针对自身 |
| jqobj.find("") | 符合条件的后代 |
| filter() | -filter()过滤DOM元素包装集，是指操作当前元素集， 删除不匹配的元素，得到一个新的集合。 |
| -has(selector选择器或DOM元素) 将匹配元素集合根据选择器或DOM元素为条件， 检索该条件在每个元素的后代中是否存在， 将符合条件的的元素构成新的结果集。 | |
| -find()在当前选中元素的上下文中找到符合条件的后代， 返回的是子元素 | |
| filter()是对选中的元素集合操作，得到这些元素中符合条件的元素，而find()是得到选中元素 ，作用于后代，has()则是作为判断，作用于自身。 | |
| stop(t/f) | 停止动画列队(默认false:停止当前/true:停止全部) |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
