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选择器实例的更多相关文章

  1. jquery接触初级-----juqery DOM操作实例，动态图片显示

    1. 要求:对一个a标签元素,当鼠标操作,移入时,显示a标签title属性的信息,鼠标移出时,隐藏a标签属性的title属性信息 a 标签本身的title 属性具有自我显示的特性,但是这个特性比较慢, ...

  2. jquery接触初级-----juqery 动画函数

    1. window.onload(), 一次只能保存对一个函数的引用:如果多次调用,他会自动用后面的函数覆盖前面的函数 2.$(document).ready(); 会在现有行为上追加新的行为,这些函 ...

  3. jquery接触初级-----juqery DOM操作 之一

    1. DOM 分为三个部分:DOM core ,HTML_DOM,CSS_DOM: 1.1.document.getElementById(),document.getElementsByTagNam ...

  4. jquery接触初级-----juqery DOM操作 之二

    DOm 操作之: 1.1  children(),这个函数只是查找元素的子元素,而不考虑其他后代元素 <body> <p title="请选择你最喜欢的水果"&g ...

  5. jquery接触初级----- 一种新奇的选择器用法

    今天看到一个新奇的jquery 选择器的用法,因为以前没有见过,所以记录下来 1.jquery 选择器: 给body添加一个元素,添加元素的时候,同时把属性和点击事件都一起进行添加 <!DOCT ...

  6. jquery接触初级----jquery 选择器

    css 选择器主要有:元素选择器,ID选择器,类选择器,群组选择器,后代选择器,普通配符选择器等,通过css选择,我们可以很方便的给元素添加样式,使网页看起来更加好看 jquery 选择器也有相似的功 ...

  7. jquery接触初级-----ajax 之：load()方法

    jquery _ajax 请求主要有几种方式:load(),$.get(),$.post(),$.ajax(),$.getScript(),$.getJson() 1.load()方法 格式:load ...

  8. jquery接触初级----jquery 对象和Dom对象

    1. DOM 对象,每一份DOm对象(Document Object model)都可以表示成一棵树,一个基本的网页如下: <!DOCTYPE html> <html lang=&q ...

  9. jquery接触初级-----ajax 之：jquery_ajax 方法

    1. $.get() 方法: 格式:$.get( url,[,data],[,callback],[,type] ); data:  采用键值对的方式存储于对象中; callback: 载入成功时(当 ...

随机推荐

  1. 廖雪峰Java5Java集合-5Queue-1使用Queue

    Queue特性和基本方法 Queue实现一个先进先出(FIFO, First In First Out)的队列.如收银台排队支付. Java中LinkedList实现了Queue接口,可以直接把Lin ...

  2. Quidway S系列交换机

    一. 华为交换机设备,以Quidway S系列命名,广泛适用于企业网.园区网和运营网络.Quidway S系列交换机包括: 接入层交换机 汇聚层交换机 核心层交换机 1.接入层交换机 包含两个系列: ...

  3. [UE4]显示队友

  4. [UE4]九宫格图片拉伸

    Draw As选择:Box Margin:边界尺寸.如果看不清楚,可以把“Draw As”选择“Border”:

  5. Android 设置SeekBar不可拖动

    public class MyProgressBar extends SeekBar { /** * 是否支持拖动进度 */ private boolean touch = true; public ...

  6. [CVE-2014-8959] phpmyadmin任意文件包含漏洞分析

    0x01 漏洞描述 phpmyadmin是一款应用非常广泛的mysql数据库管理软件,基于PHP开发. 最新的CVE-2014-8959公告中,提到该程序多个版本存在任意文件包含漏洞,影响版本如下: ...

  7. MapReduce Demo

    功能:统计公司员工一个月内手机上网上行流量.下行流量及总流量. 测试数据如下: 13612345678     6000    1000 13612345678     2000    3000 13 ...

  8. IOS 7层协议

    ios七层 (1)物理层——Physical 这是整个OSI参考模型的最低层,它的任务就是提供网络的物理连接.所以,物理层是建立在物理介质上(而不是逻辑上的协议和会话),它提供的是机械和电气接口.主要 ...

  9. day23面向对象编程基础

    面向对象编程基础1.面向过程的编程思想    核心过程二字,过程指的是解决问题的步骤,即先干什么\再干什么\后干什么    基于该思想编写程序就好比在设计一条流水线,是一种机械式的思维方式    优点 ...

  10. Java并发知识整理

    整理了一下前段时间学习Java并发的笔记,大约有40篇. 1. Java并发基础知识 并发基础(一) 线程介绍 并发基础(二) Thread类的API总结 并发基础(三) java线程优先级 并发基础 ...