Question

Having html below:

1
2
3
4

<ul>
  <li>foo</li>
  <li>goo</li>
</ul>

How to make the cursor a hand when hovering the table?

Answer

Solution is below:

1
2
3

li {
  cursor: pointer;
}

Reference

• How can I make the cursor a hand when a user hovers over a list item?

This is the end of post

Question

I have an object below:

1
2
3
4
5

var thisIsObject= {
   'Cow' : 'Moo',
   'Cat' : 'Meow',
   'Dog' : 'Bark'
};

I want to remove the key Dog and its value. What should I do?

Answer

There are three ways to remove a key from an object.

1
2
3
4
5
6
7
8
9

// Example 1
var key = "Dog";
delete thisIsObject[key]; 

// Example 2
delete thisIsObject["Dog"];

// Example 3
delete thisIsObject.Dog;

Reference

• How do I remove a key from a JavaScript object?

This is the end of post

Question

Like photo above, how to remove the dotted outline when focusing to this element？

In other case, how to add this outline when focusing?

Answer

Remove

Add outline:none this styling.

Add

Solution is below:

1
2
3

a:focus {
  outline: dotted 1px;
}

Reference

• how to remove the dotted line around the clicked a element in html

This is the end of post

Question

There is an object like below:

1
2
3
4

var myObj = {
    arrayOne: [],
    arrayTwo: []
};

And one array is var newArray = ['A', 'B'];

I want to add newArray into arrayOne: [], the result should be like below

1
2
3
4

{ 
    arrayOne: [['A', 'B']],
    arrayTwo: []
};

What should I do?

Answer

There are two ways to add newArray inside arrayOne of myObj.

1. obj.arrayOne.push(newArray);
2. obj['arrayOne'].push(newArray);

Reference

• JavaScript: Push into an Array inside an Object?

This is the end of post

Question

There is a div as below.

1
2

<div class="e">Wei Xia</div>
<a href="http://weixia.info/">weixia.info</a>

How to change the background color when I hover those two element?

Answer

1
2
3
4
5
6
7

.e:hover {
  background-color: #ff0000;
}

a:hover {
  background-color: yellow;
}

By using :hover will update the background color. You can view the demo below.

Live Demo

Reference

• div hover background-color change?

This is the end of post

Javascript 里的 For 循环有很多种，接下来我们一一来解析一遍。

For Loop

这是最基础的用法，用 For loop 来遍历一个数组，如下所示：

1
2
3

for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}

forEach - ES 5

forEach 是 ES 5 里的一个用法，如下所示：

1
2
3

myArray.forEach(function (value) {
  console.log(value);
});

for…in - ES 5

for...in 循环实际是为循环可枚举 (enumerable) 对象而设计的，如下所示：

1
2
3
4
5
6
7
8
9
10

var obj = {a:1, b:2, c:3};
    
for (var prop in obj) {
  console.log("obj." + prop + " = " + obj[prop]);
}
 
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

for…of - ES 6

for ... of 是 ES 6 里的新用法，语法如下：

1
2
3

for (var value of myArray) {
  console.log(value);
}

for...of 的语法看起来跟 for...in 很相似，但它的功能却丰富的多，它能循环很多东西。

循环一个数组 Array

1
2
3
4
5
6
7
8

let iterable = [10, 20, 30];
 
for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

循环一个字符串 String

1
2
3
4
5
6
7
8

let iterable = "boo";
 
for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

循环一个类型化的数组 TypedArray

1
2
3
4
5
6
7

let iterable = new Uint8Array([0x00, 0xff]);
 
for (let value of iterable) {
  console.log(value);
}
// 0
// 255

循环一个 Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3
 
for (let entry of iterable) {
  console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个 Set

1
2
3
4
5
6
7
8

let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

循环一个 DOM 集合

1
2
3
4
5
6
7

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");
 
for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

循环一个生成器 Generators

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}
 
for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

Reference

• JavaScript 里的循环方法：forEach，for…in，for…of

This is the end of post

Question

There is a div with an attribute data-value = "10".

Does there is anyway to get and update the data-value value?

Answer

1

<div id="mydiv" data-value="10"></div>

1
2
3

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

Live Demo

Reference

• How to set data attributes in HTML elements

This is the end of post

Question

Like title says, what is the order for the tabindex attribute in html?

Answer

Code example:

1
2
3
4
5
6
7

<input tabindex="3">
<input tabindex="0">
<input tabindex="-1">
<input>
<input tabindex="2">
<input tabindex="1">
<span tabindex="4"> This wouldn't normally receive focus</span>

Order:

<span tabindex="4">This wouldn't normally receive focus</span> has (4) largest value. Next tab will give focus to the rest of tabnavigable elements in code source order.

Reference

• The tabindex Attribute

This is the end of post

Question

My code is below:

1

<li id="id_name" class="class_names"><a href="http://linktothepage.com/page" aria-label="TITLE OF MY PAGE">TITLE OF MY PAGE</a></li>

I added aria-label in the <a> tag, but it doesn’t work with screen reader software.

What should I do?

Answer

aria-label sometimes doesn’t work with JAWS in Windows PC. Need to use title in <a> tag instead.

The solution is:

1

<li id="id_name" class="class_names"><a href="http://linktothepage.com/page" title="TITLE OF MY PAGE">TITLE OF MY PAGE</a></li>

Reference

• Adding ‘aria-labels’ to anchor links in WordPress navigation menu

This is the end of post

Question

There is a list as below.

1
2
3
4
5

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

If I want to move A or B or C to the first place after clicking on it, what should I do?

Answer

By using JQuery method prepend to make it happen.

Solution:

1
2
3
4
5
6

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

1
2
3

$('ul li').click(function(event) {
  $('ul').prepend($(this))
});

Reference

• Click on element and move to first place in the list

This is the end of post