越来越少人用JQuery,但你就不学了吗?(2)

如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)

越来越少人用JQuery,但你就不学了吗?(2)_第1张图片

Jquery选择器

​ 和使用js操作Dom一样,获取文档中的节点对象是很频繁的一个操作,在jQuery中提供了简便的方式供我们查找|定位元素,称为jQuery选择器,选择器可以说是最考验一个人 jQuery 功力的地方,通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。

​ jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的,具体分类如下。基础选择器掌握即可 ,其他用到再查阅。

基础选择器

选择器 名称 举例
id选择器 #id $("#testDiv")选择id为testDiv的元素
元素名称选择器 element $(“div”)选择所有div元素
类选择器 .class $(".blue")选择所有class=blue的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,selector2,selectorN $("#testDiv,span,.blue")同时选中多个选择器匹配的元素
<style type="text/css">
	.blue{
		background: blue;
	}
style>

<body>
	<div id="mydiv1">id选择器1<span>span中的内容span>div>
	<div id="mydiv2" class="blue">元素选择器div>
	<span class="blue">样式选择器span>
body>

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
	// id选择器
	console.log("======id====");
	var idSelecter = $('#mydiv1');
	console.log(idSelecter.html());
	console.log(idSelecter.text());	
	// 元素选择器
	console.log("======name====");
	var nameSe = $('div'); // 有多个div元素
	nameSe.each(function(){
		// this是dom对象,$(this)是jquery对象
		console.log($(this).text());
	});
	// 类选择器,class
	console.log("======class====");
	var classSe = $('.blue'); // 有多个class=blue的元素
	classSe.each(function(){
		console.log($(this).text());
	});
	// 通用选择器:*
	 console.log("======所有元素====");
	 var all = $("*");
	 console.log(all.length);
	// 组合选择器
	console.log("======组合====");
	var unionSe = $('span, .blue,div');
	unionSe.each(function(){	
		console.log($(this).text());
	});
script>

层次选择器

选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素

<html>
	<head>
		<meta charset="utf-8">
		<title>层次选择器title>
		<script src="js/jquery-3.4.1.js" type="text/javascript">script>
		<style type="text/css">
			.testColor{
				background: green;
			}
			.gray{
				background: gray;
			}
		style>
	head>
	<body>
		<div id="parent">层次择器
			<div id="child" class="testColor">父选择器
				<div class="gray">子选择器div>
				<img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
				<img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
			div>	
			<div>
				选择器2<div>选择器2中的divdiv>
			div>
		div>
	body>
	<script type="text/javascript">
		console.log("=========后代选择器-选择所有后代=====");
		var ancestorS = $('#parent div');
		ancestorS.each(function(){
			console.log($(this).text());
		});
        
		console.log("=========子代选择器-选择儿子辈=====");
		var child = $('#parent>div');
		child.each(function(){
			console.log($(this).text());
		});
        
		console.log("=========相邻选择器=====");
		var pre_next = $(".gray + img");
		console.log(pre_next.length);
        
		console.log("=========同辈选择器,其后,(弟弟)=====");
		var pre_siblings = $(".gray ~ img");
		console.log(pre_siblings.length);
	script>
html>

表单选择器

Forms 名称 举例
表单选择器 :input 查找所有的input元素:$(":input");
注意:会匹配所有的input、textarea、select和button元素。
文本框选择器 :text 查找所有文本框:$(":text")
密码框选择器 :password 查找所有密码框:$(":password")
单选按钮选择器 :radio 查找所有单选按钮:$(":radio")
复选框选择器 :checkbox 查找所有复选框:$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮:$(":submit")
图像域选择器 :image 查找所有图像域:$(":image")
重置按钮选择器 :reset 查找所有重置按钮:$(":reset")
按钮选择器 :button 查找所有按钮:$(":button")
文件域选择器 :file 查找所有文件域:$(":file")

<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证title>
		<script src="js/jquery-3.4.1.js" type="text/javascript">script>
	head>
	<body>
		<form id='myform' name="myform"  method="post">		
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
				 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
			爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
				 <input type="checkbox" name="ufav" value="爬床"/>爬床
				 <input type="checkbox" name="ufav" value="代码"/>代码<br />
			来自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择option>
					<option value="0">北京option>
					<option value="1">上海option>
				select><br />
			简介:<textarea rows="10" cols="30" name="uintro">textarea><br />
			头像:<input type="file"  /><br />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png" 
                   width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交button>
			<button type="reset" >重置button>		
			
		form>
	body>
html>
<script type="text/javascript">
	function checkForm(){
		// 获取 所有的表单元素
		$(":input").each(function(){
			// console.log($(this)[0]);
			console.log($(this)[0].tagName);
		})
		console.log("------+++++++++++++++++++++--------")
		// 获取 text
		console.log("text-->" + $(":text").length); // 1
		// 获取 password
		console.log("password-->" + $(":password").length); // 1
		// 获取radio
		console.log("radio-->" + $(":radio").length); // 2
		// 获取checkbox
		console.log("checkbox-->" + $(":checkbox").length); // 3
		// 获取file
		console.log("file-->" + $(":file").length); // 1
		// 获取按钮
		console.log("button-->" + $(":button").length); // 2
		// 获取submit按钮
		console.log("submit-->" + $(":submit").length); // 1
		// 获取image按钮
		console.log("image-->" + $(":image").length); // 1
		// 获取reset按钮
		console.log("reset-->" + $(":reset").length); // 1
		return false;		
	}
script>
文章持续更新,可以微信搜索「 云璈公子 」阅读,回复【资料】【面试】【简历】有我准备的一线大厂面试资料和简历模板,同时我的GitHub https://github.com/1170300826/JavaInterview 有互联网一线大厂面试指南。

你可能感兴趣的:(乐字节,乐字节架构,乐字节java,jquery,js,javascript,java,bug)