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值不能重复在文档中只能有一个 ...
随机推荐
- linux修改 时间 时区
linux系统修改系统时间与时区 | 浏览:3486 | 更新:2014-06-18 19:36 1 2 3 4 5 6 7 分步阅读 有装过Linux系统的人,可能都会有这样的经历,就是该机器安装w ...
- 机器学习的敲门砖:手把手教你TensorFlow初级入门
摘要: 在开始使用机器学习算法之前,我们应该首先熟悉如何使用它们. 而本文就是通过对TensorFlow的一些基本特点的介绍,让你了解它是机器学习类库中的一个不错的选择. 本文由北邮@爱可可-爱生活 ...
- Android API之android.content.AsyncQueryHandler
android.content.AsyncQueryHandler A helper class to help make handling asynchronous ContentResolver ...
- maven 发布到仓库
到nexus中看到的仓库地址 <distributionManagement> <repository> <id>releases</id> <n ...
- ORM轻量级框架---ActiveAndroid
ORM即Object-Relational Mapping,对象关系映射.简单理解就是把我们Java的对象与数据库里面的记录进行映射,可以把实体对象持久化到数据库中,也能把查询到的记录映射成Java对 ...
- .NET操作XML文件之泛型集合的序列化与反序列化
程序集:System.Xml.Serialization(在 System.Xml.Serialization.dll 中) 命名空间:System.Xml.Serialization 公共函数代码: ...
- CListCtrl获取列数
CListCtrl获取列数 // m_List是一个CListCtrl CHeaderCtrl* pHeaderCtrl = m_List.GetHeaderCtrl();if(pHeaderCtrl ...
- java使用ssh访问Linux的项目jscraft
一.gradle地址 // https://mvnrepository.com/artifact/com.jcraft/jsch compile group: 'com.jcraft', name: ...
- js cookie库
顺手摘下来 /** * @desc 设置Cookie * @param {String} name * @param {String} value * @param {Number} expires ...
- CentOS安装Webmin
解析:Webmin是目前功能最强大的基于Web的Unix系统管理工具.管理员通过浏览器访问Webmin的各种管理功能并完成相应的管理动作.目前 Webmin支持绝大多数的Unix系统,这些系统除了各种 ...