jQuery(尚硅谷)笔记----------10

练习：品牌展示

未加jQ的代码：

页面效果：

 现在页面是全部信息都显示出来了，但是这样的话显示全部品牌就没有用处了，所以我们要做一步隐藏，把卡西欧以后的数据都隐藏掉。

 

但是这个时候其它品牌相机就没了，我们要把它显示出来。

 

这样基本的初始状态我们就做出来了。

我们现在要给显示全部品牌的按钮绑定单击事件：

这样我们就可以点击这个按钮了，接下来我们要写它的功能

显示全部品牌的按钮功能为点击就显示全部，再点击就显示部分，所以我们要用到toggle()功能：

运行结果：

初始：

 点击后：

再点击：

 

 但是现在我们要做的是：

按钮上的文本随时变化：

品牌隐藏的状态：1.显示全部品牌                 ==        角标向下

品牌显示的状态：2.显示精简品牌                 ==        角标向上        

我们可以知道按钮的文本内容是和此时品牌的状态的一一对应的，所以我们要进行一步判断，不同状态给对应的文本：

 

接下来我们就要显示一下对应的角标：

 

 

 根据样式我们可以知道，角标是随样式而变化的，所以我们的思路就是在判断里删除原本的样式，再添加新的样式。

 

其实这时我们的功能已经做好了：

但是还有可以做些高亮的颜色：

 jQuery事件操作

$（function(){}）;和window.οnlοad=function(){}的区别？

他们分别是在什么时候触发？

1.jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。

2.原生js的页面加载完成之后，除了要等到浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。

他们触发的顺序？

1.jQuery页面加载完成之后先执行

2.原生js的页面加载完成后之后

他们执行的次数？

1.原生js的页面加载完成之后，只会执行最后一次的赋值函数。

2.jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。

jQuery的其他事件处理

click()        它可以绑定单击事件，以及触发单击事件

mouseover()        鼠标移入事件

mouseout()        鼠标移出事件

bind()        可以给元素一次绑定一个或多个事件。

one()        使用上和bind一样，但是one方法绑定的事件只会响应一次。

live()        也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建来的也有效。

unbind()        跟bind方法相反的操作，解除事件的绑定。

前端页面加jQ之前：

css样式：

例：

click()

 

 

点击按钮：

 mouseover()和mouseout():

 

 bind():

 

 one():

 

使用one每个方法只能使用一次。

 unbind():

 

 如果unbind的方法里面什么都不写，那么就是所有的绑定都解除。

live():

 

这个时候，我们点击第一个h5会出现弹窗，点击第二个不会。所以用live方法可以让两个h5都绑定click(）方法。

 使用这个方法，两个h5就都被绑定click事件了。

但是我用的jQuery版本太高，不支持live()方法。1.7以前的支持。