浅谈jQuery HTML DOM操作及选择器

jQuery介绍

jQuery 是一个JavaScript函数库。支持HTML元素选取和操作、CSS操作、JS特效与动画、DOM处理、Ajax等。导入jQuery就像导入一段外部js代码一样简单，可以使用MS或Google的CDN进行加载。

Jquery核心

​ "$"符号在 jQuery 中代表对jQuery 对象的引用, "jQuery"是核心对象.
​ 通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

<!--引入jquery文件 -->
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
			//获取元素对象
			var div=$("#mydiv");
			console.log(div);
			var div2=jQuery("#mydiv");
			console.log(div2);
		</script>

jQuery选择器

1.基础选择器

选择器	名称	举例
id 选择器	#id	$("#testDiv")选择 id 为 testDiv 的元素
元素名称选择器	element	$(“div”)选择所有 div 元素
类选择器	.class	$(".blue")选择所有 class=blue 的元素
选择所有元素	*	$("*")选择页面所有元素
组合选择器	selector1, selector2, selectorN	$("#testDiv,span,.blue")同时选中多个选择器匹配的元素

<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		<script type="text/javascript">
			//id选择器		#id属性值  如果出现多个同名ID，只会获取第一个
			var mydiv=$("#mydiv1")
			console.log(mydiv);
			//元素名称选择器		标签名/标签名	
			var span=$("span");
			console.log(span);
			//类选择器				.class属性值	
			var blue=$(".blue");
			console.log(blue);
			//选择所有元素	*
			var eles=$("*");
			console.log(eles);
			//组合选择器	
			var elements=$("#mdiv1,.blue,span");
			console.log(elements);//会去重

2.属性选择器：

CSS模式	jQuery模式	描述
input[name]	$('input[name]')	获取具有这个属性的DOM元素
input[name=XXX]	$('input[name=XXX]')	获取具有属性且属性值为XXX的DOM元素

//([属性名])∗∗​选择设置过指定属性名的元素∗∗([属性名=属性值])
​//选择设置过指定属性名为指定属性值的元素
<div id="mydiv1" class="red">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		<script type="text/javascript">
			//选择设置过指定属性名的元素
			var spans=$("[class]");
			console.log(spans);
			//选择设置过指定属性名为指定属性值的元素
			var cls=$("[class='blue']");
			console.log(cls);
		</script>

3.层次选择器

选择器	名称	举例
后代选择器	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 元素

 <div id="grendfather">
			 <div id="parent">
					爸爸
					<div id="child">
						<p>大儿子</p>
						<p>小女儿</p>
					</div>
			 </div>
			 <div id="uncle">
					叔叔
					<div id="child">
						<p>大女儿</p>
						<p>小儿子</p>
					</div>
			 </div>
			 <div id="anut">
			 	婶婶
			 </div>
		 </div>
		 
		 <script type="text/javascript">
		 	
			//后代选择器（空格)$("#parent div")选择id为parent的元素的所有div元素
			var par=$("#grendfather div");
			console.log(par);
			//子代选择器	parent > child（大于号）$("#parent>div")选择id为parent的直接div子元素
			var zidai=$("#grendfather > div");
			console.log(zidai);
			//相邻选择器	prev + next（加号）	$(".blue + img")选择css类为blue的下一个img元素 （选择相邻的下一个指定元素）
			var xl=$("#parent + div");
			console.log(xl);
			//同辈选择器	prev ~ sibling（波浪号）$(".blue ~ img")选择css类为blue的之后的img元素
			var tp=$("#parent ~ div");
			console.log(tp);
		 </script>

4.表单选择器

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")

<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="爬床" checked="checked"/>爬床
				 <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>
		<script type="text/javascript">
			//:input选择所有的表单元素，包括input标签、select标签、textarea标签及button标签
			var inputs=$(":input");
			console.log(inputs);
			//元素选择器 input
			var inpts=$("input");
			console.log(inpts);
			//:checkbox	选择所有的复选框
			var checkbs=$(":checkbox");
			console.log(checkbs);
			//选择被选中的复选框
			var ches=$(":checkbox:checked");
			console.log(ches);
			//:checked	选择所有被选中的元素（单选框、复选框、下拉框）
			var checks=$(":checked");
			console.log(checks);
			//:selected	选择所有被选中的元素 （下拉框）
			var seles=$(":selected");
			console.log(seles);
			//	:eq(index)	匹配下标1的复选框
			var ck=$(":checkbox:eq(1)");
			console.log(ck);
			// :gt(index)	匹配下标大于指定值的元素
			var gts=$("[name='ufav']:gt(0)");
			console.log(gts);
		</script>

jQuery HTML DOM操作

1.获取内容和属性

方法	说明
text()	返回所选元素的文本内容
html()	返回所选元素的内容（包括HTML标签）
val()	返回表单字段的值
attr(params)	用于获取属性值。对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。1.如果有指定相应的属性，返回指定属性值。2.如果没有指定相应的属性，返回值是空字符串。
prop(params)	用于获取属性值。对于HTML元素自定义的DOM属性，在处理时，使用 attr 方法。1.如果有指定相应的属性，返回指定属性值。2.如果没有指定相应的属性，返回值是 undefined。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                alert($("#baidu").attr("href"));
            });
        });
    </script>
