桓台网站制作电商平台推广方式有哪些
事件:
事件的三要素：事件源、事件、事件驱动程序。
事件处理步骤:
（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作。
<body>
<div id="box1"></div>
<script type="text/javascript">// 1、获取事件源var div = document.getElementById("box1");// 2、绑定事件div.onclick = function () {// 3、书写事件驱动程序alert("我是弹出的内容");}
</script>
</body>
获取事件源的方式;
var div1 = document.getElementById("box1"); //方式一：通过id获取单个标签
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获得 标签数组
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获得 标签数组，
绑定事件的方式
方式一：直接绑定匿名函数
<div id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第一种方式div1.onclick = function () {alert("我是弹出的内容");}
</script>
方式二：先单独定义函数，再绑定
<div id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第二种方式div1.onclick = fn; //注意，这里是fn，不是fn()。fn()指的是返回值。//单独定义函数function fn() {alert("我是弹出的内容");}
</script>
方式三：行内绑定
<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">function fn() {alert("我是弹出的内容");}
</script>js基础三要素
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。
节点:
构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点;
见节点分为四类：
文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点（标签）：HTML标签。
属性节点（属性）：元素的属性。
文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。
节点的获取: 跟事件源
var div1 = document.getElementById("box1"); //方式一：通过 id 获取 一个 元素节点（为什么是一个呢？因为 id 是唯一的）
var arr1 = document.getElementsByTagName("div"); //方式二：通过 标签名 获取 元素节点数组
var arr2 = document.getElementsByClassName("hehe"); //方式三：通过 类名 获取 元素节点数组
获取节点之后可以操作其中的节点(内容,样式等)
绑定事件的方式
onclick
<body>
<button>点我</button>
<script>var btn = document.getElementsByTagName("button")[0];//这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的btn.onclick = function () {console.log("事件1");}btn.onclick = function () {console.log("事件2");}
</script>
</body>
addEventListener（高版本浏览器）
<body> <button>按钮</button> <script>var btn = document.getElementsByTagName("button")[0];// addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行// 这种写法不存在响应函数被覆盖的情况。（更适合团队开发）btn.addEventListener("click", fn1);btn.addEventListener("click", fn2);function fn1() {console.log("事件1");}function fn2() {console.log("事件2");}
</script> </body>
attachEvent（IE8及以下版本浏览器）
<body><button>按钮</button><script>var btn = document.getElementsByTagName('button')[0];btn.attachEvent('onclick', function() {console.log('事件1');});btn.attachEvent('onclick', function() {console.log('事件2');});</script></body>
DOM事件流
事件传播的三个阶段是：
事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。
事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。
事件冒泡阶段：事件从事件目标 target 开始，从子元素往冒泡祖先元素冒泡，直到页面的最上一级标签。
事件捕获
addEventListener可以捕获事件
捕获阶段，事件依次传递的顺序是：window --> document --> html–> body --> 父元素、子元素、目标元素。
window.addEventListener("click", function () {alert("捕获 window");}, true);document.addEventListener("click", function () {alert("捕获 document");}, true);document.documentElement.addEventListener("click", function () {alert("捕获 html");}, true);document.body.addEventListener("click", function () {alert("捕获 body");}, true);fatherBox.addEventListener("click", function () {alert("捕获 father");}, true);childBox.addEventListener("click", function () {alert("捕获 child");}, true);
事件冒泡
当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有祖先元素中被触发。
子元素的事件被触发时，父元素的同样的事件也会被触发。
冒泡顺序：div -> body -> html -> document -> window
以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。
冒泡也是可以被阻止的;
常见的 BOM 对象
Window：代表整个浏览器的窗口，同时 window 也是网页中的全局对象。
Navigator：代表当前浏览器的信息，通过该对象可以识别不同的浏览器。
Location：代表当前浏览器的地址栏信息，通过 Location 可以获取地址栏信息，或者操作浏览器跳转页面。
History：代表浏览器的历史记录，通过该对象可以操作浏览器的历史记录。由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效。
Screen：代表用户的屏幕信息，通过该对象可以获取用户的显示器的相关信息。
定时器
setInterval()：循环调用。将一段代码，每隔一段时间执行一次。（循环执行）
setTimeout()：延时调用。将一段代码，等待一段时间之后再执行。（只执行一次）
setInterval使用
第一种方式let num = 1;setInterval(function () {num ++;console.log(num);}, 1000);第二种方式setInterval(fn,1000);function fn() {num ++;console.log(num);}
清理定时器:
定时器的返回值是作为这个定时器的唯一标识，可以用来清除定时器。
clearInterval(唯一标识)
setTimeout() 的使用
定义和清除
const timer = setTimeout(function() {console.log(1); // 3秒之后，再执行这段代码。}, 3000);
clearTimeout(timer); //清除箭头函数的写法setTimeout(() => {console.log(1); // 3秒之后，再执行这段代码。}, 3000);jQuery
jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。
jQuery 的两大特点:
（1）链式编程：比如.show()和.html()可以连写成.show().html();链式编程原理：return this。
(2) 隐式迭代：隐式 对应的是 显式。隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；
jQuery 的基本选择器
var jqBox1 = $(“#box”); // 按ID选择
var jqBox2 = $(“.box”); // 按类名选择
var jqBox3 = $(“div”); // 按标签名选择
var jqBox3 = $(“div,.box”); // 选择多个
基本过滤选择器
$(document).ready(function () {// :odd 奇数行选择器$("li:odd").css("background", "red"); // :even / 偶数行选择器$("li:even").css("background", "green");// :eq(index) 匹配$("ul li:eq(3)").css("font-size", "30px"); //设置第四个li的字体// :lt(index) 小于$("li:lt(6)").css("font-size", "30px");// :gt(index) 大于$(".ulList1 li:gt(7)").css("font-size", "40px");// :first 选择第一个元素$(".ulList li:first").css("font-size", "40px");// :last 选择最后一个$("li:last").css("font-size", "40px");
});