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、数组

您的项目需求