jquery接触初级-----juqery选择器实例

jquery 选择器用于触发事件，可以少写很多js代码，一般来说，基本的特效功能都能够完成

这里列举一个简单的jquery写的例子：

要求：有两种情况：

1.产品最初状态显示简约形式的品牌，即显示部分品牌

2.点击按钮后，网页变成显示全部品牌，并且按钮也随着改变

3.对一些列举出的品牌显示成高亮的色彩

4.再次点击按钮，产品品牌变成最初的状态

在这里，将会用到jquery的选择器，和juery方法

html代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

     <title>Document</title>

 </head>

 <body>

     <div class="container clearfix">

         <ul class="">

             <li>

                 <a href="javascript:;">索尼</a><i>(32)</i></li>

             <li>

                 <a href="javascript:;">佳能</a><i>(80)</i></li>

             <li>

                 <a href="javascript:;">三星</a><i>(3285)</i></li>

             <li>

                 <a href="javascript:;">松下</a><i>(4280)</i></li>

             <li>

                 <a href="javascript:;">尼康</a><i>(3230)</i></li>

             <li>

                 <a href="javascript:;">卡西欧</a><i>(3080)</i></li>

             <li>

                 <a href="javascript:;">富士康</a><i>(3980)</i></li>

             <li>

                 <a href="javascript:;">富士</a><i>(3230)</i></li>

             <li>

                 <a href="javascript:;">柯达</a><i>(3283)</i></li>

             <li>

                 <a href="javascript:;">宾得</a><i>(3289)</i></li>

             <li>

                 <a href="javascript:;">理光</a><i>(7280)</i></li>

             <li>

                 <a href="javascript:;">奥林巴斯</a><i>(8280)</i></li>

             <li>

                 <a href="javascript:;">明基</a><i>(9280)</i></li>

             <li>

                 <a href="javascript:;">爱国者</a><i>(3280)</i></li>

             <li>

                 <a href="javascript:;">小米</a><i>(3220)</i></li>

             <li>

                 <a href="javascript:;">华为</a><i>(32810)</i></li>

             <li>

                 <a href="javascript:;">格力</a><i>(3920)</i></li>

             <li>

                 <a href="javascript:;">苹果</a><i>(380)</i></li>

             <li>

                 <a href="javascript:;">京东方</a><i>(4280)</i></li>

             <li>

                 <a href="javascript:;">其他品牌相机</a><i>(8380)</i></li>

         </ul>

     </div>

     <div class="showmore">

         <a href="more.html"><span>显示全部品牌</span></a>

     </div>

 </body>

 </html>

Css代码：

 <style>

     .container,

     .showmore {

         width: 600px;

         position: relative;

         margin: 0 30px;

     }

     .showmore {

         text-align: center;

         height: 30px;

         line-height: 30px;

     }

     .showmore a {

         padding: 5px;

     }

     .clearfix:after {

         display: block;

         content: '';

         height: 0;

         clear: both;

         visibility: hidden;

     }

     .clearfix {

         zoom: 1;

     }

     .container li {

         display: inline-block;

         width: 30%;

         float: left;

         padding: 5px;

     }

     a {

         text-decoration: none;

     }

     .highlight {

         background: #ccc;

     }

 </style>

js代码：

 <script>

     $(function() {

         var Obtn = $(".showmore a");

         var ali = $(".container li:gt(4):not(:last)");

         ali.hide();

         $(".showmore span").css("background", "#398");

         Obtn.on("click", function() {

             if (ali.is(":hidden")) {

                 ali.show();

                 $(this).find('span').css("background", "#ccc").text("显示部分品牌");

                 $("ul li").filter(":contains('华为'),:contains('索尼'),:contains('奥林巴斯')").addClass("highlight");

             } else {

                 ali.hide();

                 $(this).find('span').css("background", "#398").text("显示全部品牌");

                 $("ul li").removeClass("highlight");

             }

             return false;

         });

     });

 </script>

运行结果：

jquery接触初级-----juqery选择器实例的更多相关文章

jquery接触初级-----juqery DOM操作实例，动态图片显示
1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...
jquery接触初级-----juqery 动画函数
1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...
jquery接触初级-----juqery DOM操作之一
1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...
jquery接触初级-----juqery DOM操作之二
DOm 操作之: 1.1 children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...
jquery接触初级----- 一种新奇的选择器用法
今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...
jquery接触初级----jquery 选择器
css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...
jquery接触初级-----ajax 之：load()方法
jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法格式:load ...
jquery接触初级----jquery 对象和Dom对象
1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...
jquery接触初级-----ajax 之：jquery_ajax 方法
1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data: 采用键值对的方式存储于对象中; callback: 载入成功时(当 ...

随机推荐

MySQL binlog 企业案例升级版
需求:1.创建一个数据库 oldboy2.在oldboy下创建一张表t13.插入5行任意数据4.全备5.插入两行数据,任意修改3行数据,删除1行数据6.删除所有数据7.再t1中又插入5行新数据,修改3 ...
[UE4]条件融合动画: Blend Posed by int
Aim Group=0:使用动画“Blend Pose 0” Aim Group=1:使用动画“Blend Pose 1”
AsyncHelper
http://www.cnblogs.com/zhaopei/p/async_one.html
sas 基础（1）-关于数据格式的SAS函数
(一)字符转换: 1)字符型转换成数值型 Numvar=INPUT(source,informat) 2)数值型转换成字符型 Chavar=PUT(source,format) (二)字符型变量的处理 ...
CRM 2016 请求"System.Security.Permissions.FilelOPermission,mscorlib,Version=4.0.0.0,Culture=neutral,PublicKeyToken=b77a5c561934e089"类型的权限已失败.
CRM 请求"System.Security.Permissions.FilelOPermission,mscorlib,Version=4.0.0.0,Culture=neutral,Pu ...
Devlopment Env Setup install ubuntu16.04
http://blog.csdn.net/ljheee/article/details/52966048 1.add chinese language support settings -> i ...
学习js第三天小结
1.冒泡排序分析: 例:将数组[9,8,7,6,5,4,3,2,1,0]按照从小打大的顺序进行冒泡排序. 演变过程: 第一趟: 8,7,6,5,4,3,2,1,0,9 比较了9次: 第二趟: 7 ...
CS229 6.17 Neurons Networks convolutional neural network（cnn）
之前所讲的图像处理都是小 patchs ,比如28*28或者36*36之类,考虑如下情形,对于一副1000*1000的图像,即106,当隐层也有106节点时,那么W(1)的数量将达到1012级别,为了 ...
Python中的线程和进程
引入进程和线程的概念及区别 threading模块提供的类: Thread, Lock, Rlock, Condition, [Bounded]Semaphore, Event, Timer, l ...
scrapy中 selenium(中间件) + 语言处理 +mysql
在通过scrapy框架进行某些网站数据爬取的时候,往往会碰到页面动态数据加载的情况发生,如果直接使用scrapy对其url发请求,是绝对获取不到那部分动态加载出来的数据值.但是通过观察我们会发现,通过 ...

jquery接触初级-----juqery选择器实例

jquery接触初级-----juqery选择器实例的更多相关文章

随机推荐

热门专题