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: 载入成功时(当 ...
随机推荐
- 在Ubuntu16.04下面安装asterisk网络电话交换机服务器
在Ubuntu下面需要安装 apt install libncurses5-dev uuid-dev libjansson-dev libxml2-dev libsqlite3-dev 去官网下载包h ...
- Linux创建桥接网络
图形化创建 #nm-connection-editor & 选择桥接 设置桥接网络 点击添加 模式选择以太网 添加上行网卡 # brctl show 删除桥接 # nmcli connecti ...
- Java中常见流的分类及简单讲解
流在Java中是指计算中流动的缓冲区. 从外部设备流向中央处理器的数据流成为“输入流”,反之成为“输出流”. 字符流和字节流的主要区别: 1.字节流读取的时候,读到一个字节就返回一个字节:字符流使用了 ...
- kafka的安装 （单机）
https://blog.csdn.net/q282176713/article/details/81112988
- 通过OTA的方式在局域网分发iOS应用
公司的一个项目有Android和iOS的app,Android的下载和安装都很方便,不过iOS有些麻烦,因为项目本身有些限制,主要有以下一些障碍:1.iOS的版本不是通过Appstore分发.2.出于 ...
- mysql 中 myisam innodb 的区别
区别: 1. InnoDB支持事务,MyISAM不支持,对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在begin和commit之间,组成一个事 ...
- CS229 6.13 Neurons Networks Implements of stack autoencoder
对于加深网络层数带来的问题,(gradient diffuse 局部最优等)可以使用逐层预训练(pre-training)的方法来避免 Stack-Autoencoder是一种逐层贪婪(Greedy ...
- window系统更新导致很多服务出错
window7,win10,window server各版本系统中,经常会出现下载完成更新补丁后要求重启更新,此时很可能会出现很多服务失效的莫名其妙的问题,比如数据库连不上,IIS某功能不好使等等问题 ...
- java8实战：filter的简单使用
<JAVA8实战>中的例子 要实现的功能:通过Apple的color或weight属性,对List<Apple>进行筛选. 1.首先定义com.owl.entity.Apple ...
- fabric镜像安装脚本分析
#!/bin/bash # # Copyright IBM Corp. All Rights Reserved. # # SPDX-License-Identifier: Apache-2.0 # e ...