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: 载入成功时(当 ...
随机推荐
- Scrapy学习篇（六）之Selector选择器
当我们取得了网页的response之后,最关键的就是如何从繁杂的网页中把我们需要的数据提取出来,python从网页中提取数据的包很多,常用的有下面的几个: BeautifulSoup它基于HTML代码 ...
- go语言学习--指针数组和数组指针
数组指针(也称行指针)定义 int (*p)[n];()优先级高,首先说明p是一个指针,指向一个整型的一维数组,这个一维数组的长度是n,也可以说是p的步长.也就是说执行p+1时,p要跨过n个整型数据的 ...
- volley 之GsonRequest
这是之前写的http://www.cnblogs.com/freexiaoyu/p/3955137.html 关于GsonReques的用户,这个在POST请求传参数的时候GsonRequest构造第 ...
- Html的本质及在web中的作用
概要 本文以一个Socket程序为例由浅及深地揭示了Html的本质问题,同时介绍了作为web开发者我们在开发网站时需要做的事情 Html的本质以及开发需要的工作 1.服务器-客户端模型 其实,对于所有 ...
- Linux IO多路复用 select/poll/epoll
Select -- synchronius I/O multiplexing select, FS_SET,FD_CLR,FD_ISSET,FD_ZERO #include <sys/time. ...
- ob系列函数中常用函数
ob_start(); //打开一个输出缓冲区,所有的输出信息不再直接发送到浏览器,而是保存在输出缓冲区里面. ob_clean(); //删 ...
- python hashillb 模块
hashlib主要提供字符加密功能,将md5和sha模块整合到了一起,支持md5,sha1, sha224, sha256, sha384, sha512等算法 import hashlib # ## ...
- Python列表生成式和生成器
[1]列表生成器:列表生成式就是一个用来生成列表的特定语法形式的表达式. 1.基础语句结构:[exp for iter_var in iterable例如:a=[f(x) for x in range ...
- redis永久化存储
redis持久化存储 原因:redis是存放在内存中的,断电会导致数据丢失解决方法:把redis数据进行持久性存储,将其存储在磁盘中. 存储方式:1.RDBRDB中文名为快照/内存快照,Redis按照 ...
- es6基础(7)--函数扩展
{ //有默认值的后面如果有参数必须要有默认值 function test(x,y="world"){ console.log(x,y) } test('hello');//hel ...