Jquery权威指南
1.Radio
<input id="Radio1" name="rdoSex" type="radio" value="男" />
$("#Radio1:checked").val()--根据Id获取值
$("input[name=rdoSex]:checked").val()--根据name获取值
$("#Radio1").is(":checked")--根据id判断是否选中
2.table表格样式设置
$("#tableId tr:nth-child(even)").addClass("样式")--控制偶数行样式
$("#tableId tr:nth-child(odd)").addClass("样式")--控制奇数行样式
:nth-child(even) 的意思就是从第1开始的偶数元素,:even的意思是指从第0开始的偶数元素
$('table tr:nth-child(even)').css('background-color','red');
$('table tr:even').css('background-color','red');
3.Jquery选择器
1)基本选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
#id | 匹配给定的id | 单个元素 | $(“header”) |
.class | 匹配给定的类名 | 集合元素 | $(“.test”) |
E | 匹配给定的标签名 | 集合元素 | $(“div”) |
* | 匹配所有元素 | 集合元素 | $(“*’) |
E, .class, E… | 匹配给定的集合 | 集合元素 | $(“span, .tiPS”) |
2)层次选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
$(“ancestor descendant”) | 匹配ancestor里的所有 descendant(后代)元素 |
集合元素 | $(“body div”) |
$(“parent>child”) | 匹配parent下的所有 child(子)元素 |
集合元素 | $(“div>span”) |
$(“prev+next”) | 匹配紧接在prev后的 next元素 |
集合元素 | $(“.error+span”) |
$(“prev~siblings”) | 匹配prev后的所有 siblings元素 |
集合元素 | $(“span~a”) |
3)过滤选择器
a)基本过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:first | 匹配第一个元素 | 单个元素 | $(“div:first”) |
:last | 匹配最后一个元素 | 单个元素 | $(“span:last”) |
:even | 匹配索引是偶数的元素 索引从0开始 |
集合元素 | $(“li:even”) |
: odd | 匹配索引是奇数的元素 索引从0开始 |
集合元素 | $(“li:odd”) |
:eq(index) | 匹配索引等于index的元 素(索引从0开始) |
单个元素 | $(“input:eq(2)”) |
:gt(index) | 匹配索引大于index的元 素(索引从0开始) |
集合元素 | $(“input:gt(1)”) |
:lt(index) | 匹配索引小于index的元 素(索引从0开始) |
集合元素 | $(“input:lt(5)”) |
:header | 匹配所有h1,h2…等 标题元素 |
集合元素 | $(“:header”) |
:animated | 匹配所有正在执行 动画的元素 |
集合元素 | $(“div:animated”) |
b)内容过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:contains(text) | 匹配含有文本内容text 的元素 |
集合元素 | $(“p:contains(今天)”) |
:empty | 匹配不含子元素或 文本元素的空元素 |
集合元素 | $(“p:empty”) |
:has(selector) | 匹配包含selector元素 的元素 |
集合元素 | $(“div:has(span)”) |
:parent | 匹配含有子元素或文本 的元素 |
集合元素 | $(“div:parent”) |
c)可见性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:hidden | 匹配所有不可见 的元素 |
集合元素 | $(“:hidden”) |
:visible | 匹配所有可见元素 | 集合元素 | $(“:visible”) |
d)属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
[attr] | 匹配拥有此属性 的元素 |
集合元素 | $(“img[alt]“) |
[attr=value] | 匹配属性值为value 的元素 |
集合元素 | $(“a[title=test]“) |
[attr!=value] | 匹配属性值不等于 value的元素 |
集合元素 | $(“a[title!=test]“) |
[attr^=value] | 匹配属性值以value 开头的元素 |
集合元素 | $(“img[alt^=welcome]“) |
[attr$=value] | 匹配属性值以value 结尾的元素 |
集合元素 | $(“img[alt$=last]“) |
[attr*=vlaue] | 匹配属性值中含有 value的元素 |
集合元素 | $(“div[title*=test]“) |
[attr1][attr2]… | 通过多个属性 进行匹配 |
集合元素 | $(“div[id][title*=test]“) |
d)子元素过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:nth-child | 匹配每个父元素下的 第index个子元素 索引从1开始 |
集合元素 | $(“div:nth-child(2)”) |
:first-child | 匹配每个父元素的 第一个子元素 |
集合元素 | $(“div:first-child”) |
:last-child | 匹配每个父元素的 最后一个子元素 |
集合元素 | $(“div:last-child”) |
: only-child | 某元素是它父元素中 的唯一的子元素 则匹配它 |
集合元素 | $(“div:only-child”) |
d)表单对象属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 匹配所有可用元素 | 集合元素 | $(“form :enabled”) |
:disabled | 匹配所有不可用 的元素 |
集合元素 | $(“form :disabled”) |
:checked | 匹配所有被选中的元素 (含单选框,复选框) |
集合元素 | $(“input:checked”) |
:selected | 匹配所有被选中的 选项元素 |
集合元素 | $(“select :selected”) |
4.表单选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 匹配所有可用元素 | 集合元素 | $(“form :enabled”) |
:disabled | 匹配所有不可用 的元素 |
集合元素 | $(“form :disabled”) |
:checked | 匹配所有被选中的元素 (含单选框,复选框) |
集合元素 | $(“input:checked”) |
:selected | 匹配所有被选中的 选项元素 |
集合元素 | $(“select :selected”) |
5.$.each用法
1)处理一维数组
var arr1 = ["a", "b", "c"];
$.each(arr1, function (i, val) {
alert(i);//0 1 2
alert(val);//a b c
});
2)处理二维数组
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function (i, item) {
alert(i);//0 1 2
alert(item);//输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
});
对此二位数组的处理稍作变更之后
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
$.each(arr, function(i, item){
$.each(item,function(j,val){
alert(j);
alert(val);
});
});
alert(j)将输出为0,1,2,0,1,2,0,1,2
alert(val)将输出为a,aa,aaa,b,bb,bbb,c,cc,ccc
3)each处理json数据,这个each就有更厉害了,能循环每一个属性
var obj = { one:1, two:2, three:3};
each(obj, function(key, val) {
alert(key);
alert(val);
});
这里alert(key)将输出one two three
alert(val)将输出one,1,two,2,three,3
这边为何key不是数字而是属性呢,因为json格式内是一组无序的属性-值,既然无序,又何来数字呢。
而这个val等同于obj[key]
4)ecah处理dom元素
$.each("元素集合", function (index, ele) {
index:从0开始的索引
ele:$(ele)表示当前对象
})
Jquery权威指南的更多相关文章
- 跟小静读《jQuery权威指南》——目录
前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...
- 读<jquery 权威指南>[1]-选择器及DOM操作
今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...
- 《jQuery权威指南》学习笔记之第2章 jQuery选择器
2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制 1.代码更简单 示例2-1 使用javascript实现隔行变色 < ...
- 读<jquery 权威指南>[3]-动画
一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...
- 读<jquery 权威指南>[4]-Ajax
一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...
- 读<jQuery 权威指南>[5]-插件
一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...
- 读<jQuery 权威指南>[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...
- 读<jquery 权威指南>[7]-性能优化与最佳实践
一.优化选择器执行速度 1. 优先使用ID选择器和标记选择器 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选 ...
- 1.17学习jquery权威指南
1.ajax方面(东西比较杂,很多相关于.net挂钩的服务器端接触没有实际操作,全部放进来,或许以后当作demo使用) ¥(“body”).load("text.txt"); ...
随机推荐
- Reactor模式与观察者模式
多线程编程常见模式 观察者模式: 单一的观察点,事件单一 反应器模式: 多个观察点,事件不单一(NIO里面的Selector选择器,基于Channel的事件进行多路的IO复用机制) 图-网上都是这张, ...
- 跨平台c++ Coroutine,仿unity3d实现
不多说,贴代码: #include "stdafx.h" #include <list> #include <thread> #include <ch ...
- Centos7 install Openstack - (第三节)添加镜像服务(Glance)
Centos7 install Openstack - (第三节)添加镜像服务(Glance) 我的blog地址:http://www.cnblogs.com/caoguo 该文根据openstack ...
- express 4.x 模板引擎与express.static
前提:要在express中使用模块引擎需要将要使用的模板引擎安装在本项目,当然,express也是要安装的.在下面实例中,我使用的模板引擎是pug(一起叫做jade) 我的目录结构如下: 根目录为st ...
- memcached 学习(一)
memcached 是以LiveJournal 旗下Danga Interactive 公司的Brad Fitzpatric 为首开发的一款软件.现在已成为 mixi. hatena. Faceboo ...
- json 和 pickel 详解
一.json json,用于字符串 和 python数据类型间进行转换 Json模块提供了四个功能:dumps.dump.loads.load 1.json.loads()用于将字符串形式的字典,列表 ...
- 在EXCEL中使用SQL查询
Excel2007及以上版本才有这个功能,2003版本的要么路过学习一下.要么去升级下自己的版本. Microsoft query 用的是 access 语法 如:判断空 oracle ------- ...
- dwr与ssh框架整合教程
(1)dwr与ssh框架整合教程dwr框架介绍. DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开 发人员开发包含AJ ...
- linux 编译,链接和加载
1. 序 最近在折腾各种.so,碰到了一些问题,一开始对于很多错误也没有头绪,茫然不知所措.索性化了一天多时间将<<程序员的自我修养—链接.装载与库>>中部分内容略读了一遍 ...
- 020ARM家族
1.名称:6410.2440.210.A8.ARM9.ARM11.armv7.ARMv6(v:vsersion) 芯片的名称:6410.210.2440都是属于芯片的名称,都是来自三星公司: ARM核 ...