jquery获得文本元素的元素的对象，元素标签名称，属性的多种方式-CSDN博客

本文链接：https://blog.csdn.net/s343174147/article/details/84475865

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <link type = 'text/css' rel = 'stylesheet' href = 'css/user.css'>
  <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
  <script type="text/javascript" >
  // jQuery 获得元素的方式
$(document).ready(function(){
//获得p标签后循环输出标签的值,例如  <p>Hello</p> 获取p标签的Hello
 var arr=$('p');
 for(var i = 0 ;i<arr.length;i++){
	alert( $(arr[i]).text());
 }
 //通过id 获得p标签的值
 alert(' by id p='+$('#pid').text());
 //通过 class 获得p 标签的值
 alert('by class p ='+$('.pclass').text());
 //从集合中通过序号取值
 alert("eq="+$('p').eq(1).text());
 // 获取指定条件一致的值
 alert($("p").filter('.pclass').text());

 // 选取集合中的有顺序的几个
 $('p').slice(0,2).css('color','red');
  //获取与条件表达式一致的元素
 $('p').each(function(){
	 switch(true){
	 case $(this).is('.pclass'):
		
	 $(this).css('color','red');
	 break;
	 case $(this).is('#pid'):
	 $(this).css('color','red');
		 break;
	 }
 }); 
 //获得元素的上一个节点和下一个节点 找到每个段落的后面紧邻的同辈元素中类名为pclass的元素。
//alert( $('p').next('.pclass').text());
//alert($('p').prev('.pclass').text());
//获得父类标签的标签名称
  alert($('p').parent().prop('tagName'));
  alert($('.pclass').children().prop('tagName'));
  //获得标签中属性的值
   alert($('#userName').attr('type'));
});
  </script>
 </head>

 <body>
 请输入用户 <input id ="userName"  type = "text" class = 'userClass'/>
            <input class = "classCheck" type ="button" value = '校验'/>
            <input type = "button" value = '提交'/>
 <div><div/>
 <div>
 <p>第一个p标签的内容</p>
 <p>第二个p标签的内容</p>
 <p id = 'pid'>第三个p标签的内容</p>
 <p>第四个p标签的内容</p>
 <p class= 'pclass'><a>第五个p标签的内容</a></p>
 <p>第六个p标签的内容</p>
 <p>Hello</p>
 <p>Hello Again</p>
 <p class="selected">And Again</p> 
 </div>
 </body>
</html>