js jq 笔记小结

标签：

Js第一课

1、vs新建步骤

文件——新建项目——web——空白web应用程序——取名、位置、确定——此时软件会自动生成一个sln文件（解决方案），一解决方案下面可以有多个项目。

点击项目——新建文件夹css和js和image——新建html页面取名demo1

（推荐设置：工具——选项——可以设置下字体和颜色；文本编辑器——把常用的几种语言设上行号颜色提示）

2、什么是js

JavaScript是一种脚本语言，结构简单，使用方便，其代码可以直接放入HTML文档中，可以直接在支持JavaScript的浏览器中运行。JavaSript使得网页的交互性更强，更生动和灵活。当在浏览网页时做了某种操作就产生一个事件，JavaScript所编写的程序可对相应的事件做出反应。

3、怎么运用js：

首先在html中指定一个事件，然后对这个事件写js。

如：设置一个按钮，对点击按钮命名一个事件：

<input type="button" value="我是一个按钮" onclick="ShowMsg()" />

4、如何写js：

写js可以在外部js文件写，也可以直接在head里面写：

<script type="text/javascript">
　　function ShowMsg()
　　　　{
　　　　alert("这是我的第一个js例子");
　　　　}
</script>

5、命名规范：为了增强代码的可读性，让团队成员都能看懂，遵循命名规范。

（1）js是区分大小写的，非常严格。

（2）js是弱类型，统一用var声明变量，如：

整形： var iNum=10;

浮点： var fNum=2.23;

布尔： var bMaie=false;

函数： var fnObject=new myFunction();

数组： var aColor=new Array();

字符串： var sMyString="aaaaa";
……

　　*弱类型与强类型：

js是弱类型，只能用var声明；　　　　　　　　  c#是强类型，用对应类型声明

弱类型：弱化类型的声明方式；　　　　　　　　强类型：强调类型的声明方式

弱类型比较方便，但当语句交给浏览器时，浏览器还是需要去判断它是哪种变量，执行效率比强类型低。

（3）注释：

单行注释：//

多行注释：/* */

　　（4）var可同时声明多个变量：

　　　　var girl="aaaa" , age=19 , male=false;

　　（5）js变量不一定需要初始化，可后面用时再赋值：

　　　　var couple;

　　（6）变量名称规则：

·首字母必须是字母（大小写均可）、下划线、或者美元符。

·余下的字母可以是下划线、美元符、任意字母或数字字符。

·变量名不能含js关键字。

　　（7）局部变量和全局变量：

全局变量：在{}外声明的变量，各函数皆可调用；

局部变量：在{}内声明的变量，只有此函数可用；

（8）命名习惯

整形i：　　   var iNum=10;

浮点f：　　  var fNum=2.23;

布尔b：　　 var bMaie=false;

函数fn：　　var fnObject=new myFunction();

数组a：　　 var aColor=new Array();

字符串s：　 var sMyString="aaaaa";

（还有：对象o、正则re，此两项不常用，知道即可）

6、数据类型详解：

（1）字符串String：

var sMyString="hello world";

*补充：位置/索引：第一个字母从0开始算，依次后延，空格也算，如上面的"hello world",位置8的字母是r

【字符串的属性方法总结】

length 　　　　 获取字符串长度 　　 　alert(sString.length); 　　 　　    结果是11

charAt 　　　　获取指定位置的字符　　alert(sString.charAt(8)); 　　       结果是r

substring 　　 字符串的截取　　　　　alert(sString.substring(1)); 　     从位置1截取到最后。结果是ello world

　　　　　　　　　　　　　　　　　　 alert(sString.substring(1,10));     从位置1截取到位置10（不包含10）。结果是ello worl

substr 　　      字符串的截取 　　      alert(sString.substr(1,6)); 　　     从位置1开始截取6位出来。结果是ello w

indexOf 　　    搜某字符位置　　　　  alert(sString.indexOf("l")); 　　    查找出第一个l所在的位置，如没有则返回-1。结果是2

　　　　　　　　　　　　　　　　　　 alert(sString.indexOf("l",4));        从位置4开始，查找出接下来的l所在的位置。结果是9

lastindexOf　　从后往前搜某字符位置   与indexOf雷同

（2）布尔类型bool：(即真或假，true 或 false)

Var bMale=true;　　    声明 bMale 为真；

If(bMale){ 　　　　      如果 bMale 为真，

alert("a"); 　　　　      则输出a；
}

else{ 　　　　　　　　  否则，

alert("b"); 　　　　　　 则输出b。

}

所以以上程序输出a

　　（3）数值、及类型转换：

　　　　a）数值与字符串相加：

var iNum1=10;

var sNum2="20";

var sNum3=iNum1+sNum2;

alert(sNum3);

可把iNum1变成字符串：

var sNum3=iNum1.toString()+sNum2;

alert(sNum3);

也可把sNum2转成数值：

var iNum2=iNum1+parseInt(sNum2);

alert(iNum2);

　　　　b）与浮点字符串相加：

var iNum1=10;

var sNum2="20.123";

var sNum3=iNum1+sNum2;

alert(sNum3);

当数值和字符串相加时，把sNum2变成整数：

var iNum2=iNum1+parseInt(sNum2);

alert(iNum2);

也可把sNum2变成浮点数：

var iNum2=iNum1+parseFloat(sNum2);

alert(iNum2);

　　　　c）类型转换：

数值转字符串：var sNum1=iNum1.toString();

字符串转数值：var iNum2=parseInt(sNum2);

转浮点：var iNum2=parseFloat(sNum2);

字符串变成数组：var aDate=sMyString.split("-");（var sMyString="2015-07-15";）

　　（4）数组：存放一个数据集合

a）声明数组的方式：

1、确定数组长度：var aTeam=new Array(12); 数组长度为12

2、不确定数组长度：

var aColor=new Array();

aColor[0]="blue";

aColor[1]="yellow";

aColor[2]="green";

aColor[3]="black";

*上述数组也可写成：

var aColor=new Array("blue","yellow","green","black");

此时输出：alert(aColor[3]);

则得到：black

b）toString，数组变成字符串：

alert(aColor.toString());

此时输出：blue,yellow,green,black

c）join，改连接符：

alert(aColor.join("-").toString());

此时输出：blue-yellow-green-black

d）split，把字符串变成数组：

var sMyString="2015-07-15";

var aDate=sMyString.split("-");

alert(aDate[2]);

此时输出为：15

e）reverse，使数组元素反序出现：

