python學習day13

時間  2019-12-08
標籤 python 學習 day13 day 欄目 Python 简体版
原文   原文鏈接

目錄javascript

JavaScriptphp

Domhtml

jQueryjava

 

JavaScriptjquery

JavaScript 是世界上最流行的編程語言。web

這門語言可用於 HTML 和 web，更可普遍用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。編程

avaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。數組

JavaScript 是可插入 HTML 頁面的編程代碼。瀏覽器

JavaScript 插入 HTML 頁面後，可由全部的現代瀏覽器執行。服務器

JavaScript 很容易學習。

一、JavaScript代碼存在形式

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
 
<!-- 方式二 -->
<script type"text/javascript">
    Js代碼內容
</script>

二、JavaScript代碼存在位置

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

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

<head> 中的 JavaScript 函數

在本例中，咱們把一個 JavaScript 函數放置到 HTML 頁面的 <head> 部分。

該函數會在點擊按鈕時被調用：

實例
<!DOCTYPE html>
<html>

<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html>

 

<body> 中的 JavaScript 函數

在本例中，咱們把一個 JavaScript 函數放置到 HTML 頁面的 <body> 部分。

該函數會在點擊按鈕時被調用：

實例
<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>

<button type="button" onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>

</body>
</html>

提示：咱們把 JavaScript 放到了頁面代碼的底部，這樣就能夠確保在 <p> 元素建立以後再執行腳本。

 

外部的 JavaScript

也能夠把腳本保存到外部文件中。外部文件一般包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。

如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：

實例
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

在 <head> 或 <body> 中引用腳本文件都是能夠的。實際運行效果與您在 <script> 標籤中編寫腳本徹底一致。

提示：外部腳本不能包含 <script> 標籤。

 

三、變量

  • 全局變量
  • 局部變量

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

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

注：註釋 // 或 /* */

 

四、基本數據類型

JavaScript 擁有動態類型

JavaScript 擁有動態類型。這意味着相同的變量可用做不一樣的類型：

實例
var x                // x 爲 undefined
var x = 6;           // x 爲數字
var x = "Bill";      // x 爲字符串

 

JavaScript 字符串

字符串是存儲字符（好比 "Bill Gates"）的變量。

字符串能夠是引號中的任意文本。您可使用單引號或雙引號：

實例
var carname="Bill Gates";
var carname='Bill Gates';

您能夠在字符串中使用引號，只要不匹配包圍字符串的引號便可：

實例
var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

 

JavaScript 數字

JavaScript 只有一種數字類型。數字能夠帶小數點，也能夠不帶：

實例
var x1=34.00;      //使用小數點來寫
var x2=34;         //不使用小數點來寫

極大或極小的數字能夠經過科學（指數）計數法來書寫：

實例
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

 

JavaScript 布爾

布爾（邏輯）只能有兩個值：true 或 false。

var x=true
var y=false

布爾經常使用在條件測試中。

 

JavaScript 數組

下面的代碼建立名爲 cars 的數組：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者 (condensed array):

var cars=new Array("Audi","BMW","Volvo");

或者 (literal array):

var cars=["Audi","BMW","Volvo"];

數組下標是基於零的，因此第一個項目是 [0]，第二個是 [1]，以此類推。

經常使用方法：

經常使用方法：
    添加
        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'}

 

JavaScript 對象

對象由花括號分隔。在括號內部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗號分隔：

var person={firstname:"Bill", lastname:"Gates", id:5566};

上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。

空格和折行可有可無。聲明可橫跨多行：

var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

對象屬性有兩種尋址方式：

實例
name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 這個值表示變量不含有值。

能夠經過將變量的值設置爲 null 來清空變量。

實例
cars=null;
person=null;

 

五、循環語句

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

 

六、條件語句

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

 

七、異常處理

try{
 
}catch(e) {
 
}finally{
 
}

 

八、函數

函數的聲明
    function func(arg){
        return true;
    }
         
匿名函數
    var func = function(arg){
        return "tony";
    }
 
自執行函數
    (function(arg){
        console.log(arg);
    })('123')

 

九、面向對象

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

 

資料：http://www.w3school.com.cn/js/index.asp

Dom

HTML DOM （文檔對象模型）

當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。

HTML DOM 模型被構造爲對象的樹。

HTML DOM 樹

ct_htmltree

經過可編程的對象模型，JavaScript 得到了足夠的能力來建立動態的 HTML。

  • JavaScript 可以改變頁面中的全部 HTML 元素
  • JavaScript 可以改變頁面中的全部 HTML 屬性
  • JavaScript 可以改變頁面中的全部 CSS 樣式
  • JavaScript 可以對頁面中的全部事件作出反應

 

一、查找 HTML 元素

一般，經過 JavaScript，您須要操做 HTML 元素。

爲了作到這件事情，您必須首先找到該元素。有三種方法來作這件事：

  • 經過 id 找到 HTML 元素
  • 經過標籤名找到 HTML 元素
  • 經過類名找到 HTML 元素
document.getElementById('id');
document.getElementsByName('name');
document.getElementsByTagName('tagname');

 

二、查找

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

 

三、建立標籤

方式一：
    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);

 

四、標籤屬性

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)

 

五、提交表單

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

 

六、事件

 

特殊的：

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

特殊參數：this，event

 

七、其餘功能

console.log()
alert()
confirm()
 
// URL和刷新
location.href
location.href = "url"  window.location.reload()
 
// 定時器
setInterval("alert()",2000);   
clearInterval(obj)
setTimeout();   
clearTimeout(obj)

實例：

 

 

 

jQuery

jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,作得更多)，對javascript進行了封裝，是的更加便捷的開發，而且在兼容性方面十分優秀。

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

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