1. 技术文章
  2. JavaScript,Dom,jQuery

JavaScript,Dom,jQuery

由 安稳与你 提交于 2020-03-30 05:21:05

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>网页的标题循环显示一个字符串&nbsp;&nbsp;</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>
标签
background
html代码
html语言
border
position
padding
font
margin
dom
jquery
dom对象
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!