</head>
<body>
    <p><a href="http://www.baidu.com" id="baidu">百度</a></p>
    <button>显示href属性的值</button>
</body>
</html>

2.操作元素的样式

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,”样式名”)	修改class属性的值，修改样式
addClass(“样式名”)	添加样式名称
css(“具体样式名”,“样式值”)	添加具体的样式 (相似style属性的样式)
removeClass(class)	移除样式名称

<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
		<div id="conRed">大红色</div>
		<div id="remove" class="blue larger">天蓝色</div>
		<script type="text/javascript">
			//attr("class")	 获取class样式名 
			var className=$("#conBlue").attr("class");
			console.log(className);
			//attr("class","样式名")	设置class样式名 （会将原本的样式移除，设置新的样式）
			$("#conRed").attr("class",className);
			//addClass("样式名")	添加样式名 
			//（会保留的原有的样式；如果出现相同属性的样式，则以在style标签中后定义的样式名为准）
			$("#conRed").addClass("red");
			//设置具体的样式
			$("#conRed").css("color","white");
			//设置多个样式
			$("#remove").css({"background":"pink","font-size":"14px"});
			
		</script>

3.操作元素的值

方法	说明
html()	获取元素的 html 内容
html(“html,内容”)	获取元素的文本内容，不包含 html
text(“text 内容”)	设置元素的文本内容，不包含 html
val()	获取元素 value 值
val(‘值’)	设定元素的 value 值

<h3><span>html()和text()方法设置元素内容</span></h3>
		<div id="html"></div>
		<div id="text"></div>
		<input type="text" name="uname" value="oop" />
		<script type="text/javascript">
			//获取非表单元素 取值
			var htmlCon=$("h3").html();
			console.log(htmlCon);
			var textCon=$("h3").text();
			console.log(textCon);
			//非表单元素  赋值
			$("#html").html("hello");
			$("#text").text("hello");
			//添加内容
			$("#html").html("<h2>hello</h2>");
			$("#text").text("<h2>hello</h2>");
			//表单元素：取值
			var val=$("input[type='text']").val();
			console.log(val);
			//赋值
			$("input[type=text]").val("哈哈哈");

4.创建元素和添加元素

1）创建元素

   $(‘元素内容’)
   $(‘this is a paragraph!!!’)

2）添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 元素开头
append(content)	在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content 元素或内容插入 selector 元素内，默认是在尾部
before()	在元素前插入指定的元素或内容:$(selector).before(content)
after()	在元素后插入指定的元素或内容:$(selector).after(content)

<h3>prepend()方法前追加内容</h3>
		<h3>prependTo()方法前追加内容</h3>
		<h3>append()方法后追加内容</h3>
		<h3>appendTo()方法后追加内容</h3>
		<span class="red">男神</span>
		<span class="blue">偶像</span>
		<hr />
		<div class="green">
		    <span>小鲜肉</span>
		</div> 
		<script type="text/javascript">
			//prepend(content) 	在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
			$(".green").prepend("<span>小奶狗</span>");
			//$(content).prependTo(selector)把 content 元素或内容加入 selector 元素开头
			$("<span>小狗</span>").prependTo($(".green"));
			//将存在的元素追加到指定的位置
			$(".green").prepend($(".red"));
			//append(content)在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
			$(".green").append("<span>小狐狸</span>");
			//$(content).appendTo(selector)	把 content元素或内容插入selector 元素内，默认是在尾部
			$("<span>老狐狸</span>").appendTo($(".green"));
			//before() 在元素前插入指定的元素或内容:$(selector).before(content)
			$((".blue")).before("<span class='pink'>女神</span>");
			//after() 在元素后插入指定的元素或内容:$(selector).after(content)
			$((".blue")).after("<span class='yellow'>歌手</span>");
		</script>

5.删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容

		<h3>删除元素</h3>
		<span class="green">jquery<a>删除</a></span>
		<span class="blue">javase</span>
		<span class="green">http协议</span>
		<span class="blue">servlet</span>
		<script type="text/javascript">
			//	remove()删除所选元素或指定的子元素，包括整个标签和内容一起删。
			$(".blue").remove();
			//empty() 清空所选元素的内容
			$(".green").empty();
			
		</script>

6.遍历元素

遍历元素 ​ each() ​ $(selector).each(function(index,element)) :遍历元素 ​ 参数
function 为遍历时的回调函数， ​ index 为遍历元素的序列号，从 0 开始。 ​
element是当前的元素，此时是dom元素。

<h3>遍历元素 each()</h3>
		<span class="green">jquery</span>
		<span class="green">javase</span>
		<span class="green">http协议</span>
		<span class="green">servlet</span>
		<script type="text/javascript">
			//获取全部span标签
			$(".green").each(function(index,element){
				console.log("index:"+index);
				console.log(element);
			});
			
			$(".green").each(function(){
				console.log(this);
				console.log($(this));
			});