JavaScript選擇排序

擇排序概述

選擇排序(Selection Sort)是從待排序數列中取出最小(或最大)的1位，與第一個位置交換，再從待排序數列中找出最小的跟整個數列的第二個交換。以此類推遍歷完待排序數列。平均算法復雜度：O(n^2)

步驟是：

先建立兩個循環，外循環用于逐個交換數據，內循環用來遍歷找到最小(或最大)值。
設第1項為最小值，在內循環中將其逐個與后項進行比較，如果遇到更小的值，則更新最小值，并記錄下最小值的下標。
在外循環中將第1項與最小值進行交換，然后以第2項作為最小值，再重復執行步驟2，直到遍歷完全部待排序區間。

選擇排序執行過程分析

例如數列： 4, 1, 3, 5, 2

從待排序區間中每次找到最小的項目，將其與第一項交換。

選擇排序過程

選擇排序實現

標準實現

選擇排序的標準實現

新建數組法與移除法，這種方式會多建立一個數組，但無需交換。

選擇排序新建數組

般兼容性問都體現到DOM和事件上

只聊ie6+版本瀏覽器，希望小伙伴們別糾結更低版本瀏覽器哈^_^

DOM

獲取元素

document.getElementsByclassName 不兼容ie6 7 8
解決方法：

