【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲-百木园

第一组函数：

1、val：

操作 DOM 数组中的对象的 value 属性

$(选择器).val();//无参数调用形式， 读取数组中第一个 DOM 对象的 value 属性值
$(选择器).val(值);//有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值

2、text：

操作数组中所有 DOM 对象的【文字显示内容属性】

$(选择器).text();//无参数调用，读取数组中所有 DOM 对象的文字显示内容，将得到内容拼接为一个字符串返回
$(选择器).text(值);//有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值

3、attr：

可以对 DOM 对象的 value，文字显示内容之外的其他属性进行操作

$(选择器).attr(“属性名”);//根据”属性名“获取 DOM 数组中第一个 DOM 对象的属性值
$(选择器).attr(“属性名”,“值”);//根据”属性名“对数组中所有 DOM 对象的属性重新赋值

代码练习：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=\"utf-8\">
		<title>函数练习</title>
	
		<style type=\"text/css\">
			div{
				background: greenyellow;
				width: 100px;
				height: 30px;
			}
		</style>
		<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
		<script type=\"text/javascript\">
			$(function(){
				$(\"#btn1\").click(function(){
					//获取dom数组中第一个对象的value属性值
					var value = $(\":text\").val();
					alert(value);
				})
				
				$(\"#btn2\").click(function(){
					//修改所有文本框的value值
					$(\":text\").val(\"修改后的value\");
				})
				
				$(\"#btn3\").click(function(){
					//获取所有span的文本值,连接成一个字符串,再将他输出看看
					alert($(\"span\").text());					
				})
				
				$(\"#btn4\").click(function(){
					//修改所有span的文本值
					$(\"span\").text(\"喜羊羊和灰太狼都上天堂了\");
				})
				
				$(\"#btn5\").click(function(){
					//输出第五个按钮的class属性值
					alert($(\":button:eq(4)\").attr(\"class\"));
				})
				
				$(\"#btn6\").click(function(){
					//修改第五个按钮的class属性值
					$(\":button:eq(4)\").attr(\"class\",\"我被修改了！！！\");
				})
			})
		</script>
	</head>
		<input type=\"text\" name=\"我是第一个文本框的name属性!\" value=\"第一个value\" /><br />
		<input type=\"text\" value=\"第二个value\" /><br />
		<input type=\"text\" value=\"第三个value\" /><br />
		
		<span>你好，我是喜羊羊</span><br />
		<span>你好，我是灰太狼</span><br />
				
		<input type=\"button\" value=\"获取dom数组中第一个对象的value属性值\" id=\"btn1\" />
		<input type=\"button\" value=\"修改所有文本框的value值\" id=\"btn2\" />
		<input type=\"button\" value=\"获取所有span的文本值连接的字符串\" id=\"btn3\" />
		<input type=\"button\" value=\"修改所有span的文本值\" id=\"btn4\" />
		<input type=\"button\" value=\"输出第五个按钮的class属性值\" id=\"btn5\" class=\"我是第五个按钮的class属性值\"/>
		<input type=\"button\" value=\"修改第五个按钮的class属性值\" id=\"btn6\" />
	<body>
	</body>
</html>

第二组函数：

1、remove：

$(选择器).remove();//将数组中所有 DOM 对象及其子对象一并删除

2、empty：

$(选择器).empty();//将数组中所有 DOM 对象的子对象删除

3、append：

为数组中所有 DOM 对象添加子对象

$(选择器).append(\"<div>我动态添加的 div</div>\");

4、html：

设置或返回被选元素的内容（innerHTML）

$(选择器).html();//无参数调用方法，获取 DOM 数组中第一个元素的内容
$(选择器).html(值);//有参数调用，用于设置 DOM 数组中所有元素的内容

5、each：

each 可以对数组，json 或 dom 数组等进行遍历，对每个元素调用一次函数（$.each中的参数）
$ 相当于是 java 的一个类名。each 就是类中的静态方法，静态方法调用，可以使用【类名.方法名称】的方式调用
index: 数组的下标（json中的“key”也可以看作为下标）
element: 数组的对象

$.each( 要遍历的对象, function(index,element) { 处理程序 } );//语法 1
jQuery 对象.each( function( index, element ) { 处理程序 } );//语法 2

练习代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset=\"utf-8\">
		<title>函数练习2</title>
	
		<script type=\"text/javascript\" src=\"js/jquery-3.6.0.js\"></script>
		<script type=\"text/javascript\">
			$(function(){
				$(\"#btn1\").click(function(){
					//使用remove:删除父和子所有的dom对象
					$(\"select\").remove();
				})
				
				$(\"#btn2\").click(function(){
					//使用empty 删除子dom对象
					$(\"select\").empty();
				})
				
				$(\"#btn3\").click(function(){
					//使用append,增加dom对象
					$(\"select\").append(\"<option value=\'爱心超人\'>我是新来的爱心超人</option>\");
				})
				
				$(\"#btn4\").click(function(){
					//使用html()函数,获取数组中第一个dom对象的文本值，包括html代码(innerHTML)
					//alert($(\"select\").text());//不包括hmtl代码(innerText)
					alert($(\"select\").html());
				})
				
				$(\"#btn5\").click(function(){
					//使用html(有参数)，设置dom对象的文本值
					$(\"span\").html(\"<h3>我是新来的GG棒！！！</h3>\");
				})
				
				$(\"#btn6\").click(function(){
					//循环普通数组,非dom数组
					var  arr = [1,2,3];
					$.each(arr,function(i,n){
						alert(\"下标=\"+i + \"元素=\"+ n);
					})
				})
				
				$(\"#btn7\").click(function(){
					//josn对象:
					var json = {\"name\":\"王狗蛋\",\"age\":20};
					$.each(json,function(i,n){
						//循环json
						alert(\"key=\"+i+\",value=\"+n);
					})
				})
				
				$(\"#btn8\").click(function(){
					//dom数组
					var domArray = $(\"option\")
					$.each(domArray,function(i,n){
						alert(\"下标=\"+i+\",option的value=\"+n.value);
					})
				})
				
				$(\"#btn9\").click(function(){
					//each的另一种写法
					$(\":button\").each(function(i,n){
						alert(\"i=\"+i+\"，n=\"+ n.value);
					})
				})
				
			})
		</script>
	</head>
	<body>
		<select>
			<option value=\"\" selected>-- 超人选择 --</option>
			<option value=\"开心超人\">开心超人</option>
			<option value=\"小心超人\">小心超人</option>
			<option value=\"粗心超人\">粗心超人</option>
		</select>
		<br />
		
		<span>我是GG棒！！！</span><br />
		
		<input type=\"button\" value=\"删除select对象\" id=\"btn1\" />
		<input type=\"button\" value=\"删除select对象的子对象\" id=\"btn2\" />
		<input type=\"button\" value=\"添加select对象的子对象\" id=\"btn3\" />
		<input type=\"button\" value=\"获取select对象的文本值\" id=\"btn4\" />
		<input type=\"button\" value=\"修改span文本值\" id=\"btn5\" />
		<input type=\"button\" value=\"遍历普通数组\" id=\"btn6\" />
		<input type=\"button\" value=\"遍历json\" id=\"btn7\" />
		<input type=\"button\" value=\"遍历dom数组(option)\" id=\"btn8\" />
		<input type=\"button\" value=\"遍历dom数组(button)\" id=\"btn9\" />
	</body>
</html>

随笔：

1、hide：

$(选择器).hide();//将数组中所有 DOM 对象隐藏起来

2、show：

$(选择器).show();//将数组中所有 DOM 对象在浏览器中显示出来

来源：https://www.cnblogs.com/Burning-youth/p/16075976.html
本站部分图文来源于网络，如有侵权请联系删除。

【JavaWeb-jQuery】笔记（2）--- jQuery 函数精讲

相关推荐

热门文章