JavaScriptDom和jQuery

Posted zt152156

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScriptDom和jQuery相关的知识，希望对你有一定的参考价值。

https://www.cnblogs.com/wupeiqi/articles/5369773.html

javascript

JavaScript是一门编程语言，浏览器内置了JavaScript语言的解释器，所以在浏览器上按照JavaScript语言的规则编写相应代码之，浏览器可以解释并做出相应的处理。

1、JavaScript代码存在形式

1
2
3
4
5
6
7
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

2、JavaScript代码存在位置

  • HTML的head中
  • HTML的body代码块底部(推荐)

由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

1
2
3
4
5
6
如：
 
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
    alert(‘123‘);
</script>

3、变量

  • 全局变量
  • 局部变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

1
2
var name = "seven"  # 局部变量
age = 18            # 全局变量

注：注释 // 或 /* */

4、基本数据类型

数字（Number）

1
2
3
4
5
var page = 111;
var age = Number(18);
var a1 = 1,a2 = 2, a3 = 3;
parseInt("1.2");
parseFloat("1.2");

字符串(String)

1
2
3
4
5
6
7
8
9
10
var name = "wupeiqi";
var name = String("wupeiqi");
var age_str = String(18);
 
常用方法：
    obj.trim()
    obj.charAt(index)
    obj.substring(start,end)
    obj.indexOf(char)
    obj.length

布尔(Boolean)

1
2
3
var status = true;
var status = false;
var status = Boolen(1==1)

数组(Array)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var names = [‘alex‘, ‘tony‘, ‘eric‘]
var names = Array(‘alex‘, ‘tony‘, ‘eric‘)
 
常用方法：
    添加
        obj.push(ele)                   追加
        obj.unshift(ele)                最前插入
        obj.splice(index,0,‘content‘)   指定索引插入
    移除
        obj.pop()                       数组尾部获取
        obj.shift()                     数组头部获取
        obj.splice(index,count)         数组指定位置后count个字符
      
    切片
        obj.slice(start,end)          
    合并
        newArray ＝ obj1.concat(obj2)  
    翻转
        obj.reverse()
      
    字符串化
        obj.join(‘_‘)
    长度
        obj.length
 
 
字典
var items = ‘k1‘: 123, ‘k2‘: ‘tony‘

更多操作见：http://www.shouce.ren/api/javascript/main.html

undefined

1
2
undefined表示未定义值
var name;

null

1
null是一个特殊值

5、循环语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
var names = ["alex", "tony", "rain"];
 
 
// 数组：方式一
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": "alex", "age": 18;
 
 
// 字典：方式一
for(var index in names)
    console.log(index);
    console.log(names[index]);
 
 
// while循环
while(条件)
    // break;
    // continue;

6、条件语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//if条件语句
 
    if(条件)
 
    else if(条件)
         
    else
 
    
 
var name = ‘alex‘;
var age = 1;
 
// switch,case语句
    switch(name)
        case ‘1‘:
            age = 123;
            break;
        case ‘2‘:
            age = 456;
            break;
        default :
            age = 777;
    

7、异常处理

1
2
3
4
5
6
7
try
 
catch(e)
 
finally
 

8、函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
函数的声明
    function func(arg)
        return true;
    
         
匿名函数
    var func = function(arg)
        return "tony";
    
 
自执行函数
    (function(arg)
        console.log(arg);
    )(‘123‘)

9、面向对象

1
2
3
4
5
6
7
8
9
10
11
function Foo (name,age)
    this.Name = name;
    this.Age = age;
    this.Func = function(arg)
        return this.Name + arg;
    
 
var obj = new Foo(‘alex‘, 18);
var ret = obj.Func("sb");
console.log(ret);

 

Dom

文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。

注：一般说的JS让页面动起来泛指JavaScript和Dom

1、选择器

1
2
3
document.getElementById(‘id‘);
document.getElementsByName(‘name‘);
document.getElementsByTagName(‘tagname‘);

2、内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
innerText
innerHTML
 