function getByClass(oParent,sClass) {

var aResult=[];

var aEle=oParent.getElementsByTagName("*");

var re=new RegExp("\b"+sClass+"\b","i");

for (var i=0;i<aEle.length;i++)

{

if(re.test(aEle[i].className))

{

aResult.push(aEle[i]);

}

return aResult;

}

document.querySelector 不兼容ie6 7

這個選擇器獲取方法還是很推薦使用的

解決方法：可以使用 getElementById

document.querySelectorAll 不兼容ie6 7

這個選擇器獲取方法還是很推薦使用的，和上面不同的是，它是獲取一組元素

解決方法：可以使用 getElementsByTagName 或者上面封裝的getByClass

屬性

自定義屬性操作方法

getAttribute(name) 不兼容ie6 7

setAttribute(name,value) 不兼容ie6 7

removeAttribute(name) 不兼容ie6 7、

解決方法：

// 個人建議加加載完html，使用js給標簽賦值

obj.index = 1 // 設置

console.log(obj.index) // 獲取

obj.index = '' // 清空

自定義屬性data-* 不兼容ie6 7 8 9 10

console.log(obj.dataset.name) 獲取

obj.dataset.name = value 設置

解決方法：

function getDataset(ele){

if(ele.dataset){

return ele.dataset;

}else{

var attrs = ele.attributes,

dataset = {},

name,

matchStr;

for(var i = 0;i<attrs.length;i++){

matchStr = attrs[i].name.match(/^data-(.+)/);

if(matchStr){

name = matchStr[1].replace(/-([\da-z])/gi,function(all,letter){

return letter.toUpperCase();

});

dataset[name] = attrs[i].value;

}

return dataset;

}

操作class方法

classList.add('name') 不兼容ie6 7 8 9

classList.remove('name') 不兼容ie6 7 8 9

解決方法：

function addClass(obj, class){

if(!this.contains(class)){

obj.className +=' ' + class;

}

function removeClass(obj,class){

if(obj.className.indexOf(class) !== -1){

var reg= new RegExp(class);

obj.className = obj.className.replace(reg,'');

}

節點

節點類一起總結: 前面的不兼容ie6

// 獲取子節點

var children = obj.children || obj.childNodes

// 獲取第一個子節點

var first = obj.firstElementChild || obj.firstChild

// 獲取最后一個子節點

var last = obj.lastElementChild || obj.lastChild

// 獲取上一個兄弟節點

var prev = obj.previousElementSibling || obj.nextElementSibling

// 獲取下一個兄弟節點

var next = obj.nextElementSibling || obj.nextElementSibling

滾動距離

// 有文檔頭

// - docuemnt.documentElement.scrollTop / scrollLeft

// 沒有文檔頭

// - document.body.scrollTop / scrollLeft

// 兼容

var top = docuemnt.documentElement.scrollTop || document.body.scrollTop

var left = docuemnt.documentElement.scrollLeft || document.body.scrollLeft

瀏覽器可視區大小

// 包含工具條與滾動條

// - document.documentElement.clientWidth / clientHeight

// 不包含工具條與滾動條

// - window.innerWidth / innerHeight

// - 使用 outerWidth 和 outerHeight 屬性獲取加上工具條與滾動條窗口的寬度與高度

事件

事件對象

// 事件對象

// ev 不兼容ie 6 7 8

// window.event 兼容所有瀏覽器

document.onclick = function (ev) {

ev = ev || window.event

}

獲取頁面中鼠標位置

ev.pageX/ev.pageY 不兼容ie6 7 8

解決方案：

var x = ev.clientX + document.documentElement.scrollLeft

var y = ev.clientY + document.documentElement.scrollTop

獲取鍵盤碼

ev.keyCode 不兼容火狐

ev.which 不兼容 ie6 7 8

解決方案：

var code = keyCode || which

獲取事件源

ev.target 不兼容 ie6 7 8

ev.srcElement 兼容所有瀏覽器

解決方案：

var src = target || srcElement

阻止默認行為

ev.preventDefault() 不兼容ie6 7 8

ev.returnValue = false 兼容所有瀏覽器

解決方案：

function stopDefault(ev) {

if (ev && ev.preventDefault) {

ev.preventDefault()

} else {

event.returnValue = false

}

return false;

}

阻止事件冒泡

e.stopPropagation() 不兼容ie6 7 8

ev.cancelBubble = true 兼容所有瀏覽器

解決方案：

function stopPropagat(ev){

if (ev&& evstopPropagation) {

evstopPropagation()

} else {

event.cancelBubble = true

}

事件綁定

obj.addEventListener 不兼容9+

obj.attachEvent 兼容ie6 7 8

解決方案：

function on(obj, type, fn){

if(obj.addEventListener){

obj.addEventListener(type, fn, false)

}else{

obj.attachEvent('on'+type, fn)

}

事件解除綁定

obj.removeEventListener 不兼容9+

obj.detachEvent 兼容ie6 7 8

解決方案：

function on(obj, type, fn){

if(obj.removeEventListener){

obj.removeEventListener(type, fn, false)

}else{

obj.detachEvent('on'+type, fn)

}

整理不易，如有遺漏還請多多包涵^_^

天學習了HTML的選擇器和JavaScript的基礎知識。

今日學習內容

1、HTML選擇器

層次選擇器

<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
12345678910111213141516

后代選擇器

/*
   后代選擇器
      某個元素的后面  祖爺爺 爺爺 爸爸 你
*/
body p{
     background: red;
 }
1234567

結果圖：

子代選擇器

/*子代選擇器  一代  兒子*/
body > p {
    background: yellow;
}
1234

結果圖：

相鄰兄弟選擇器

.active +p{
    background: palegreen;
}
123

結果圖：

通用選擇器

/*通用選擇器
    當前選擇元素向下所有的兄弟元素
*/
.active~p{
    background: slateblue;
}
123456

結果圖：

結構偽類選擇器：

        /*
        ul的最后一個子元素，不使用我們的class和id選擇器
        */
        ul li:last-child{
            background: palegreen;
        }
123456

		/*ul的第一個子元素，不使用我們的class和id選擇器*/
        ul li:first-child{
            background: red;
        }
1234

 	  /*
      選中p1:定位父元素，選擇當前的p的第一個選擇
      選擇當前p元素的父級元素,選擇父級元素的第一個，并且是當前元素才生效，順序
 	  */
        p:nth-child(2){
            background: yellowgreen;
        }
1234567

 /*選擇父元素下的p元素的第二個類型*/
        p:nth-of-type(2){
            background: red;
        }
1234

/*鼠標懸浮顏色*/
        h1:hover{
            background: yellow;
        }
1234

屬性選擇器

<p class="demo"> 
<a href="https://www.baidu.com" class="link item first" id="first">1</a> 
<a href="" class="link item active" id="test">2</a> 
<a href="image/123.html" class="link item active">3</a> 
<a href="image/123.png" class="link item">4</a> 
<a href="image/123.jpg" class="link item">5</a> 
<a href="adc" class="link item">6</a> 
<a href="/a.jpg" class="link item">7</a> 
<a href="abc.doc" class="link item">8</a> 
<a href="abcd.doc" class="link item last">9</a> 
</p> 

<style> 
.demo a{ 
float:left; 
display: block; 
height: 50px; 
width: 50px; 
border‐radius: 10px; 
background: yellow; 
text‐align: center; 
color: red; 
text‐decoration: none; 
margin‐right: 5px; 
font:bold 20px/50px Arial; 
} 
</style> 
/*
   屬性選擇器：屬性名=屬性值（正則表達式）
  a[]{
  }
*/
a[id]{
    background: red;
}
a[id=first]{
    background: yellowgreen;
}
/*
  class中有link的元素的
   *=:包含等于
   =：絕對等于
*/
a[class*="link"]{
     background: fuchsia;
 }
/*選中href中的以https開頭的元素*/
a[href^=https]{
    background: slateblue;
}
/*選中href中的以png結尾的元素*/
a[href$=png]{
    background: #4158D0;
}
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354

因為我是學習JAVA的，所有HTML的學習到這里就告一段落了，之后就靠我們自己從其他渠道獲取HTML知識。

JavaScript

一、為啥美化網頁：

1.有效的傳遞頁面的信息
2.美化頁面，頁面的漂亮，才能吸引用戶
3.凸顯主題
4.提高我們的用戶的體驗

1、span標簽

重點突出的文字，使用span標起來:

結果：

2、字體的樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            text-align:排班，居中
            text-decoration
            overline：上劃線
            line_through中劃線
            underline下劃線
        */

        h1{
            color: red;
            text-align: center;
        }
        .p1{
            text-indent: 1em;
            text-decoration: underline;
        }
        /*
        行高和塊高度一樣，就可以上下居中
            height:300px
            line-height:300px
        */
        .p2{
            background: red;
            height: 300px;
            line-height: 300px;
        }
    </style>
</head>
<body>
<h1>文章</h1>
<p class="p1">
    層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML
    （標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
    CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。 [1]
</p>
<p class="p2">
    簡單的說，層疊就是對一個元素多次設置同一個樣式，這將使用最后一次設置的屬性值。例如對一
    個站點中的多個頁面使用了同一套 CSS樣式表，而某些頁面中的某些元素想使用其他樣式，就可以
    針對這些樣式單獨定義一個樣式表應用到頁面中。這些后來定義的樣式將對前面的樣式設置進行重寫，
    在瀏覽器中看到的將是最后面設置的樣式效果。
</p>
</body>
</html>
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

效果圖：

3、懸浮和陰影

<style>
        /*默認的顏色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠標懸浮類的顏色*/
        a:hover{
            color: red;
            font-size: 50px;
        }
        /*鼠標按住沒有釋放的顏色*/
        a:active{
            color: blue;
            font-size: large;
        }
        /*
        參數：
            陰影的顏色
            水平偏移
            垂直偏移
            陰影半徑
        */
        #price{
            text-shadow: blue 10px 0px 10px;
        }
    </style>
123456789101112131415161718192021222324252627

二、JS概念

JavaScript介紹：
Js這門語言主要是完成頁面的數據驗證，一次它運行在客戶端，需要運行瀏覽器來解析執行我們的js代碼，原來他的名字LiveScript，為了吸引更多的java程序員去使用，更名為javaScript
Js是弱類型，java是強類型。

特點：
1/交互性(它可以做的就是信息的動態交互)
2/安全性（不能直接訪問本地磁盤）
3/跨平臺（只要是可以解釋js的瀏覽器都可以執行，和平臺沒關系）

三、js與我們的html代碼結合的方式：

1、引入js的第一種方法

2、引入js的第二種方法：

3、變量

什么是變量？變量就是存方法某些值的內存的命名。

Js的變量類型：
數值類型：number
字符串類型：string
對象類型：object
布爾類型：boolean
函數類型：function

Js中的特殊的值：
Undefined未定義：所有的js變量未賦予初始值的時候，默認都是Undefined
Null：空值
NaN：全稱not a number 非數字非數值

Js中的定義變量的格式：
var 變量名;
var 變量名=值;

4、關系（比較運算）

等號：==等于是簡單的做字面值的比較

全等號：===除了比較字面值之外，還會比較兩個變量的數據類型

邏輯運算：
且運算：&&
或運算：||
取反運算：！
在js當中，所有的變量都可以作為boolean的變量去使用
0，null，undefined，””（空串）都認為是false

&&且運算:
第一種情況：
當表達式全為真的時候，返回最后一個表達式的值
第二種情況：
在表達式中，有一個為假的時候，返回第一個為假的表達式的值
||或運算：
第一種情況：
當表達式全為假的時候，返回最后一個表達式的值
第二中情況：
只有一個表達式為真，就會返回第一個為真的表達式的值
并且&&和||都是有一個短路效果的，
當這個&&或者||有了結果了，后面的表達式就不再執行。

5、數組

Js中的數組定義：
格式：
Var 數組名=[]; //空數組
Var 數組名=[1,”abc”,true]; //定義數組的同時給它賦值

原文鏈接：https://blog.csdn.net/lxt118518/article/details/109103351?utm_medium=distribute.pc_category.none-task-blog-hot-1.nonecase&depth_1-utm_source=distribute.pc_category.none-task-blog-hot-1.nonecase&request_id=

作者：巴黎最后的探戈舞步

在線咨詢

上一篇：JavaScript和HTML文檔 - 網絡統計學編程
下一篇：9個視覺感出彩的網頁首屏設計「心」作者：Maxim Nilov

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript選擇排序

擇排序概述

選擇排序執行過程分析

選擇排序實現

今日學習內容

1、HTML選擇器

層次選擇器

結構偽類選擇器：

屬性選擇器

一、為啥美化網頁：

1、span標簽

2、字體的樣式：

3、懸浮和陰影

二、JS概念

三、js與我們的html代碼結合的方式：

1、引入js的第一種方法

2、引入js的第二種方法：

3、變量

4、關系（比較運算）

5、數組

您的項目需求