var aColor=new Array("blue","yellow","green","black");

alert(aColor.reverse().toString());

此时输出为：black,green,yellow,blue

f）sort，使数组元素根据a-z顺序排序：

var aColor=new Array("blue","yellow","green","black");

alert(aColor.sort().toString());

此时输出为：black,blue,green,yellow

Js第二课

1、条件语句：

　　（1）比较操作符：

　　　　==：判断是否相等

　　　　!=：判断是否不相等

　　　　> ：判断是否大于

　　　　>=：判断是否大于等于

　　　　< ：判断是否小于

　　　　<=：判断是否小于等于

　　　　【例1】

　　　　if(iNum1==iNum2) 　　　　//如果iNum1与iNum2相等
　　　　{
　　　　　　iNum3=iNum1;　　　　//将iNum1的值赋给iNum3
　　　　}
　　　　else{ 　　　　　　 　　　　 //否则
　　　　　　iNum3=iNum2; 　　　  //将iNum2的值赋给iNum3
　　　　}

【补充】以上也可写作：

iNum3 = iNum1==iNum2 ? iNum1 : iNum2

这是一个三目运算符，结构为：

a = 判断式 ? 值1 ：值2

意思是，先对“判断式”进行判断，若结果为真，则a=值1；若为假，则a=值2。

所以上式可以理解为，先判断“iNum1==iNum2”是否为真：若为真，则iNum3=iNum1；若为假，则iNum3=iNum2。

（2）逻辑运算符：

&&：与运算 （a && b：a与b，代表同时满足a与b时，判断式才为真）

||：或运算 （a || b：a或b，代表只要满足a或者满足b，满足其中一项判断式就为真）

！：非运算 （!a ：非a，与a相反，意思是 如果a为真，则!a为假；a为假，则!a为真。）

【例2】

if(iNum1>iNum2 && iNum1>iNum3) 　　//当 iNum1>iNum2 且 iNum1>iNum3 同时满足时，
{
　　alert("第一个值最大"); 　　　　　　　 //输出"第一个值最大"
}
if(iNum1>iNum2 || iNum1>iNum3) 　　 //当 iNum1>iNum2 或者 iNum1>iNum3 时，
{
　　alert("第一个值不是最小");　　　　　 //输出"第一个值不是最小"
}
if(!(iNum1>iNum2 || iNum1>iNum3))    //取(iNum1>iNum2 || iNum1>iNum3)的相反意思，
{
　　alert("第一个值最大");　　　　　　　 //输出"第一个值最小"
}

　　（3）if语句：

if(条件一)
{
　　……行为一
}

else if(条件二)
{
　　……行为二
}

else if(条件三)
{
　　……行为三
}

……

else
{
　　……行为N
}

此语句可理解为：

如果是“条件一”，则进行“行为一”；

另外，如果是“条件二”，则进行“行为二”；

另外，如果是“条件三”，则进行“行为三”；

……（else if 可以有多个）

以上情况都除外（既不是“条件一”也不是“条件二”也不是“条件三”……），则进行“行为N”。

【补充】

if(条件一)
{
　　……行为一
}

if(条件二)
{
　　……行为二
}

else
{
　　……行为三
}

如果是if后面跟着的是else，则此else仅针对它上面最近的那个if。

此语句可理解为：

如果是“条件一”，则进行“行为一”；

如果是“条件二”，则进行“行为二”；

另外，除“条件二”外的情况，则进行“行为三”（此处的else与第一个if无关）

2、弹出框：

　　（1）消息框：alert()

　　（2）输入框：prompt()

*在输入框里输入的内容，程序按照字符串形式读取。

【例3】

var sInput=prompt("请输入一个1-10之间的数字"); 　　//在弹出的输入框中，输入字符串，存入sInput中

　　（3）询问框：confirm()

*弹出一个询问框，有“确定”和“取消”的按钮。返回的结果是布尔类型，真或假。

【例4】

if(confirm("你确定喜欢蓝色吗？"))　　　　 //询问框询问的内容
{
　　alert("你喜欢蓝色"); 　　　　　　　　 //选择“确定”，弹出此框
}
else{
　　alert("你不喜欢蓝色");　　　　　　　  //选择“取消”，弹出此框
}

　　（4）字符串转数字：Number()

*对输入框输入的内容，程序都按照字符串形式读取。当我们输入数字，希望以数字方式读取怎么办呢？就可以用Number()

【例5】

var sInput=prompt("请输入一个1-7之间的数字");
var nInput=Number(sInput);

此例子的作用：先将输入框里输入的字符串信息读取到sInput中，然后用Number()将sInput里的字符串信息转换成数字，存放到nInput中。

　　（5）判断是否为数字：isNaN()

*用Number()只能转数字，所以我们需要用语句判断一下我们输入的是否是数字，此时用isNaN()

isNaN()的意思就是：is not a number，“不是数字”。

【例6】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput)) 　　　　　　 //如果 nInput 不是数字
{
alert("你输入的不是数字"); 　 　//则输出“你输入的不是数字”
}
else 　　　　　　　　　　　 　 //否则
{
alert("你输入的是数字"); 　　    //输出“你输入的是数字”
}

　　（6）在此基础上，还可以顺便判断一下输入的是否是整数，此时用parseInt()，转成整数：

【例7】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput))
{
　　alert("你输入的不是数字");
}
else
{
　　if(nInput==parseInt(nInput)) 　　//判断转成数字的值，是否与它取整后的值相等
　　{
　　　　alert("你输入的是整数");
　　}
　　else
　　{
　　　　alert("你输入的不是整数");
　　}

}

（7）在此基础上，还可以顺便判断一下输入的是否在1-7范围之间，此时用逻辑运算符：

【例8】

var sInput=prompt("请输入一个1-7之间的数字");

var nInput=Number(sInput);

if(isNaN(nInput))
{
　　alert("你输入的不是数字");
}
else
{
　　if(nInput==parseInt(nInput))
　　{
　　　　if(nInput>7 || nInput<1) 　　　　   //判断，如果此数大于7或者小于1
　　　　{
　　　　　　alert("你输入的不在1-7之间") 　　//则输出此框
　　　　}
　　}
　　else
　　{
　　alert("你输入的不是整数");
　　}

}

　　（8）在此基础上，还可以判断每个输入的值对应执行一个行为，用switch..case:

【例9】

