无需申请自动送彩金68_白菜送彩金网站大全[无需申请秒送彩金]
做最好的网站
来自 无需申请自动 2019-09-05 23:22 的文章
当前位置: 无需申请自动送彩金68 > 无需申请自动 > 正文

jquery实现心算练习代码,学习之三

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n 1)
:nth-child(3n 2)


Matches the nth-child of its parent.

While ':eq(index)' matches only a single element, this matches more then one: One for each parent. The specified index is one-indexed, in contrast to :eq() which starst at zero.

复制代码 代码如下:

在线演示:

看看大家做完要多长时间,代码如下:

返回值

Array<Element>

<script>
//定义js的user对象
function User(name,age){
this.name=name,
this.age=age,
this.getName=function(){
return this.name;
},
this.getAge=function(){
return this.age;
}
}
//实例化一个对象
var use=new User("aa",21);
alert(use.name);
alert(use.getAge());
//js对象继承
/*
jb51.net 在面向对象的编程方法中,对象继承是必不可少的,那么怎么在javascript中实现继承机制呢。由于javascript并不是一个严格的面向对象的语言,因此在对象继承上也显的不一样。我们也来创建一个基类Polygon,代表一个多边形,一个多边形有个共同的属性就是边数(sides)和一个共同的方法计算面积(getAreas)。这样我们的这具Polygon类看起来就像下面这样定义:
*/
function Polygon(iSides){
this.sides = iSides;
}
Polygon.prototype.getAreas = function(){
return 0;
}
/*
因为基类并不能确定面积,因此在这里我们返回为0。
接着我们就创建一个子类Triangle,一个三角形,显然这个三角形是要从多边形继承的,因此我们要让这个Triangle类继承Polygon类,并且要覆盖Polygon类的getAreas方法来返回三角形的面积。我们来看下在javascript中的实现:
*/
function Triangle(iBase, iHeight){
Polygon.call(this,3); //在这里我们用Polygon.call()来调用Polygon的构造函数,并将3作为参数,表示这是一个三角形,因为边是确定的,所以在子类的构造函数中就不需要指定边了
this.base = iBase; //三角形的底
this.height = iHeight; //三角形的高
}
Triangle.prototype = new Polygon();
Triangle.prototype.getAreas = function(){
return 0.5 * this.base *this.height; //覆盖基类的getAreas方法,返回三角形的面积
}

复制代码 代码如下:

参数

index (Number) : 要匹配元素的序号,从1开始

/*
参考上面的实现,我们再定义一个矩形:
*/
function Rectangle(iWidth, iHeight){
Polygon.call(this,4);
this.width = iWidth;
this.height = iHeight;
}
Rectangle.prototype = new Polygon();
Rectangle.prototype.getAreas = function(){
return this.width * this.height;
}
/*
好了,上面我们定义了一个基类和两个子数,下面我们来测试一个这两个子类是否能正常工作:
*/
var t = new Triangle(3,6);
var r = new Rectangle(4,5);
alert(t.getAreas()); //输出9说明正确
alert(r.getAreas()); //输出20说明正确
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>心算练习,Do Your Best</title>
<style type="text/css">
body
{
text-align: center;
padding: 0;
margin: 0;
}
div
{
width: 1000px;
margin: auto;
}
div table
{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
text-align: left;
}
div table td
{
border: 1px solid silver;
padding-left: 3em;
}
div span
{
padding: 3px 8px;
}
table input
{
width: 3em;
}
.red
{
color: Red;
}
.green
{
color: Green;
}
</style>
<script type="text/javascript" src=";
<script type="text/javascript">

示例

在每个 ul 查找第 2 个li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$("ul li:nth-child(2)")

结果:

代码如下: script //定义js的user对象 function User(name,age){ this.name=name, this.age=age, this.getName=function(){ return this.name; }, this.getAge=function(...

$(function () {
fnInitTable(2);
fnHideResult();
});

[ <li>Karl</li>,   <li>Tane</li> ]

//显示正确结果及分数
function fnShowResult() {
var vCount = 0;
$("table tr td").each(function (i) {
var vUserResult = $.trim($(this).find("input").val());
var vCorrectResult = $.trim($(this).find("span:last-child").text());
if (vUserResult == vCorrectResult) {
vCount ;
$(this).find("span:last-child").show().addClass("green");
}
else {
$(this).find("span:last-child").show().addClass("red");
}
});
$("#score").text(vCount);
}

:first-child

匹配第一个子元素

':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素


Matches the first child of its parent.

While ':first' matches only a single element, this matches more then one: One for each parent.

function fnHideResult() {
$("table td span:last-child").hide();
}

返回值

Array<Element>

//生成尾数不为零的随机数
function fnRandomBy(parUnder, parOver) {
var vResult = 0;
while (vResult % 10 == 0) {
switch (arguments.length) {
case 1:
vResult = parseInt(Math.random() * parUnder 1);
break;
case 2:
vResult = parseInt(Math.random() * (parOver - parUnder 1) parUnder);
break;
default:
vResult = 0;
break;
}
}
return vResult;
}

示例

在每个 ul 中查找第一个 li

HTML 代码:

<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代码:

$("ul li:first-child")

结果:

[ <li>John</li>, <li>Glen</li> ]


function fnInitTable(parDigit) {
var vPreValue;
var vNextValue;
var vResultt;
$("table").empty();
for (var i = 0; i < 10; i ) {
$("table").append("<tr></tr>");
for (var k = 0; k < 3; k ) {
vPreValue = fnRandomBy(10, 100);
if (parDigit == 2) {
vNextValue = fnRandomBy(10, 100);
}
else {
vNextValue = fnRandomBy(100, 1000);
}
vResultt = vPreValue * vNextValue;
$("table tr:last").append("<td>" vPreValue "<span>×</span>" vNextValue "<span>=</span>"

:last-child

匹配最后一个子元素

':last'只匹配一个元素,而此选择符将为每个父元素匹配一个子元素


Matches the last child of its parent.

While ':last' matches only a single element, this matches more then one: One for each parent.

  • "<input type='text' />" "<span>" vResultt "</span>" "</td>");
    }
    $("table").append("</tr>");
    }
    fnInit();
    }

返回值

Array<Element>

function fnInit() {
fnResetTime();
fnHideResult();
$("table input").attr("disabled", "true");
$("#score").text("");
}

本文由无需申请自动送彩金68发布于无需申请自动,转载请注明出处:jquery实现心算练习代码,学习之三

关键词: