day 46 DOM 和 jQuery

46 BOM JQuery开头

01. BOM & DOM

1.BOM

1. Browser Object Model 是指浏览器对象模型，它使JavaScript有能力与浏览器对话

2. window对象

   1. 所有浏览器都支持window对象，它表示浏览器窗口。
   2. Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。
   3. 所有javascript全局对象，函数以及变量均自动成为window对象的成员
   4. 全局变量时window对象的属性，全局函数是window对象的属性之一

3. HTML DOW 的 document 也是window对象的属性之一

   1. window.innerHeight - 浏览器窗口的内部高度
   2. window.innerWidth - 浏览器窗口的内部宽度
   3. window.open() - 打开新的窗口
   4. window.close() - 关闭当前窗口

4. window的子对象

   1. navigator 对象

      浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息

      navigator.appName  // web浏览器全称
      navigator.appVersion  // web浏览器厂商和版本的详细字符串
      navigator.userAgent  // 客户端和绝大部份信息
      navigator.platform  // 浏览器运行所在的操作系统

   2. screen对象

      屏幕对象属性

      screen.availWidth  // 可用的屏幕宽度
      screen.availHeight  // 可用的屏幕高度

   3. history对象

      window.history 对象包含浏览器的历史

      浏览历史对象，包含了用户对当前页面的浏览历史，但我们无法查看具体的地址，可以简单的用前进或后退一个页面

      history.forward()  // 前进一页
      history.back()  // 后退一页

   4. location对象

      location.href  // 获取url
      location.href="url"  // 跳转到指定页面
      location.reload()  // 重新加载页面

   5. 弹出框

      1. 警告框；需要用户确认后才能继续操作

         alert("文本")；

      2. 确认框；如果用户确认返回值为true，如果用户点击取消，那么返回值为false

         confirm("文本");

      3. 提示框；如果用户有输入，返回输入值。如果用户点击取消，返回值为null

         prompt("文本","值")

   6. 计时相关

      1. setTimeout() 间隔多少毫秒后执行

         var t = setTimeout("js语句",毫秒数)
         var t = setTimeout(function(){alert('abc');},3000)

      2. clearTimeout() 关闭setTimeout

         clearTimeout(t)  // 将t对象关闭
         

      3. setInterval() 每隔多少毫秒执行一次

         setInterval("js语句",间隔毫秒数)
         var t = setInterval(function(){alert('abc');},3000)
         

      4. clearInterval() 关闭setInterval

         clearInterval(t)
         

02.DOM

1. DOM 是一套对文档的内容进行抽象和概念化的方法。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object model）。HTML DOM 模型被构造为对象的树
   

2. DOM标准规定HTML文档中的每一个成分都是一个节点（node）

   1. 文档节点（document对象）代表整个文档
   2. 元素节点（element 对象）代表一个元素（标签）
   3. 文本节点（text 对象）代表元素（标签）中的文本
   4. 属性节点（attribute 对象）代表一个属性，元素（标签）才含有属性
   5. 注释是注释节点（comment 对象）

3. JavaScript 可以通过DOM创建动态的HTML

   1. JavaScript 能够改变页面中的所有HTML元素
   2. JavaScript 能够改变页面中所有的HTML属性
   3. JavaScript 能够改变页面中的所有CSS样式
   4. JavaScript 能够对页面中的所有事件做出反应

4. 查找标签

   1. 直接查找

      document.getElementById  // 根据ID获取一个标签
      var d1Ele = document.getElementById('d1');
      
      document.getElementsByClassName  // 根据class属性查找
      var c1Ele = document.getElementsByClassName('c1')[0];  // 会返回一个数组
      
      document.getElementsByTagName  // 根据标签名查找
      var spEle = document.getElementsByTagName('span')[0];  // 会返回一个数组
      
      // 涉及到DOM操作的代码应放在页面的最尾端
      

   2. 间接查找

      paremtElement                     // 父节点标签元素
      children                              // 所有子标签
      firstElementChild             // 第一个子标签元素
      lastElementChild              // 最后一个子标签元素
      nextElementSibling            // 下一个兄弟标签元素
      previousElementSibling    // 上一个兄弟标签元素
      

