1.JSDOM
document object model
html 根元素
head body
meta title div p ul
li li li
a
img
节点对象: 状态(属性) 动作(方法)
方法:一个对象上的属性对应的值是函数
li.onclick = function(){
}
1.1 获取DOM对象的三种方式
获取单个元素
var oDiv = document.getElementById('box');
document.getElementsByTagName('div');
document.getElementsByClassName('active');
1.2 对节点对象的值操作
innerText 只对文本操作
innerHTML 即对文本又对标签操作
value 只针对于表单控件的值
1.3 对节点对象属性的操作
oDiv.id
oDiv.className
....
oDiv.setAttribute(key,value);
oDiv.getAttribute(key);
oDiv.removeAttribute(key);
1.4 样式操作
它会把所有的样式属性都保存到一个属性对象 style
oDiv.style
1.5 DOM操作 (创建 添加 删除)
document.createElement(标签名);
父.appendChild(子)
父.insertBefore(新的元素,参考的元素)
父.removeChild(子)
2.JSBOM
浏览器对象模型
setTimeout(function(){
console.log(1);
},0)
console.log(2);
//延迟方法 异步(发请求,当数据阻塞了)
setTimeout(fn,时间);
//制作动画 定时器
setInterval(fn,时间);
location.href()
location.reload() 重新加载页面 不建议使用
window.open(地址,"_self|_blank|_parent")
w3c
开发者网络 MDN
网页中所有的a标签,img link script 默认都是get请求
python
pip install
nodejs
npm install jquery --save
jquery 库 小而精
文档遍历
一.jquery对象和js对象的转换
1.jquery==>js对象
$('div')[0]
2.js对象===>jq对象
$(js对象)
选择器:
******属性选择器****
$('a[href=xxx]')
$('input[type=xxx]')
筛选的方法
eq(index); index从0开始
find(选择符) 查找后代(子子孙孙)
children() 查找子代
parent() 获取亲爹
siblings() 获取除它之外的兄弟元素
操作
1.对值的操作
传一个参数表示设置值,不传任何参数表示获取值
html()
text()
val()
2.对样式操作
css('color','red');//设置一个样式属性值
css({key1:value1,key2:value2})//设置多个样式属性值
css(key);//获取样式属性值
3.对属性的操作
attr('id');//获取属性值
attr('title',123);//设置单个属性值
attr({});//设置多个属性值
removeAttr('key1 key2 key3');//删除多个属性值
4.对类的操作
addClass('类名1 类名2 类名3');
removeClass('类名1 类名2');
toggleClass('active')
5.对DOM操作
父子之间
后置追加
父.append(子);//子 可以是字符串,js对象,jquery对象
子.appendTo('父元素选择符')
前置追加
prepend()
prependTo()
兄弟之间
before()
insertBefore()
after()
insertAfter()
替换操作
replaceWith()
replaceAll()
删除
remove() 事件一起删除
detach() 事件保留
empty() 清空
html('')清空
动画
1.普通动画
show(时间,callback);
hide()
toggle()
2.卷帘门动画
slideDown()
slideUp()
slideToggle()
3.淡入淡出
fadeIn()
fadeOut()
fadeTogge()
4.停止动画
玩动画一定要先停止动画,再开动画
stop()
事件
click() 单击事件
mouseenter() 鼠标进入
mouseleave() 鼠标离开
focus() 获得焦点
blur() 失去焦点
ajax
https://free-api.heweather.net/v5/now?city=beijing&key=4693ff5ea653469f8bb0c29638035976
bootstrap 框架 html+css+js 大而全
bootcdn 前端cdn网站
moment.js 处理时间
http://www.jq22.com jQuery插件库
http://adminlte.la998.com/ 后台管理系统模板
jquery tree
crm
前端HTML+CSS+JS 脑图链接： https://www.processon.com/view/link/5ced0ccce4b0fd5801c247ee#map
jQuery脑图分享 https://www.processon.com/view/link/5b7d6458e4b0534c9bb76ad9
jQuery事件脑图分享 https://www.processon.com/view/link/5ad1c48de4b0b74a6dd65426
jQuery https://www.cnblogs.com/majj/category/1226448.html
javascript https://www.cnblogs.com/majj/category/1223635.html