前端技术 – 第 2 页

2017年04月21日2017年08月8日

XML中 CDATA 的含义和作用

术语 CDATA 指的是不应由 XML 解析器进行解析的文本数据（Unparsed Character Data）。

在 XML 元素中，”<” 和 “&” 是非法的。

“<” 会产生错误，因为解析器会把该字符解释为新元素的开始。

“&” 也会产生错误，因为解析器会把该字符解释为字符实体的开始。

某些文本，比如 JavaScript 代码，包含大量 “<” 或 “&” 字符。为了避免错误，可以将脚本代码定义为 CDATA。继续阅读“XML中 CDATA 的含义和作用”

2016年08月20日2017年06月20日

15款用于创建网格布局的jQuery插件

这15款jQuery插件，可以帮助前端工程师更好地管理网格布局。增强设计的同时也可以在开发项目时使用。

Flow Gallery

HTML5多媒体库，使您能够以更现代和时尚的界面中展示您的照片/音频/视频。您可以选择以列或行类型网格呈现您的项目。继续阅读“15款用于创建网格布局的jQuery插件”

2016年06月29日2017年07月29日

CSS常用选择器-持续更新中

HTML代码

<article>
  <p>First paragraph...</p>
  <p>Lorem ipsum...</p>
  <p>Dolor sit amet...</p>
  <p>Consectetur adipisicing...</p>
</article>

<p>First paragraph...</p>

<p>Lorem ipsum...</p>

<p>Dolor sit amet...</p>

<p>Consectetur adipisicing...</p>

</article>

CSS选择第一个子元素：

article > p:first-child {
  background:red;
}

article > p:first-child {

background:red;

}

CSS选择第二个子元素：

article > p:nth-child(2)
{
  background:red;
}

article > p:nth-child(2)

{

background:red;

}

CSS选择最后一个子元素：

article > p:last-child {
  background:red;
}

article > p:last-child {

background:red;

}

css选择器奇数偶数：

article > p:nth-child(odd)  #CSS选择奇数行
{
  background:red;
}
article > p:nth-child(even) #CSS选择偶数行
{
  background:green;
}

article > p:nth-child(odd) #CSS选择奇数行

{

background:red;

}

article > p:nth-child(even) #CSS选择偶数行

{

background:green;

}

注意：如需选择DIV中的元素将article更改为div 例：div > p:first-child同样适用于:first-child :last-child :nth-child，如需选择非段落P的元素更改为相应的元素标签即可。

2016年05月15日2017年06月16日

18条你不知道的JavaScript简写语法

对于开发人员来说让代码更加简单高效的运行是每一个码农的至高追求，下面是19个JavaScript简写语法，赶快应用到生产中吧。

1.三元运算符

if..else语句不复杂时的最佳替代品

常规语法

const x = 20;
let big;

if (x > 10) {
    big = true;
} else {
    big = false;
}

const x = 20;

let big;

if (x > 10) {

big = true;

} else {

big = false;

}

简写语法

const big = x > 10 ? true : false;

1	const big = x > 10 ? true : false;

你也可以将代码写成如下样子：

const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";

1	const big = x > 10 ? " greater 10" : x < 5 ? "less 5" : "between 5 and 10";

继续阅读“18条你不知道的JavaScript简写语法”

2015年11月26日2017年06月17日

jQuery获取select选中的值

select元素通常有两个要访问的值。首先是value值，其次是文本内容值，通过jquery获取任意一个值都很容易：

假定存在下面这个选择列表

<select id="myselect">
    <option value="1">Mr</option>
    <option value="2" selected="selected">Mrs</option>
    <option value="3">Ms</option>
    <option value="4">Dr</option>
    <option value="5">Prof</option>
</select>

</select>

如果我们需要获取当前选中的选项的value值，通过如下jQuery语句完成：

$( "#myselect" ).val(); 
// => 2

1 2	$( "#myselect" ).val(); // => 2

如果想获取当前选中项的文本内容值（非value值），通过如下jQuery语句完成：

$( "#myselect option:selected" ).text();
// => "Mrs"

1 2	$( "#myselect option:selected" ).text(); // => "Mrs"

2015年03月22日2017年07月28日

最简单的Javascript邮箱验证方法

使用正则表达式验证邮箱是否合法可能是最好最简单的方法。

function validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email);
}

function validateEmail(email) {

var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

return re.test(email);

}

但请记住，不应仅仅依靠JavaScript进行邮箱合法性验证。 JavaScript可以很容易地被禁用。同时也应该在服务器端验证。继续阅读“最简单的Javascript邮箱验证方法”

2014年11月16日2017年08月17日