5. 节点操作

   1. 创建节点

      var divEle = document.createElement("div");  // 创建一个div标签
      

   2. 添加节点

      somenode.appendChild(newnode)；  // 追加一个子节点（作为最后的子节点）
      var imgEle=document.createElement("img");
      imgEle.setAttribute("src", "http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg");
      var d1Ele = document.getElementById("d1");
      d1Ele.appendChild(imgEle);
      somenode.insertBefore(newnode,某个节点);  // 把增加的节点放到某个节点的前边。
      var c1Ele = document.getElementsByClassName("c1")[0];
      d1Ele.insertBefore(imgEle,c1Ele)  // 将img标签插入到class值为c1的标签前面
      

   3. 删除节点

      var c1Ele = document.getElementsByClassName("c1")[0]; // 获的要删除的元素
      var fEle = c1Ele.parentElement;  // 获得该元素的父标签
      fEle.removeChild(c1Ele);  // 删除该元素
      

   4. 替换节点

      somenode.replaceChild(newnode, 某个节点); 
      c1.replaceChild(spEle,spEle3); // c1父节点，spEle新节点，spEle3旧节点
      

   5. 属性节点

      1. 获取文本节点的值

         var divEle = document.getElementById("d1")
         divEle.innerText  // 只获取节点内的文本
         divEle.innerHTML  // 获取节点内的所有HTML字符
         

      2. 设置文本节点的值

         var divEle = document.getElementById("d1")
         divEle.innerText="1"                   // 输入的只是字符串
         divEle.innerHTML="<p>2</p>"        // 可以输入HTML代码
         

      3. attribute 操作

         var divEle = document.getElementById("d1");
         divEle.setAttribute("age","18")
         divEle.getAttribute("age")
         divEle.removeAttribute("age")
         
         // 自带的属性还可以直接.属性名来获取和设置
         imgEle.src
         imgEle.src="..."
         

   6. 获取值操作

      elementNode.value

      适用于input、select、textarea 标签

      var d1Ele = document.getElementById("d1");
      console.log(d1Ele.value);
      // input多选只能获取第一个值
      // 文件只能得到文件路径
      d1Ele.files[0];  // 获取文件对象
      

   7. class的操作

      var divEle = document.getElementsByTagName('div')[0]
      divEle.classList;     // 获取divEle对象的所有class值
      divEle.classList.remove("cls")  删除指定类
      divEle.classList.add('cls')  添加类
      divEle.classList.contains('cls')  存在返回true，否则返回false
      divEle.classList.toggle('cls')  存在就删除，否则添加
      

   8. 指定css操作

      obj.style.backgroundColor = "red"
      

      1. JS操作CSS属性的规律

         1. 对于没有中横线的CSS属性一般直接使用style.属性名即可。如

            obj.style.margin
            obj.style.width
            obj.style.left
            obj.style.position
            

         2. 如果有中横线则将中横线省略，将后一个字母大写。如

            obj.style.marginTop
            obj.style.borderLeftWidth
            obj.style.zIndex
            obj.style.fontFamily
            

6. 事件

   1. 使HTML事件触发浏览器中的动作（action），比如当用户点击某个HTML元素是启动一段JacaScript。下面是一个属性列表。这些属性可插入HTML标签来定义事件动作

      onclick        当用户点击某个对象时调用的事件句柄。
      ondblclick     当用户双击某个对象时调用的事件句柄。
      
      onfocus        元素获得焦点。               // 练习：输入框
      onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
      onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
      
      onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
      onkeypress     某个键盘按键被按下并松开。
      onkeyup        某个键盘按键被松开。
      onload         一张页面或一幅图像完成加载。
      onmousedown    鼠标按钮被按下。
      onmousemove    鼠标被移动。
      onmouseout     鼠标从某元素移开。
      onmouseover    鼠标移到某元素之上。
      
      onselect      在文本框中的文本被选中时发生。
      onsubmit      确认按钮被点击，使用的对象是form。
      

   2. 事件的绑定方法

      1. 直接在标签内绑定

         <div id="d1" onclick="changeColor(this);">点我</div>
         <script>
           function changeColor(ths) {
             ths.style.backgroundColor="green";
           }
         </script>
         <!-- this相当于python中的self，即这个div标签本身 -->
         

      2. 获取标签对象后绑定

         <div id="d2">点我</div>
         <script>
           var divEle2 = document.getElementById("d2");
           divEle2.onclick=function () {
             this.innerText="呵呵";
           }
         </script>
         

02.JQuery介绍

1. jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大的简化JavaScript编程。它的宗旨是 Write less, do more.

2.jQuery优势

1. 一款轻量级的js框架。jQuery核心js文件才几十kb，不会影响页面的加载速度。
2. 丰富的DOM选择器，jQuery的选择器使用起来很方便，
3. 链式表达。jQuery的链式操作可以把多个操作写在一行代码里
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需要返回一个JSON格式的字符串就能完成与前端的通信
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器
7. 插件拓展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

3.jQuery内容

1. 选择器
2. 筛选器
3. 样式操作
4. 文本操作
5. 属性操作
6. 文档处理
7. 事件
8. 动画效果
9. 插件
10. each、data、Ajax

4.jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery。那么他就可以使用jQuery里的方法；例如$("#d1").html()

$("#d1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

5.jQuery基础语法

$(selector).action()

6.查找标签

1. 基本选择器

// id选择器
$("#id")
// 标签选择器
$("TagName")
// class选择器
$(".class")
// 配合使用
$("div.c1")  // 找到有c1 class类的div标签
// 所有元素选择器
$("*")
// 组合选择器
$("#id, .class, TayName")

1. 层级选择器

// x和y可以为任意选择器
$("x y");  // x的所有后代y（子子孙孙）
$("x > y");  // x的所有儿子y（儿子）
$("x + y");  // 找到所有紧挨在x后面的y
$("x ~ y");  // x之后所有的兄弟y

1. 基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

// 例子
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

来源：https://www.cnblogs.com/luocongyu/p/11885386.html