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,群组, ...
随机推荐
- Leetcode：204
编写一个程序判断给定的数是否为丑数.丑数就是只包含质因数 2, 3, 5 的正整数.统计所有小于非负整数 n 的质数的数量.示例:输入: 10输出: 4解释: 小于 10 的质数一共有 4 个, 它们 ...
- 解决 Vim 的 quickfix 插件错误信息乱码问题
将以下代码插入 vim 配置文件即可, function! QfMakeConv() let qflist = getqflist() for i in q ...
- AI tensorflow模型文件
tensorflow模型可以利用tf.train.Saver类保存成文件.一个模型包含下面四个文件. meta文件 存储计算图的protobuf. data-00000-of-00001文件和inde ...
- java中Set的用法
Set集合的特点: 不能存储相同的元素. 同时因为其是一个抽象的接口:所以不能直接实例化一个set对象.(Set s = new Set() )错误 该接口主要继承于Collections接口,所以具 ...
- Java消息队列——JMS概述
一.什么是JMS JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...
- org.yaml.snakeyaml.error.YAMLException: java.nio.charset.MalformedInputException: Input length = 1
项目启动报错2018-12-21 14:06:24.917 INFO 23472 --- [ main] s.c.a.AnnotationConfigApplicationContext : Refr ...
- 【强化学习】用pandas 与 numpy 分别实现 q-learning, saras, saras(lambda)算法
本文作者:hhh5460 本文地址:https://www.cnblogs.com/hhh5460/p/10159331.html 特别感谢:本文的三幅图皆来自莫凡的教程 https://morvan ...
- Node.js配合jQuery UI autocomplete的应用
Node.js擅长的领域为: 不需要很多运算 吞吐量要求高 进消息轻并且要求快 出消息轻并且要求快 网上的例子都是socket.io的,我一直在想到底能用在什么地方?根据node.js的优点(擅长领域 ...
- 反射那点基础-Method
目录 1 获取 Method 1.1 方法 1.2 实例 2 Method 的方法 2.1 Java 方法基础知识 2.2 修饰符相关方法 2.2.1 获取修饰符 2.2.2 判断是否为 defaul ...
- Java面试MySQL的一些问题
MySQL InnoDB存储的文件结构 索引树是如何维护的? 数据库自增主键可能的问题