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. openstack处理booting from hard disk

    当你的实例启动出现如下报错的处理方式:         需要编辑/etc/nova/nova.conf [libvirt] cpu_mode = none virt_type=qemu   修改后需要 ...

  2. HDOJ 2003 求绝对值

    #include<cstdio> #include<cmath> int main() { double a; while (scanf_s("%lf", ...

  3. [UE4]暂停游戏、退出游戏、游戏输入模式

    游戏主界面WB_Main蓝图 Set Game Paused:暂停游戏 Show Mouse Cursor:显示鼠标 Set Input Mode:设置游戏输入模式(游戏和UI).仅仅游戏.仅仅UI( ...

  4. [UE4]Delay的使用技巧：改变引擎执行顺序

    如果要游戏一开始就让机器人开火,但这是引擎还没有执行到武器的创建步骤,就可以使用“Delay”并设置函数的等待时间,让引擎先执行创建枪的步骤,然后机器人开火就没问题了.

  5. WGS84投影的WKID说明

    关于WKID的几点说明 1.ArcGIS Server 10中: EPSG 3857         WGS_1984_Web_Mercator_Auxiliary_Sphere ESRI 10211 ...

  6. 字符串格式化format使用

    顺序传参 '{}....{}'.format(value1, value2) 索引传参 '{0}....{1}'.format(value1, value2) 关键字传参 '{k1}....{k2}' ...

  7. 第16课 右值引用（3）_std::forward与完美转发

    1. std::forward原型 template <typename T> T&& forward(typename std::remove_reference< ...

  8. 让WordPress支持google AMP

    1.关于AMP 在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc.手机.ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile ...

  9. python 实现排序算法(二)-合并排序(递归法)

    #!/usr/bin/env python2 # -*- coding: utf-8 -*- """ Created on Tue Nov 21 22:28:09 201 ...

  10. vs code编辑器格式化react jsx插件

    vs code格式化jsx比较适合的插件是react-beautify: 格式化中遇到的问题是indent几格,这个问题的解决是你在space里设置几格这个插件就会自动格式化出几格.