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. [UE4]函数和事件的区别

    一.函数有返回值,事件无返回值 二.函数调用会等待函数执行结果,事件调用只是触发但不会等待. 三.函数执行在同一个线程,事件执行在不同线程. 四.函数可以用局部变量,事件没有局部变量. 五.因为函数执 ...

  2. Android拨打接听电话自动免提

    权限: <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-p ...

  3. 关于daterangepicker的配置

    一开始接触daterangepicker搞得思路很乱,慢慢研究才了解一些,下面粘一个daterangepicker的基本配置,代码是来自网上某位大神的.我只是引荐过来的,加入了周和月的汉化. 在回调函 ...

  4. arcgis for android 读取shp文件中文乱码解决方法

    设置注册表默认字符,即可解决中文乱码问题. 'dbfDefault' 设置方法1.开始--运行,输入”Regedit“,打开注册表.2.如是用的是 10.x 版本 ArcGIS Desktop,定位到 ...

  5. 一行代码避免OkHttp的网络库应用被抓包

    在建立socket连接之前,OkHttp会获取系统的代理信息,如果设置代理,那么通过DNS解析其IP然后使用代理IP来建立socket连接.如果没有设置代理,那么会使用请求中的url的IP地址,来建立 ...

  6. CentOS7.3编译hadoop2.7.3源码

    在使用hive或者是kylin时,可以选择文件的压缩格式,但是这个需要有hadoop native库的支持,默认情况下,hadoop官方发布的二进制包中是不包含native库的,所以无法使用一些压缩相 ...

  7. Linux下单独编译安装PHP扩展包

    首先进入PHP源码目录,比如这个: root@vultr:~/php-/ext/soap# 运行下PHP目录下的phpize,接着就可以和普通代码一样,配置,编译,安装了(注意:有些库可能可以配置参数 ...

  8. Html5——canvas标签使用

    canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. canvas 元素本身是没有绘图能力的.所有的绘制工作必须在 JavaScript 内部完成 <script type=&q ...

  9. 解决 WordPress 4.9 页面模板功能无法正常使用

    WordPress 4.9 有一个重要更新是:在WP后台编辑主题和插件文件时,支持按层级显示所有文件.为了性能考虑,使用了 transient 缓存机制.但是却没有提供任何手动清除缓存的功能,导致有些 ...

  10. 04 bash程序的基本特性

    我们知道Linux系统有两种操作方式,一种为GUI的图形界面化管理方式,其中图形程序常见的有Gnome.KDE.xfce:另一种管理方式就是就是GLI的命令行管理方式,而命令行的管理方式就是通过she ...