Home >Web Front-end >JS Tutorial >Use of jQuery selectors and hierarchical selectors
The example in this article shares the specific implementation code of the jQuery selector for your reference. The specific content is as follows
1. Basic selector
<html>
<head>
<meta charset="utf-8">
<title>jQuery基本选择器</title>
<script type="text/javascript" src="js/jquery-1.x.js"> </script>
</head>
<body>
<p id="idp">DOM对象与jQuery对象的相互转化</p>
<p class="classp">jQuery对象不能直接使用DOM对象的方法，</p>
<p class="classp">但可以通过将jQuery对象转换成DOM对象后再调用其方法。</p>
<span class="classSpan">基本选择器是jQuery中最常用的选择器</span>
<script type="text/javascript">
$(function(e){
$("#idp").css("color","blue");
$(".classp").css("background-color","#dddddd");
$("span").css("background-color","gray").css("color","white");
$("*").css("font-size","20px");
$("#idp,.classSpan").css("font-style","italic");
});
</script>
</body>
</html>
2. Level selector
<html>
<head>
<meta charset="utf-8">
<title>jQuery层次选择器</title>
<script type="text/javascript" src="js/jquery-1.x.js"> </script>
</head>
<body>
<p>
搜索条件<input name="search" />
<form>
<label>用户名:</label>
<input name="useName" />
<fieldset>
<label>密 码:</label>
<input name="password" />
</fieldset>
</form>
<hr/>
身份证号：<input name="none" /><br/>
联系电话：<input name="none" />
</p>
<script type="text/javascript">
$(function(e){
$("form input").css("width","200px");
$("form > input").css("background","pink");
$("label + input").css("border-color","blue");
//$("label").next("input").css("border-color","blue");
$("form ~ input").css("border-bottom-width","8px");
//$("form").nextAll("input").css("border-bottom-width","4px");
$("*").css("padding-top","3px");
});
</script>
</body>
</html>
Effect Picture
# The above is the entire content of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support the PHP Chinese website.
For more articles related to the use of jQuery selectors and hierarchical selectors, please pay attention to the PHP Chinese website!