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: 载入成功时(当 ...
随机推荐
- [UE4]Get All Widgets Of Class、Get All Widgets with Interface，根据类名或者接口UI实例对象
Get All Widgets Of Class.Get All Widgets with Interface,是系统蓝图函数库提供的方法,可以在任何蓝图中使用. 可以方便地获得UI实例对象,进而使用 ...
- [UE4]迁移小地图到其他工程
一.创建一个新工程,类型不限,本次测试场创建的是赛车类工程. 二.为了方便管理,最好在All文件文件夹下新建一个名为MiniMap的目录,并把所有小地图相关的都放进来. 三.在小地图工程中,右键Rou ...
- T-SQL 有参数存储过程的创建与执行
use StudentManager go if exists(select * from sysobjects where name='usp_ScoreQuery2') drop procedur ...
- java基础阶段关于密码或账号字符数字的判断总结
将字符串转成字符数组 首字母判断 思路:应该如何获取首字母 arr[0]为数组第一个元素即是首字母 数字判断true为数字false为非数字 "0123456789".contai ...
- javascript-typeof篇
isString (o) { //是否字符串 return Object.prototype.toString.call(o).slice(8, -1) === 'String' } isNumber ...
- 用微信小程序连接WordPress网站
随着微信小程序的功能越来越强,特别对个人开发者的开放,让个人开发者有机会尝试微信小程序.如果你有自己的个人网站,就可以把个人网站搬到微信小程序里,通过小程序直接访问网站的内容. 要想微信小程序可以获取 ...
- lua开发
1:安装luaBridge git地址 https://github.com/vinniefalco/LuaBridge.git 2:编写程序 #include <lua.hpp> #in ...
- protocol buf安装
1:下载安装包 $wget https://github.com/google/protobuf/archive/v2.6.1.zip $unzip protobuf-2.6.1.zip $cd pr ...
- Memory Translation and Segmentation.内存地址转换与分段
原文标题:Memory Translation and Segmentation 原文地址:http://duartes.org/gustavo/blog/ [注:本人水平有限,只好挑一些国外高手的精 ...
- Java中的Map List Set等集合类
一.概述 二 set map list的区别 三. Collections类和Collection接口 四. List接口,有序可重复的集合 五. Set接口,代表无序,不可重复的集合 六. Map接 ...