【锋利的Jquery】读书笔记二
一.jquery选择器
基本选择器
层次选择器
过滤选择器
基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
first : 获取单个元素 $("div:first").css("background","red");
first-child :获取集合 获取每一个父元素的第一个元素 $("div:first-child").css("background","red");
以下类似
last 与last-child nth-child 与 eq
==============================================
:parent 选取含有子元素或者文本元素 $("div:parent").css("background","aquamarine");
:parents
表单属性过滤
:checked 单选框 复选框
:selected 下拉框
表单选择器
不一一举例。之讲解一些自己经常误解的
<script type="text/javascript">
$(function(){
//注意区分类似这样的选择器
//虽然一个空格,却截然不同的效果.
var $t_a = $('.test :hidden'); //后代选择器
var $t_b = $('.test:hidden'); //过滤选择器
var len_a = $t_a.length;
var len_b = $t_b.length;
$("<p>$('.test :hidden')的长度为"+len_a+"</p>").appendTo("body");
$("<p>$('.test:hidden')的长度为"+len_b+"</p>").appendTo("body");
})
</script>
二. 模板文件
<body> <button id="reset">手动重置页面元素</button>
<input id="isreset" type="checkbox" checked="checked"><label for="isreset">点击下列按钮时先自动重置页面</label><br><br>
<h3>基本选择器.</h3> <!-- 控制按钮 -->
<input id="btn1" type="button" value="选择 id为 one 的元素.">
<input id="btn2" type="button" value="选择 class 为 mini 的所有元素.">
<input id="btn3" type="button" value="选择 元素名是 div 的所有元素.">
<input id="btn4" type="button" value="选择 所有的元素.">
<input id="btn5" type="button" value="选择 所有的span元素和id为two的元素."> <br><br> <!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div> </div> <div title="test" class="one" id="two">
id为two,class为one,title为test的div.
<div title="other" class="mini">class为mini,title为other</div>
<div title="test" class="mini">class为mini,title为test</div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div> <div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div title="tesst" class="mini">class为mini,title为tesst</div>
</div> <div class="none" style="display:none;"> style的display为"none"的div
</div> <div class="hide">class为"hide"的div</div> <div> 包含input的type为"hidden"的div<input type="hidden" size="8">
</div> <span id="mover" style="height: 70.5px; overflow: hidden; padding-top: 0px; padding-bottom: 0px; margin-top: 2.5px; margin-bottom: 2.5px; display: block;">正在执行动画的span元素.</span> </body>
三
四. 举个栗子
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var $toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
$toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$(this).find('span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$(this).find('span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>
【锋利的Jquery】读书笔记二的更多相关文章
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- <锋利的jQuery>读书笔记
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
- 《你必须知道的.NET》读书笔记二:小OO有大原则
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.单一职责原则 (1)核心思想:一个类最好只做一件事,只有一个引起它变化的原因 (2)常用模式:Fa ...
随机推荐
- asp.net mvc异步查询
对于asp.net mvc异步查询 如何做MVC异步查询,做列表页面. 查询是项目中必不可少的工作,而且不同的项目不同的团队,都有自己的简单方法.Asp.net mvc 有自己独特的优势,下面是结合m ...
- [基础]RHEL6下LINUX服务器批量部署
包准备:xinetd,tftp-server,dhcp,httpd,system-config-kickstart,syslinux,nfs 试验环境: 本机地址:192.168.46.98 ...
- iOS开发: 关于Certificate, Identifier & Profile
简介 苹果的iOS系统是封闭的系统.苹果的设计是保证每一个软件有确定的开发者/厂商(保证不被第三方进行未授权修改),只能在指定的设备上运行.为达到这些目标,苹果设计了一系列的机制. Certifica ...
- [置顶] Nosql笔记(一)——关系型数据库回顾
Nosql笔记(一)——关系型数据库回顾 在平常的商业应用中,我们所使用的大多都是关系型数据库,诸如SQL Server. MY SQL. Oracle等. 关于关系型数据库中的关键技术: 存储引擎 ...
- 对 Select 的各种操作(JQuery)
在写表单时,经常要用到select元素,这个元素相较于其他文本框标签而言有不同.最近在写一个页面表单时需要对select进行各种操作,现将其用法收集并总结如下: HTML元素: <select ...
- log4net 开箱即用
废话少说,先上代码 log4net Demo 好的系统都有日志,log4net 是我在.net平台下用过最爽的日志库,简单易用.功能强大. 基于配置(配置很简单,一看就明,通用,拷去即用): 可同时保 ...
- 结构-行为-样式-angularJs笔记
0.关于Ng-app 通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...
- zabbix 布署实践【7 H3C网络设备监控模版制作思路】
我们知道,zabbix安装后自带Template OS Linux 模版已满足了绝大部分Linux服务器的基础环境监控,只是我们在其模版上稍微修改,可配合将SWAP监控取消,另存为一个叫OS Linu ...
- [翻译]Eureka一窥
什么是Eureka? Eureka是一个基于REST的服务,主要用在AWS云环境作为服务发现,负载均衡和失败转移.我们叫这个服务,Eureka服务. Eureka也有一个JAVA客户端组件, Eure ...
- Python高手之路【十三】socket网络编程
什么是客户/服务器架构? 什么是客户/服务器架构?不同的人有不同的答案.这要看你问的是什么人,以及指的是软件系统还是硬件系统了.但是,有一点是共通的:服务器是一个软件或硬件,用于提供客户需要的&quo ...