jquery选择基础
1 元素选择器
之前不熟悉的是如：
$("input.cls1");
这种用法
2 属性选择器
包含name属性的input元素，
如 $("input[name]");
name属性以xx结尾的input元素
$("input[name$=xx]");
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
//选择器总结
//jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。
//$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾
//$("input#none5") 不能有空格
//$("input.cls1") 不能有空格
//$("input:first")
//$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头
//$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头 //form所有后代input元素
var Init1 = function () {
$("form input").each(function () {
alert($(this).attr("name"));
})
};
//form所有input子元素
var Init2 = function () {
$("form > input").each(function () {
alert($(this).attr("name"));
})
};
//紧接form后的所有input同辈元素
var Init3 = function () {
$("form ~ input").each(function () {
alert($(this).attr("name"));
}) //$("input[name='none2'] ~ input").each(function () {
// alert($(this).attr("name"));
//})
};
//紧接form的第一个input同辈元素
var Init4 = function () {
$("form + input").each(function () {
alert($(this).attr("name"));
})
};
//返回属性name包含none的所有input元素
var Init5 = function () {
$("input[name*='none']").each(function () {
alert($(this).attr("name"));
})
}
//返回class为cls1的所有input元素
var Init6 = function () {
//alert($("input.cls1").attr("name"));
$("input.cls1").each(function () {
alert($(this).attr("name"));
})
}
//返回id为none5的所有input元素
var Init7 = function () {
//alert($("input.cls1").attr("name"));
$("input#none5").each(function () {
alert($(this).attr("name"));
})
}
//返回第一个input元素
var Init8 = function () {
$("input:first").each(function () {
alert($(this).attr("name"));
})
} var log = function(para){
console.log(para);
} //返回第一个input元素
var Init9 = function () {
//$("input[class][name^='none']").each(function () {
// alert($(this).attr("name"));
//})
// alert('xxxxxxxxxxxxxx');
$("input.cls1[name^='none']").each(function () {
alert($(this).attr("name"));
}); var len = $("input.cls1").length;
console.log('input.cls1 的len:'+len);
//基本选择器 id选择器，实际上也可以加上元素名称，与$("input.cls1")这种形式做对比
var len2 = $("input#cls1").length;
console.log('input#cls1 的len2:'+len2);
//基本选择器 class选择，
//var len3 = $("button.cls1").length;
//console.log('button.cls1 的len3:'+len3); // 属性选择器 查找所有含有 id 属性的 div 元素
var divid = $("div[id]");
log('divid:'+divid);
divid.css('background','pink').attr('display','block').html('div[id]的元素一共有'+divid.length+"个"); // 属性选择器 匹配给定的属性是以某些值开始的元素
var divid2 = $("div[id^=test2]");
log('div[id^=test2]的个数:'+divid2.length); // 属性选择器 匹配给定的属性是以某些值结尾的元素
var divid3 = $("div[id$=test2]");
log('div[id$=test2]的个数:'+divid3.length); // 属性选择器 复合属性选择器，需要同时满足多个条件时使用。
// 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input
var lenA = $('input[id][name$=man]').length;
var lenB = $("input[id][name$='man']").length;
//以上这两种写法都可以，推荐使用第二种
log('lenA:'+lenA);
log('lenB:'+lenB);
}
$(Init9);
</script>
</head>
<body>
<input name="none2" />
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input class="cls1" name="none" />
<input class="cls1" name="none5" />
<input type="button" class="cls1" name="none5" value="xxx"/>
<input class="cls1" name="none44" id="cls1" />
<input id="none6" class="cls1" name="none6" />
<input name="none3" />
<br>
属性选择器
<div>
<p>Hello!</p>
</div>
<div id="test2">test....</div>
<div id="test2ABC">test....</div>
<div id="BCDtest2">test....</div>
<div id="test3xx">test....</div> 属性选择器之 复合属性选择器
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
</body>
</html>
jquery选择基础的更多相关文章
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
- jQuery语法基础&选择器
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- jQuery的基础语法实例
jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...
- jQuery之基础核心（demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- 第一百六十三节，jQuery，基础核心
jQuery,基础核心 一．代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
随机推荐
- oracle 多版本
并发控制 concurrency control 数据库提供的函数集合,允许多个人同时访问和修改数据. 锁(lock)是Oracle管理共享数据库资源并发访问并防止并发数据库事务之间“相互干涉”的核心 ...
- Python字符串 u"string",r"string"的写法含义
1.字符串前加 u = unicode编码 例:u"我是含有中文字符组成的字符串." 作用:后面字符串以 Unicode 格式 进行编码,一般用在中文字符串前面,防止因为源码储存格 ...
- 【转】TCP和SOCKET关系
socket是TCP/IP协议的API TCP是数据的介质,Socket是TCP的介质. 查了一下RFC文档,Socket是RFC147,更新时间是1971年.TCP是RFC793,更新时间是19 ...
- 爬取伯乐在线文章（五）itemloader
ItemLoader 在我们执行scrapy爬取字段中,会有大量的CSS或是Xpath代码,当要爬取的网站多了,要维护起来很麻烦,为解决这类问题,我们可以根据scrapy提供的loader机制. 导入 ...
- zookeeper的原理，5分钟了解zookeeper
一 .Zookeeper功能简介 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现.分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/ ...
- Dubbo -- 系统学习 笔记 -- 示例 -- 参数验证
示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 参数验证 参数验证功能是基于JSR303实现的,用户只需标识JSR303标准的验证Annotation,并通过声明filter来 ...
- python之type函数
python 的type 函数 的介绍的 下面就是此函数的参数 三个参数的意义 '''type(class_name, base_class_tuple, attribute_dict)cla ...
- [MicroPython]TPYBoardv102播放音乐实例
0x00前言 前段时间看到TPYBoard的技术交流群(群号:157816561,)里有人问关于TPYBoard播放音乐的问题.最近抽空看了一下文档介绍,着手做了个实验.更多MicroPython的教 ...
- Windows安裝PHP環境
Windows安裝PHP環境的準備工作:httpd-2.2+php-5.4+mysql-5.5 第一步是安裝相對應的三個軟件,只要略懂一些英文單詞,安裝是沒有問題的,所以此處略過三個文件的安裝過程,直 ...
- git branch 分支操作
一.git分支命令 Git鼓励大量使用分支: 查看分支:git branch 创建分支:git branch <name> 切换分支:git checkout <name> 创 ...