jQuery学习笔记（六）JQ 一些基本操作代码整理

最新推荐文章于 2022-07-15 17:48:44 发布

JESSE_JAVA

最新推荐文章于 2022-07-15 17:48:44 发布

阅读量321

点赞数 1

分类专栏：前端开发

本文链接：https://blog.csdn.net/weixin_36171533/article/details/79230586

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="jquery.js"></script>
	<script src="1.js"></script>
	<title>JQ属性选择器</title>
</head>
<body>
	<form action="">
		姓名：<input type="text" name="username"><br/>
		密码：<input type="text" name="userpass"><br/>
		性别：<input type="radio" name="sex" checked value="1"/>男
			  <input type="radio" name="sex" value="2"/>女<br/>
			  //$("input[name=sex][value=2]").attr("checked","checked");<br/>
			  //找到name为sex的，并且value为2的<br/>
		个性签名：<textarea name="signed"></textarea></form><br/>
		学历：<select name="edu" id="">
				<option value="0">大学</option>
				<option value="1">小学</option>
				<option value="2">初中</option>
				<option value="3">学前班</option>
			  </select><br/>
		爱好：<input type="checkbox" name="hobby[]" value="0"/>学习
		<input type="checkbox" name="hobby[]" value="1"/>看电视
		<input type="checkbox" name="hobby[]" value="2"/>谈恋爱
		<input type="checkbox" name="hobby[]" value="3"/>接着谈恋爱
		<input type="file" name="pic"><br/>
		<input type="submit"/><input type="reset"/>
	</form>
	<div id="user" class="user green">
		<span>class包含green的元素[class~=green]</span>
	</div>
	<div id="user-id2" class="husorangewhf">
		<span>class包含orange的元素div[class*=orange]")*代表是通配符</span>
	</div>
	<div id="user-id3">
		<span>用户ID为3的相关信息</span>
	</div>
	<div id="user-id4">
		<span>用户ID为4的相关信息</span>
	</div>
	<button name="aa-id5">点击我</button>
	第一个UL
	<ul>
		<h2>世界足球队列表</h2>
		<p>获取偶数：li:even 下面字体加粗</p>
		<p>获取奇数： li:odd 下面字体倾斜</p>
		<li>中国(li元素第一个是黄色)</li>
		<li class="us">美国($("li:not('.us')").css("background","#ccc");)</li>
		<li>日本</li>
		<li class="dyz">德意志(点击我会隐藏)</li>
		<li>英国</li>
		<li>韩国</li>
		<li>菲律宾</li>
		<li>越南</li>
		<li>法兰西(li元素最后一个是20号字体)</li>
	</ul>
	第二个UL
	<button id="bt1">点击我会显示P元素</button>
	<button id="bt2">切换显示和隐藏第二个UL</button>
	<button id="bt3">后面添加一个li元素</button>
	<button id="bt4">前面添加一个li元素</button>
	<button id="bt5">删除ul2元素</button>
	<button id="bt6">获取标签的值:)</button>
	<ul name="ul2">
		<li>点击我会一个个消失</li>
		<li>点击我会一所有li消失</li>
		<li>孙悟空</li>
		<li>唐僧</li>
		<li>刘德华</li>
		<li>周杰伦</li>
	</ul>
	<button id="bt1">点击我会显示P元素</button>
</body>
</html>

JS部分

$(function(){
	//找到input
	//找到name为username值得元素
	$("input[name=username]").css("border","1px solid red").focus(function(){
		$("input[name=username]").css("border","5px solid blue");
	});
	//找到input带有checked属性的
	$("input[checked]").click(function(){
		alert("我被选中了");
	})
	//找到名称以user开头的元素
	$("input[name^=user]").css("backgroundColor","#ccc");

	//找到id的属性值当中包含userid的内容
	$("div[id|=user]").css("color","red");

	//找到name名称以id5结尾的
	$("button[name$=id5]").click(function(){
		alert("这个元素是以id5结尾的元素");
	});

	//找到属性不等于
	//$("input[type!=text]").css("background","yellow");
	
	//找到class属性包含green的元素
	$("div[class~=green]").css("color","green");

	//找到某一个元素的name包含orange的元素
	$("div[class*=orange]").css("color","orange");

	//找到name为sex的，并且value为2的
	$("input[name=sex][value=2]").attr("checked","checked");

	/*-----------过滤选择器----------*/

	//找到索引的li
	$("li").css("color","red");

	//找到第一个li
	$("li").first().css("color","yellow");

	// $("li:first").css("color","yellow");

	//找到最后一个li
	$("li:last").css("font-size","20px");

	//找到class不是us的
	$("li:not('.us')").css("background","#ccc");

	//找到li的偶数的所有元素
	$("li:even").css("font-weight","bold");

	//找到li元素技术的元素
	$("li:odd").css("font-style","oblique");

	//找到h1--h6标签
	$(":header").css("color","red");

	//找到索引为7的li
	// $("li:eq(7)").css("background","black");

	//找到索引大于7的
	// $("li:gt(7)").css("background","#ccc");
	
	//单向消失
	$("li[class=dyz]").click(function(){
		$("li[class=dyz]").hide();
		
	});

	//元素批量消失
	$("li").click(function(){
		$(this).hide();
		
	});

	//li元素会显示
	$("button[id=bt1]").click(function(){
		$("li").show(300);
	});

	//切换元素
	$("button[id=bt2]").click(function(){
		$("ul[name=ul2]").toggle(1000);
	});

	//在ul2中的li追加一个li元素
	$("button[id=bt3]").click(function(){
		$("ul[name=ul2]").append("<li>这是新增加的内容</li>");
	});
	
	//在ul2的开头增加li元素
	$("button[id=bt4]").click(function(){
		$("ul[name=ul2]").prepend("<li>这是开头新增加的元素</li>");
	});

	//删除ul2元素
	$("button[id=bt5]").click(function(){
		$("ul[name=ul2]").remove(300);
	});

	//获取标签的值
	$("button[id=bt6]").click(function(){
		alert($("button[id=bt6]").html());
		$("button[id=bt6]").html("然后我就变性了");
		$("div[id=user-id4]").text("hello,word");
	});

	//.attr可以为所有的选定元素增加样式(可以设置多个属性)
	$("li").attr({"name":"test","name1":"test1"});

	//在ul2外面包裹一个div层
	$("ul[name=ul2]").wrap("<div></div>");
	//在ul2外面包裹一个class层
	// $("ul[name=ul2]").unwrap($(".box"));
})

JESSE_JAVA

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（六）JQ 一些基本操作代码整理

HTML部分 JQ属性选择器姓名：密码：性别：男女 //$("input[name=sex][value=2]").attr("checked","checked"); //找到name为sex的，并且value为2的个性签名：学历：大学小学初中学前班
复制链接

扫一扫