switch(nInput)　　　　    //判断nInput的值
{
case 1: 　　　　　　　  　//如果为1

alert("星期一");　　　　　 //则输出“星期一”

break; 　　　　　　　　　//然后跳出循环

case 2:　　　　　　　　　//如果为2

alert("星期二"); 　　　　　//则输出“星期二”

break; 　　　　　　　　　//然后跳出循环

case 3:　　　　　　　　　//以此类推
alert("星期三");
break;

case 4:
alert("星期四");
break;

case 5:
alert("星期五");
break;

case 6:
alert("星期六");
break;

case 7:
alert("星期日");
break;

default:　　　　　　　　//default就是如果没有符合的case就执行它,default并不是必须的

语句;　　　　　　

break;

}

*用switch..case的好处是：只需要判断一次后即可退出循环，更加效率。

【补充】break 是跳出所在循环的意思。

3、循环语句：

　　（1）while

while(..)　　　　   //当...时
{
　　.. 　　　　　　//进行此操作
}

　　（2）do...while

do
{
　　.. 　　　　　　//进行此操作
}
while(..)　　　　   //当...时

　　*以上两种类型，都是当...时，进行...操作

　　　　【例10】

var i=1;

var iSum=0;

while(i<101) 　　  //当i<101时
{
　　iSum+=i; 　　//iSum=iSum+i

　　i++;　　　　  //i=i+1
}
alert(iSum);

解读：

答案：iSum=1+2+3+..+100=5050

　　（3）for循环：此循环用的最多

【例11】

var iSum=0;

for(var i=1;i<101;i++)
{
　　iSum+=i;
}
alert(iSum);

解读：同例10

　　（4）break：跳出整个for循环体

【例12】

var iSum=0;

for(var i=1;i<101;i++)
{
　　if(i==5)
　　{
　　　　break;
　　}
　　iSum+=i;
}
alert(iSum);

解读：当i==5时，break跳出所在for循环体，所以直接输出之前的iSum=1+2+3+4=10

　　（5）continue：跳出当前条件下的循环，继续往后执行

【例13】

var iSum=0;

for(var i=1;i<101;i++)
{
　　if(i==5)
　　{
　　　　continue;
　　}
　　iSum+=i;
}
alert(iSum);

解读：当i==5时，continue跳出此次循环，直接进入下一个循环i=6，所以iSum=1+2+3+4+6+……+100=5045

　　（6）return：有两种用法

　　　　第一种是：结束整个方法体function{}

【例14】

function

{

　　var iSum=0;

　　for(var i=1;i<101;i++)
　　{
　　　　if(i==5)
　　　　{
　　　　　　return;
　　　　}
　　　　iSum+=i;
　　}
　　alert(iSum);

}

解读：直接跳出方法体，直接出现在最末尾的}外，所以就不执行了。

　　　　第二种是：返回一个值

【例15】

var iSum=0;

for(var i=1;i<101;i++)
{
　　if(i==5) 　　　　　　 //i=5时，
　　{
　　　　i=B(i); 　　　　   //i=调用方法B(i)的值=10
　　}
　　iSum+=i;
}
alert(iSum);

}

function B(i)
{
　　i+=5;　　　　　    　// i=i+5=10
　　return i;
}

解读：当i=5时，i=调用方法所返回的值=10，所以iSum=1+2+3+4+10+11+12+..+100

　　（7）九九乘法表：

Js第三课

【jq与js的关系】：jq是对js常用的方法进行封装、简化和优化。

【小技巧】ctrl+k+D ：VS写代码格式乱了时，整理代码用的快捷键

------------------------------------------------------------------------------------------------------

1、获取时间：

　　1）写法：

　　function MyClick()
　　{
　　　　var myDate=new Date();
　　　　alert(myDate.getDay());
　　}

　　2）获取个设定日期之间的天数：

<html>

<head>

<title>Date对象</title>

<script language="javascript">

var startStr = "2014-4-14";

var endStr = "2014-5-1";

var startArray = startStr.split("-");

var endArray = endStr.split("-");

var startDate = new Date(startArray[0], startArray[1] - 1, startArray[2]);

var endDate = new Date(endArray[0], endArray[1] - 1, endArray[2]);

var diffDays = (endDate - startDate) / 86400000;

alert(diffDays);

</script>

</head>

<body>

</body>

</html>

2、数值取值：

　　取最大值：Math.max(18,12,22,33)

　　取最小值：Math.min(18,2,2,3,1)

　　向上舍入：Math.ceil(25.9) 　　　　　　//它把数字向上舍入到最接近的整数

　　向下舍入：Math.floor(25.6)

　　四舍五入：Math.round(25.6)

　　0~1之间的随机数：Math.random()　　 //不包括0和1

　　【例子】

　　返回1~100之间的整数包括1和100：　　variNum=Math.floor(Math.random()*100+1)

3、window窗口

　　1） 打开一个窗口：window.open("http://www.baidu.com", "_blank", "height=300,width=400,top=30,left=140,resizable=yes");

　　　　resizable 是否能通过拖动来调整新窗口的大小 默认为yes

　　　　scrollable 新窗口是否显示滚动条 默认为no 

　　2） 关闭新建的窗口：window.close()

　　3） window.history.go(-1) //浏览器后退一页

　　　　window.history.go //前进一页

4、定时器实例

　　1）隔5秒后打印aaaa：

setTimeout(function(){

    alert("aaaa");

},5000);

　　*setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。

　　效果：5秒后弹出框显示 aaaa，不会循环重复。

　　2)每隔2秒打印一次数字：

var i=0;

setInterval(function(){

    i++;

    document.write(i);

},2000);

　　*setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

　　效果：每隔2秒，依次打印1、2、3、4、5……，看到的界面是：123456789101112……

　　3）每隔2秒打印一个数，到10为止：

var i=0;

var timer=setInterval(function(){

    i++;

    if(i==10)

    {

        clearInterval(timer);

    }

    document.write(i);

},2000);

　　*clearInterval() 方法可取消由 setInterval() 设置的定时器循环。

　　效果：只打印到10为止，界面：12345678910

　　4）每隔1秒，打印1到10再回到1：

var i=0;

var b=true;

var timer=setInterval(function(){

    if(b)

    {

        i++;

    }

    if(b==false){

        i--;

        if(i==1)

        {

            clearInterval(timer);

        }

    }

    if(i==10)

    {

        b=false;

    }

    document.write(i);

},1000);

　　*提示：停止定时器只能用clearInterval()方法来停掉，用return等无法停止定时器，定时器会一直存在直到clearInterval()出现为止。

