jQuery元素选择与属性操作-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46383723/article/details/107445630

获取元素的常用方法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/jscript" src="js/jquery-1.8.3.js"></script>
		
                <span>icu</span>
		<div>666</div>
		<div>德玛西亚</div>
		<div>弗雷尔卓德</div>
	</head>
	<body>
		
		<script>
                        //获取标签为div的第一个div元素
			var obj = $("div").first();
			console.log(obj);
			//获取标签为div的最后一个div元素
			obj = $("div").last();
			console.log(obj[0]);//将jQuery对象转为DOM对象
			console.log("---------------------------------0");
                        //在html元素中索引标签为div的元素，并依次输出在控制台上
			$("html").find("div").each(function(){
				console.log(this)
			})
			console.log("---------------------------------1");
                        //输出标签为title的上一代父类元素（只返回一代）
			obj = $("title").parent();
			console.log(obj);
                        //这个是返回所有祖辈父类元素
			obj = $("title").parents();
			console.log(obj);
			console.log("---------------------------------2");
                        //返回body标签下的每一个子元素标签
			$("body").children().each(function(){
				console.log(this);
			})
			console.log("----------------------------------3");


                        //next(expr)与prev(expr)都可以匹配相应的标签，括号里面可以输入标签
                        //没有匹配标签，则默认上一个标签。nextAll()与prevAll()同上，，只不过没有匹配时，默认上面全部。         
                  
                        //返回script元素的下一个同级相邻元素
			$("script").next().each(function(){
				console.log(this);
			})
			console.log("----------------------------------4");
                        //返回script元素的下面所有同级元素
			$("script").nextAll().each(function(){
				console.log(this);
			})
			console.log("----------------------------------5");
                        //返回script元素上面的相邻同级元素
			$("script").prev().each(function(){
				console.log(this);
			})
			console.log("----------------------------------6");
                        //返回script元素上面的所有同级元素
			$("script").prevAll().each(function(){
				console.log(this);
			})
		</script>
		
	</body>
</html>

获取相对应name的元素的value值

                <input type="" name="user_name" id="user_name" value="admin" />
		<input type="radio" name="sex" value="0" />男
		<input type="radio" name="sex" value="1" />女
		
		<input type="checkbox" name="hobby" value="1" />篮球
		<input type="checkbox" name="hobby" value="2" />足球
		<input type="checkbox" name="hobby" value="3" />乒乓球
		<select id="province">
			<option value="">请选择</option>
			<option value="001">北京市</option>
			<option value="002">河南省</option>
			<option value="003">河北省</option>
		</select>
		<script>
                        //获取相对应name元素的value值
			var value = $("[name='user_name']").val();
			console.log(value);
			//文本框
			$("[name='user_name']").val("root");
			//单选框
			$("[name='sex']").val(["1"]);//此处value返回的是数组类型
			//多选框
			$("[name='hobby']").val(["1","2"]);
			//下拉列表
			$("#province").val("002");
			
			function tt(){
                                //利用scrollTop方法实现回到顶部操作
				$(document).scrollTop(0);
			}
			
			
		</script>
		<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
		<div onclick="tt()" style="width: 50px;height: 50px;background-color: red;position: fixed;right: 10px;bottom: 10px;cursor: pointer;">
                        //这里定义了一个div，在页面的右下角添加回到顶端按钮
			回到顶端
		</div>