码迷,mamicode.com
首页 > Web开发 > 详细

2021/6/12 js基础+BOM+DOM+jQuery

时间:2021-06-13 09:48:26      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:indexof   attr   document   基本选择器   事件绑定   ada   nts   length   ||   

‘‘‘
js小知识
js注释
/*多行注释*/
//单行

引入方式
<script src="js路径"></script>
<script>
window.onload=function(){js}
$(document).ready({js})
$(function(){js})
<script>

结束符
;
js基础
var
let
const

数据类型
number
parseInt()
parseFloat()
string
.length
.trim()
.trimLeft()
.trimRight()
.charAt(index)
.concat(obj)
.indexOf(substring, start)
.substring(start,end)
.slice(start, end)
.split(‘‘, count)
.toLowerCase()
.toUpperCase()
.match(‘re‘)
boolean
true false
false:空字符串、0、null、undefined、NaN
null:值为空,可用于赋值变量,清除原有值
undefined:定义未初始化赋值,函数没有返回值也是返回undefined
typeof 返回一个变量的类型
运算符
+ - * / % ++ --
> >= < <= != == !== ===
&& || !
= += -= *= /= %=
流程控制
if (){}else {}
if (){}else if (){}
switch (){case: xxx;break;default: xxx;break;}
for (;;){}
while (){}
a > b ? a : b
函数
function xx(){}
var a = function(){}
(function(){})();
var a = b => b;
arguments:以列表的形式存放所有参数值
词法分析
函数参数:参数名作为AO的属性名,属性值赋值undefined
局部变量:变量名名作为AO的属性名,属性值赋值undefined
函数声明:函数名作为AO的方法名,方法值赋值函数声明
对象
数组
var a = [1,2,3]
.length
.push(obj)
.pop()
.unshift(obj)
.shift()
.reverse()
.slice(start, end)
.sort(func)
.join(seq)
.concat(obj)
.splice(index, count, obj)
.forEach(function(value, index, obj), thisValue)
.map(function(value, index, obj), thisValue)
自定义对象
var a = new Object()
k 只能是字符串
var a = new Map()
k 可以是任意
a.set(k, v)
a.get(k)
a.delete(k)
a.has(k)
Date对象
var a = new Date()
‘y/m/d h:m‘
‘m/d/y h:m‘
getTime()
(y,m,d,h,m,s,ms)
.getYear/Month/Date/Hours/Minutes/Seconds/Milliseconds
.getFullYear/Day/Time
.toLocaleString()
JSON对象
JSON.parse()
JSON.stringify()
RegExp对象
var a = new RegExp(‘re‘)
var a = /re/g;
.test(string)
.lastIndex = 0
Math对象
Math
.abs/pow/round/floor/random/sin/tan/max/min/sqrt/log/exp()
FormData对象
var a = new FormData()
obj = $().files[0]
a.readAsdataURL(obj)
a.result
a.append(k,v)
BOM操作
window
.innerHeight
.innerWidth
.open(url, ‘_blank/_self‘, ‘attr‘)
.close()
navigation
.appName
.appVersion
.userAgent
.platform
screen
.availHeight
.availWidth
history
.back()
.forward()
location
.href
.href=""
.reload()
弹出框
alert()
confirm()
prompt(‘‘, ‘‘)
计时相关
setTimeout(‘js代码‘,ms)
clearTimeout()
setInterval(‘js代码‘, ms)
clearInterval()
DOM操作
document:文档节点
element:元素节点
text:文本节点
attribute:属性节点
comment:注释节点

查找标签:
直接查找
document.getElementById(‘‘)
.getElementsByClassName(‘‘)
.getElementsByTagName(‘‘)
间接查找
.parentElement()
.children()
.firstElementChild()
.lastElementChild()
.nextElementSibling()
.previousElementSibling()
元素节点操作
创建节点
document.createElement(‘标签名‘)
增加儿子
.appendChild()
.insertBefore(new, old)
删除儿子
.removeChild()
替换儿子
.replaceChild(new, old)
属性节点操作
文本节点
.innerText = ""
.innerHTML
节点属性
.setAttribute(‘attr‘, ‘value‘)
.getAttribute(‘attr‘)
.removeAttribute(‘attr‘)
获取节点属性
.属性名
.value 获取标签value属性值
.files 获取标签传输的文件对象FileList [0]代表文件数据
class属性操作
classList
add()
remove()
contains()
toggle()
CSS样式操作
.style
.样式属性名
事件
常用事件
.onclick
.ondblclick
.onfocus
.onblur
.onchange
.onselect
.onkeydown
.onkeyup
.onkeypress
.onmousemove
.onmouseover
.onmouseout
.onmousedown
.onload
.onsubmit
事件绑定
onclick="func()"
$().onclick = function(){}
jQuery
var $xxx = jQuery对象
$(DOM对象) = jQuery对象
$(选择器)[0] = DOM对象

查找标签
基本选择器
$(‘#id/.class/TagName/*‘)
$(‘#id, .class, TagName‘)
层级选择器
$(‘x y/x > y/x + y/x ~ y‘)
属性选择器
$(‘x[a=b/a!=b/a^=b/a$=b/a*=b/a~=b]‘)
基本筛选器
$(‘:first/last/eq(index)/even/odd/lt(index)/gt(index)/not(选择器)/has(选择器)‘)
input筛选器
$(‘:text/password/checkbox/radio/submit/button/reset/file‘)
表单筛选器
$(‘:enabled/disabled/checked/selected‘)
筛选器方法
next/nextAll/nextUntil(选择器)
prev/prevAll/prevUntil(选择器)
parent/parentsAll/parentsUntil(选择器)
children()
sibling()
first()
last()
find()
filter()
not()
has()
eq()
操作标签
样式操作
addClass()
removeClass()
hasClass()
toggleClass()
位置查看
offset()
position()
scrollLeft()
scrollTop()
尺寸操作
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
text()
html()
val()
属性操作
attr()
removeAttr()
prop()
removeProp()
标签操作
append()
appendTo()

prepend()
prependTo()

after()
insertAfter()

before()
insertBefore()

remove()
empty()

replaceWith()
replaceAll()

clone(true)
事件
常用事件
click/keyup/hover/focus/blur/change/ready
事件绑定
$().on(‘事件‘, ‘选择器‘, function(){})
$().click(function(){})
事件解除
$().off(‘事件‘, ‘选择器‘, function(){})
阻止默认事件
return false
event.preventDefault()
阻止冒泡事件
return false
event.stopPropagation()
事件委托
$().on(‘click‘, ‘div‘, function(){})
页面载入
$(function(){})
$(document).ready(function(){})
动画效果
show()
hidden()
Toggle()

slideDown()
slideUp()
slideToggle()

fadeIn()
fadeOut()
fadeTo(ms,淡化度)
fadeToggle()

animate()

增加
.each(a, function(index, obj){})
.data(k, v)
.data(k)
.removeData(k)

jQuery.extend({
zzw:function(){}
})
jQuery.zzw()

jQuery.fn.extend({
zzw:function(){
return this.each({
this.DOM方法
})
}
})
jQuery对象即可调用该方法

$().serializeArray()
‘‘‘

2021/6/12 js基础+BOM+DOM+jQuery

标签:indexof   attr   document   基本选择器   事件绑定   ada   nts   length   ||   

原文地址:https://www.cnblogs.com/zhangzhuowei/p/14877731.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!