模拟百度搜索:
<div id="box"><input type="text" id="txt" value="">
<input type="button" value="搜索" id="btn"></div>
var keyWords = ["小米商城","小米官方商城","小米", "爱你爱到死","爱你","艾尼路","爱你就像爱生命","张首晟","张巨明","张云雷", "苹果官网","苹果手机助手","苹果好吃", "苹果此次召回还是没有中国"];
//获取文本框注册键盘抬起事件
$("#txt").onkeyup = function () {
//每一次的键盘抬起都判断页面中有没有这个div
if($("#dv")){
//删除一次
$("#box").removeChild($("#dv"));
}
//获取文本框输入的内容
var text = this.value;
//临时数组--空数组------->存放对应上的数据
var tempArr = [];
//把文本框输入的内容和数组中的每个数据对比
for (var i = 0; i < keyWords.length; i++) {
//是否是最开始出现的
if (keyWords[i].indexOf(text) == 0) {
tempArr.push(keyWords[i]);//追加
}
}
//如果文本框是空的,临时数组是空的,不用创建div
if (this.value.length == 0 || tempArr.length == 0) {
//如果页面中有这个div,删除这个div
if ($("#dv")) {
$("#box").removeChild($("#dv"));
}
return;
}
//创建div,把div加入id为box的div中
var dvObj = document.createElement("div");
$("#box").appendChild(dvObj);
dvObj.id = "dv";
dvObj.style.width = "300px";
dvObj.style.border = "1px solid black";
//循环遍历临时数组,创建对应的p标签
for(var i =0; i<tempArr.length; i++){
var pObj = document.createElement("p"); //创建p标签
dvObj.appendChild(pObj); //把p加到div中
setInnerText(pObj, tempArr[i]);
pObj.style.margin = 0;
pObj.style.padding = 0;
pObj.style.cursor = "pointer";
pObj.style.marginTop = "5px";
pObj.style.marginLeft = "5px";
//鼠标进入
pObj.onmouseover = function () {
this.style.backgroundColor = "pink";
};
//鼠标离开
pObj.onmouseout = function () {
this.style.backgroundColor = "";
};
}
}
JavaScript分三个部分:
1. ECMAScript标准---基本语法
2. DOM--->Document Object Model 文档对象模型,操作页面元素的
3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的
浏览器中有个顶级对象:window
页面中顶级对象:document
页面中所有的内容都是属于浏览器的,页面中的内容也都是window的
页面加载完毕了,再获取按钮
window.οnlοad=function () {
document.getElementById("btn").οnclick=function () {
alert("1111");
};
};
扩展的事件---页面关闭后才触发的事件
window.οnunlοad=function () {
};
扩展事件---页面关闭之前触发的
window.οnbefοreunlοad=function () {
alert("1111");
};
对象中的属性和方法
location对象
console.log(window.location);
//地址栏上#及后面的内容
console.log(window.location.hash);
//主机名及端口号
console.log(window.location.host);
//主机名
console.log(window.location.hostname);
//文件的路径---相对路径
console.log(window.location.pathname);
//端口号
console.log(window.location.port);
//协议
console.log(window.location.protocol);
//搜索的内容
console.log(window.location.search);
οnlοad=function () {
document.getElementById("btn").οnclick=function () {
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性
//location.assign("http://www.jd.com");//方法
//location.reload();//重新加载--刷新
//location.replace("http://www.jd.com");//没有历史记录
};
};
通过userAgent可以判断用户浏览器的类型
console.log(window.navigator.userAgent);
通过platform可以判断浏览器所在的系统平台类型.
console.log(window.navigator.platform);
/**
* 返回当前浏览器是什么类型的浏览器
*/
function userBrowser(){
var browserName=navigator.userAgent.toLowerCase();
if(/msie/i.test(browserName) && !/opera/.test(browserName)){
console.log("IE");
}else if(/firefox/i.test(browserName)){
console.log("Firefox");
}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){
console.log("Chrome");
}else if(/opera/i.test(browserName)){
console.log("Opera");
}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){
console.log("Safari");
}else{
console.log("不知道是什么!");
}
}
星星闪闪:
div{width: 600px;height: 600px;border:2px solid yellow;background-color: black;position: relative;}
span{font-size: 30px;color: yellow;position: absolute;}
<input type="button" value="亮起来" id="btn"/>
<div id="dv"></div>
$("#btn").onclick=function () {
setInterval(function () {
$("#dv").innerHTML="<span>★</span>";
var x = parseInt(Math.random() * 600 + 1);
var y = parseInt(Math.random() * 600 + 1);
$("#dv").firstElementChild.style.left=x+"px";
$("#dv").firstElementChild.style.top=y+"px";
},5);
};
轮播:
<div class="all" id='box'>
<div class="screen"><!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200"/></li>
<li><img src="images/2.jpg" width="500" height="200"/></li>
<li><img src="images/3.jpg" width="500" height="200"/></li>
<li><img src="images/4.jpg" width="500" height="200"/></li>
<li><img src="images/5.jpg" width="500" height="200"/></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId= setInterval(clickHandle,1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
};
//右边按钮
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
};
//左边按钮
my$("left").onclick = function () {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
//设置小按钮的颜色---所有的小按钮干掉颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
//匀速动画
function animate(element, target) {
//清理定时器
clearInterval(element.timeId);
element.timeId = setInterval(function () {
//获取元素的当前位置
var current = element.offsetLeft;
//移动的步数
var step = 10;
step = target > current ? step : -step;
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
element.style.left = target + "px";
}
}, 20);
}
offset系列:
在style标签中设置的样式属性获取不到;如#dv{width:10px;}$("dv").style.width;废了。采用offsetWidth;
在style属性中设置的样式属性是可以获取到的;style="width:10px"
没有脱离文档流:offsetLeft:父元素(margin,padding,border),自身margin
脱离文档流:offsetLeft:自身left,margin。
图片跟着鼠标移动:(获取鼠标X,Y)
document.onmousemove = function (e){ 鼠标移动的横纵坐标。
$("img").style.left= e.clientX +"px"; 可视区域的横纵坐标。
$("img").style.top = e.clientY +"px"; }
scroll系列:
scrollWidth(),scrollHeight(),scrollTop(),scrollLeft()
$("dv").onscroll = function () {
};
固定导航栏案例:
//获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//滚动事件
window.οnscrοll=function () {
//向上卷曲出去的距离和最上面的div的高度对比
if(getScroll().top>=$("topPart").offsetHeight){
//设置第二个div的类样式
my$("navBar").className="nav fixed";
//设置第三个div的marginTop的值
$("mainPart").style.marginTop=$("navBar").offsetHeight+"px";
}else{
$("navBar").className="nav";
$("mainPart").style.marginTop="10px";
}
};
元素的样式属性是无法直接通过:对象.style.属性来获取(样式在style属性中设置)
offset系列:
offsetLeft:距离左边位置的值
offsetTop:距离上面位置的值
offsetWidth:元素的宽(有边框)
offsetHeight:元素的高(有边框)
scroll系列:卷曲
scrollWidth:元素中内容的实际的宽(没有边框),如果没有内容就是元素的宽
scrollHeight:元素中内容的实际的高(没有边框),如果没有内容就是元素的高
document.getElementById("btn").onclick=function () {
console.log(document.getElementById("dv").offsetWidth);//元素的宽,有边框
console.log(document.getElementById("dv").offsetHeight);//元素的高,有边框
console.log(document.getElementById("dv").scrollWidth);//元素中内容的实际的宽
console.log(document.getElementById("dv").scrollHeight);//元素中内容的实际的高
console.log(document.getElementById("dv").scrollTop);//向上卷曲出去的距离
console.log(document.getElementById("dv").scrollLeft);//向左卷曲出去的距离
};
function getScroll() {
return{
left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
top : window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0
}
}
window.onscroll = function () {
console.log(getScroll().top);
}
字符串的拼接:
<input type="button" value="拼接吧" id="btn"/><br/>
<input type="text" value=""/><br/><input type="text" value=""/><br/><input type="text" value=""/><br/><input type="text" value=""/><br/><input type="text" value=""/><br/>
//推荐使用数组的方式拼接大量的字符串
document.getElementById("btn").onclick = function () {
var str = [];
//获取所有的文本框
var inputs = document.getElementsByTagName("input");
//每个文本框的value属性值
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type != "button") {
str.push(inputs[i].value);
}
}
console.log(str.join("|"));//字符串
};
获取元素的文本内容
* @param element 任意元素
* @returns {*} 任意元素中的文本内容
*/
function getInnerText(element) {
if (typeof(element.textContent) == "undefined") {
return element.innerText;
} else {
return element.textContent;
}
}