jquery选择器练习
<!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"));
})
} //返回第一个input元素
var Init9 = function () {
//$("input[class][name^='none']").each(function () {
// alert($(this).attr("name"));
//})
$("input.cls1[name^='none']").each(function () {
alert($(this).attr("name"));
})
}
$(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 id="none6" class="cls1" name="none6" />
<input name="none3" />
</body>
</html>
jquery选择器练习的更多相关文章
- JQuery 选择器
选择器是JQuery的根基,在JQuery中,对事件的处理,遍历DOM和AJAX操作都依赖于选择器.如果能够熟练地使用选择器,不仅能简化代码,而且还可以事半功倍. JQuery选择器的优势 1.简洁的 ...
- jQuery的案例及必知重要的jQuery选择器
Jquery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 Jquery的优势 体积小,压缩后只有100KB左右 l强大的选择器 出 ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- jQuery选择器和选取方法 http://www.cnblogs.com/MaxIE/p/4078869.html
我们已经使用了带有简单Css选择器的jQuery选取函数:$().现在是时候深入了解jQuery选择器语法,以及一些提取和扩充选中元素集的方法了. 一.jQuery选择器 在CSS3选择器标淮草案定义 ...
- 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...
- 深入学习jQuery选择器系列第八篇——过滤选择器之伪子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 本文是子元素选择器的续篇,主要介绍关于nth-of-type()选择器的内容.该部分内容并非没有出现在<锋利的 ...
- 深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
× 目录 [1]简单属性 [2]具体属性 [3]条件属性 前面的话 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选 ...
- 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器
× 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...
- jQuery-1.9.1源码分析系列（二）jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- jQuery-1.9.1源码分析系列（二）jQuery选择器续1
在分析之前说一点题外话. ownerDocument和 documentElement的区别 ownerDocument是Node对象的一个属性,返回的是某个元素的根节点文档对象:即document对 ...
随机推荐
- format格式化字符串
假如想要表达这样一条语句:李明今年十二岁 输出这样一条语句 name = 'LiMing' age = 12 print( name + 'is' + age + 'years old') #输出 L ...
- MySql 利用crontab实现MySql定时任务
MySql 利用crontab实现MySql定时任务 by:授客 QQ:1033553122 适用平台 任意myslq版本数据库 操作方法 登陆到数据库系统所在的linxu系统 第一步:新建名为cro ...
- 牛客网 Java 工程师能力评估 20 题 - 详解
牛客网 Java 工程师能力评估 20 题 - 详解 不知在看博客的你是否知道 牛客网,不知道就太落后了,分享给你 : 牛客网 此 20 题,绝对不只是 20 题! 免责声明:本博客为学习笔记,如有侵 ...
- LeetCode题解之Insertion Sort List
1.题目描述 2.题目分析 利用插入排序的算法即可.注意操作指针. 3.代码 ListNode* insertionSortList(ListNode* head) { if (head == NUL ...
- 安卓ADB命令
查看连接的设备 adb devices -l FastBoot常用命令: fastboot erase system #擦除system分区 fastboot erase boot #擦除 ...
- Oracle EBS PO rcv_shipment_headers 数据缺失
Datafix : How to Recreate Missing Receipt or Shipment Header Records (RCV_SHIPMENT_HEADERS table) (D ...
- 【SVN】Linux下svn搭建配置全过程——初学者轻松上手篇
版本控制主要用到的是git和svn,其中svn界面化使用操作简单,本篇简单介绍SVN搭建配置全过程. 1. 下载并安装 yum install subversion 查看版本 svnserve --v ...
- Django之cookie&session
cookie Cookie 是在 HTTP 协议下,服务器或脚本可以维护客户工作站上信息的一种方式.Cookie 是由 Web 服务器保存在用户浏览器(客户端)上的小文本文件,它可以包含有关用户的信息 ...
- 大数据开发实战：HDFS和MapReduce优缺点分析
一. HDFS和MapReduce优缺点 1.HDFS的优势 HDFS的英文全称是 Hadoop Distributed File System,即Hadoop分布式文件系统,它是Hadoop的核心子 ...
- Windows XP添加硬盘后系统不能识别（没有任何反应）
解决方法: 1.右键我的电脑--管理--设备管理器--IDE ATA/ATAPI控制器,启用次要IDE通道和主要IDE通道,打开属性,在高级设置里,将设备类型设置为自动检测,重启. 2.硬盘格式为GP ...