JavaScript,Dom,jQuery
JavaScript
JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript 语言的规则编写相应代码,浏览器可以解释出相应的处理。
注:在编写代码时要养成一行代码以 “ ; ”(分号)结尾。因为在代码上线的时候,一般会对代码进行压缩,这时所有的JavaScript代码将被压缩为一行这时就需要以分号来识别一行代码的结束。
1,存在方式
文件方式
<script tyoe="text/javascript" src="JS文件"></script>代码块
<script type="text/javascript">
JS代码
</script>
2,JavaScript 代码存在位置
- HTML 的 head 中
- HTML 的body代码块底部(推荐,因为HTML是从上到下解析的,放到上面如果代码出现问题无法解析,网站内容就无法正常的显示影响用户体验度)
3,变量
- 全局变量
- 局部变量
JavaScript中变量声明非常容易出错,局部变量必须以 var 开头,如果不加表示默认声明的是全局变量
name = "seven" # 全局变量
var name = "seven" # 局部变量
4,注释
// # 单行注释
/* */ # 多行注释
5,数据类型
数字(Number)
var age = 18;
var age = Number(18); # 字符串类型转为数字类型
var a1 = 1,a2 = 2, a3 =3; # 一行代码生成多个变量,之间使用逗号隔开
parseInt("3.14"); # 整数型,去除小数点后面的内容(整个去掉,非四舍五入)
parseFloat("3.14"); # 浮点型字符串(String)
var name ="binges";
var name = String("binges");
var age = String(18); # 转化为字符串类型 常用方法:
obj.trim() # 去除空格
obj.charAt(index) # 索引查询
obj.substring(start,end) # 分段
obj.indexOf(char) # 返回索引值
obj.length # 字符串长度布尔(Boolean)
var status = true;
var status = false;
var status = Boolen(1==1);数组(Array)
var names = ['aaa','bbb','ccc']
var names = Array('aaa','bbb','ccc') 常用方法:
添加
obj.push(els) # 追加
obj.unshift(ele) # 前面插入
obj.splice(index,0,'content') # 指定索引插入(中间的0,必须为0)
移除
obj.pop() # 移除尾部并获取
obj.shift() # 移除头部并获取
obj.splice(index,count) # 数组指定位置后count个字符 obj.slice(start,end) # 切片
newArray = obj1.concat(obj2) # 合并,生成一个新的数组,原来的不改变
obj.reverse() # 翻转
obj.join('_') # 字符串化
obj.length() # 长度 字典:
这里的字典归数组类型
var itmes = {'k1':v1,'k2':v2}undefined
undefined # 表示未定义值null
null # 一个特殊值,表示空
6,循环语句
var names = ['aaa','bbb','ccc']; // 数组:方式一
for(var i=0;i<names.length;i++){
console.log(i);
console.log(names[i]);
}
// 这是以数组长度的方式循环 // 数组:方式二
for(var index in names){
console.log(index);
console.log(names[index]);
}
// 这是以索引的方式循环,这里循环的是索引值,而不是数组内的元素 var names = {"name":"binges","age":28}; //字典
for(var index in names){
console.log(index);
console.log(names[index]);
} // while 循环
while(条件){
//break; # 跳出循环
//continue; # 跳过本次循环
}
7,条件语句
// if if(条件){ }else if(条件){ }else{ } // switch,case语句
switch(name){
case '1';
age = 123;
case '2';
age = 456;
default:
age = 789;
}
8,异常处理
try{ }cathe(e){ }finally{ }
9,函数
// 声明函数
function func(arg){
return true;
} // 匿名函数
var func = function(arg){
return "tony";
} // 自执行函数
(function(arg){
console.log(arg);
})('123')
// 无需调用,自动执行
10,面向对象
function Foo (name,age){
this.Name = name;
this.Age = age;
this.Func = function(arg){
return this.Name + arg;
}
} var obj = ne Foo('abc',22);
var ret = obj.Func("hello");
console.log(ret);
11,序列化和反序列化
JSON.stringify(dic) //序列化
JSON.parse(s) //反序列化 s = JSON.stringif(dic) // 把字典 dic 序列化为字符串
m = JSON.parse(s) // 把字符串 s 反序列化成对象
Dom
文档对象模型(Document Object Model,DOM)是一种用于HTML 和XML 文档的编辑接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们最关心的是,Dom把网页和脚本以及其他的编译语言联系起来。Dom属于浏览器,而不是JavaScript语言规范里的规定的核心内容。
一般说的JS让页面动起来泛指JavaScript 和Dom
1,选择器
document.getElementById('id);
document.getElementByName('name');
document.getElementByTagName('tagname');
2,内容
innerText
innerHTML var obj = document.getElementById('nid')
obj.innerText // 获取文本内容
obj.innerText = "hello"; // 设置文本内容
obj.innerHTML // 获取HTML内容
obj.innerHTML = "<h1>abc</h1>"; // 设置HTML内容 特殊的:
input系列
taxtarea标签
select标签
使用value属性操作进行取值修改值
3,创建标签
// 方法一:
var obj = document.creteElement('a');
obj,href = "http://www.wtiantian.org";
obj.innerText = "老男孩"; var container = document.getElementById('container');
container.appendChild(obj);
container.insertBefore(obj,container.firstChild);
container.insertBefore(obj,document.getElementById('hhh')); // 方法二
vat container = documeent.getElementById('container');
var obj = "<input type='text' />";
container.innerHTML = obj;
// 'beforeBegin','afterBegin','beforeEnd','afterEnd'
container.inserAdjacent("beforeEnd",obj);
4,标签属性
var obj = documet.getElementById('container');
// 固定属性
obj.id
obj.id = 'nid'
obj.calssName
obj.style.fontSize = "88px"; // 自定义属性
obj.setAttribute(name,value)
obj.getAttribute(name)
obj.reemoveAttribute(name)
5,提交表单
document.getElementById('form').submit()
6,事件
属性 | 触发条件 |
onabort | 图像的加载被中断 |
onblur | 元素失去焦点 |
onchange | 域的内容被改变 |
onclick | 当用户点击某个对象时调用的事件句柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onerror | 在加载文档或图像时发送错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一副图像完成加载 |
onmousedown | 鼠标按键被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从元素移开 |
onmouseover | 鼠标移动到某个元素之上 |
onmouseeup | 鼠标按键被松开 |
onreset | 重置按键被点击 |
onselect | 文本被选中 |
onsubmit | 确认按钮被点击 |
onunload | 用户退出页面 |
特额的:
window.onload = function(){}
JQuery:$(document).ready(function(){})
// onload是所有DOM元素创建,图片加载完毕后才会触发。而ready则是DOM元素创建完毕后触发的,不等图片加载完毕。图片还没有渲染,就可以进行事件的执行。 // 特殊参数:this,event
7,其他功能
console.log() # 在浏览器的开发者模式下的 console 中显示
alert() # 在页面上方弹出窗口
confirm() # 确定 // URL 和刷新
location.href
location.href = "url" window.location.reload() // 定时器
setInteerval("alert()",2000); // 单位毫秒
clearInterval(obj);
setTimeout();
clearTimeout(obj)
实例:
跑马灯:即网页的标题循环显示一串字符串
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<title>网页的标题循环显示一个字符串 </title>
<script type='text/javascript'>
function Go(){
var content = document.title; // 获取到title的值
var firstChar = content.charAt(0); // 获取字符串中的第一个字符
var sub = contet.substring(1,content.lengt); // 把字符串切片,取索引为1到索引为字符串长度的一段(即去除第一个字符后的字符串)
document.title = sub + firstChar; // 把两个字符串拼接,赋值给原来的字符串。效果是把第一个字符移动到最后面
}
setInterval('Go()',1000); // 执行Go函数,每一秒一次
</script>
</head>
<body>
</body>
</html>搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title> <style>
.gray{
color:gray;
}
.black{
color:black;
}
</style>
<script type='text/javacript">
function Enter(){
var id = document.getElementById('tip");
id.className = 'black';
if(id.value=='请输入关键字'||id.value.trim()==''){
id.value = ''
}
}
function Leavee(){
var id = document.getElementById('tip');
var val = id.value;
if(val.length == 0 || id.value.trim() == ''){
id.value = '请输入关键字';
id.className = 'gray';
}else{
id.className = 'black';
}
}
</script>
</head>
<body>
<input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();' />
</body>
</html>
jQuery
jQuery是一个兼容多浏览器的JavaScript库,核心理念是 写的更少,做的更多 。对JavaScript进行了封装,使得更加便捷的开发,并且在兼容方面十分优秀。
教程地址:http://www.php100.com/manual/jquery/
使用方法:
1,去官方下载
2,文件分两种:
- .js 多使用于开发,里面记录了各种使用方法
- .min.js 压缩过的文件,一般上线之后使用次文件。内容是压缩过的,所有的JS代码都在一行,去掉了注释
3,导入:
<script src="jquery-2.2.3.js"></script>
实例:
1,选择器和筛选器
加载:
<!DOCTYPE html> <html>
<head>
<meta charset='utf-8'>
<title>index</title>
<style>
a {
color: #428bca;
text-decoration: none;
} .modal-backdrop{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
background-color: #white;
opacity: 0.8;
} .modal{
position: fixed;
top: 30%;
left: 50%;
z-index: 1030;
} .hide{
display: none;
}
</style>
</head>
<body>
<div>
<input type="button" onclick="fadeIn();" value="加载条" />
</div>
<div>
<div id="shade" calss="modal-backdrop hide">
<div class="modal">
<img src="./images/logding_32.git" />
</div>
</div>
<script>
function fadeIn(){
document.getElementById('shade').className = 'modal-backdrop';
}
function fadeOut(){
document.getElementById('shade').calssName = 'modal-backdrop hide';
}
</script>
</div>
</body>
</html>左侧菜单:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<!--<link rel="stylesheet" type="text/css" href="common.css" />-->
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<style>
.hide{
display: none;
} .container{
width:300px;
height: 600px;
background-color: #ddd;
border: 1px solid #999;
} .container .title{
height: 38px;
font-size: 28px;
line-height: 38px;
background-color: orange;
cursor: pointer;
} .container .body{
background-color:white;
} .container .body a{
display: block;
padding: 10px;
}
</style>
</head>
<body>
<div class='container'>
<div>
<div class='title'>Menu1</div>
<div class='body'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div> <div>
<div class='title'>Menu2</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div> <div>
<div class='title'>Menu3</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div> <div>
<div class='title'>Menu4</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div> <div>
<div class='title'>Menu5</div>
<div class='body hide'>
<a href="">content1</a>
<a href="">content2</a>
<a href="">content3</a>
</div>
</div> </div> <script type="text/javascript">
$(function(){
$('.title').click(function(){
$(this).parent().siblings().children('.body').addClass('hide');
$(this).next().removeClass('hide');
});
});
</script>
</body>
</html>tab表单
css
/*公共开始*/
body {
margin: 0 auto;
font-family: Arial;
_font-family: 宋体,Arial;
font-size: 12px;
}
body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {
margin: 0;
padding: 0;
} ol, ul, li {
list-style: none;
}
a{
cursor:pointer;
text-decoration:none;
}
/*a:hover{
color: #F60 !important;
text-decoration: underline;
}*/
img{
border:none;
border-width:0px;
}
table{
border-collapse: collapse;
border-spacing: 0;
} .red{
color: #c00!important;
}
.m8{
margin:8px;
}
.mt10{
margin-top:10px;
}
.mt20{
margin-top:20px;
}
.mr5{
margin-right:5px;
}
.ml5{
margin-left:5px;
} .ml10{
margin-left:10px;
} .mb10{
margin-bottom:10px;
}
.pt18{
padding-top:18px;
}
.pt20{
padding-top:20px;
}
.pb20{
padding-bottom:20px;
}
.nbr{
border-right:0px;
}
.font12{
font-size:12px;
}
.font14{
font-size:14px;
}
.font16{
font-size:16px;
}
.bold{
font-weight:bold;
}
.left{
float:left;
}
.right{
float:right;
}
.hide{
display:none;
}
.show{
display:table;
}
.clearfix{
clear:both;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .clearfix {zoom: 1;} .container{
width:1190px;
margin-left:auto;
margin-right:auto; } .group-box-1 .title{
height: 33px;
line-height: 33px;
border: 1px solid #DDD;
background: #f5f5f5;
padding-top: 0;
padding-left: 0; }
.group-box-1 .title .title-font{
display: inline-block;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
font-weight: bold;
color: #333;
padding-left: 10px;
}
.group-box-1 .body {
border: 1px solid #e4e4e4;
border-top: none;
} .tab-menu-box1 {
border: 1px solid #ddd;
margin-bottom: 20px;
} .tab-menu-box1 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
} .tab-menu-box1 .content {
min-height: 100px;
border-top: 1px solid #ddd;
background-color: white;
} .tab-menu-box1 .menu ul {
padding: 0;
margin: 0;
list-style: none;
/*position: absolute;*/
} .tab-menu-box1 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
text-align: center;
font-size: 14px;
font-weight: bold;
border-right: 1px solid #ddd;
padding: 0 18px;
cursor: pointer;
} .tab-menu-box1 .menu ul li:hover {
color: #c9033b;
} .tab-menu-box1 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
} .tab-menu-box1 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
} .tab-menu-box1 .menu .current {
margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
} .tab-menu-box-2 .float-title {
display: none;
top: 0px;
position: fixed;
z-index: 50;
} .tab-menu-box-2 .title {
width: 890px;
border-bottom: 2px solid #b20101;
border-left: 1px solid #e1e1e1;
clear: both;
height: 32px;
} .tab-menu-box-2 .title a {
float: left;
width: 107px;
height: 31px;
line-height: 31px;
font-size: 14px;
font-weight: bold;
text-align: center;
border-top: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
text-decoration: none;
color: #333;
cursor: pointer;
} .tab-menu-box-2 .title a:hover {
background-position: -26px -271px;
text-decoration: none;
color: #fff;
} .tab-menu-box-2 .content {
min-height: 100px;
background-color: white;
} .tab-menu-box3 {
border: 1px solid #ddd;
} .tab-menu-box3 .menu {
line-height: 33px;
height: 33px;
background-color: #f5f5f5;
} .tab-menu-box3 .content {
height: 214px;
border-top: 1px solid #ddd;
background-color: white;
} .tab-menu-box3 .menu ul {
padding: 0;
margin: 0;
list-style: none;
/*position: absolute;*/
} .tab-menu-box3 .menu ul li {
position: relative;
float: left;
font-size: 14px;
font-family: 'Microsoft Yahei','SimHei';
text-align: center;
font-size: 14px;
width:50%;
cursor: pointer;
} .tab-menu-box3 .menu ul li:hover {
color: #c9033b;
} .tab-menu-box3 .menu .more {
float: right;
font-size: 12px;
padding-right: 10px;
font-family: "宋体";
color: #666;
text-decoration: none;
} .tab-menu-box3 .menu a:hover {
color: #f60 !important;
text-decoration: underline;
font-weight: bold;
} .tab-menu-box3 .menu .current { margin-top: -1px;
color: #c9033b;
background: #fff;
height: 33px;
border-top: 2px solid #c9033b;
z-index: 10;
font-weight: bold; }
/*公共结束*/html
<!DOCTYPE html>
<html>
<head></head>
<link href="common11.css" rel="stylesheet" />
<body>
<div class='container'>
<div class='tab-menu-box1'>
<div class='menu'>
<ul id='tab-menu-title'>
<li class='current' content-to='1'>价格趋势</li>
<li content-to='2'>市场分布</li>
<li content-to='3'>其他</li>
</ul>
</div> <div id='tab-menu-body' class='content'>
<div content='1'>content1</div>
<div content='2' class='hide'>content2</div>
<div content='3' class='hide'>content3</div>
</div>
</div>
</div>
<script src="./jquery-2.2.3.js"></script>
<script type='text/javascript'>
$(function(){
ChangeTab('#tab-menu-title', '#tab-menu-body');
})
function ChangeTab(title, body) {
$(title).children().bind("click", function () {
$menu = $(this);
$content = $(body).find('div[content="' + $(this).attr("content-to") + '"]');
$menu.addClass('current').siblings().removeClass('current');
$content.removeClass('hide').siblings().addClass('hide');
});
}
</script>
</body>
</html>
2,属性和CSS
返回顶部:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
bottom: 0px;
right: 0px;
}
.hide{
display: none;
}
</style>
</head>
<body> <div style="height: 2000px;"></div> <div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-1.8.2.js"></script>
<script type="text/javascript"> function GoTop(){
//返回顶部
$(window).scrollTop(0);
} $(function(){ $(window).scroll(function(){
//当滚动滑轮时,执行函数体 //获取当前滑轮滚动的高度
var top = $(window).scrollTop(); if(top>100){
//展示“返回顶部”
$('.back').removeClass('hide');
}else{
//隐藏“返回顶部”
$('.back').addClass('hide');
}
});
}); </script> </body>
</html>
多选,反选,取消
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<script type="text/javascript" src='jquery-1.8.2.js'></script>
<script type="text/javascript">
$(function(){
$('#selectAll').click(function(){
$('#checklist :checkbox').prop('checked',true);
})
$('#unselectAll').click(function(){
$('#checklist :checkbox').prop('checked',false);
})
$('#reverseAll').click(function(){
$('#checklist :checkbox').each(function(){
$(this).prop('checked',!$(this).prop('checked'))
})
}) })
</script>
</head>
<body>
<div id='checklist'>
<input type='checkbox' value='1'/>篮球
<input type='checkbox' value='2'/>足球
<input type='checkbox' value='3'/>羽毛球
</div>
<input type='button' value='全选' id='selectAll' />
<input type='button' value='不选' id='unselectAll' />
<input type='button' value='反选' id='reverseAll' />
</body>
</html>
滚动菜单
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style> body{
margin: 0px;
}
img {
border: 0;
}
ul{
padding: 0;
margin: 0;
list-style: none;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
} .wrap{
width: 980px;
margin: 0 auto;
} .pg-header{
background-color: #303a40;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
box-shadow: 0 2px 5px rgba(0,0,0,.2);
}
.pg-header .logo{
float: left;
padding:5px 10px 5px 0px;
}
.pg-header .logo img{
vertical-align: middle;
width: 110px;
height: 40px; }
.pg-header .nav{
line-height: 50px;
}
.pg-header .nav ul li{
float: left;
}
.pg-header .nav ul li a{
display: block;
color: #ccc;
padding: 0 20px;
text-decoration: none;
font-size: 14px;
}
.pg-header .nav ul li a:hover{
color: #fff;
background-color: #425a66;
}
.pg-body{ }
.pg-body .catalog{
position: absolute;
top:60px;
width: 200px;
background-color: #fafafa;
bottom: 0px;
}
.pg-body .catalog.fixed{
position: fixed;
top:10px;
} .pg-body .catalog .catalog-item.active{
color: #fff;
background-color: #425a66;
} .pg-body .content{
position: absolute;
top:60px;
width: 700px;
margin-left: 210px;
background-color: #fafafa;
overflow: auto;
}
.pg-body .content .section{
height: 500px;
}
</style>
</head>
<body> <div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
</a>
</div>
<div class="nav">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div> </div>
</div>
<div class="pg-body">
<div class="wrap">
<div class="catalog">
<div class="catalog-item" auto-to="function1"><a>第1张</a></div>
<div class="catalog-item" auto-to="function2"><a>第2张</a></div>
<div class="catalog-item" auto-to="function3"><a>第3张</a></div>
</div>
<div class="content">
<div menu="function1" class="section">
<h1>第一章</h1>
</div>
<div menu="function2" class="section">
<h1>第二章</h1>
</div>
<div menu="function3" class="section">
<h1>第三章</h1>
</div>
</div>
</div> </div> <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){
Init();
});
function Init(){
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if(scrollTop > 50){
$('.catalog').addClass('fixed');
}else{
$('.catalog').removeClass('fixed');
}
$('.content').children().each(function(){
var offSet = $(this).offset();
var offTop = offSet.top - scrollTop;
var height = $(this).height(); if(offTop<=0 && offTop> -height){
//去除其他
//添加自己
var docHeight = $(document).height();
var winHeight = $(window).height(); if(docHeight == winHeight+scrollTop)
{
$('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
}else{
var target = $(this).attr('menu');
$('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
} }
}); }); } </script>
</body>
</html>
滚动菜单2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div>
<div>
<div class="chapter" style="height: 500px;">
<h1>第一张</h1>
</div> <div class="chapter" style="height: 1500px;">
<h1>第二张</h1>
</div> <div class="chapter" style="height: 30px;">
<h1>第三张</h1>
</div>
</div>
</div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scroll_top = $(window).scrollTop();
var list = [];
$.each($('.chapter'), function(i){
var current_height = $($('.chapter')[i]).offset().top;
list.push(current_height);
});
$.each(list,function(i){
if (scroll_top+$(window).height() == $(document).height()){
$('#currentPosition').text($('.chapter').last().text());
return
}
if (scroll_top>list[i]){
$('#currentPosition').text($($('.chapter')[i]).text());
return
}
}) })
}); </script>
</body>
</html>
3,文档处理
4,事件
移动面板:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 300px;"></div>
</div>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
5,扩展
表单验证:
下载:http://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip
6,ajax和跨域
ajax
下载:http://files.cnblogs.com/files/wupeiqi/ajax_demo.zip
ajax跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="AjaxRequest()" value="跨域Ajax" /> <div id="container"></div> <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function AjaxRequest() {
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',
type: 'GET',
dataType: 'jsonp',
jsonp: 'callback',
jsonpCallback: 'list',
success: function (data) {
$.each(data.data,function(i){
var item = data.data[i];
var str = "<p>"+ item.week +"</p>";
$('#container').append(str);
$.each(item.list,function(j){
var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";
$('#container').append(temp);
});
$('#container').append("<hr/>");
}) }
});
}
</script>
</body>
</html>
最新文章
- python画决策树
- DIV元素水平和垂直居中
- 在IIS服务器上部署svg/woff/woff2字体
- Android Studio 查看密钥库证书指纹SHA1
- MongoDB中的高级查询(二)
- php笔记[2]
- hdu 4586 Play the Dice
- LR 常见问题总结
- HDOJ(HDU) 2139 Calculate the formula(水题,又一个用JavaAC不了的题目)
- Java性能漫谈-数组复制之System.arraycopy
- php知识(第2天)
- ASP.NET Core MVC/WebAPi如何构建路由?
- Docker - 定制镜像
- 纯JavaScript实现异步Ajax的基本原理
- Packet for query is too large (84 >; -1).
- C# WinForm:无法访问已释放的对象
- git server 配置
- MySQL 之mydumper安装详解
- Vue中的“混合”——mixins使用方法
- c#操作xml的代码(插入节点、修改节点、删除节点等)