之前想通过在选定的某元素的基础上,在进行jquery的css选择, 搜索了子选择器,链式选择器,范围选择器、变量选择器都不对,今天慢慢找了下,发现这个功能叫选择器的上下文。。。
平时看的菜鸟教程,有些内容不全,没介绍这个context参数。官方的api上写了。
https://api.jquery.com/jQuery/#jQuery-selector-context
jQuery( selector [, context ] )
-
selector
Type: Selector
A string containing a selector expression
-
context
Type: Element or jQuery or Selector
A DOM Element, Document, jQuery or selector to use as context
举个例子,想在选中的id="test"的p标签的基础上,再去选择p标签内的span标签,就可以用下面这种写法:
<script>
//先选中id=test的p标签
var p = $("#test");
//再以p标签为基础选中p标签内的span标签
$("span",p);
</script>
完整代码:
可以用菜鸟教程的例子测试:
https://www.runoob.com/try/try.php?filename=tryjquery_hide_id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var p = $("#test");
$("button").click(function(){
$("span",p).hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<span>span标签上</span>
<p id="test">这是另外一个段落
<span>span标签</span>
</p>
<button>点我</button>
</body>
</html>