　　5）产生1-100之间随机整数，给5次机会看能不能猜对：

var iNumber=Math.floor(Math.random()*100+1);        　　//产生一个1-100之间的随机整数作为中奖号码

for(var i=1;i<7;i++){

    if(i==6){

        alert("五次机会用完了，中奖号码是："+iNumber);

        return;

    }

    else{

        var sInput=prompt("请输入1-100之间的一个整数");

        var nInput=Number(sInput);

        if(isNaN(nInput)){                              //判断输入的是不是数字

            alert("你输入的不是一个数字");

        }

        else{

            if(nInput=parseInt(nInput)){            　　//判断输入的是不是整数

                if(nInput>100||nInput<1)

                {

                    alert("输入的内容不再1-100之间");

                }

                else{

                    if(nInput>iNumber)

                    {

                        alert("你输入的内容太大");

                    }

                    if(nInput<iNumber)

                    {

                        alert("你输入的内容太小");

                    }

                    else

                    {

                        alert("恭喜你中奖了！");

                        return;

                    }

                }

            }

            else{

                alert("你输入的不是一个整数");

            }

        }

    }

}           

[小练习]js冒泡排序法

任务：设置随意5个数的数列，用js冒泡排序法使之由小到大排序。

如：[5 3 4 1 2]使之输出为[1 2 3 4 5]。

----------------------------------------------------------------------------------

【解说：何为冒泡排序法】

      所谓冒泡排序法，就是对一组数字进行从大到小或者从小到大排序的一种算法。具体方法是，相邻数值两两交换。从第一个数值开始，如果相邻两个数的排列顺序与我们的期望不同，则将两个数的位置进行交换（对调）；如果其与我们的期望一致，则不用交换。重复这样的过程，一直到最后没有数值需要交换，则排序完成。一般地，如果有N个数需要排序，则需要进行（N-1）趟起泡，我们以从小到大排序为例来看一下，具体情况如下图所示：

----------------------------------------------------------------------------------

【分析】如何用冒泡排序法对[5, 3, 4, 2, 1]排序？

（要点：比较大小时，第一次比较第1个数和第2个数，第二次比较第2个数和第3个数，以此类推。）

序列：[5, 3, 4, 2, 1]

第一次循环，5>3，则两者交换位置：3,5,4,2,1

　　　然后，5>4，则两者交换位置：3,4,5,2,1

　　　然后，5>2，则两者交换位置：3,4,2,5,1

　　   然后，5>1，则两者交换位置：3,4,2,1,5

　　此时，序列变成了[3,4,2,1,5]，接下来进行第二个大循环：

第二次循环，3<4，则两者不交换位置：3,4,2,1,5

　　   然后，4>2，则两者交换位置：3,2,4,1,5

  　　 然后，4>1，则两者交换位置：3,2,1,4,5

　　此时，序列变成了[3,2,1,4,5]，接下来进行第三个大循环：

第三次循环，3>2，则两者交换位置：2,3,1,4,5

　　   然后，3>1，则两者交换位置：2,1,3,4,5

　　此时，序列变成了[2,1,3,4,5]，接下来进行第四个大循环：

第四次循环，2>1，则两者交换位置：1,2,3,4,5

　　经过4次循环排序，则成功按照由小到大将数字排序完成了。

所以，总共需要4次循环，（i = 0; i < 数列长度; i++）

每次排序时，比较第j个数和j+1个数（j = 0; j < 数列长度 - i; j++）

当第j个数>第j+1个数时，则让两个数换位。

【换位方式】：

当a>b时，想让a和b交换位置，怎么做？

设x，作为中间的过度区。

令x=b，　　// 将b的值先存入x中

b=a，　　　// 将a的值放到b的位置

a=x，　　　// 将x中存好的b值放到a的位置

则a、b的值交换完成。

--------------------------------------------------------------------------

【程序】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>New Document</title>

</head>

<body>

<script language="JavaScript" type="text/javascript">

<!--

var array = [5, 3, 4, 2, 1];

var temp = 0;

for (var i = 0; i < array.length; i++)　　　　　　　　　//设置总循环数

{

    for (var j = 0; j < array.length - i; j++)　　　　//设置每次循环需要排序几次

    {

        if (array[j] > array[j + 1])　　　　　　　　　　//比较第j个和j+1个数，当j>j+1时进行换位

        {

            temp = array[j + 1];

            array[j + 1] = array[j];　　　　　　　　　　//换位过程

            array[j] = temp;

        }

    }

}

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

    document.write(array[i]+" ");　　　　　　　　　　　　//按现在的顺序输出数列

}

//-->

</script>

</body>

</html>

Jq第一课

1、在VS中新建jq项目(略)

2、jq选择器写法（与js写法的区别）：

　　【例】对按钮声明一个事件，点击后弹出“aaaa”：

　　js写法：

　　　　html中：

　　　　　　<input type=”button” value=”我是一个按钮” onclick=”A()” />　　　　//出现一个点击事件A()

　　　　js中：　　

function A()　　　　　　　　//声明事件A()的作用

{

        alert(“aaaa”);　　　　 //弹出框，显示aaaa

}

　　jq写法：

　　　　html中：

　　　　　　<input type=”button” value=”我是一个按钮” id=”btn” />　　　　　　//设置一个id选择器，名字为btn

　　　　js中：　　

$(function(){　　　　　　　　　　　　　//对页面进行加载，加载完后执行jq（要用jq就需要先写这句话，这是固定语句，内部写的才是jq内容）

　　$(“#btn”).click(function(){　　　　 //查找到id选择器btn，对它执行一个点击click事件，事件用function声明一下，内容为：

     　　Alert(“aaaa”);　　　　　　　　　///弹出框，显示aaaa

　　});

});

　　*相当于js是将整个事情分散到html和js中来写，只能用这么一次；jq是类似css那样设置一个选择器，然后对选择器进行事件设置，可以用很多次。

　　总结：

　　1）Js和jq可以互相转换。

　　2）jq执行过程分为下面5个步骤：

a、 对页面进行加载：$(function(){  });

