Python學習-前臺開發-JavaScript、Dom和jQuery

時間  2019-12-13
標籤 python 學習 前臺 開發 javascript dom jquery 欄目 Python 简体版
原文   原文鏈接

JavaScriptjavascript

JavaScript是一門編程語言，瀏覽器內置了JavaScript語言的解釋器，因此在瀏覽器上按照JavaScript語言的規則編寫相應代碼之，瀏覽器能夠解釋並作出相應的處理。php

一、JavaScript代碼存在形式css

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

二、JavaScript代碼存在位置html

  • HTML的head中
  • HTML的body代碼塊底部(推薦)

因爲Html代碼是從上到下執行，若是Head中的js代碼耗時嚴重，就會致使用戶長時間沒法看到頁面，若是放置在body代碼塊底部，那麼即便js代碼耗時嚴重，也不會影響用戶看到頁面效果，只是js實現特效慢而已。java

?
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>

三、變量python

  • 全局變量
  • 局部變量

JavaScript中變量的聲明是一個很是容易出錯的點，局部變量必須一個 var 開頭，若是未使用var，則默認表示聲明的是全局變量jquery

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

注：註釋 // 或 /* */web

四、基本數據類型ajax

數字（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是一個特殊值

五、循環語句

?
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 ;
}

六、條件語句

?
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 ;
     }

七、異常處理

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

八、函數

?
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' )

九、面向對象

?
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
2
3
document.getElementById( 'id' );
document.getElementsByName( 'name' );
document.getElementsByTagName( 'tagname' );

二、內容

?
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屬性操做用戶輸入和選擇的值

三、建立標籤

?
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);

四、標籤屬性

?
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)

五、提交表單

?
1
document.geElementById( 'form' ).submit()

六、事件

特殊的：

?
1
2
3
window.onload = function(){}
         / / jQuery：$(document).ready(function(){})
         / / onload是全部DOM元素建立、圖片加載完畢後才觸發的。而ready則是DOM元素建立完畢後觸發的，不等圖片加載完畢。圖片還麼有渲染，就能夠進行事件的執行。

特殊參數：this，event

七、其餘功能

?
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/

一、選擇器和篩選器

模態對話框
實例：模態對話框 
<!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; } /*公共結束*/
實例：Tab菜單-css 
<!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>
實例：Tab菜單-html

二、屬性和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>
實例：滾動菜單

三、文檔處理

四、事件

<!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>
實例：移動面板

五、擴展

下載：http://files.cnblogs.com/files/wupeiqi/%E7%99%BB%E9%99%86%E6%B3%A8%E5%86%8C.zip
實例：表單驗證

六、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>
實例：Ajax跨域
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程