var obj = document.getElementById(‘nid‘)
obj.innerText                       # 获取文本内容
obj.innerText = "hello"             # 设置文本内容
obj.innerHTML                       # 获取HTML内容
obj.innerHTML = "<h1>asd</h1>"      # 设置HTML内容
 
 
特殊的：
    input系列
    textarea标签
    select标签
 
    value属性操作用户输入和选择的值

3、创建标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
方式一：
    var obj = document.createElement(‘a‘);
    obj.href = "http://www.etiantian.org";
    obj.innerText = "老男孩";
 
    var container = document.getElementById(‘container‘);
    //container.appendChild(obj);
    //container.insertBefore(obj, container.firstChild);
    //container.insertBefore(obj, document.getElementById(‘hhh‘));
 
方式二：
    var container = document.getElementById(‘container‘);
    var obj = "<input  type=‘text‘ />";
    container.innerHTML = obj;
    // ‘beforeBegin‘, ‘afterBegin‘, ‘beforeEnd‘,  ‘afterEnd‘
    //container.insertAdjacentHTML("beforeEnd",obj);

4、标签属性

1
2
3
4
5
6
7
8
9
10
11
var obj = document.getElementById(‘container‘);
固定属性
    obj.id
    obj.id = "nid"
    obj.className
    obj.style.fontSize = "88px";
 
自定义属性
    obj.setAttribute(name,value)
    obj.getAttribute(name)
    obj.removeAttribute(name)

5、提交表单

1
document.geElementById(‘form‘).submit()

6、事件

技术图片

特殊的：

1
2
3
window.onload = function()
        //jQuery：$(document).ready(function())
        //onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

特殊参数：this，event

7、其他功能

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log()
alert()
confirm()
 
// URL和刷新
location.href
location.href = "url"  window.location.reload()
 
// 定时器
setInterval("alert()",2000);   
clearInterval(obj)
setTimeout();   
clearTimeout(obj)

实例：

技术图片
技术图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset=‘utf-8‘ >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type=‘text/javascript‘>
            function Go()
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            
            setInterval(‘Go()‘,1000);
        </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/javascript">
            function Enter()
               var id= document.getElementById("tip")
               id.className = ‘black‘;
               if(id.value==‘请输入关键字‘||id.value.trim()==‘‘)
                    id.value = ‘‘
               
            
            function Leave()
                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库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

http://www.php100.com/manual/jquery/

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 id="shade" class="modal-backdrop hide">
            <div  class="modal">
                <img src="./images/loading_32.gif"/>
            </div>
        </div>
        <script >
            function fadeIn() 
                document.getElementById(‘shade‘).className = ‘modal-backdrop‘;
            

            function fadeOut() 
                document.getElementById(‘shade‘).className = ‘modal-backdrop hide‘;
            
        </script>
    </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-1.8.2.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‘>Menu1</div>
                <div class=‘body hide‘>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>

            <div>
                <div class=‘title‘>Menu1</div>
                <div class=‘body hide‘>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class=‘title‘>Menu1</div>
                <div class=‘body hide‘>
                    <a href="">content1</a>
                    <a href="">content2</a>
                    <a href="">content3</a>
                </div>
            </div>
            
            <div>
                <div class=‘title‘>Menu1</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>
技术图片
技术图片
技术图片
/*公共开始*/
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;
    


/*公共结束*/
技术图片
技术图片
技术图片
<!DOCTYPE html>
<html>
<head></head>
<link href="common.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-1.8.2.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>
技术图片
技术图片
技术图片
<!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="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和跨域

技术图片 
下载：http://files.cnblogs.com/files/wupeiqi/ajax_demo.zip

技术图片

技术图片
<!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>

以上是关于JavaScriptDom和jQuery的主要内容，如果未能解决你的问题，请参考以下文章

JavaScriptDOM之BOM

javascriptDOM操作方法——节点属性

JavaScriptDOM操作那些事（增 删 改 查）

JavaScriptDOM和事件简介和文档加载流程以及DOM查询(上)案例（附源码）

前端基础四之JavaScriptDOM与事件

前端基础四之JavaScriptDOM与事件