b、 找到对象，如id标签：$(“#btn”)

c、 执行对象相应事件：click();

d、 声明事件：function(){  }

e、 执行事件内容：alert（）;

 　　3）优先级问题：当css和jq中同时设置了样式时，遵循就近原则，此时的jq写法，类似于在html标签内加一个style样式来写，所以优先jq。

3、id选择器：$(“#btn”)

　　类似css那样，先在html中声明一个id选择器：id=”btn”，然后在js页面中查找到此id选择器：$(“#btn”)，再对它进行事件操作。

4、class类选择器：$(“.btn”)

　　先在html中声明一个class选择器：class=”btn”，然后在js页面中查找到此id选择器：$(“.btn”)，再对它进行事件操作。

5、标签选择器：$(“tr”)

　　根据html中已写出的标签，如tr、td等，在js页面中查找到此标签选择器：$(“tr”)，对它进行事件操作。

6、奇偶选择器：odd（偶）、even（奇）

　　$(“tr:odd”)， 选择所有位于偶数行的< tr >标记

　　$(“tr:even”) ，选择所有位于奇数行的< tr >标记

　　【例】隔行换色表格：

$(function(){　　　　　　　　　　　　　

$(“tr:odd”).css(“background”,”#f8f3d2”);　　　　//偶数行的背景颜色为#f8f3d2

$(“tr:even”).css(“background”,”#ffcdcd”);　　　　//奇数行的背景颜色为#ffcdcd

});

6、eq(n)选择器：$("X:eq(n)")

　　对X标签的第n+1个X标签进行选择，也可以写作$(“X”).eq(n)。

　　如：$(“tr”).eq(2)，是指第三行。　

7、nth-child(n)选择器：$(“X:nth-child(n)”) 

　　对X标签的第n个X标签进行选择。

　　如：$(“td:nth-child(3)”) ，是指第3列；　　$(“li:nth-child(4)”)，就是第4个li标签。

【补充】eq(n)与nth-child(n)区别：

　　eq(n)：对全部X标签不分父级子级依次排序下来的第n+1个X标签进行选择，整体页面只选中一个X标签。

　　nth-child(n)：对全部X标签会分父级、子级、孙级，每个级别依次排列出第n个标签，将它们全部挑选出来，可选中多个标签。

　　详细可见：http://blog.csdn.net/aspnet2002web/article/details/7701335

8、子元素选择器：$(“li>a”)

　　$(“li>a”)，返回<li>标记的所有子元素<a>,但不包括孙标记。

　　【例】查找li下的所有子标签a，文字颜色为红色：

<ul>

        <li>

               <a href=”#”>XXXX</a>

               <div><a href=”#”>YYYY</a></div>

               <a href=”#”>XXXX</a>

　　　　　 <a href=”#”>XXXX</a>

　　 </li>

</ul>

$(“li>a”).css(“color”,”red”);

效果：仅XXXX为红色，YYYY不变，因为YYYY对于li是孙标签（li>div>a）。

9、功能函数前缀：

　　$.trim(s); 去掉s字符串的前后空格。

　　【例】去掉字符串中间空格：（把字符串变成字符数组，然后把空格替换成无）

var s="das  das";

var aChar=s.split("");　　　　　　　 　//将字符串变为字符数组

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

{

              if(aChar[i]==" ")　　　　　　//当遇到某个字符是空格时

              {

                     s=s.replace(" ","");　　//将此空格替换成无（从空格替换到连空格都不是）

              }

}

alert(s);　　　　　　　　　　　　　　　//打印s

10、属性选择器：

　　$(“某标签[某属性]”)：选出带有某种属性的某标签。如：

　　1）$("a[target]")　　　　　  选出带有target属性的a标签；

　　2）$(“a[href=’b.html’]”)　　 选出带有href=’b.html’属性的a标签；

　　3）$(“a[href^=http://]”)　  选出以http://开头的a标签；

　　4）$(“a[href$=html]”)　　   选出以html结尾的a标签

　　5）$(“a[href*=bbb]”)　　    选出含有bbb的a标签

11、包含选择器

　　$(“某标签:has(某属性)”)：选出包含某属性的所有某标签。如：$(“li:has(a)”) 包含超链接的所有li标记

12、位置选择器

　　$(“某标签:某位置”) ：选出某特定位置的某标签。如：

1）$(“p:first”) 选择页面中的第一个p标签

2）$(“p:last”) 选择页面中的最后一个p标签

3）$(“p:first-child”)  选择所有的p标记，且这些p标记是其父标记的第一个标记。

4）$(“p:last-child”)  选择所有的p标记，且这些p标记是其父标记的最后一个标记。

5）$(“p:nth-child(odd)”).addClass(“myClass”) 选择所有的p标记，且这些p标记是其父标记的偶数行。

6）$(“p:odd”).addClass(“myClass”) 整个页面的偶数行p标记

7）$(“p:eq(4)”).addClass(“myClass”) 第五个p标记

8）$(“p:gt(n)”).addClass(“myClass”) 第n个（从0开始，不包括n本身）p标记之后的所有p标记，也就是从第n+2个标记开始算，如$(“p:gt(2)”)就是从第四个p开始。

13、过滤选择器

　　*备注：$(":file") 等价于$(“input[type=file]”)

14、反向过滤器：

　　$(“标签:not(:某属性)”)：选出所有不具备某属性的某标签。

　　意思为：过滤掉所有含有“某属性”的标签，留下其它不具备该属性的标签。

　　如：$(“a:not(:target)”),意思就是选出所有没写target的a标签。

Jq第二课

1、获取元素：

　　1）.size()： 获取元素的个数。

　　　　$(“img”).size()：获取有多少个img。

　　2）.eq()：获取元素。

　　　　$(“img[title]”).eq(1)：获取第二个带有title属性的img标签。

　　　　也可以写作： $(“img[title]”)[1]，此括号里的1代表索引1，所以是对应第二个，一般多用eq()。

　　3）.get() ：获得由选择器指定的DOM元素。

　　　　x=$("p").get(0)：获取第一个 p 元素的值。

　　4）index()：获取某项标签的索引。

　　　　$(“div”).index($(this))：获取当前操作的这个div在所有div中的索引。

　　5）find()：搜寻标记获得新的集合。

　　　　$(“p”).find(“span”)： 在所有p标记元素中搜索span标记，获取一个新的元素集合。

　　*$(this)：表示当前操作对象。

　　【例】var iNum=$(“li”).index($(“li[title=isaac]”)[0]) ，说明这句话的意思。

　　　　答案：　1）　　$(“li”)：对所有的li标签进行查找；

　　　　　　　　2）　　$(“li”).index() ：查找（）内对象在所有li标签中的索引；

　　　　　　　　3）　　$(“li[title=isaac]”)[0]：查找第一个拥有“title=isaac”这个title属性的li标签;

　　　　　　　　4）　　最终解释为：对所有的li标签进行查找，查找出“第一个拥有‘title=isaac’这个属性的li标签"在所有li标签中的索引。

2、添加元素：addClass()

　　$(“img[title]”).addClass(“myClass”) ：给所有带有title属性的img标签，添加上myClass的样式。

3、删除元素：not()

　　$(“li[title]”).not(“[title*=isaac]”) ：在所有设置了title属性的li标签中，删除掉带有[title*=isaac]这种title属性的li标签。（[title*=isaac]：含有isaac字符串的title）

注意：not()方法所接受的参数不能包含特定的元素，只能是通用的表达式。
错误：$(“li[title]”).not(“img[title*=isaac]”)
正确： $(“li[title]”).not(“[title*=isaac]”)

4、过滤元素：filter()

　　$(“li”).filter(“[title*=isaac]” ) 等同于 $(“li[title*=isaac]”) ：对所有的li标签，过滤筛选出包含有[title*=isaac]这种title属性的标签。

注意：

1）filter中的参数，不能直接是等于匹配，只能是前匹配^=,后匹配&=,任意匹配*=

2）filter（函数） 函数要求返回布尔值，对于返回值为true的元素保留，否则去除

5、判断元素：is()

　　var bImge=$(“div”).is(“img”) ：判断页面中的div块中是否包含img标记，返回布尔值，是或否。

6、遍历元素：each()

　　*遍历：将选中的标签，一个一个全部经历一遍。

　　在js中：

$(function(){
　　$(“img”).each(function(index){
　　　　this.title="这是第"+index+"副图，id是"+this.id+"，name是"+this.name;
　　});
});

 　　在html中：

　　<img id="img1" name="a1" src="1.jpg">

　　遍历所有的img，让每一个img都设置一个title属性值为：这是第 n 幅图，id是img1，name是a1

7、获取属性/设置属性值：attr()

　　attr()有2个作用：一个是获取属性值，一个是为属性设置值。

　　1）获取属性值：

　　　　var s = $("#txt").attr("value");　　获取到txt里面的value属性值

　　2）设置属性值：

　　　　$("#txt").attr({"value":"xxxxx","title":"aaaaa"});　　查询txt，为其中的value设值xxxxx的值，为title设值aaaaa的值

8、设置元素样式：

　　1）添加样式：addClass()

$("#btn").click(function(){　　　　
　　$(this).addClass("b");　　　　//找到id为btn的标签,点击后让它在原样式基础上加上样式b
});

　　2）删除样式：removeClass()

$("#btn").click(function(){　　　　
　　$(this).removeClass("b");　　　　//找到id为btn的标签,点击后让它在原样式基础上移除样式b
});

　　3）写入样式：css()

$("#btn").click(function(){　　　　
　　$(#d1).css("color","blue");　　　　//找到id为btn的标签,点击后让id为d1的标签拥有“颜色变成蓝色”的css样式
});

4）切换样式：toggleClass()

$("#btn").click(function(){　　　　
　　$(#d1).toggleClass("highlight");　　　　//点击时不断切换，样式交替执行，一会儿有此样式一会儿没有
});

9、改变操作对象：

　　1）.end()：为当前对象的前一步对象进行操作

　　2）.andself()：为当前对象和它的前一步对象都进行操作

　　【例】说明以下三句话的含义：

　　1）$(“p”).find(“span”).addClass(“myClass1”).addClass(“myClass2”)

　　2）$(“p”).find(“span”).addClass(“myClass1”).end().addClass(“myClass2”)

　　3）$(“p”).find(“span”).addClass(“myClass1”).andself().addClass(“myClass2”)

　　答：1）在所有p标签中，找到span标签为它们加上myClass1样式，再加上myClass2样式

　　　　2）在所有p标签中，找到span标签为它们加上myClass1样式，然后返回至上一个对象$(“p”)，为所有p标签加上myClass2样式

　　　　3）在所有p标签中，找到span标签为它们加上myClass1样式，并且为它们自己以及上一个对象$(“p”)加上myClass2样式

10、动态切换：

　　1）mouseover()：鼠标移动上去时改变样式

$(“p”).mouseover(function(){     

　　$(this).css(“color”,”red”);

});

　　2）mousetout()：鼠标移走后改变样式

$(“p”).mouseout(function(){     

　　$(this).css(“color”,”red”);

});

　　3）hover（事件1，事件2）：鼠标放上去事件1，移开事件2

$(“p”).hover(function(){     

　　$("#d1").addClass(“c”);

　　},function(){     

　　　　　　$("#d1").removeClass(“c”);

});

 　　　　对p标签中id=d1的标签，鼠标放上时加c样式，移开时移除c样式。

11、判断样式：hasClass()

　　$(“li”).hasClass(“myClass”);　　判断li中是否含有myClass的样式，返回为布尔型，是或否

Jq第三课

1、获取内容：

　　text()：获取文本内容。text获取的是文本内容，假设被指定的<div>里面还有各种标签，text也只获取里面的纯文本内容。

　　html()：获取括号内内容。而html则是获取里面的全部内容，包括标签也会一起打印出来。

　　【例】

$(“#d1”).text(“aaaaa”);　　　　　　　　　　//打印出 aaaaa

$(“#d1”).html(“<div>aaaa</div>”);　　　　//打印出<div>aaaa</div>

2、添加元素：

$(A).append(B)：给A标签里面，加入一个B。

$(A).appendTo(B)：把A，加入到B标签里面。

$(A).after(B)：在A标签的后面，加上一个B。

　　【例】

$(“p:eq(1)”).append($(“a:eq(1)”));　　　　//给页面中第二个p标签里面，加入页面中第二个a标签

$(“img:eq(1)”).appendTo(“p:eq(1)”);　　   //把页面中第二个img标签，加入到页面中第二个p标签里

$(“img:eq(1)”).after(“<p></p>”);　　　　  //在页面中第二个img标签后面，加入一个p标签

3、删除元素：

$(A).remove()：把A标签整个的移除掉（练标签一起移除掉）。

$(A).empty()：把A里面的内容全部清空（标签会保留）。

【例】

$("p:eq(1)").remove();　　　　//给页面中第二个p标签连标签一起移除掉。

$(“p:eq(1)”).empty();　　　　  //把第二个p标签里面的内容清掉，保留标签。

4、获取/设置元素：

　　val()：获取到任何标签的value属性值。

　　val(B)：设置值为B，此时获取得到的val值就是B的内容。

　　【例】

$("txt").val();　　　　　　　　//获取到txt标签里面的value属性值。

$(“txt”).val("aaaa");　　　　  //设置txt标签的value属性值为aaaa。

5、绑定事件：

　　bind()：对于一个对象，可以用bind绑定多个事件。并且可以反复执行。

　　unbind()：解除绑定。

　　one()：对于一个对象，可以用one对它绑定一个事件，并且只执行一次。

　　【例】

　　$("img")

　　　　　　.bind("click",function(){事件1})

　　　　　　.bind("click",function(){事件2})

　　　　　　.bind("click",function(){事件3})　　　　//当我们点击img时，同时触发事件1、2、3；再点击img，再次触发事件123。

$(“p”).unbind(“click”);　　　　　　　　　　　　//让p标签无法点击。

　　$("div").one("click",function(){事件1});　　　　//当我们点击div时，触发事件1；再点击div时，就不会触发事件了。

6、显示和隐藏：

　　//左上到右下　　

　　show()：显示元素，从左上到右下展开。（当括号内加入时间后，代表用多长时间展开。）

　　hide()：隐藏元素，从右下往左上收缩隐藏。（当括号内加入时间后，代表用多长时间收缩。）

　　toggle()：在显示show和隐藏hide之间交替执行，瞬间显示或者隐藏。可加入时间。

　　//上下

　　slideDown()：显示元素，从上往下逐渐展开。

　　slideUp()：隐藏元素，从下往上收缩隐藏。

　　slideToggle()：在显示slideDown和隐藏slideUp之间交替执行，方式为上下伸缩。可加入时间。

　　//透明

　　fadeIn()：渐变的显示出来。由透明到出现。

　　fadeOut()：渐变的隐藏掉。逐渐变透明最后消失。

　　【例】

　　$("#btn").click(function(){

　　　　$("#d1").hide(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间从右下到左上隐藏d1

　　$("#btn").click(function(){

　　　　$("#d1").show(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间从左上到右下展开d1

　　$("#btn").click(function(){

　　　　$("#d1").toggle(2000);　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，以2秒的速度左上到右下展开或隐藏d1（点击隐藏、再点击展开、……，交替执行）

7、回调函数：在现在的动作执行完后，立刻执行我们在里面定义的事件。

　　【例】

　　$("#btn").click(function(){

　　　　$("#d1").hide(1000,function(){alert("aaa");});　　　　　　

　　})　　　　　　　　　　　　　　　　　　//当点击btn时，用1秒的时间右下到左上隐藏d1，然后打印出aaa

8、动画时间animate:

　　animate：在多长时间内，从一个状态变到另一个状态。

　　【例】

　　$("#d1").css("position", "absolute").animate({ "top": "250px", "left": "300px" }, 2000,

　　　　　　　　　 function () {$("#d1").animate({ "top": "0px", "left": "600px" }, 2000);

        });

　　//用2秒时间，从原来的位置，移动到绝对定位下的top:250px，left:300px的位置；然后用2秒时间，移动到top:0px，left:600px的位置。

jq第四课

1、磁力图片：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        * {

            font-family:微软雅黑;

        }

        img {

            position:absolute;

        }

    </style>

  <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $(document).click(function (a) {

                $("img").animate({ left: a.pageX, top: a.pageY }, 2000);

            });

        });

    </script>

</head>

<body>

    <img src="Images/cat.jpg" />

</body>

</html>

2、轮播图：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

     <link href="Style/demo2.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        var num = 0;//记录下当前显示的图片的索引

        $(function () {

            $(".imgitem").not(":eq(0)").hide();//页面加载的时候，第一张图片显示。

            setInterval(function () {//隔多久，执行一次方法

                num++;

                if (num == 5)

                {

                    num = 0;

                }

                ShowFocusPic();

            }, 5000);

            $(".btn a").click(function () {

                num = $(".btn a").index($(this));//当前点击的下标在整个下标里面的索引，把这个索引值转成整数赋值给num

                ShowFocusPic();

            });

        });

        function ShowFocusPic()

        {

            $(".imgitem").eq(num).show();

            $(".imgitem").not(":eq(" + num + ")").hide();

            $(".btn li a").eq(num).addClass("selected");

            $(".btn li a").not(":eq(" + num + ")").removeClass("selected");

        }

    </script>

</head>

<body>

    <div id="list">

        <div class="imgitem"><img src="Images/2.png" /></div>

        <div class="imgitem"><img src="Images/3.jpg" /></div>

        <div class="imgitem"><img src="Images/4.jpg" /></div>

        <div class="imgitem"><img src="Images/5.jpg" /></div>

        <div class="imgitem"><img src="Images/6.jpg" /></div>

        <div class="btn">

            <ul>

                <li><a href="#" class="selected">1</a></li>

                 <li><a href="#">2</a></li>

                 <li><a href="#">3</a></li>

                 <li><a href="#">4</a></li>

                 <li><a href="#">5</a></li>

            </ul>

        </div>

    </div>

</body>

</html>

3、腾讯课堂菜单：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="Style/demo1.css" rel="stylesheet" />

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            $(".showinfor").hide();//页面加载后，class为showinfor的div隐藏

            $(".showinfor").hover(function () {

                $(this).show();

            }, function () {

                $(this).hide();

            });

            $(".listitem").hover(function () {

                var obj = $(this).offset();

                var index =$(".listitem").index($(this));

                $(".showinfor").eq(index).show();

                $(".showinfor").eq(index).css({ "top": obj.top, "left": obj.left + 220 });

                $(this).addClass("itembg");

            }, function () {

                var index =$(".listitem").index($(this));

                $(".showinfor").eq(index).hide();

                $(this).removeClass("itembg");

            });

        });

    </script>

</head>

<body>

    <div id="list">

        <p class="top"><a href="#">全部课程</a></p>

        <div class="listitem">

            <div class="item_1"><a href="#">职业技能</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">职能技能</a></li>

                    <li><a href="#">SNS营销</a></li>

                    <li><a href="#">公务员</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">

         职业技能

        </div>

        <div class="listitem">

            <div class="item_1"><a href="#">IT培训</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">网站制作</a></li>

                    <li><a href="#">手机开发</a></li>

                    <li><a href="#">游戏制作</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">IT培训</div>

        <div class="listitem">

            <div class="item_1"><a href="#">语言学习</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">英语口语</a></li>

                    <li><a href="#">留学英语</a></li>

                    <li><a href="#">韩语</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">语言学习</div>

        <div class="listitem">

            <div class="item_1"><a href="#">中小学/大学</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">中考备战</a></li>

                    <li><a href="#">高考备战</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">中小学/大学</div>

        <div class="listitem">

            <div class="item_1"><a href="#">兴趣爱好</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">投资理财</a></li>

                    <li><a href="#">美妆</a></li>

                    <li><a href="#">摄影</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">兴趣爱好</div>

        <div class="listitem">

            <div class="item_1"><a href="#">亲子课堂</a></div>

            <div class="item_2">

                <ul>

                    <li><a href="#">幼儿教育</a></li>

                    <li><a href="#">家长训练营</a></li>

                </ul>

            </div>

        </div>

        <div class="showinfor">亲子课堂</div>

    </div>

</body>

</html>

4、可弹出红色菜单：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title></title>

    <style type="text/css">

        body {

            background-color: #ffdee0;

        }

        a {

            font-family: "微软雅黑";

            color: white;

            text-decoration: none;

        }

        ul {

            list-style-type: none; /* 不显示项目符号 */

            margin: 0px;

            padding: 0px;

        }

        #navigation {

            width: 200px;

        }

            #navigation ul li {

                border-bottom: 1px solid #ED9F9F; /* 添加下划线 */

                background-color: #c11136;

            }

                #navigation ul li a {

                    display: block; /* 区块显示 */

                    padding: 5px;

                    border-left: 12px solid #711515; /* 左边的粗红边 */

                    border-right: 1px solid #711515; /* 右侧阴影 */

                }

                    #navigation ul li a:hover { /* 鼠标经过时 */

                        background-color: #990020; /* 改变背景色 */

                        color: #ffff00; /* 改变文字颜色 */

                    }

                #navigation ul li ul li {

                    background-color: #e85070;

                    border-top: 1px solid #ED9F9F;

                }

                    #navigation ul li ul li a {

                        display: block;

                        padding: 3px;

                        border-left: 28px solid #a71f1f;

                        border-right: 1px solid #711515;

                    }

                        #navigation ul li ul li a:hover {

                            background-color: #c2425d;

                            color: #ffff00;

                        }

    </style>

    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //$(function () {

        //    $(".c").find("ul").hide();

        //    $(".c").toggle(function () {

        //        $(this).find("ul").slideDown(500);

        //    }, function () {

        //        $(this).find("ul").slideUp(500);

        //    });

        //});

        $(function () {

            $(".c").find("ul").hide();

            $(".c").toggle(function () {

                $(this).find("ul").slideDown(500);

            }, function () {

                $(this).find("ul").slideUp(500);

            });

        });

    </script>

</head>

<body>

    <div id="navigation">

        <ul id="listUL" >

            <li class="c"><a href="#">体育明星</a>

                <ul>

                    <li><a href="#">乔丹</a></li>

                    <li><a href="#">纳什</a></li>

                    <li><a href="#">奥利尔</a></li>

                </ul>

            </li>

            <li class="c"><a href="#">政治明星</a>

                <ul>

                    <li><a href="#">普京</a></li>

                    <li><a href="#">习总</a></li>

                    <li><a href="#">奥巴马</a></li>

                </ul>

            </li>

            <li class="c"><a href="#">娱乐明星</a>

                <ul>

                    <li><a href="#">黄家驹</a></li>

                    <li><a href="#">周润发</a></li>

                    <li><a href="#">刘德华</a></li>

                </ul>

            </li>

            <li class="c"><a href="#">历史人物</a>

                <ul>

                    <li><a href="#">康熙</a></li>

                    <li><a href="#">拿破仑</a></li>

                    <li><a href="#">秦始皇</a></li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

5、砸蛋游戏：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <style type="text/css">

        #d1 {

            margin-top: 200px;

            margin-left: 200px;

        }

        .egg {

            float: left;

            background-image: url("Images/egg_1.png");

            background-repeat: no-repeat;

            height: 187px;

            width: 158px;

            margin-right: 50px;

            cursor: pointer;

        }

        #t {

            height: 87px;

            width: 74px;

            background-image: url("Images/egg_3.png");

            background-repeat: no-repeat;

            position: absolute;

            top: 185px;

            left: 330px;

            cursor: pointer;

        }

        #re {

            width: 160px;

            height: 35px;

            position:absolute;

            background-color:#FFFFCC;

            color:#FF6600;

            font-size:14px;

            font-family:"微软雅黑";

            display:none;

            text-align:center;

            line-height:35px;

        }

    </style>

    <script src="Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript">

        $(function () {

            var iNum = Math.floor(Math.random() * 4 + 1);//产生一个1~4之间的随机整数

            var i = 0;

            $(".egg").mouseover(function () {

                var off = $(this).offset();//当前蛋的方位

                $("#t").css("left", off.left + 120);

            });

            $(".egg").click(function () {

                if (i == 4) {

                    alert("蛋都碎了，别砸了，刷新再来");

                    document.getElementById("a3").play();

                    return;

                }

                if ($(this).attr("isbreak") == "false") {

                    i++;

                    $(this).css("background-image", "url(Images/egg_2.png)");

                    var a = $(".egg").index($(this)) + 1;//获取到当前的蛋是第几个蛋

                    var off = $(this).offset();

                    if (a == iNum) {

                        $("#re").text("恭喜，您中得数码相机!").css({ "left": off.left, "top": "140px" }).slideDown();

                        document.getElementById("a2").play();

                    }

                    else {

                        $("#re").text("很遗憾，您没有中奖").css({ "left": off.left, "top": "140px" }).slideDown();

                        document.getElementById("a1").play();

                    }

                    $(this).attr("isbreak", "true");

                }

                else {

                    $("#re").text("蛋已砸过了").css({ "left": off.left, "top": "140px" }).slideDown();

                }

            });

        });

    </script>

</head>

<body>

    <div id="d1">

        <div class="egg" isbreak="false"></div>

        <div class="egg" isbreak="false"></div>

        <div class="egg" isbreak="false"></div>

        <div class="egg" isbreak="false"></div>

    </div>

    <div id="t"></div>

    <div id="re"></div>

    <div><audio src="file/1.mp3" id="a1"></audio></div>

    <div><audio src="file/2.mp3" id="a2"></audio></div>

    <div><audio src="file/3.mp3" id="a3"></audio></div>

</body>

</html>

js jq 笔记小结

标签：

原文地址：http://www.cnblogs.com/mmtk/p/4695321.html