jQuery （一）选择器
上一章开始了jQuery的安装，这一张需要开始学习选择器了，不然不进行选择，就无法使用jQuery提供的库的功能不是。
常用的，就列举这么多吧
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery选择器</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
//################
//全元素选择器
$("#hide").click(function(){
$("*").hide();
}); //################
//元素选择器
$("#hide").click(function(){
$("p").hide();
}); //################
//元素下的指定class选择器
$("#hide_class2").click(function(){
$("p.init").hide();
}); //################
//P标签下的第一个元素选择器
$("#hide_first").click(function(){
$("p:first").hide();
}); //################
//P标签下的最后一个元素选择器
$("#hide_last").click(function(){
$("p:last").hide();
}); //################
//id元素选择器
$("#hide_id").click(function(){
$("#test").hide();
}); //################
//class元素选择器
$("#hide_class").click(function(){
$(".test2").hide();
}); $("button").click(function(){
alert($(this).parent('div').attr("id"));
}); $("button").click(function(){
alert($(this).parent('div').children('#val2').attr("href"));
}); });
</script>
</head> <body> <button id="hide">全元素选择器进行隐藏</button> <h2>这是一个标题</h2>
<p>P元素-这是一个段落。</p>
<p>P这是另一个段落。</p>
<button id="hide">元素选择器，选择P元素，进行隐藏</button> <p class="init">P这是另一个段落。</p>
<button id="hide_class2">元素下的指定class选择器,进行隐藏</button> <p></P>
<button id="hide_first">P标签下的第一个元素,进行隐藏</button> <p></P>
<button id="hide_last">P标签下的最后一个元素,进行隐藏</button> <p id="test">id元素-这是一个段落。</p>
<button id="hide_id">id选择器，选择id为test的所有标签，进行隐藏(id不能为复数)</button> <p class="test2">class元素-这是一个段落。</p>
<p class="test2">class元素元素-这是一个段落。</p>
<p class="test2">class元素元素-这是一个段落。</p>
<button id="hide_class">class选择器，选择class为test2的所有标签，进行隐藏（class可以为复数）</button> <h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div id = "nihao" >
<a href = "" id = "val" >111</a>
<button>同级获取父节点</button>
</div> <div id = "nihao2" >
<a href = "www.baidu.com" id = "val2" >111</a>
<button>获取兄弟节点</button>
</div> </body>
</html>
这里来讲一个同级td的获取，和父级td的获取；
<table>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>
<a href="" id="val2">1取值</a>
<a href="" id="val">取值2</a>
</td>
</tr> </table>
获取方法：
$(document).ready(function(){
$("#val").click(function(){
//同节点的第一个
alert($(this).siblings(':first').text());
//父节点的同节点的第一个
alert($(this).parent().siblings(':first').text());
});
});
获取同级节点的第几个节点：
var question = $(my).parent().siblings().eq(2).text();
jQuery （一）选择器的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery（选择器）
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器，上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
随机推荐
- 算法：辗转相除法【欧几里德算法（Euclidean algorithm）】
1.来源 设两数为a.b(a>b),求a和b最大公约数(a,b)的步骤如下:用a除以b,得a÷b=q......r1(0≤r1).若r1=0,则(a,b)=b:若r1≠0,则再用b除以 ...
- Python学习笔记014——生成器Generator
1 生成器定义 在Python中,一边循环一边计算的机制,称之为生成器(generator). 生成器是一个迭代器. 含有yield语句的函数是生成器函数,该函数被调用时返回一个生成器对象(yield ...
- PLSQL_统计信息系列01_统计信息的概念和重要性
2014-12-18 Created By BaoXinjian
- Unix环境高级编程(二十一)数据库函数库
本章的内容是开发一个简单的.多用户数据库的C函数库.调用此函数库提供的C语言函数,其他程序可以读取和存储数据库中的记录.绝大部分商用数据库函数库提供多进程同时更新数据库所需要的并发控制,采用建议记录锁 ...
- [转]Win7独立语言包下载
想找个语言包太不容易了 ,全是旧版的,最后不得以...在国外网站找到了下载地址,全部是最新的语言包!自己找对应语言的缩写吧 64-bit (x64) Windows 7 SP1: http://dow ...
- CheckedComboBoxEditExtension
public static class CheckedComboBoxEditExtension { public static void BindData(this CheckedComboBoxE ...
- Django ORM 数据库操作
比较有用 转自 http://blog.csdn.net/fgf00/article/details/53678205 一.DjangoORM 创建基本类型及生成数据库表结构 1.简介 2.创建数据库 ...
- 如何设置Docker容器中Java应用的内存限制
如果使用官方的Java镜像,或者基于Java镜像构建的Docker镜像,都可以通过传递 JAVA_OPTS 环境变量来轻松地设置JVM的内存参数.比如,对于官方Tomcat 镜像,我们可以执行下面命令 ...
- Oracle学习笔记之二，Oracle 11g体系结构
Oracle 11g体系结构概述 实例(Instance),是指一组Oracle后台进程以及在服务器中分配的共享内存区域: 数据库(Database),是由基于磁盘的数据文件.控制文件.日志文件.参数 ...
- 在 Visual Studio 2013 中使用 JavaScript 的 IntelliSense
原本JavaScript直接在页面中引用的时候,智能感知会直接根据js文件的内容来获得提示.但是由于在新的ASP.NET中使用了Bundle,js文件不是直接在页面中引用了,所以智能感知也就出了问题. ...