web前端 day13今日大纲

最新推荐文章于 2024-11-06 22:41:26 发布

ddxr5515

最新推荐文章于 2024-11-06 22:41:26 发布

阅读量120

点赞数

文章标签：前端 python javascript ViewUI

原文链接：http://www.cnblogs.com/lilyxiaoyy/p/11151593.html

版权

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