web前端 day13今日大纲_html-js-css

概述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 = doc

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/ @R_803_4198@

jquery tree

crm