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,群组, ...
随机推荐
- Linux系统高树攀登之路
Linux系统高树攀登之路 Linux作为一种操作系统已经发展了这么长的时间,已然有了很多的“粉丝”,其中不乏有“通天之力”的Linux大牛,也有能在Linux世界里“快乐畅游”的强者,同时也有想要攀 ...
- 6.05-btc
import requests from lxml import etree import json class BtcSpider(object): def __init__(self): self ...
- oracle 多版本
并发控制 concurrency control 数据库提供的函数集合,允许多个人同时访问和修改数据. 锁(lock)是Oracle管理共享数据库资源并发访问并防止并发数据库事务之间“相互干涉”的核心 ...
- UVA11584-Partitioning by Palindromes（动态规划基础）
Problem UVA11584-Partitioning by Palindromes Accept: 1326 Submit: 7151Time Limit: 3000 mSec Problem ...
- PHP小接
一种是innodb,一种是myisam,两者的主要区别是①myisam不支持事务处理,而innoDB支持事务处理 ②myisam 不支持外键,innoDB支持外键 ③myisam支持全文检索,而inn ...
- Nginx缓存服务
Nginx缓存服务 1.缓存常见类型 2.缓存配置语法 3.缓存配置实践 4.缓存清理实践 5.部分页面不缓存 6.缓存日志记录统计 通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后 ...
- 【Vuex】mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性: import { mapGetters } from 'vuex' export default { // ...
- 001_HTTP参数中Etag的重要性
在研究tornado时,有个Etag比较好奇,从网上查询摘录如下:
- Spring Security（二）：一、Preface（前言）
Spring Security is a powerful and highly customizable authentication and access-control framework. I ...
- [USACO5.3]校园网Network of Schools
题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...