博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Jquery权威指南
阅读量:4986 次
发布时间:2019-06-12

本文共 3894 字,大约阅读时间需要 12 分钟。

1.Radio

$("#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 匹配给定的类名 集合元素 $(“.”)
E 匹配给定的标签名 集合元素 $(“div”)
* 匹配所有元素 集合元素 $(“*’)
E, .class, E… 匹配给定的集合 集合元素 $(“span, .ti”)

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,2alert(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)表示当前对象})

转载于:https://www.cnblogs.com/cnki/p/5315211.html

你可能感兴趣的文章
Cordova开发App使用USB进行真机调试
查看>>
element popover源码
查看>>
10.8
查看>>
多语言切换
查看>>
Heartbeat(注意iptables和selinux的问题)
查看>>
[FZYZOJ 1859] 建桥
查看>>
osgearth+vs2010安装
查看>>
uva227puzzle模拟
查看>>
决定360浏览器以极速模式、兼容模式、IE标准模式打开的代码
查看>>
Java 文件上传与下载、email
查看>>
数据库中函数和存储过程的区别
查看>>
PHP复习第二天-数组
查看>>
bzoj 2741 [FOTILE模拟赛] L
查看>>
8 个必备的PHP功能开发
查看>>
iOS开发之资讯类App常用分类控件的封装与实现(CollectionView+Swift3.0+)
查看>>
在JS中:如何让三个未知数倒序显示,求100~1000以内的水仙花数方法:
查看>>
C++/CLI中的const literal initonly 友元(转)
查看>>
Android -- 官方下拉刷新SwipeRefreshLayout
查看>>
C语言强化——学生管理系统
查看>>
Linux下JDK1.6升级1.8版本
查看>>